/*
 * tai-wiki — shared component styles
 *
 * Component-level rules extracted from wiki.css. wiki.css owns the
 * tokens (:root) plus page chrome (layout, sidebar, topbar,
 * footer, .wiki-content typography); this file owns the
 * content-component surface that lives inside the chrome.
 *
 * Loaded by base.html after wiki.css so the --wiki-* custom
 * properties defined on :root in wiki.css are available here.
 * This file does NOT define its own tokens.
 *
 * Reference: tai-wiki/docs/v2-implementation-spec.md §6 Task 1
 * (the "extract a wiki/static/wiki/css/components.css" item).
 */

/* ---------------------------------------------------------------- *
 * Generic content card
 *
 * Used as the base surface for in-body cards (slide notes, generic
 * folder body content). Per-context cards (.contact-card,
 * .contact-hq) define their own background + border-left rather
 * than composing on top of .content-card.
 * ---------------------------------------------------------------- */
.content-card {
    background: var(--wiki-surface);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius-lg);
    padding: var(--wiki-space-6);
    margin-bottom: var(--wiki-space-6);
    box-shadow: var(--wiki-shadow-card);
}

/* ---------------------------------------------------------------- *
 * Slides leaf template (slides_presenters_notes.html)
 *
 * One row per slide: presenter notes card on the left, rasterized
 * slide thumbnail on the right at 250px wide (crisp on retina; see
 * drive/slides.py for the render-scale rationale).
 * Mobile (<768px) collapses to stacked: notes above thumbnail.
 *
 * Fail-soft (WIKI-14): when a Drive fetch fails, the corresponding
 * side renders a placeholder instead of a real <img> or notes card,
 * and .wiki-banner above signals which source(s) failed.
 * ---------------------------------------------------------------- */
.slide-note-container {
    display: flex;
    gap: var(--wiki-space-6);
    align-items: flex-start;
    margin-bottom: var(--wiki-space-6);
}

.slide-note-content { flex: 1; }

.slide-note-empty { color: var(--wiki-fg-dim); }

.slide-reference {
    flex-shrink: 0;
    width: 500px;
    text-align: center;
}
/* WIKI-24: the thumbnail is wrapped in a <button> so keyboard users
 * can tab + Enter. Strip the default button chrome so the visual is
 * identical to the pre-WIKI-24 <img>; the hover scale + shadow lift
 * (now applied to the button) carry the affordance. */
.slide-thumb-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--wiki-radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.slide-thumb-trigger:hover,
.slide-thumb-trigger:focus-visible {
    transform: scale(1.05);
    box-shadow: var(--wiki-shadow-hover);
    outline: none;
}
.slide-thumb-trigger:focus-visible {
    /* Layer a green accent ring on top of the hover lift so keyboard
     * tab users get a distinct affordance vs. a mouse hover. */
    box-shadow: 0 0 0 2px var(--wiki-accent), var(--wiki-shadow-hover);
}
.slide-reference img {
    width: 100%;
    height: auto;
    border-radius: var(--wiki-radius-lg);
    box-shadow: var(--wiki-shadow-card);
    display: block;
}

.slide-reference-caption {
    font-size: var(--wiki-text-xs);
    color: var(--wiki-fg-dim);
    margin-top: var(--wiki-space-2);
    font-weight: 500;
}

@media (max-width: 768px) {
    .slide-note-container { flex-direction: column; }
    .slide-reference {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------------- *
 * WIKI-24: slide lightbox.
 *
 * Click a thumbnail → centered enlarged view at ~720 CSS px (a
 * deliberate match for the scale-2.0 rasterized PNG: ~1440 native
 * pixels displayed at 720 CSS px = perfect 2x retina, no second
 * cache tier needed). Backdrop darkens the page; close affordances
 * are the × button top-right, click on the backdrop, or Esc.
 * Keyboard ←/→ steps through the deck while open (wraps at the
 * boundaries). Behavior wired up by wiki/static/wiki/js/lightbox.js.
 *
 * `[hidden]` is the closed state; JS toggles the attribute to open.
 * ---------------------------------------------------------------- */
.slide-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wiki-space-8);
}
.slide-lightbox[hidden] { display: none; }

.slide-lightbox-image {
    /* 720 CSS px target on wide viewports; cap to viewport on
     * smaller screens so the image always fits. */
    width: 720px;
    max-width: min(90vw, 1200px);
    max-height: calc(100vh - var(--wiki-space-16));
    height: auto;
    border-radius: var(--wiki-radius-lg);
    box-shadow: var(--wiki-shadow-hover);
    background: var(--wiki-surface-soft);
}

