/*
 * tai-wiki design system
 *
 * Tokens, layout, and page chrome. v2 ships the wiki in a single
 * TradeInsight dark theme — no light/dark switching.
 *
 * Values in :root below are PORTED from
 * wiki/static/wiki/css/tokens.css (the TradeInsight design-system
 * export) into wiki-local --wiki-* custom properties. tokens.css is
 * not @import'd or linked from base.html — it stays in the repo as a
 * reference asset. The wiki is intentionally simpler than the full
 * trading-application surface tokens.css is built for, so this file
 * picks a narrow palette rather than wiring up the whole token set.
 *
 * Each --wiki-* below carries a side-comment pointing at the
 * tokens.css variable its value came from, so a future reader can
 * map the wiki's palette back to the design-system source.
 *
 * Companion file: components.css — shared content-component
 * surface (banners, cards, slides, doc/pdf wrappers, contact
 * cards/HQ). Loaded by base.html after this file so its rules can
 * reference the --wiki-* tokens defined here.
 *
 * Reference: tai-wiki/docs/v2-implementation-spec.md §6 Task 1
 */

/* ---------------------------------------------------------------- *
 * Design tokens — ported from tokens.css.
 * ---------------------------------------------------------------- */
:root {
    /* ---- Surfaces (dark) ----
     * Values realigned with the current tai-ui design system snapshot in
     * wiki/static/wiki/css/ui/ (WIKI-51). The earlier --wiki-bg / -bg-deep /
     * -surface values were ported from an older tai-ui export (tokens.css);
     * tai-ui has since shifted the page + card surfaces warmer and darker
     * (cool blue-gray → near-black warm neutral). The wiki tracks the new
     * values so it visually matches the rest of the org's dark-theme apps.
     */
    --wiki-bg:           #101010;  /* tai-ui ui/layout.css: --color-bg (was #1C1C1E) */
    --wiki-bg-deep:      #1b1b1b;  /* tai-ui ui/layout.css: --color-bg-deep (was #181D25) */
    --wiki-surface:      #2E2E39;  /* tai-ui ui/layout.css: --color-card-bg (was #2D3642; alpha dropped) */
    --wiki-surface-soft: #262D38;  /* tokens.css: --color-gray-850 — placeholder / alt */

    /* ---- Foreground ---- */
    --wiki-fg:        #FDFDFD;  /* tokens.css: --color-primary / --color-gray-25 — body */
    --wiki-fg-strong: #FFFFFF;  /* tokens.css: --color-white — page titles, names */
    --wiki-fg-soft:   #B9BDC4;  /* tokens.css: --color-gray-300 — softer body */
    --wiki-fg-muted:  #989EA7;  /* tokens.css: --color-secondary / --color-gray-400 — labels */
    --wiki-fg-dim:    #78808C;  /* tokens.css: --color-gray-500 — placeholders, captions */

    /* ---- Borders / dividers ---- */
    --wiki-border: #596371;  /* tokens.css: --color-popover-border — only divider value the
                                wiki uses. tokens.css does carry darker variants (--color-gray-800/850)
                                but in dark mode they sit at-or-below --wiki-surface so they read as
                                invisible or recessed shadows; one consistent value reads cleaner. */

    /* ---- Accent (brand-tai — NVIDIA-partner lime) ----
     * WIKI-53: switched from the Shannon brand green scale (#20C099 / #179677 /
     * #0D3229) to the brand-tai accent from the current dark design system. The
     * design system declares brand-tai as a single token (no -25→-950 ramp) with
     * one companion -dim variant; the muted bg is derived to match the Shannon
     * -850 / -500 chroma+lightness recipe applied to brand-tai's hue.
     */
    --wiki-accent:       #76B900;  /* tokens.css: --color-brand-tai */
    --wiki-accent-hover: #486E05;  /* tokens.css: --color-brand-tai-dim */
    --wiki-accent-muted: #1F310D;  /* derived: HSL 82°, 59%, 12% (same recipe as the
                                      Shannon -850 / -500, applied to brand-tai's hue) */
    --wiki-accent-fg:    #FFFFFF;  /* tokens.css: --color-brand-foreground — text on accent */

    /* ---- Interactive (dark-surface button hover) ----
     * Reserved for buttons that sit on the wiki's dark chrome and
     * need a near-imperceptible "lift" on hover — the design-system
     * pattern from tokens.css's --color-btn-bg / btn-bg-hover. The
     * home button doesn't use this (it's a light card, see below).
     */
    --wiki-hover-bg: #1F1F1F;  /* tokens.css: --color-btn-bg-hover */

    /* ---- Semantic ---- */
    --wiki-danger:  #FB4747;  /* tokens.css: --color-error-500 */
    --wiki-warning: #FCC749;  /* tokens.css: --color-warning-500 */
    --wiki-success: #16C784;  /* tokens.css: --color-success-500 — unused today; kept for parity */

    /* ---- Code / inline mono ---- */
    --wiki-code-bg: #181D25;  /* wiki-only: slight recess from --wiki-bg for <code>/<pre> */
    --wiki-code-fg: #B9BDC4;  /* tokens.css: --color-gray-300 — softer than body */

    /* ---- Typography ----
     * Plus Jakarta Sans + Space Mono, ported from tokens.css's
     * --font-sans / --font-mono. Loaded via Google Fonts in
     * base.html (weights 400/500/600/700 for sans; 400 for mono —
     * Space Mono only ships 400 and 700, and only 400 is used by
     * the wiki today via <code>/<pre>).
     */
    --wiki-font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wiki-font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ---- Type scale (WIKI-54) ----
     * Inspired by the dark design system's text + display sizes
     * (FOUNDATIONS 02 in wiki/static/wiki/css/Design System (Dark) -
     * standalone.html). The wiki shares the design system's font
     * faces (Plus Jakarta Sans + Space Mono) and uses these tokens
     * as a shared vocabulary for the common sizes.
     *
     * Off-scale literals remain in place where they're a deliberate
     * wiki choice (depth-3+ nav link at 0.95rem, page title at
     * 2.5rem, h2 at 2rem, auth-card title at 1.75rem, small label
     * at 0.6875rem, banner / tagline / menu item at 0.9375rem,
     * slide caption at 0.8125rem). Internal tool, not slavish copy —
     * tokens for the common case, judgment for the rest.
     */
    --wiki-text-xs:    0.75rem;   /* 12px */
    --wiki-text-sm:    0.875rem;  /* 14px */
    --wiki-text-md:    1rem;      /* 16px */
    --wiki-text-lg:    1.125rem;  /* 18px */
    --wiki-text-xl:    1.25rem;   /* 20px */
    --wiki-display-xs: 1.5rem;    /* 24px */

    /* ---- Spacing ----
     * wiki-only scale; tokens.css defines only --grid-padding and
     * --grid-gap, not a granular spacing scale.
     */
    --wiki-space-1:  0.25rem;
    --wiki-space-2:  0.5rem;
    --wiki-space-3:  0.75rem;
    --wiki-space-4:  1rem;
    --wiki-space-5:  1.25rem;
    --wiki-space-6:  1.5rem;
    --wiki-space-8:  2rem;
    --wiki-space-12: 3rem;
    --wiki-space-16: 4rem;

    /* ---- Layout (wiki-only) ---- */
    /* WIKI-55: widened from 280px so top-level nav titles (which are
     * rendered uppercase with letter-spacing) fit on one line at the
     * lengths authors generate in Drive. The main column doesn't lose
     * anything functional — .doc-content caps at --wiki-content-max-width
     * regardless. */
    --wiki-sidebar-width:     320px;
    /* WIKI-45: post-cap-removal, this token is consumed only by
     * .doc-content (see components.css). It's the doc-prose reading
     * column width — not a wiki-chrome cap. Topbar / footer / PDF /
     * slides / cards all run edge-to-edge inside .wiki-main. */
    --wiki-content-max-width: 900px;

    /* ---- Radii ---- */
    --wiki-radius-sm: 4px;
    --wiki-radius-md: 6px;
    --wiki-radius-lg: 8px;

    /* ---- Shadows (more pronounced than light-theme baseline to read on dark bg) ---- */
    --wiki-shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4);
    --wiki-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- *
 * Reset
 * ---------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--wiki-font-primary);
    color: var(--wiki-fg);
    line-height: 1.6;
    background: var(--wiki-bg);
}

