/* ============================================================
   FPSF Members Portal — Specifications Viewer (list + detail)
   Reuses shared design tokens from portal.css (:root) and the
   existing .specs-grid / .spec-card / .spec-id / .spec-status base
   classes — this file only adds what's new: lifecycle-status pill
   colors, the detail-page layout, and the upgrade-prompt pattern.
   ============================================================ */

/* ─── Lifecycle status pills (spec-level, not the old membership-tier
       badges .spec-draft/.spec-member/.spec-inst) ─────────────── */

.status-draft      { background: var(--gray-100);  color: var(--gray-600); }
.status-commenting { background: var(--teal-light); color: var(--teal); }
.status-reviewing  { background: var(--gold-light); color: var(--gold); }
.status-stable     { background: var(--green-light); color: var(--green); }
.status-withdrawn  { background: var(--gray-200);  color: var(--gray-700); }

/* ─── Family filter row (list page) ─────────────────────────── */

.specs-family-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.specs-family-chip {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
}

.specs-family-chip:hover { border-color: var(--teal); }

.specs-family-chip.selected {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.specs-empty-note {
    font-size: 0.88rem;
    color: var(--gray-500);
    padding: 24px 0;
}

/* ─── Detail page: header ────────────────────────────────────── */

.spec-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--gray-600);
    text-decoration: none;
    margin-bottom: 16px;
}

.spec-detail-back:hover { color: var(--teal); }
.spec-detail-back svg { width: 14px; height: 14px; }

.spec-detail-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.spec-detail-head h1 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--blue);
}

.spec-detail-meta {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 24px;
}

/* ─── Detail page: three-column layout ──────────────────────── */

/* This page is long-form reading, not a dashboard of cards — the
   sitewide --content-max (1100px) was built for the latter and left the
   actual text column under 400px wide even at full width, once the doc
   nav, TOC, gaps and the body's own padding were all subtracted. Give
   this one page more room; doesn't affect any other page's layout. */
.spec-detail-page .portal-content {
    max-width: 1400px;
}

.spec-detail-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 220px;
    gap: 32px;
    align-items: start;
}

/* Single-document spec — no nav column to switch between, so it's
   dropped (see spec-detail.js's renderNav) and the reading column
   takes the width it would have used instead. */
.spec-detail-layout.no-nav {
    grid-template-columns: minmax(0, 1fr) 220px;
}

.spec-doc-nav {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* .spec-doc-nav's own display:flex above otherwise beats the browser's
   default [hidden] handling (an author rule always wins over the UA
   default, regardless of selector order) — without this, a "hidden"
   nav still renders as an empty grid item and throws off the 2-column
   layout used when there's no nav to show (see spec-detail.js). */
.spec-doc-nav[hidden] { display: none; }

.spec-doc-nav-item {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--gray-600);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}

.spec-doc-nav-item:hover { background: var(--gray-50); color: var(--blue); }

.spec-doc-nav-item.active {
    background: var(--teal-light);
    color: var(--teal);
    font-weight: 600;
}

.spec-doc-nav-item .lock-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-400);
    margin-left: 6px;
    vertical-align: middle;
}

.spec-doc-body {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 48px 64px;
}

/* Typography for rendered spec markdown — clean, readable prose. Prose
   elements get a comfortable measure (~75 characters/line) instead of
   stretching edge-to-edge of the now-wider card — code blocks and tables
   are deliberately left unconstrained below, they benefit from the extra
   room rather than fighting it. */
.spec-doc-body h1 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 500; color: var(--blue); margin: 0 0 18px; max-width: 760px; }
.spec-doc-body h2 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; color: var(--blue); margin: 36px 0 14px; scroll-margin-top: 20px; max-width: 760px; }
.spec-doc-body h3 { font-size: 1.05rem; font-weight: 600; color: var(--blue); margin: 26px 0 10px; scroll-margin-top: 20px; max-width: 760px; }
.spec-doc-body p  { font-size: 1rem; color: var(--gray-800); line-height: 1.75; margin-bottom: 16px; max-width: 760px; }
.spec-doc-body ul, .spec-doc-body ol { margin: 0 0 16px 22px; font-size: 1rem; color: var(--gray-800); line-height: 1.75; max-width: 760px; }
.spec-doc-body li { margin-bottom: 5px; }
.spec-doc-body blockquote { border-left: 3px solid var(--teal-mid); padding: 4px 16px; color: var(--gray-600); font-size: 0.92rem; margin: 0 0 16px; max-width: 760px; }
.spec-doc-body code { font-family: 'IBM Plex Mono', monospace; font-size: 0.85em; background: var(--gray-100); padding: 2px 5px; border-radius: 4px; }
.spec-doc-body pre { background: var(--gray-900); color: var(--gray-100); padding: 16px; border-radius: var(--radius); overflow-x: auto; margin-bottom: 16px; }
.spec-doc-body pre code { background: none; padding: 0; color: inherit; }
.spec-doc-body table { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 0.88rem; }
.spec-doc-body th, .spec-doc-body td { border: 1px solid var(--gray-200); padding: 8px 12px; text-align: left; }
.spec-doc-body th { background: var(--gray-50); font-weight: 600; color: var(--blue); }
.spec-doc-body hr { border: none; border-top: 1px solid var(--gray-200); margin: 24px 0; }
.spec-doc-body a { color: var(--teal); }

.spec-doc-toc {
    position: sticky;
    top: 20px;
    font-size: 0.82rem;
}

