/* Dreamfire — Wiki styles (uses existing variables) */
/* Assumes :root from your site/auth:
/  --accent, --accent-2, --ink-strong, --ink, --ink-dim, --panel, --panel-border, --panel-shadow, --radius-lg, --radius-md
*/

.wiki-page { padding: clamp(18px, 3vw, 28px) 0; }
.wiki-wrap  { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Main glass panel */
.wiki-panel{
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-shadow);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: clamp(16px, 2.2vw, 22px);
}

/* Breadcrumbs */
.wiki-breadcrumbs{ color: var(--ink-dim); font-size: .9rem; margin-bottom: 6px; }
.wiki-breadcrumbs a{ color: var(--ink); text-decoration: none; }
.wiki-breadcrumbs a:hover{ color: var(--accent); }

/* Header */
.wiki-header{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.wiki-title{
    margin: 0;
    color: var(--ink-strong);
    letter-spacing: .06em;
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 32px);
}

/* Filter input – same focus glow as auth inputs */
.wiki-input{
    height: 44px; min-width: 240px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.22);
    color: var(--ink-strong);
    border-radius: var(--radius-md);
    padding: .65rem .9rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wiki-input::placeholder{ color: rgba(255,255,255,.56); }
.wiki-input:focus{
    outline: none;
    background: rgba(0,0,0,.52);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 0 0 .18rem rgba(211,81,0,.28);
}

/* List */
.wiki-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.wiki-item{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    transition: transform .08s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.wiki-item:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
}

/* Text */
.wiki-meta{ display: grid; gap: 4px; }
.wiki-name{
    color: var(--ink-strong);
    font-weight: 800;
    letter-spacing: .06em;
}
.wiki-path{ color: var(--ink-dim); font-size: .85rem; word-break: break-all; }

/* CTA button — same gradient & glow as auth buttons */
.wiki-cta{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: .58rem .95rem;
    border-radius: 9999px;
    border: 0;
    font-weight: 800;
    letter-spacing: .06em;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 65%, #cf4c00 100%);
    box-shadow: 0 14px 34px rgba(211,81,0,.30);
    transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.wiki-cta:hover{ filter: brightness(1.06); box-shadow: 0 16px 36px rgba(211,81,0,.36); }
.wiki-cta:active{ transform: translateY(1px); }
.wiki-cta:focus{ outline: none; box-shadow: 0 0 0 .18rem rgba(211,81,0,.28), 0 16px 36px rgba(211,81,0,.36); }

/* Empty state */
.wiki-empty{
    text-align: center;
    color: var(--ink-dim);
    padding: 26px 12px;
    border: 1px dashed var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(0,0,0,.18);
}

/* Mobile */
@media (max-width: 560px){
    .wiki-header{ grid-template-columns: 1fr; }
    .wiki-input{ width: 100%; }
    .wiki-item{ grid-template-columns: 1fr; }
}