/* ---------------------------------------------------------------- *
 * Layout: container + sidebar + main
 * ---------------------------------------------------------------- */
.wiki-container { display: flex; min-height: 100vh; }

.wiki-sidebar {
    width: var(--wiki-sidebar-width);
    background: var(--wiki-surface);
    border-right: 1px solid var(--wiki-border);
    padding: var(--wiki-space-6);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

/*
 * Sidebar "Wiki Home" button — renders the TradeInsight wiki logo
 * (wiki/static/wiki/img/logo.svg) on a light "card" surface so the
 * logo's native dark wordmark + green bars read against the dark
 * sidebar. The card extends horizontally beyond the sidebar's
 * padding via negative margin so the logo gets the full sidebar
 * width to work with.
 *
 * The light-card hover uses a subtle gray shift; tokens.css's
 * --wiki-hover-bg (#1F1F1F) is intentionally NOT used here because
 * a light → dark inversion on hover reads wrong. --wiki-hover-bg
 * is reserved for buttons that live on the dark chrome.
 */
.wiki-home-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 calc(-1 * var(--wiki-space-3)) var(--wiki-space-6);
    padding: var(--wiki-space-3) var(--wiki-space-4);
    text-decoration: none;
    border-radius: var(--wiki-radius-md);
    transition: background 0.15s ease;
}