.slide-lightbox-caption {
    margin-top: var(--wiki-space-4);
    color: var(--wiki-fg-soft);
    font-size: var(--wiki-text-sm);
    font-weight: 500;
}

.slide-lightbox-close {
    position: absolute;
    top: var(--wiki-space-4);
    right: var(--wiki-space-4);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wiki-fg);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--wiki-radius-md);
    transition: background 0.15s ease;
}
.slide-lightbox-close:hover,
.slide-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}
.slide-lightbox-close:focus-visible {
    box-shadow: 0 0 0 2px var(--wiki-accent);
}

/* ---------------------------------------------------------------- *
 * Wiki banner — fail-soft notice for content fetch failures
 *
 * Originally added for slides (WIKI-14); generalized in WIKI-15 to
 * cover doc + PDF render failures too. Sits above the content area
 * inside the wiki chrome.
 *
 * .wiki-banner            — base, sits above the content area
 * .wiki-banner--warning   — partial failure, content still rendering
 * .wiki-banner--error     — full failure, content area is banner only
 *
 * .slide-thumbnail-placeholder — slides-specific stand-in when a
 *   single slide's image_url is empty. Matches the real thumbnail's
 *   16:9 footprint so the row doesn't reflow.
 * ---------------------------------------------------------------- */
.wiki-banner {
    padding: var(--wiki-space-4) var(--wiki-space-5);
    margin-bottom: var(--wiki-space-6);
    border-radius: var(--wiki-radius-lg);
    border-left: 4px solid;
    background: var(--wiki-bg-deep);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--wiki-fg);
}
.wiki-banner strong {
    display: block;
    margin-bottom: var(--wiki-space-1);
}
.wiki-banner a {
    color: var(--wiki-accent);
    text-decoration: underline;
}
.wiki-banner--warning { border-left-color: var(--wiki-warning); }
.wiki-banner--error   { border-left-color: var(--wiki-danger); }

.slide-thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--wiki-radius-lg);
    background: var(--wiki-surface-soft);
    border: 1px dashed var(--wiki-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wiki-fg-dim);
    font-size: 0.8125rem;
    font-style: italic;
}

/* ---------------------------------------------------------------- *
 * Default Doc renderer (WIKI-15, refined WIKI-38)
 *
 * Wraps the sanitized Google HTML export. The sanitizer strips
 * color / background / font-family from Google's inline styles
 * (see wiki/sanitize.py), so the wiki owns body color, link color,
 * and the body font — that lets Docs adopt the dark theme + Plus
 * Jakarta Sans automatically. Structural CSS (font-size, weight,
 * margins, lists, counters) still passes through, so headings keep
 * their relative weight and Google's list-counter <style> still
 * works.
 *
 * Width clamps prose to --wiki-content-max-width (the doc-prose
 * reading column — ~900px, sized for ~75-char lines at 1rem). After
 * WIKI-45 lifted the cap from .wiki-main > *, .doc-content is this
 * token's only consumer. The doc body anchors to the left edge of
 * .wiki-content so it shares a left margin with the topbar,
 * breadcrumb, page title, and "last modified" row above — cap is on
 * the right only, no auto-centering.
 * ---------------------------------------------------------------- */
.doc-content {
    max-width: var(--wiki-content-max-width);
    padding-block-start: var(--wiki-space-4);
    color: var(--wiki-fg);
    line-height: 1.65;
}
.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4 {
    color: var(--wiki-fg-strong);
    margin-top: var(--wiki-space-6);
    margin-bottom: var(--wiki-space-3);
    line-height: 1.25;
}
.doc-content a {
    color: var(--wiki-accent);
    text-decoration: underline;
}
.doc-content a:hover {
    color: var(--wiki-accent-hover);
}
.doc-content img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------- *
 * Default PDF renderer (WIKI-15)
 *
 * Drive PDFs render via the browser's native PDF viewer in an
 * iframe — the wiki only owns the chrome around it. 80vh keeps a
 * generous viewport for reading without making the wiki nav scroll
 * away on large monitors.
 * ---------------------------------------------------------------- */
.pdf-viewer {
    width: 100%;
    height: 80vh;
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius-lg);
    background: var(--wiki-surface-soft);
}

