/*
 * Every /wiki/* page. Extracted from the old inline <style> in
 * app/Views/wiki/_styles.php when the wiki went public - a guest gets the
 * public chrome, which loads no app CSS, so these rules have to travel as a
 * real stylesheet.
 *
 * Loaded from the views (not template/head) because an SPA AJAX swap skips
 * the head; a <link> inside swapped-in HTML is honoured, a head one is not.
 */
.vh-wrap.wk-wrap {
    --bg:        #0d0d0e;
    --card:      #151516;
    --hover:     #1b1b1d;
    --line:      rgba(99,99,99,0.25);
    --line-soft: rgba(99,99,99,0.12);
    --ink:       #e0e0e0;
    --ink-dim:   rgba(224,224,224,0.8);
    --ink-faint: rgba(224,224,224,0.65);
    --accent:    #ff9900;
    --green:     #1cbb8c;
    --red:       #ff3b30;
    --gold:      #ffd166;
    color: var(--ink);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
}
/* Guest chrome puts the wiki inside <main class="lp-shell content p-0">.
   The Bootstrap `p-0` utility ships with !important and zeroes out the
   `.lp-shell { padding-top: 64px }` rule that normally clears the fixed
   public nav, so the first card sits behind it. Re-add the offset here,
   scoped to the public shell so the logged-in render is untouched. */
.lp-shell .vh-wrap.wk-wrap { padding-top: calc(64px + 1.25rem); }
.lp-shell .wka-side        { top: calc(64px + 14px); }

/* ---- Wiki nav (used on every wiki page) ----------------------------- */
.wk-nav {
    background: var(--card);
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    padding: 0.65rem 0.85rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}
.wk-nav-brand {
    font-size: 0.74rem; font-weight: 700; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.16em;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding-right: 0.85rem; border-right: 1px solid var(--line-soft);
}
.wk-nav-brand i { color: var(--accent); font-size: 0.8rem; }
.wk-nav-brand a { color: inherit; text-decoration: none; cursor: pointer; }
.wk-nav-brand a:hover { color: var(--ink); }
.wk-search {
    position: relative; max-width: 480px; width: 100%;
}
.wk-search input {
    width: 100%; background: var(--bg); border: 1px solid var(--line-soft);
    border-radius: 0; padding: 0.45rem 0.75rem 0.45rem 2rem;
    color: var(--ink); font-size: 0.82rem; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wk-search input:focus {
    border-color: rgba(255,153,0,0.45);
    box-shadow: 0 0 0 2px rgba(255,153,0,0.08);
}
.wk-search input::placeholder { color: var(--ink-faint); }
.wk-search i {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-faint); font-size: 0.78rem;
}
.wk-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--card); border: 1px solid var(--line-soft);
    border-radius: 0; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    max-height: 360px; overflow-y: auto; z-index: 30; display: none;
}
.wk-search-results.is-open { display: block; }
.wk-search-row {
    padding: 0.55rem 0.75rem;
    display: flex; align-items: flex-start; gap: 0.55rem;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer; color: var(--ink); font-size: 0.82rem;
}
.wk-search-row:last-child { border-bottom: 0; }
.wk-search-row:hover { background: var(--hover); }
.wk-search-row .ico {
    width: 28px; height: 28px; border-radius: 0;
    background: var(--bg); border: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 0.78rem; flex-shrink: 0;
}
.wk-search-row .ti { font-weight: 600; }
.wk-search-row .su { font-size: 0.74rem; color: var(--ink-dim); margin-top: 1px; }
.wk-search-row .cat {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 1px 6px; border-radius: 999px;
    margin-top: 4px; display: inline-block;
}
.wk-search-empty { padding: 1rem; text-align: center; color: var(--ink-faint); font-size: 0.78rem; }

.wk-nav-tabs {
    display: inline-flex; gap: 2px; align-items: center;
}
.wk-nav-tabs a {
    color: var(--ink-dim); font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.75rem; border-radius: 0; cursor: pointer;
    text-decoration: none; transition: background 0.12s, color 0.12s;
}
.wk-nav-tabs a:hover { background: var(--hover); color: var(--ink); }
.wk-nav-tabs a.is-active {
    background: rgba(255,153,0,0.1);
    color: var(--accent);
}
@media (max-width: 720px) {
    .wk-nav { grid-template-columns: 1fr; }
    .wk-nav-tabs { display: none; }
    .wk-nav-brand { border-right: 0; padding-right: 0; }
}

/* ---- Breadcrumb ----------------------------------------------------- */
.wk-crumbs {
    font-size: 0.7rem; color: var(--ink-faint);
    display: flex; align-items: center; gap: 0.4rem;
}
.wk-crumbs a { color: var(--ink-dim); text-decoration: none; cursor: pointer; }
.wk-crumbs a:hover { color: var(--accent); }
.wk-crumbs .sep { opacity: 0.4; }
.wk-crumbs .cur { color: var(--ink); }

/* ---- Link resets ----------------------------------------------------
   The cards, tiles and rows below used to be <div onclick="loadPage(...)">,
   which no crawler can follow and no visitor can middle-click. They are real
   anchors now; these rules keep them looking exactly as they did. */
a.wkc-card,
a.wk-pinned-tile,
a.wk-recent-row,
a.wkcat-row,
a.wka-side-row,
a.wk-search-row {
    color: inherit;
    text-decoration: none;
}
a.wk-search-row { display: flex; }