.wiki-home-button:hover {
    background: var(--wiki-fg-dim);  /* tokens.css [data-palette=light]: --color-btn-bg-hover — slight gray lift */
    outline: none;
}

/* Keyboard-only focus ring: `:focus-visible` skips mouse clicks, so the
 * logo doesn't keep a ring after being clicked, but Tab-key users still
 * get a visible indicator. */
.wiki-home-button:focus-visible {
    /* background: #F3F4F6; */
    outline: 2px solid var(--wiki-accent);
    outline-offset: 2px;
}

.wiki-logo {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * `.wiki-main` fills the viewport remainder beside the fixed sidebar
 * (flex: 1). Direct children (topbar, content, footer) intentionally
 * have no max-width — chrome, PDF iframes, slide rows, GIFs, and
 * contact grids run edge-to-edge inside the .wiki-main padding so
 * wide monitors aren't dominated by empty gutters (WIKI-45). Prose
 * clamps itself in `.doc-content` (see components.css) at the
 * doc-prose reading-column width — the Notion / Google Docs pattern.
 */
.wiki-main {
    flex: 1;
    margin-left: var(--wiki-sidebar-width);
    padding: var(--wiki-space-8);
}

/* ---------------------------------------------------------------- *
 * Sidebar nav
 * ---------------------------------------------------------------- */
.nav-section { margin-bottom: var(--wiki-space-6); }

.nav-section-title {
    font-size: var(--wiki-text-xl);
    font-weight: 600;
    color: var(--wiki-fg-dim);
    text-transform: uppercase;
    /* WIKI-55: tightened from 0.05em — uppercase tracking adds ~1px per
     * character, so a small reduction frees enough width to keep most
     * Drive-authored titles on a single line without losing the
     * "section header" feel. text-wrap: balance catches any title that
     * still wraps and breaks it across lines evenly instead of leaving
     * a one-word orphan. */
    letter-spacing: 0.02em;
    text-wrap: balance;
    margin-bottom: var(--wiki-space-3);
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
    display: block;
}
.nav-section-title:hover { color: var(--wiki-accent); }
.nav-section-title.clickable { color: var(--wiki-fg-muted); }
.nav-section-title.clickable:hover { color: var(--wiki-accent); }

/*
 * WIKI-17 sub-tasks 3 + 5: <summary> styling for the collapsible
 * nav sections. The title sits next to the disclosure marker
 * (a custom chevron rendered via ::before, absolutely positioned so
 * it doesn't affect the title's layout). Chevron rotates 90° when
 * the <details> ancestor is open.
 */
.nav-section-summary,
.nav-subsection-summary {
    cursor: pointer;
    margin-bottom: var(--wiki-space-3);
    list-style: none;
    position: relative;
    padding-left: var(--wiki-space-4);
}
.nav-section-summary::-webkit-details-marker,
.nav-subsection-summary::-webkit-details-marker {
    display: none;
}
.nav-section-summary::before,
.nav-subsection-summary::before {
    content: '\25B6'; /* ▶ — bigger, bolder right-pointing triangle */
    position: absolute;
    left: 0;
    top: 0.25em;
    color: var(--wiki-fg-muted);
    font-size: 0.85em;
    transition: transform 0.15s ease, color 0.15s ease;
    transform: rotate(0deg);
}
details[open] > .nav-section-summary::before,
details[open] > .nav-subsection-summary::before {
    transform: rotate(90deg);
}
.nav-section-summary > .nav-section-title,
.nav-subsection-summary > .nav-link {
    display: inline-block;
    margin-bottom: 0;
}

.nav-links { list-style: none; }

.nav-link {
    display: block;
    padding: var(--wiki-space-2) var(--wiki-space-3);
    color: var(--wiki-fg-muted);
    text-decoration: none;
    /* WIKI-55: balance any wrap on long Drive-authored folder names so the
     * break lands evenly across lines instead of leaving an orphan word. */
    text-wrap: balance;
    border-radius: var(--wiki-radius-md);
    font-size: var(--wiki-text-md);
    margin-bottom: var(--wiki-space-1);
    transition: all 0.2s ease;
}
.nav-link:hover { background: var(--wiki-accent-muted); color: var(--wiki-accent); }
.nav-link.active {
    background: var(--wiki-accent);
    color: var(--wiki-accent-fg);
    font-weight: 500;
    border-left: 3px solid var(--wiki-accent);
    padding-left: calc(var(--wiki-space-3) - 3px);
}

/*
 * Scaffold-folder labels (WIKI-52): folders containing only sub-folders
 * render as <span> inside the <summary> instead of <a>, since their URL
 * intentionally 404s. Suppress the link-style hover affordances so the
 * label doesn't read as clickable-for-navigation; the <summary> still
 * toggles its <details> via the chevron. The ancestor-accent rule below
 * still tints these spans when a descendant is active (selectors target
 * .nav-section-title / .nav-link regardless of tag).
 */
.nav-section-summary > span.nav-section-title:hover {
    color: var(--wiki-fg-dim);
}
.nav-subsection-summary > span.nav-link:hover {
    background: transparent;
    color: var(--wiki-fg-muted);
}

/*
 * Indented child lists (matches Drive folder depth). The border-left
 * is a subtle indent guide so the tree shape reads at a glance —
 * without it, deep nesting looks like a flat list with extra
 * whitespace.
 */
.nav-links .nav-links {
    padding-left: var(--wiki-space-3);
    margin-top: var(--wiki-space-1);
    border-left: 1px solid var(--wiki-border);
    margin-left: var(--wiki-space-2);
}

/*
 * Depth-3+ nav links read smaller than depth-1 so the user can tell at
 * a glance which level they're at. The double-descendant selector
 * targets links at least two .nav-links deep.
 *
 * WIKI-56: color override removed. Previously this rule set
 * ``color: var(--wiki-fg-dim)`` at specificity (0,3,0), which beat
 * ``.nav-link:hover`` (0,2,0) and ``.nav-link.active`` (0,2,0) — so
 * hover at depth-3+ kept the dim text instead of picking up the accent
 * color (muddy: dark text on the accent-muted background) and active
 * kept the dim text on the accent background. Dropping the override
 * lets the base color (via .nav-link) cascade and the :hover / .active
 * rules apply uniformly across nesting depths. Visual hierarchy is
 * preserved via the smaller font-size alone.
 */
.nav-links .nav-links .nav-link {
    font-size: 0.95rem;
}

/*
 * Ancestor accent — every <details> whose subtree contains the
 * active link picks up an accent tint on its title + chevron, so
 * "you-are-here" is visible without scrolling even when several
 * sections are open at once. :has() is supported by Chrome 105+ /
 * Safari 15.4+ / Firefox 121+.
 *
 * The ``:not(.active)`` on the link selector is load-bearing: a sub-
 * folder's own link sits inside its summary, and ``:has(.nav-link.active)``
 * matches that summary's parent when the user is on that very folder's
 * page. Without the guard, the active link's text gets re-colored to
 * --wiki-accent (green) — which is also the active background color —
 * so the text reads as invisible (green-on-green). The exclusion lets
 * .nav-link.active's own ``color: var(--wiki-accent-fg)`` (white) win
 * for the active link itself, while still tinting any genuine ancestor
 * summaries.
 */
.nav-section:has(.nav-link.active) > .nav-section-summary > .nav-section-title:not(.active),
.nav-subsection:has(.nav-link.active) > .nav-subsection-summary > .nav-link:not(.active) {
    color: var(--wiki-accent);
}
.nav-section:has(.nav-link.active) > .nav-section-summary::before,
.nav-subsection:has(.nav-link.active) > .nav-subsection-summary::before {
    color: var(--wiki-accent);
}

/*
 * scroll-margin so the active link doesn't hug the top edge when
 * something scrolls it into view (e.g. htmx swaps, browser hash-link
 * jumps).
 */
.nav-link.active { scroll-margin-top: var(--wiki-space-6); }

/* ---------------------------------------------------------------- *
 * Topbar (page title + breadcrumbs + Drive deep-link)
 * ---------------------------------------------------------------- */
.wiki-topbar {
    margin-bottom: var(--wiki-space-8);
    /* Containing block for the absolutely-positioned
     * .wiki-user dropdown that anchors top-right. */
    position: relative;
}

.wiki-breadcrumbs {
    font-size: var(--wiki-text-sm);
    color: var(--wiki-fg-dim);
    margin-bottom: var(--wiki-space-3);
}
.wiki-breadcrumbs a {
    color: var(--wiki-fg-muted);
    text-decoration: none;
}
.wiki-breadcrumbs a:hover { color: var(--wiki-accent); }
.wiki-breadcrumbs-sep { margin: 0 var(--wiki-space-2); color: var(--wiki-fg-muted); }
.wiki-breadcrumbs-current { color: var(--wiki-fg); font-weight: 500; }

.wiki-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wiki-fg-strong);
    margin-bottom: var(--wiki-space-2);
    border-bottom: 3px solid var(--wiki-accent);
    padding-bottom: var(--wiki-space-4);
}