.spec-doc-toc-title {
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    margin-bottom: 10px;
}

.spec-doc-toc a {
    display: block;
    color: var(--gray-600);
    text-decoration: none;
    padding: 4px 0;
    border-left: 2px solid transparent;
    padding-left: 10px;
}

.spec-doc-toc a:hover { color: var(--teal); }
.spec-doc-toc a.toc-h3 { padding-left: 20px; font-size: 0.8rem; color: var(--gray-500); }

/* ─── Preview + locked states ────────────────────────────────── */

.spec-preview-fade {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    margin-bottom: 8px;
}

.spec-preview-fade::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--white));
}

.spec-upgrade-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.spec-upgrade-card p {
    font-size: 0.88rem;
    color: var(--gray-700);
    margin: 0;
}

.spec-doc-body .spec-upgrade-card + .spec-upgrade-card { margin-top: 12px; }

/* ─── Admin: internal staff pages have no member sidebar ────── */

.portal-main.no-sidebar { margin-left: 0; }

/* ─── Admin: spec ingestion flags (read-only table) ─────────── */

.admin-flags-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.85rem;
}

.admin-flags-table th, .admin-flags-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
}

.admin-flags-table th {
    background: var(--gray-50);
    color: var(--gray-600);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-flags-table td.flag-path {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--blue);
    white-space: nowrap;
}

.admin-flags-table tr:last-child td { border-bottom: none; }

.admin-access-denied {
    background: var(--red-light);
    color: var(--red);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 0.88rem;
}

/* ─── Responsive ─────────────────────────────────────────────── */

/* Reading a spec shouldn't mean a full labeled nav menu sitting next to
   the text the whole time. On this page (only, every width down to the
   existing mobile breakpoint) the sitewide sidebar collapses to a narrow
   icon-only rail — logo mark, nav icons, tier dot, nothing else — instead
   of either the full 248px sidebar or hiding it away entirely. Labels/
   badges/section headers all share the .nav-text/.nav-badge/.nav-label
   classes already used sitewide, so this is a pure width/visibility
   change, not a markup fork.
   .sidebar-expanded (toggled by #sidebarRailToggle in spec-detail.js)
   opts back into the full sidebar for the current view only — nothing
   persisted, every fresh open starts collapsed again. :not() here means
   the expanded state is just the rail rules not matching, not a second
   set of override rules to keep in sync. */
/* min-width guard: below this, portal.css's own mobile breakpoint takes
   the sidebar fully off-canvas — when a mobile user deliberately opens
   it via the hamburger, they should see the familiar full labeled menu,
   not a rail. The rail is for "visible the whole time while reading on
   a screen with room for it," which mobile isn't. */
@media (min-width: 769px) {
    .spec-detail-page:not(.sidebar-expanded) .sidebar { width: var(--sidebar-rail-width); }
    .spec-detail-page:not(.sidebar-expanded) .portal-main { margin-left: var(--sidebar-rail-width); }

    .spec-detail-page:not(.sidebar-expanded) .nav-text,
    .spec-detail-page:not(.sidebar-expanded) .nav-badge,
    .spec-detail-page:not(.sidebar-expanded) .nav-label,
    .spec-detail-page:not(.sidebar-expanded) .sidebar-tagline { display: none; }

    .spec-detail-page:not(.sidebar-expanded) .sidebar-header { padding: 20px 0 16px; }
    .spec-detail-page:not(.sidebar-expanded) .sidebar-logo { justify-content: center; margin-bottom: 0; }

    .spec-detail-page:not(.sidebar-expanded) .nav-item {
        justify-content: center;
        padding: 10px;
        margin: 0 8px;
    }

    .spec-detail-page:not(.sidebar-expanded) .nav-item svg { flex-shrink: 0; }

    .spec-detail-page:not(.sidebar-expanded) .tier-badge { justify-content: center; padding: 12px 0; }
    .spec-detail-page:not(.sidebar-expanded) .logout-btn { padding: 10px 0; }

    /* Toggle button — a small tab riding the sidebar's right edge,
       chevron flips direction to hint which way it'll go next. Hidden
       below 769px on purpose: mobile already has the hamburger for this. */
    .sidebar-rail-toggle {
        position: fixed;
        top: 84px;
        left: var(--sidebar-rail-width);
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--teal);
        border: 2px solid var(--white);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 120;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        transition: left 0.2s ease, background 0.15s ease;
    }

    /* A solid brand color + white ring guarantees contrast whether it's
       sitting over the dark sidebar or the light page — a light fill
       (the original design) all but disappeared against both. */
    .sidebar-rail-toggle svg { width: 14px; height: 14px; stroke-width: 2.5; transition: transform 0.2s ease; }
    .sidebar-rail-toggle:hover { filter: brightness(0.9); }

    .spec-detail-page.sidebar-expanded .sidebar-rail-toggle { left: var(--sidebar-width); }
    .spec-detail-page.sidebar-expanded .sidebar-rail-toggle svg { transform: rotate(180deg); }
}

@media (max-width: 768px) {
    .sidebar-rail-toggle { display: none; }
}

@media (max-width: 1200px) {
    .spec-detail-layout {
        grid-template-columns: 1fr;
    }

    .spec-doc-nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        border-bottom: 1px solid var(--gray-200);
        padding-bottom: 8px;
    }

    .spec-doc-toc { display: none; }

    .spec-doc-body { padding: 24px 20px; }
}