/* ---------------------------------------------------------------- *
 * Default GIF renderer (WIKI-44)
 *
 * Native Drive GIFs render as a plain <img> pointing at the
 * gif_stream view. max-width:100% lets the GIF cap at its intrinsic
 * pixel width on wide viewports (no upscaling artifacts) while
 * shrinking to fit narrower ones. After WIKI-45 .wiki-content has no
 * max-width, so on wide monitors the GIF sits in its native size
 * centered inside the full-width column.
 * ---------------------------------------------------------------- */
.gif-viewer {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    padding-block-start: var(--wiki-space-4);
}

/* ---------------------------------------------------------------- *
 * Contact cards — vendors + internal contacts (WIKI-16)
 *
 * Card-grid layout: every parsed record (one contact at one
 * vendor, or one internal employee) renders as a .contact-card.
 * Cards group under a section heading — company name for vendors,
 * department for internal contacts — via .contact-card-group.
 *
 * v2 ships a single neutral card style for both vendors and
 * internals. The partial still emits .contact-card--vendor /
 * --internal as modifier classes, but no CSS rule binds them today;
 * they're reserved hooks for a future variant if one ever surfaces.
 *
 * Plus the HQ banner block (.contact-hq) for the
 * /wiki/hr/contact_info/ page's first record (company-wide info,
 * no Contact Name).
 * ---------------------------------------------------------------- */
.contact-card-group {
    margin-bottom: var(--wiki-space-12);
}
.contact-card-group__heading {
    font-size: var(--wiki-display-xs);
    font-weight: 600;
    color: var(--wiki-fg-strong);
    margin-bottom: var(--wiki-space-4);
    padding-bottom: var(--wiki-space-2);
    border-bottom: 2px solid var(--wiki-border);
}
.contact-card-group__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wiki-space-4);
}

.contact-card {
    background: var(--wiki-surface);
    border-radius: var(--wiki-radius-lg);
    padding: var(--wiki-space-5);
    box-shadow: var(--wiki-shadow-card);
    border-left: 4px solid var(--wiki-border);
    transition: box-shadow 0.2s ease;
}
.contact-card:hover {
    box-shadow: var(--wiki-shadow-hover);
}
.contact-card__header {
    margin-bottom: var(--wiki-space-3);
    padding-bottom: var(--wiki-space-2);
    border-bottom: 1px solid var(--wiki-border);
}
.contact-card__name {
    font-size: var(--wiki-text-lg);
    font-weight: 600;
    color: var(--wiki-fg-strong);
    margin: 0;
}
.contact-card__title {
    font-size: var(--wiki-text-sm);
    color: var(--wiki-fg-dim);
    margin: var(--wiki-space-1) 0 0;
}
.contact-card__fields {
    display: flex;
    flex-direction: column;
    gap: var(--wiki-space-3);
}
.contact-card__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--wiki-text-sm);
}
.contact-card__field-label {
    font-weight: 500;
    color: var(--wiki-fg-dim);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.contact-card__field-value {
    color: var(--wiki-fg);
    word-break: break-word;
}
a.contact-card__field-value {
    color: var(--wiki-accent);
    text-decoration: none;
}
a.contact-card__field-value:hover {
    text-decoration: underline;
}
.contact-card__field--notes .contact-card__field-value {
    white-space: pre-wrap;
    color: var(--wiki-fg-soft);
    font-style: italic;
}

/* HQ banner — company-wide info card at the top of the contacts
 * page. Visually distinct from per-person cards so users can tell at
 * a glance "this is the company, not a person." */
.contact-hq {
    background: var(--wiki-accent-muted);
    border-radius: var(--wiki-radius-lg);
    padding: var(--wiki-space-6);
    margin-bottom: var(--wiki-space-8);
    border-left: 4px solid var(--wiki-accent);
}
.contact-hq__name {
    font-size: var(--wiki-display-xs);
    font-weight: 700;
    color: var(--wiki-accent);
    margin: 0 0 var(--wiki-space-4);
}
.contact-hq__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wiki-space-3);
}

/* ---------------------------------------------------------------- *
 * Auth pages (sign-in, rejected)
 *
 * Rendered outside the wiki chrome via wiki/auth_base.html — no
 * sidebar/topbar/footer here. body.auth-page centers a single
 * .auth-card on a dark surface.
 *
 * Scope: body.auth-page so the centered layout doesn't leak onto
 * wiki pages (which extend wiki/base.html, not auth_base.html, and
 * never carry the .auth-page class).
 * ---------------------------------------------------------------- */