.wiki-drive-link {
    display: inline-block;
    margin-top: var(--wiki-space-3);
    color: var(--wiki-accent);
    font-size: var(--wiki-text-sm);
    text-decoration: none;
    font-weight: 500;
}
.wiki-drive-link:hover { text-decoration: underline; }

/* WIKI-22: "Last modified X ago" sits inline with .wiki-drive-link
 * (both inline-block with the same margin-top so they share a row).
 * When both render, an adjacent-sibling pseudo-element drops a small
 * separator between them; when only one renders, no orphan glyph. */
.wiki-last-modified {
    display: inline-block;
    margin-top: var(--wiki-space-3);
    color: var(--wiki-fg-muted);
    font-size: var(--wiki-text-sm);
}
.wiki-last-modified time {
    color: var(--wiki-fg);
}
/* Separator between the "Last modified" label and the timestamp. Same
 * glyph + styling as the inter-element separator below so the topbar
 * meta strip reads as a single "label · value · link" rhythm. */
.wiki-last-modified time::before {
    content: '·';
    margin: 0 var(--wiki-space-2);
    color: var(--wiki-fg-dim);
}
.wiki-last-modified + .wiki-drive-link::before,
.wiki-drive-link + .wiki-drive-link::before {
    content: '·';
    margin: 0 var(--wiki-space-2);
    color: var(--wiki-fg-dim);
}

/* WIKI-23 — spinner shown while a "Download PDF" click is fetching
 * bytes. Drive's first cold export takes 1-3s for a Doc and longer
 * for a Slides deck; without this feedback, the user clicks and
 * nothing visible happens for several seconds. pdf_download.js
 * toggles `.is-loading` on the link during the fetch. The link
 * stays the same width (text is just hidden, not removed) so the
 * topbar doesn't reflow. */
.wiki-download-pdf.is-loading {
    pointer-events: none;
    color: transparent;
    position: relative;
}
.wiki-download-pdf.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid var(--wiki-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: wiki-spin 0.7s linear infinite;
}
@keyframes wiki-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- *
 * Body typography (used by rendered Doc HTML inside .wiki-content)
 * ---------------------------------------------------------------- */
.wiki-content h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--wiki-accent);
    margin-top: var(--wiki-space-12);
    margin-bottom: var(--wiki-space-6);
    padding-bottom: var(--wiki-space-2);
    border-bottom: 2px solid var(--wiki-accent);
}
.wiki-content h3 {
    font-size: var(--wiki-display-xs);
    font-weight: 600;
    color: var(--wiki-accent);
    margin-top: var(--wiki-space-8);
    margin-bottom: var(--wiki-space-4);
}
.wiki-content h4 {
    font-size: var(--wiki-text-xl);
    font-weight: 600;
    color: var(--wiki-fg-strong);
    margin-top: var(--wiki-space-6);
    margin-bottom: var(--wiki-space-3);
}
.wiki-content p { margin-bottom: var(--wiki-space-4); line-height: 1.7; }
.wiki-content ul, .wiki-content ol { margin-bottom: var(--wiki-space-4); padding-left: var(--wiki-space-6); }
.wiki-content li { margin-bottom: var(--wiki-space-2); }
.wiki-content a { color: var(--wiki-accent); }
.wiki-content code {
    font-family: var(--wiki-font-mono);
    background: var(--wiki-code-bg);
    color: var(--wiki-code-fg);
    padding: 0.1rem 0.4rem;
    border-radius: var(--wiki-radius-sm);
    font-size: 0.9em;
}
.wiki-content pre {
    font-family: var(--wiki-font-mono);
    background: var(--wiki-code-bg);
    color: var(--wiki-code-fg);
    padding: var(--wiki-space-4);
    border-radius: var(--wiki-radius-md);
    overflow-x: auto;
    margin-bottom: var(--wiki-space-4);
}
.wiki-content blockquote {
    border-left: 3px solid var(--wiki-border);
    padding-left: var(--wiki-space-4);
    color: var(--wiki-fg-soft);
    margin: var(--wiki-space-4) 0;
}
.wiki-content table {
    border-collapse: collapse;
    margin-bottom: var(--wiki-space-6);
    width: 100%;
}
.wiki-content th, .wiki-content td {
    border: 1px solid var(--wiki-border);
    padding: var(--wiki-space-2) var(--wiki-space-3);
    text-align: left;
}
.wiki-content th { background: var(--wiki-bg-deep); font-weight: 600; }
.wiki-content img { max-width: 100%; height: auto; border-radius: var(--wiki-radius-md); }

/* ---------------------------------------------------------------- *
 * Footer (last-fetched-at)
 * ---------------------------------------------------------------- */
.wiki-footer {
    margin-top: var(--wiki-space-16);
    padding-top: var(--wiki-space-4);
    border-top: 1px solid var(--wiki-border);
    color: var(--wiki-fg-dim);
    font-size: var(--wiki-text-sm);
}