body.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--wiki-space-6);
}

.auth-shell {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--wiki-surface);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius-lg);
    padding: var(--wiki-space-8) var(--wiki-space-6);
    box-shadow: var(--wiki-shadow-card);
    text-align: center;
}

.auth-card__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wiki-fg-strong);
    margin: 0 0 var(--wiki-space-3);
}

.auth-card__tagline {
    color: var(--wiki-fg-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--wiki-space-8);
}

.auth-card__body {
    color: var(--wiki-fg);
    text-align: left;
    line-height: 1.6;
    margin: 0 0 var(--wiki-space-4);
}

.auth-card__email {
    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;
}

.auth-card__google {
    display: inline-block;
    background: var(--wiki-accent);
    color: var(--wiki-accent-fg);
    padding: var(--wiki-space-3) var(--wiki-space-6);
    border-radius: var(--wiki-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--wiki-text-md);
    margin-bottom: var(--wiki-space-4);
    transition: background 0.15s ease;
}
.auth-card__google:hover,
.auth-card__google:focus {
    background: var(--wiki-accent-hover);
    outline: none;
}

/* Form-submit variant of .auth-card__google — same visual treatment
 * but with the button-element reset (no border, inherit font, pointer
 * cursor) so a <button type="submit"> inside a <form> looks identical
 * to an <a class="auth-card__google"> link. Used on logout.html. */
.auth-card__submit {
    display: inline-block;
    background: var(--wiki-accent);
    color: var(--wiki-accent-fg);
    padding: var(--wiki-space-3) var(--wiki-space-6);
    border-radius: var(--wiki-radius-md);
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: var(--wiki-text-md);
    margin-bottom: var(--wiki-space-4);
    transition: background 0.15s ease;
}
.auth-card__submit:hover,
.auth-card__submit:focus {
    background: var(--wiki-accent-hover);
    outline: none;
}

.auth-card__hint {
    color: var(--wiki-fg-dim);
    font-size: var(--wiki-text-sm);
    margin: 0;
}

.auth-card__action {
    display: inline-block;
    margin-top: var(--wiki-space-4);
    color: var(--wiki-accent);
    text-decoration: none;
    font-weight: 500;
}
.auth-card__action:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * Topbar user identity (WIKI-20)
 *
 * <details class="wiki-user"> anchored to the top-right of
 * .wiki-topbar via absolute positioning. The summary acts as the
 * always-visible trigger (avatar + name + chevron); the dropdown
 * holds the "Sign out" action.
 *
 * Open/close: native <details> toggles on summary click; nav.js
 * adds a click-outside handler that auto-closes when the user
 * clicks elsewhere on the page.
 *
 * Visibility: server-rendered behind {% if request.user.is_authenticated %}
 * — auth pages (sign-in, rejected) don't emit it.
 * ---------------------------------------------------------------- */
.wiki-user {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
}

.wiki-user__trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--wiki-space-2);
    list-style: none;
    padding: var(--wiki-space-2) var(--wiki-space-3);
    border-radius: var(--wiki-radius-md);
    color: var(--wiki-fg);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s ease;
}
.wiki-user__trigger::-webkit-details-marker { display: none; }
.wiki-user__trigger:hover { background: var(--wiki-accent-muted); }

.wiki-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--wiki-accent);
    color: var(--wiki-accent-fg);
    font-weight: 700;
    font-size: var(--wiki-text-sm);
}

.wiki-user__name {
    color: var(--wiki-fg);
}

.wiki-user__chevron {
    color: var(--wiki-fg-muted);
    font-size: var(--wiki-text-xs);
    transition: transform 0.15s ease;
}
details.wiki-user[open] > .wiki-user__trigger > .wiki-user__chevron {
    transform: rotate(180deg);
}

.wiki-user__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--wiki-space-2));
    background: var(--wiki-surface);
    border: 1px solid var(--wiki-border);
    border-radius: var(--wiki-radius-md);
    box-shadow: var(--wiki-shadow-card);
    padding: var(--wiki-space-2);
    min-width: 160px;
}

.wiki-user__menu-item {
    display: block;
    padding: var(--wiki-space-2) var(--wiki-space-3);
    color: var(--wiki-fg);
    text-decoration: none;
    border-radius: var(--wiki-radius-sm);
    font-size: 0.9375rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.wiki-user__menu-item:hover {
    background: var(--wiki-accent-muted);
    color: var(--wiki-accent);
}