/* ============================================================
   TomatoFarm · Public Site
   Custom layer on top of MudBlazor. Hero, Cards, Status —
   anything that should feel like "the farm" lives here, not
   in MudBlazor defaults.
   ============================================================ */

:root {
    --tf-bg:          #0a0d14;
    --tf-bg-soft:     #11151f;
    --tf-card:        #12141c;   /* matches the internal Web's .docs-card and Dashboard cards exactly */
    --tf-border:      #1f2433;

    --tf-text:        #d8dde8;
    --tf-text-soft:   #8892a8;
    --tf-text-muted:  #4a5068;

    --tf-tomato:      #ff6b4a;
    --tf-leaf:        #5db075;
    --tf-sky:         #5fa8d3;
    --tf-warn:        #f5b945;
    --tf-error:       #ef5350;

    /* Canonical action-type palette — ONE source for the Day timeline
       (Day.razor ActionColor) AND the Decision-Replay action labels
       (.tf-act-* further down), so the two pages can never drift. Tune an
       action's colour here and both update. Ventilation is a warm sand, not
       neon cyan, to sit inside the muted/earthy theme. */
    --act-watering:    #5fa8d3;
    --act-fertilizing: #5db075;
    --act-ventilation: #c9b27e;
    --act-lighting:    #facc15;
    --act-observation: #94a3b8;
    --act-default:     #8892a8;

    --tf-mono:        'JetBrains Mono', ui-monospace, monospace;
    --tf-sans:        'Inter', system-ui, -apple-system, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--tf-bg);
    color: var(--tf-text);
    font-family: var(--tf-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a {
    color: var(--tf-sky);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---------- Docs back-nav (shared by all doc pages + the Crew page) ----------
   Canonical "back to docs" / "back to top" affordance, rendered by the
   DocsBackLink + DocsBottomNav components. Defined once here (was duplicated in
   every doc page's inline <style>). text-decoration:none on :hover beats the
   global a:hover underline by specificity -- no !important needed. */
.docs-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: #8892a8; text-decoration: none;
    padding: 6px 12px; margin-bottom: 16px;
    border: 1px solid #2a2e3a; border-radius: 6px;
    background: #12141c; transition: all 0.15s ease;
}
.docs-back:hover { color: #e2e8f0; border-color: #4a5068; background: #1a1d27; text-decoration: none; }
.docs-back-arrow { font-size: 14px; line-height: 1; transition: transform 0.15s ease; }
.docs-back:hover .docs-back-arrow { transform: translateX(-2px); }

.docs-bottom-nav {
    margin: 40px 0 0;
    display: flex; justify-content: center; align-items: center;
    gap: 28px;
}
.docs-back-to-top {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 1.5px;
    color: #4a5068; text-decoration: none;
    text-transform: uppercase;
    transition: color 0.15s;
}
.docs-back-to-top:hover { color: #8892a8; text-decoration: none; }

.mono { font-family: var(--tf-mono); }

/* ---------- Shell ---------- */
.tf-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tf-topbar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--tf-border);
    background: var(--tf-bg-soft);
}

.tf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tf-text);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.3px;
}
.tf-brand:hover { text-decoration: none; }
.tf-brand-emoji { font-size: 22px; }
.tf-brand-name {
    background: linear-gradient(135deg, #ef4444, #f97316, #eab308, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.tf-nav {
    display: flex;
    gap: 20px;
    flex: 1;
}
.tf-nav a {
    color: var(--tf-text-soft);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    position: relative;          /* anchor for the active underline */
    padding: 4px 0;              /* tap target + room below for the bar */
}
.tf-nav a:hover { color: var(--tf-text); text-decoration: none; }

/* Group separator — slim vertical rule between semantic nav groups
   (Live | Build | Narrative). aria-hidden in markup, so screen readers
   don't announce it. Uses --tf-text-soft so it reads against the
   topbar background; --tf-border is too close to the bg colour. */
.tf-nav-sep {
    width: 1px;
    height: 22px;
    background: var(--tf-text-soft);
    align-self: center;
    opacity: 0.45;
}

/* Active route — leaf-green underline + brighter text. NavLink in
   MainLayout adds the .active class automatically. The 2px bar sits
   2px below the link so it doesn't collide with the topbar's bottom
   border at -16px. */
.tf-nav a.active {
    color: var(--tf-text);
    font-weight: 600;
}
.tf-nav a.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--tf-leaf);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(93, 176, 117, 0.5);
}
/* Active underline colour matches the link's nav group (same scheme as the
   pagehead eyebrows): warm orange = LIVE, green = technical, orange = story. */
.tf-nav a.active.nav-live::after  { background: #fdba74;          box-shadow: 0 0 8px rgba(253, 186, 116, 0.5); }
.tf-nav a.active.nav-tech::after  { background: #86efac;          box-shadow: 0 0 8px rgba(134, 239, 172, 0.5); }
.tf-nav a.active.nav-story::after { background: var(--tf-tomato); box-shadow: 0 0 8px rgba(255, 107, 74, 0.5); }

/* ============================================================
   Mobile nav — hamburger drawer
   The 6 nav links + logo + lang picker don't fit on a ~460px
   viewport. Below 760px we hide the inline nav, show a hamburger
   on the right, and render the nav as a vertical drawer that
   drops below the topbar when the toggle is open.
   ============================================================ */
.tf-nav-toggle {
    display: none;             /* hidden on desktop */
    background: transparent;
    border: 1px solid var(--tf-border);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    margin-left: auto;
    gap: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}
.tf-nav-toggle:hover { border-color: var(--tf-text-soft); }
.tf-nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--tf-text);
    border-radius: 1px;
}

@media (max-width: 1400px) {
    .tf-topbar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
        position: relative;
    }
    .tf-nav-toggle { display: flex; }

    /* Nav becomes a drawer: full-width row below the topbar, hidden
       by default, shown via .tf-nav-open. flex-direction column so
       links stack vertically with comfortable tap targets. */
    .tf-nav {
        display: none;
        order: 99;             /* push below brand + toggle */
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        margin-top: 8px;
        border-top: 1px solid var(--tf-border);
        padding-top: 8px;
    }
    .tf-nav.tf-nav-open { display: flex; }
    .tf-nav a {
        padding: 12px 4px 12px 14px;
        border-bottom: 1px solid var(--tf-border);
        font-size: 15px;
    }
    .tf-nav a:last-child { border-bottom: none; }
    /* Group-end link sits right above a separator — kill its border so
       the sep itself is the only visible line (otherwise: double rule). */
    .tf-nav a:has(+ .tf-nav-sep) { border-bottom: none; }

    /* Drawer: vertical rule becomes a full-width hairline between groups. */
    .tf-nav-sep {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        opacity: 0.5;
        align-self: stretch;
    }

    /* Mobile active state — the desktop underline doesn't read in a
       stacked drawer (it would just look like the row separator), so
       use a left-rail accent + leaf-green text instead. */
    .tf-nav a.active {
        color: var(--tf-leaf);
    }
    .tf-nav a.active::after {
        display: none;
    }
    .tf-nav a.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        background: var(--tf-leaf);
        border-radius: 1.5px;
        box-shadow: 0 0 6px rgba(93, 176, 117, 0.5);
    }
    /* Drawer accent matches the nav group, same as the desktop underline. */
    .tf-nav a.active.nav-live  { color: #fdba74; }
    .tf-nav a.active.nav-live::before  { background: #fdba74;          box-shadow: 0 0 6px rgba(253, 186, 116, 0.5); }
    .tf-nav a.active.nav-tech  { color: #86efac; }
    .tf-nav a.active.nav-tech::before  { background: #86efac;          box-shadow: 0 0 6px rgba(134, 239, 172, 0.5); }
    .tf-nav a.active.nav-story { color: var(--tf-tomato); }
    .tf-nav a.active.nav-story::before { background: var(--tf-tomato); box-shadow: 0 0 6px rgba(255, 107, 74, 0.5); }
}

.tf-main {
    flex: 1;
    padding: 48px 28px 32px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Landing page (Home) handles its own bottom spacing via the outro section —
   skip the global bottom padding here so outro sits close to the footer. */
.tf-main:has(.landing-hero) {
    padding-bottom: 0;
}

.tf-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--tf-border);
    color: var(--tf-text-muted);
    font-size: 13px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.tf-footer-sep { color: var(--tf-text-muted); }
.tf-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Mobile: stack the tagline over a clean, centered links row. Free-wrapping
   the flat list left "·" separators dangling mid-line; grouping the links and
   hiding the tagline↔links separator gives a tidy two-line footer instead.
   The centered links now sit clear of the bottom-right back-to-top button on
   their own, so the footer only needs a little breathing room below — no big
   reserve. */
@media (max-width: 720px) {
    .tf-footer {
        flex-direction: column;
        gap: 8px;
        padding-bottom: 24px;
    }
    .tf-footer > .tf-footer-sep {
        display: none;
    }
}

/* ---------- Language picker ---------- */
.tf-langpicker {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--tf-mono);
    font-size: 13px;
}
.tf-lang-btn {
    background: transparent;
    border: none;
    color: var(--tf-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font: inherit;
    transition: color 120ms ease;
}
.tf-lang-btn:hover { color: var(--tf-text-soft); }
.tf-lang-btn-active { color: var(--tf-tomato); font-weight: 600; }
.tf-lang-sep { color: var(--tf-border); }

/* ---------- Hero ---------- */
.tf-hero {
    padding: 32px 0 48px;
    border-bottom: 1px solid var(--tf-border);
    margin-bottom: 40px;
}
.tf-hero-eyebrow {
    font-family: var(--tf-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--tf-tomato);
    margin-bottom: 16px;
}
.tf-hero-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--tf-text);
}
.tf-hero-subtitle {
    font-size: 18px;
    color: var(--tf-text-soft);
    margin: 0 0 12px;
    max-width: 720px;
    line-height: 1.5;
}
.tf-hero-tagline {
    margin: 0;
    font-family: var(--tf-mono);
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--tf-text-muted);
    max-width: 760px;
}

/* CTA buttons under the hero */
.tf-hero-cta {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tf-btn-primary {
    /*
        Primary CTA is leaf-green, not tomato-orange. The logo gradient
        already carries the heat (red→orange→yellow→green); a green CTA
        sits on the "growth / go" end of that spectrum and contrasts the
        wordmark instead of echoing it. Matches the internal Home.
    */
    background: #22c55e;
    color: #052e16;
}
.tf-btn-primary:hover {
    background: #16a34a;
    color: #ffffff;
    transform: translateY(-1px);
}
.tf-btn-ghost {
    background: transparent;
    border: 1px solid var(--tf-border);
    color: var(--tf-text);
}
.tf-btn-ghost:hover {
    border-color: var(--tf-text-soft);
    transform: translateY(-1px);
}

/* Page head — used on /dashboard, /architecture, etc. */
.tf-pagehead {
    margin-bottom: 24px;
}
.tf-pagehead-eyebrow {
    font-family: var(--tf-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tf-tomato);
    margin-bottom: 12px;
}
/* Pagehead eyebrow colour-coded by nav group:
   warm orange = LIVE, green = technical/BUILD, amber = NARRATIVE. */
.tf-pagehead-eyebrow.is-live  { color: #fdba74; }
.tf-pagehead-eyebrow.is-tech  { color: #86efac; }
.tf-pagehead-eyebrow.is-story { color: var(--tf-tomato); }
.tf-pagehead-title {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.8px;
}
.tf-pagehead-title-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tf-pagehead-title-icon span { display: inline-flex; }
.tf-pagehead-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--tf-text-soft);
    max-width: 760px;
    line-height: 1.5;
}
/* Subtle "How it works →" link to the matching docs page. Mono + accent,
   the arrow nudges right on hover. Colour follows the page's eyebrow group. */
.tf-pagehead-doclink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-family: var(--tf-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: #86efac;
    opacity: 0.82;
    transition: opacity 0.15s ease, gap 0.15s ease;
}
.tf-pagehead-doclink.is-live  { color: #fdba74; }
.tf-pagehead-doclink.is-story { color: var(--tf-tomato); }
.tf-pagehead-doclink:hover { opacity: 1; gap: 10px; }
.tf-pagehead-doclink-arrow { font-size: 13px; line-height: 1; }

/* Optional photographic backdrop for the pagehead. Enable per page by adding
   the modifier class and setting --pagehead-bg on the element:
       <div class="tf-pagehead tf-pagehead-with-backdrop"
            style="--pagehead-bg: url('img/pagehead/chronicle.jpg')"> ... </div>
   The image fades from the right so the title/eyebrow on the left stay
   readable on dark backgrounds. On narrow viewports the fade flips to
   vertical so the photo never crowds the copy. */
.tf-pagehead-with-backdrop {
    /* Override --pagehead-bg-pos inline per page when the image's focal
       point isn't on the right (default works for right-anchored motifs
       like the Chronicle book + lamp; centered motifs need `center`). */
    --pagehead-bg-pos: center right;
    position: relative;
    isolation: isolate;
    padding: 56px 28px;
    margin: 0 -28px 24px;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tf-pagehead-with-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pagehead-bg);
    background-size: cover;
    background-position: var(--pagehead-bg-pos);
    opacity: 0.38;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
            mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    pointer-events: none;
    z-index: 0;
}
.tf-pagehead-with-backdrop > * {
    position: relative;
    z-index: 1;
}

/* Backdrop-only wrapper — no display/min-height/flex overrides. For pages
   whose pagehead has its own complex layout (e.g. Diary's title-plus-toolbar
   row), wrap the existing header in this and set --pagehead-bg inline. */
.tf-pagehead-backdrop-frame {
    --pagehead-bg-pos: center right;
    position: relative;
    isolation: isolate;
    padding: 56px 28px;
    margin: 0 -28px 24px;
    min-height: 320px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tf-pagehead-backdrop-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pagehead-bg);
    background-size: cover;
    background-position: var(--pagehead-bg-pos);
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
            mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    pointer-events: none;
    z-index: 0;
}
.tf-pagehead-backdrop-frame > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 720px) {
    .tf-pagehead-backdrop-frame {
        padding: 24px 16px;
        margin-left: -16px;
        margin-right: -16px;
    }
    .tf-pagehead-backdrop-frame::before {
        background-position: center bottom;
        opacity: 0.20;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    }
}
@media (max-width: 720px) {
    .tf-pagehead-with-backdrop {
        padding: 24px 16px;
        margin-left: -16px;
        margin-right: -16px;
    }
    .tf-pagehead-with-backdrop::before {
        background-position: center bottom;
        opacity: 0.20;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    }
}

.tf-section-first { margin-top: 8px; }

/* ============================================================
   Section divider bar — the canonical separator used across the
   public site (Live "Our Tomatoes — 6 Pods", Systems, Council).
   Left accent rail + uppercase mono label. Lifted here from the
   per-page <style> blocks so every divider looks identical.
   Accent variants set the rail + text colour. Collapse/chevron
   behaviour (mobile) stays local to the collapsible pages.
   ============================================================ */
.section-header {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: #e2e8f0; padding: 8px 12px; margin: 24px 0 14px;
    border-left: 3px solid #4a5068; background: #12141c;
    border-radius: 0 6px 6px 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.section-header.orange { border-left-color: #f97316; color: #fed7aa; }
.section-header.green  { border-left-color: #22c55e; color: #86efac; }
.section-header.purple { border-left-color: #a78bfa; color: #c4b5fd; }
.section-header.cyan   { border-left-color: #06b6d4; color: #67e8f9; }
.section-header.sepia  { border-left-color: #c08552; color: #e7cba9; }  /* muted brown — archive / journal tone */
.section-header.stone  { border-left-color: #a8a29e; color: #e7e5e4; }  /* neutral stone-grey */
.section-title { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Loading skeletons (shimmer) — shared primitives for any data-heavy
   page while its first fetch is in flight. Each page composes its own shape
   from these; reserving the height lets the real content swap in without a
   jump (no blank-gap-then-pop). ===== */
.skel {
    display: block; pointer-events: none; user-select: none;
    background: linear-gradient(90deg, #161922 25%, #1f2330 37%, #161922 63%);
    background-size: 400% 100%;
    animation: tf-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes tf-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
.skel-line { display: inline-block; }
.skel-pill { display: inline-block; width: 130px; height: 16px; border-radius: 999px; }
.skel-chip { width: 90px; height: 34px; border-radius: 8px; }
.skel-card { min-height: 168px; border-radius: 10px; border: 1px solid #2a2e3a; }
.tf-skel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tf-skel-stack { display: flex; flex-direction: column; gap: 14px; }

/* Plant-diary day-switch — the current grid holds its height and dims softly in
   place while the next day loads (no collapse-to-skeleton bounce, since the
   skeleton is shorter than a real day). The spinner in the date pill carries the
   signal — no floating overlay. */
.pod-list.is-switching { opacity: 0.5; pointer-events: none; transition: opacity 0.18s ease; }

/* Prose-section ("What is this?") — three paragraphs, plain reading */
.tf-prose-section {
    max-width: 720px;
}
.tf-prose-eyebrow {
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--tf-tomato);
    margin-bottom: 16px;
}
.tf-prose {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--tf-text);
}
.tf-prose-small { font-size: 15px; color: var(--tf-text-soft); }
.tf-prose-dim   { color: var(--tf-text-muted); }

/* ---------- Status card ---------- */
.tf-status-loading,
.tf-status-error {
    padding: 24px;
    background: var(--tf-card);
    border-radius: 8px;
    color: var(--tf-text-soft);
    font-family: var(--tf-mono);
    font-size: 13px;
}
.tf-status-error { color: var(--tf-error); }

.tf-status-card {
    padding: 24px 28px;
    background: var(--tf-card);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.tf-status-online      { border-left-color: var(--tf-leaf); }
.tf-status-degraded    { border-left-color: var(--tf-warn); }
.tf-status-offline     { border-left-color: var(--tf-error); }
.tf-status-maintenance { border-left-color: var(--tf-sky); }

.tf-status-label {
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--tf-text-muted);
}
.tf-status-headline {
    font-size: 22px;
    font-weight: 700;
    color: var(--tf-text);
}
.tf-status-meta {
    color: var(--tf-text-soft);
    font-size: 13px;
}
.tf-status-pill {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    background: var(--tf-warn);
    color: var(--tf-bg);
    border-radius: 999px;
    font-family: var(--tf-mono);
    font-size: 11px;
    font-weight: 600;
}

/* ---------- Section headers (Brand stripes) ---------- */
/* Dashboard-DNA: 3px solid border-left + horizontal gradient from
   accent-30%-opacity to 4%. Adopted because it works — and gives
   the Public site visual continuity with the internal app. */
.tf-section { margin-top: 48px; }

.tf-section-header {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 16px;
    margin-bottom: 18px;
    font-family: var(--tf-mono);
    border-radius: 4px;
}

.tf-section-header-green {
    border-left: 3px solid var(--tf-leaf);
    background: linear-gradient(90deg, rgba(93, 176, 117, 0.30), rgba(93, 176, 117, 0.04) 100%);
    color: #f0fdf4;
}
.tf-section-header-tomato {
    border-left: 3px solid var(--tf-tomato);
    background: linear-gradient(90deg, rgba(255, 107, 74, 0.30), rgba(255, 107, 74, 0.04) 100%);
    color: #fff6f3;
}
.tf-section-header-sky {
    border-left: 3px solid var(--tf-sky);
    background: linear-gradient(90deg, rgba(95, 168, 211, 0.30), rgba(95, 168, 211, 0.04) 100%);
    color: #eff8ff;
}

/* ---------- Plant cards ---------- */
.tf-pc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.tf-pc {
    display: flex;
    flex-direction: column;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    position: relative;
}
.tf-pc:hover {
    transform: translateY(-2px);
    border-color: #2c3142;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Per-status accent borders */
.tf-pc.tf-pc-status-good     { border-left-color: var(--tf-leaf); }
.tf-pc.tf-pc-status-watch    { border-left-color: var(--tf-warn); }
.tf-pc.tf-pc-status-thirsty  { border-left-color: var(--tf-sky); }
.tf-pc.tf-pc-status-stressed { border-left-color: var(--tf-error); }
.tf-pc.tf-pc-status-unknown  { border-left-color: var(--tf-text-muted); }

/* Photo top — square aspect, matches the cropped pod-cam frames */
.tf-pc-photo {
    aspect-ratio: 1 / 1;
    background: #0a0d14;
    position: relative;
    overflow: hidden;
}
.tf-pc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tf-pc-photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    opacity: 0.45;
}

/* Subtle hover hint — quiet, not SaaS-marketing-loud */
.tf-pc-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-family: var(--tf-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--tf-text);
    background: rgba(10, 13, 20, 0.78);
    padding: 4px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}
.tf-pc:hover .tf-pc-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Body — minimal data density on purpose */
.tf-pc-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tf-pc-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tf-pc-pos {
    font-family: var(--tf-mono);
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
    line-height: 1;
}
.tf-pc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tf-text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-pc-pill {
    font-family: var(--tf-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid;
}

/* Status-text-class drives both the Pos badge and the Pill,
   so all "good" elements speak in green. */
.tf-pc-status-text-good {
    color: var(--tf-leaf);
    background: rgba(93, 176, 117, 0.12);
    border-color: rgba(93, 176, 117, 0.5);
}
.tf-pc-status-text-watch {
    color: var(--tf-warn);
    background: rgba(245, 185, 69, 0.12);
    border-color: rgba(245, 185, 69, 0.5);
}
.tf-pc-status-text-thirsty {
    color: var(--tf-sky);
    background: rgba(95, 168, 211, 0.12);
    border-color: rgba(95, 168, 211, 0.5);
}
.tf-pc-status-text-stressed {
    color: var(--tf-error);
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.5);
}
.tf-pc-status-text-unknown {
    color: var(--tf-text-muted);
    background: rgba(74, 80, 104, 0.18);
    border-color: rgba(74, 80, 104, 0.5);
}

/* Archetype line — "✨ The Charmer · cheerful" sits between header and narrator */
.tf-pc-archetype {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--tf-text-soft);
    margin-top: -4px;
}
.tf-pc-archetype-emoji { font-size: 14px; }
.tf-pc-archetype-text {
    color: var(--tf-text);
    font-weight: 600;
}
.tf-pc-mood {
    color: var(--tf-text-muted);
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
}

/* The narrator — the emotional anchor of the card */
.tf-pc-narrator {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tf-text);
}
.tf-pc-narrator-dim {
    color: var(--tf-text-muted);
    font-style: italic;
}

.tf-pc-footer {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-family: var(--tf-mono);
    font-size: 11px;
    color: var(--tf-text-muted);
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tf-pc-footer-label { letter-spacing: 0.4px; }
.tf-pc-footer-value { color: var(--tf-text-soft); }

/* ---------- Sensor chips ---------- */
.tf-chip-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.tf-chip {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-height: 88px;
}

.tf-chip-label {
    font-family: var(--tf-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tf-text-muted);
}

.tf-chip-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tf-chip-value {
    font-family: var(--tf-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--tf-text);
    line-height: 1.05;
}
.tf-chip-unit {
    font-family: var(--tf-mono);
    font-size: 13px;
    color: var(--tf-text-soft);
}

.tf-chip-stale          { opacity: 0.55; }
.tf-chip-stale .tf-chip-value { color: var(--tf-text-soft); }
.tf-chip-stale-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(245, 185, 69, 0.18);
    color: var(--tf-warn);
    border: 1px solid rgba(245, 185, 69, 0.45);
    font-family: var(--tf-mono);
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
}

/* ---------- Teaser tiles ---------- */
.tf-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.tf-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 18px 16px;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    text-decoration: none !important;
    color: inherit;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.tf-tile:hover {
    transform: translateY(-2px);
    border-color: #2c3142;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tf-tile-icon {
    font-size: 28px;
    line-height: 1;
}
.tf-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tf-tile-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tf-text);
}
.tf-tile-subtitle {
    font-size: 13px;
    color: var(--tf-text-soft);
    line-height: 1.4;
}
.tf-tile-arrow {
    font-family: var(--tf-mono);
    color: var(--tf-text-muted);
    font-size: 18px;
    transition: transform 160ms ease, color 160ms ease;
}
.tf-tile:hover .tf-tile-arrow {
    transform: translateX(3px);
    color: var(--tf-text);
}

.tf-tile-accent-tomato { border-left-color: var(--tf-tomato); }
.tf-tile-accent-leaf   { border-left-color: var(--tf-leaf); }
.tf-tile-accent-sky    { border-left-color: var(--tf-sky); }
.tf-tile-accent-warn   { border-left-color: var(--tf-warn); }

/* ---------- Decision Replay cards ---------- */
.tf-dec-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tf-dec {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tf-dec-accent-leaf   { border-left-color: var(--tf-leaf); }
.tf-dec-accent-tomato { border-left-color: var(--tf-tomato); }
.tf-dec-accent-error  { border-left-color: var(--tf-error); }
.tf-dec-accent-muted  { border-left-color: var(--tf-text-muted); }

/* ---------- Decision Replay GROUPS (parent / children) ----------
   Parent erzählt, children belegen. Three group kinds get distinct
   left-bar accents + header icons; children render as nested
   DecisionCards with InsideGroup=true so they drop the redundant
   Council Recommendation block (parent shows the synthesis). */
.tf-group-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tf-group {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tf-group-council   { border-left-color: #a78bfa; }
.tf-group-operator  { border-left-color: var(--tf-warn); }
.tf-group-automated { border-left-color: var(--tf-sky); }

/* Header glyph carries the same accent as the card's left border so the
   kind reads in colour, not just greyscale. */
.tf-group-council   .tf-group-icon { color: #a78bfa; }
.tf-group-operator  .tf-group-icon { color: var(--tf-warn); }
.tf-group-automated .tf-group-icon { color: var(--tf-sky); }

.tf-group-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.tf-group-icon   { font-size: 20px; line-height: 1; padding-top: 2px; }
.tf-group-headtext { display: flex; flex-direction: column; gap: 2px; }
.tf-group-kind {
    font-family: var(--tf-sans);
    font-size: 15px; font-weight: 700;
    color: var(--tf-text);
}
.tf-group-meta {
    font-family: var(--tf-mono);
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-group-subtype { color: var(--tf-text-soft); }
.tf-group-dot     { margin: 0 6px; opacity: 0.6; }

.tf-group-body { display: flex; flex-direction: column; gap: 6px; }
.tf-group-synthesis {
    margin: 0;
    font-size: 14px;
    color: var(--tf-text);
    line-height: 1.6;
    font-style: italic;
}
.tf-group-expand {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--tf-border);
    color: var(--tf-text-soft);
    font-family: var(--tf-mono);
    font-size: 11px; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tf-group-expand:hover {
    color: var(--tf-text);
    border-color: var(--tf-text-soft);
}

.tf-group-suppressed {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px;
    color: var(--tf-text-soft);
}
.tf-group-suppressed-row { display: flex; gap: 8px; align-items: baseline; }
.tf-group-suppressed-icon { opacity: 0.9; }

.tf-group-children {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* No nested-card style — children are tight rows inside the parent
       card. The parent IS the card; children are entries. Visual
       separation comes from a thin horizontal divider between rows
       and a left-bar accent that picks up the row's outcome colour. */
    margin-top: 4px;
}

/* ---------- Decision Group: child ROWS (no nested cards) ----------
   Card-Inception fix: the previous DecisionCard rendered a full nested
   tile inside the group with its own border + sectioned Why / Safety /
   Outcome labels. This made three levels of card visible at once. The
   child row is now a true table-row: one compact line per decision
   (icon · action → pod · reason · time · pills), hairline between
   siblings, accent stripe on the left to mirror the outcome, hover
   highlight to make it feel interactive. Second-line extras
   (safety / effect / memory) only appear when narratively required. */
.tf-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 12px 7px 12px;
    border-top: 1px solid var(--tf-border);
    border-left: 2px solid var(--tf-text-muted);
    transition: background 120ms ease;
}
.tf-child:first-child { border-top: none; }
.tf-child:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.tf-child:hover {
    background: rgba(86, 207, 110, 0.04);
    border-left-width: 3px;
    padding-left: 11px;
}

.tf-child-accent-leaf   { border-left-color: var(--tf-leaf); }
.tf-child-accent-tomato { border-left-color: var(--tf-tomato); }
.tf-child-accent-error  { border-left-color: var(--tf-error); }
.tf-child-accent-warn   { border-left-color: var(--tf-warn); }
.tf-child-accent-muted  { border-left-color: var(--tf-text-muted); }

/* The leading glyph is now the ACTION icon (tinted by action-type, see the
   .tf-act-* rules below), not an outcome tick — outcome reads via the accent
   border + the outcome pill. */

/* The actual single-line row: icon + action + (→ pod) + (· reason) + spacer
   + time + pills. flex-wrap stays off so it really reads like a row;
   reason truncates with ellipsis if the screen is narrow. */
.tf-child-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    min-width: 0;
}
.tf-child-icon   { font-size: 14px; flex-shrink: 0; }
.tf-child-action {
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--tf-text);
    font-weight: 700;
    flex-shrink: 0;
}
/* Action-type tint — categorical, so a row's *kind* reads at a glance.
   The action class sits on the row CONTAINER, tinting both the leading action
   icon and the label from the shared --act-* palette (same source the Day
   timeline draws from). Observation / system / other stay muted on purpose
   (passive, high-frequency rows) so the real interventions pop. */
.tf-act-watering    .tf-child-icon, .tf-act-watering    .tf-child-action { color: var(--act-watering); }
.tf-act-ventilation .tf-child-icon, .tf-act-ventilation .tf-child-action { color: var(--act-ventilation); }
.tf-act-lighting    .tf-child-icon, .tf-act-lighting    .tf-child-action { color: var(--act-lighting); }
.tf-act-fertilizing .tf-child-icon, .tf-act-fertilizing .tf-child-action { color: var(--act-fertilizing); }
.tf-act-observation .tf-child-icon, .tf-act-observation .tf-child-action { color: var(--act-observation); }
.tf-act-zaxis       .tf-child-icon, .tf-act-zaxis       .tf-child-action { color: var(--act-default); }
.tf-act-system      .tf-child-icon, .tf-act-system      .tf-child-action { color: var(--act-default); }
.tf-act-other       .tf-child-icon, .tf-act-other       .tf-child-action { color: var(--act-default); }
.tf-child-arrow  { color: var(--tf-text-muted); flex-shrink: 0; }
.tf-child-pod {
    padding: 1px 6px;
    border: 1px solid var(--tf-border);
    border-radius: 3px;
    color: var(--tf-text-soft);
    font-size: 11px;
    flex-shrink: 0;
}
.tf-child-sep {
    color: var(--tf-text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}
.tf-child-reason {
    color: var(--tf-text-soft);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tf-child-spacer { flex: 1; min-width: 8px; }
.tf-child-time {
    color: var(--tf-text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

.tf-child-pill {
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--tf-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid;
    flex-shrink: 0;
}
.tf-child-pill.pill-good  { color: var(--tf-leaf);   border-color: var(--tf-leaf);   background: rgba(86, 207, 110, 0.07); }
.tf-child-pill.pill-watch { color: var(--tf-tomato); border-color: var(--tf-tomato); background: rgba(239, 68, 68, 0.07); }
.tf-child-pill.pill-error { color: var(--tf-error);  border-color: var(--tf-error);  background: rgba(239, 68, 68, 0.07); }
.tf-child-pill.pill-warn  { color: var(--tf-warn);   border-color: var(--tf-warn);   background: rgba(245, 158, 11, 0.08); }
.tf-child-pill.pill-info  { color: var(--tf-text-muted); border-color: var(--tf-border); background: transparent; }

/* Mobile: the child row is a fixed single line on desktop (reason ellipsis-
   truncates). On narrow viewports the time + outcome pills don't fit and ran
   past the card edge — let the row wrap and drop the right-push spacer so the
   pills flow onto a second line instead of overflowing. */
@media (max-width: 620px) {
    .tf-child-row { flex-wrap: wrap; }
    .tf-child-spacer { display: none; }
}

/* Sub-line under the main row: only when safety blocked / effect verified
   / memory captured. Indented to align with the action label, gap-wrapped
   so multiple extras can sit on the same line if there's room. */
.tf-child-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-left: 22px;
    font-size: 12px;
    color: var(--tf-text-muted);
    line-height: 1.45;
}
.tf-child-extra {
    color: var(--tf-text-muted);
}
.tf-child-safety-extra { color: var(--tf-tomato); }
.tf-child-memory-extra { color: var(--tf-text-muted); font-style: italic; }

.tf-group-more {
    padding: 8px 12px;
    border-top: 1px solid var(--tf-border);
    color: var(--tf-text-muted);
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-align: center;
    font-style: italic;
}

.tf-group-empty {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 12px;
    background: var(--tf-bg-soft);
    border: 1px dashed var(--tf-border);
    border-radius: 6px;
    color: var(--tf-text-soft);
    font-style: italic;
    font-size: 13px;
}
.tf-group-empty-icon { font-size: 16px; opacity: 0.7; }

.tf-dec-header {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--tf-mono);
    font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-dec-action { color: var(--tf-text-soft); font-weight: 700; }
.tf-dec-pod {
    padding: 2px 7px;
    border: 1px solid var(--tf-border); border-radius: 4px;
    color: var(--tf-text-soft);
}
.tf-dec-spacer { flex: 1; }

.tf-dec-title {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--tf-text); line-height: 1.35;
}
.tf-dec-summary {
    margin: 0; font-size: 14px; color: var(--tf-text-soft); line-height: 1.55;
}
.tf-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tf-dec-section {
    margin: 12px 0 0; display: flex; flex-direction: column; gap: 4px;
}
.tf-dec-reason, .tf-dec-council, .tf-dec-effect {
    margin: 0; font-size: 14px; color: var(--tf-text); line-height: 1.55;
}
.tf-dec-meta-label {
    font-family: var(--tf-sans);
    font-size: 12px; font-weight: 600;
    color: var(--tf-text-soft);
    display: block;
}
.tf-dec-safety {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 14px; color: var(--tf-text);
}
.tf-dec-safety-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tf-dec-safety-text { line-height: 1.55; }

.tf-dec-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px; margin-top: 4px;
}
.tf-dec-context-item {
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.tf-dec-context-label {
    font-family: var(--tf-mono); font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-dec-context-source {
    margin-left: 4px; color: var(--tf-text-soft);
    text-transform: none; letter-spacing: 0;
}
.tf-dec-context-current { display: flex; align-items: baseline; gap: 4px; }
.tf-dec-context-num  { font-size: 18px; font-weight: 700; color: var(--tf-text); }
.tf-dec-context-unit { font-size: 12px; color: var(--tf-text-soft); }
.tf-dec-context-earlier {
    font-size: 11px; color: var(--tf-text-muted);
    font-family: var(--tf-mono);
}
.tf-dec-context-trend {
    font-size: 11px; font-family: var(--tf-mono);
    align-self: flex-start;
    padding: 1px 6px; border-radius: 3px;
    margin-top: 2px;
}
.tf-dec-context-trend.up   { color: #fca5a5; background: #ef444422; }
.tf-dec-context-trend.down { color: #67e8f9; background: #06b6d422; }
.tf-dec-context-trend.flat { color: var(--tf-text-muted); background: transparent; }

.tf-dec-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--tf-mono); font-size: 11px;
    color: var(--tf-text-muted);
}

/* ---------- Memory page ("What the farm remembers") ---------- */
.tf-mem-disclaimer {
    margin: 0 0 18px;
    font-size: 13px; line-height: 1.6;
    color: var(--tf-text-soft);
    border-left: 3px solid var(--tf-border);
    padding: 8px 14px;
    background: var(--tf-bg-soft);
    border-radius: 0 6px 6px 0;
}
.tf-mem-heading {
    margin: 0 0 12px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--tf-text-muted);
    font-family: var(--tf-mono);
}
.tf-mem-heading-spaced { margin-top: 34px; }

.tf-mem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.tf-mem-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}

/* --- State bands: full-width section headers inside the grid (preview) --- */
.tf-mem-band {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 0;
    font-family: var(--tf-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
}
.tf-mem-band:first-child { margin-top: 0; }
.tf-mem-band-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tf-mem-band-count { color: var(--tf-text-muted); font-weight: 600; }
.tf-mem-band-good        { color: var(--tf-leaf); }
.tf-mem-band-watch       { color: var(--tf-warn); }
.tf-mem-band-risk        { color: var(--tf-error); }
.tf-mem-band-ineffective { color: #ada377; }
.tf-mem-band-learning    { color: var(--tf-sky); }

/* State-coloured left border — verdict now drives the border; pod identity
   lives on the headline icon. (Preview: replaces the pod-colour border.) */
.tf-mem-card-good        { border-left-color: var(--tf-leaf); }
.tf-mem-card-watch       { border-left-color: var(--tf-warn); }
.tf-mem-card-risk        { border-left-color: var(--tf-error); }
.tf-mem-card-ineffective { border-left-color: #ada377; }
.tf-mem-card-learning    { border-left-color: var(--tf-sky); }

/* --- Stat-tile card internals (preview: hero rate + bar + pips) --------- */
.tf-mem-condition-pill {
    align-self: flex-start;
    font-family: var(--tf-mono);
    font-size: 11px; color: var(--tf-text-soft);
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-radius: 999px;
    padding: 2px 9px;
}
.tf-mem-hero { display: flex; align-items: baseline; gap: 8px; }
.tf-mem-pct {
    font-family: var(--tf-mono); font-weight: 700;
    font-size: 30px; line-height: 1; color: var(--tf-text);
}
.tf-mem-pct-sign { font-size: 15px; }
.tf-mem-pct-dim  { color: var(--tf-text-muted); }
.tf-mem-hero-sub { font-size: 11px; color: var(--tf-text-soft); }
.tf-mem-bar {
    height: 5px; background: var(--tf-border);
    border-radius: 3px; overflow: hidden;
}
.tf-mem-bar-fill { height: 100%; background: var(--tf-text-muted); border-radius: 3px; }
.tf-mem-foot2 {
    display: flex; align-items: center; gap: 13px;
    font-family: var(--tf-mono); font-size: 11px; color: var(--tf-text-soft);
}
.tf-mem-conf { display: inline-flex; align-items: center; gap: 6px; }
.tf-mem-conf-label { color: var(--tf-text-soft); }
.tf-mem-pips { display: inline-flex; gap: 3px; }
.tf-mem-pip { width: 6px; height: 6px; border-radius: 50%; background: #2b314a; }
.tf-mem-delta { display: inline-flex; align-items: center; gap: 3px; color: var(--tf-text-soft); }
.tf-mem-delta-none { color: var(--tf-text-muted); }
.tf-mem-foot-time { margin-left: auto; color: var(--tf-text-muted); }

.tf-mem-card-good .tf-mem-pct        { color: var(--tf-leaf); }
.tf-mem-card-good .tf-mem-bar-fill   { background: var(--tf-leaf); }
.tf-mem-card-good .tf-mem-pip.is-on  { background: var(--tf-leaf); }
.tf-mem-card-watch .tf-mem-pct       { color: var(--tf-warn); }
.tf-mem-card-watch .tf-mem-bar-fill  { background: var(--tf-warn); }
.tf-mem-card-watch .tf-mem-pip.is-on { background: var(--tf-warn); }
.tf-mem-card-risk .tf-mem-pct        { color: var(--tf-error); }
.tf-mem-card-risk .tf-mem-bar-fill   { background: var(--tf-error); }
.tf-mem-card-risk .tf-mem-pip.is-on  { background: var(--tf-error); }
.tf-mem-card-ineffective .tf-mem-pct       { color: #ada377; }
.tf-mem-card-ineffective .tf-mem-bar-fill  { background: #ada377; }
.tf-mem-card-ineffective .tf-mem-pip.is-on { background: #ada377; }
.tf-mem-card-learning .tf-mem-pip.is-on    { background: var(--tf-sky); }

/* --- Editorial hero (preview) ------------------------------------------ */
.tf-mem-hero-feature {
    margin: 2px 0 24px;
    padding: 18px 20px;
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-leaf);
    border-radius: 8px;
}
.tf-mem-hero-eyebrow {
    font-family: var(--tf-mono);
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--tf-text-soft); margin-bottom: 8px;
}
.tf-mem-hero-good        { border-left-color: var(--tf-leaf); }
.tf-mem-hero-good        .tf-mem-hero-eyebrow { color: var(--tf-leaf); }
.tf-mem-hero-watch       { border-left-color: var(--tf-warn); }
.tf-mem-hero-watch       .tf-mem-hero-eyebrow { color: var(--tf-warn); }
.tf-mem-hero-risk        { border-left-color: var(--tf-error); }
.tf-mem-hero-risk        .tf-mem-hero-eyebrow { color: var(--tf-error); }
.tf-mem-hero-ineffective { border-left-color: #ada377; }
.tf-mem-hero-ineffective .tf-mem-hero-eyebrow { color: #ada377; }
.tf-mem-hero-learning    { border-left-color: var(--tf-sky); }
.tf-mem-hero-learning    .tf-mem-hero-eyebrow { color: var(--tf-sky); }
.tf-mem-hero-headline {
    font-size: 19px; line-height: 1.45; color: var(--tf-text); font-weight: 600;
    max-width: 760px;
}
/* Header — plant·action·metric headline on the left, state badge on the right. */
.tf-mem-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
}
.tf-mem-headline {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--tf-mono);
}

/* State badge — identity lives on the card border, the verdict lives here. */
.tf-mem-badge {
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0;
    padding: 3px 9px; border-radius: 999px;
    font-family: var(--tf-mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.tf-mem-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.tf-mem-badge-learning { color: var(--tf-sky);   background: rgba(95, 168, 211, 0.14); }
.tf-mem-badge-good     { color: var(--tf-leaf);  background: rgba(93, 176, 117, 0.14); }
.tf-mem-badge-watch    { color: var(--tf-warn);  background: rgba(245, 185, 69, 0.14); }
.tf-mem-badge-risk     { color: var(--tf-error); background: rgba(239, 83, 80, 0.14); }
/* "ineffective": reliably does ~nothing — yellow-grey, deliberately NOT red. */
.tf-mem-badge-ineffective { color: #ada377; background: rgba(173, 163, 119, 0.13); }
.tf-mem-badge-success  { color: var(--tf-leaf);  background: rgba(93, 176, 117, 0.14); }
.tf-mem-badge-bad      { color: var(--tf-error); background: rgba(239, 83, 80, 0.14); }
.tf-mem-badge-muted    { color: var(--tf-text-soft); background: rgba(136, 146, 168, 0.10); }
.tf-mem-plant {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tf-text); font-weight: 700;
    font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
}
.tf-mem-plant-icon { display: inline-flex; flex-shrink: 0; }
.tf-mem-sub  { color: var(--tf-text-soft); font-size: 11px; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }
.tf-mem-dot  { color: var(--tf-text-muted); }

.tf-mem-condition {
    font-size: 14px; color: var(--tf-text); line-height: 1.5;
}
.tf-mem-stats {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    font-size: 13px;
}
.tf-mem-stat { display: flex; align-items: baseline; gap: 5px; }
.tf-mem-stat-label {
    font-size: 11px; color: var(--tf-text-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.tf-mem-stat-value { color: var(--tf-text); font-weight: 600; }

/* Memory-state block — its own row; the phrase runs longer than a chip. */
.tf-mem-state { display: flex; flex-direction: column; gap: 3px; }

.tf-mem-card-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px; padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--tf-mono); font-size: 11px;
    color: var(--tf-text-muted);
}
.tf-mem-spacer { flex: 1; }

.tf-mem-effects {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--tf-border);
    border-radius: 8px; overflow: hidden;
}
.tf-mem-effect {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px;
    padding: 9px 14px;
    font-size: 13px; color: var(--tf-text-soft);
    background: var(--tf-card);
}
.tf-mem-effect:nth-child(even) { background: var(--tf-bg-soft); }
.tf-mem-effect-time {
    font-family: var(--tf-mono); font-size: 11px;
    color: var(--tf-text-muted); min-width: 64px;
}
.tf-mem-effect-plant  { color: var(--tf-text); font-weight: 600; }
.tf-mem-pdot {
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.tf-mem-effect-metric { color: var(--tf-text-soft); }
.tf-mem-effect-move {
    font-family: var(--tf-mono); color: var(--tf-text);
}
.tf-mem-effect-delta {
    font-family: var(--tf-mono); color: var(--tf-text-muted);
}

/* ---------- AI Summaries (Council page) ---------- */
.tf-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.tf-summary {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 8px;
}
.tf-summary-daily       { border-left-color: var(--tf-leaf); }
.tf-summary-council     { border-left-color: var(--tf-purple); }
.tf-summary-observation { border-left-color: var(--tf-sky); }
.tf-summary-weekly      { border-left-color: var(--tf-tomato); }
.tf-summary-system      { border-left-color: var(--tf-warn); }
.tf-summary-general     { border-left-color: var(--tf-text-muted); }

.tf-summary-head {
    display: flex; align-items: baseline;
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 1.2px; color: var(--tf-text-muted);
    text-transform: uppercase;
}
.tf-summary-type { color: var(--tf-text-soft); font-weight: 700; }
.tf-summary-spacer { flex: 1; }
.tf-summary-when {
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 0.6px; text-transform: none;
}
.tf-summary-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--tf-text); line-height: 1.4; }
.tf-summary-summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tf-text-soft); }
.tf-summary-details summary {
    cursor: pointer;
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--tf-tomato);
    list-style: none;
    padding: 6px 0;
}
.tf-summary-details summary::-webkit-details-marker { display: none; }
.tf-summary-details summary:hover { color: #ff8366; }
.tf-summary-body {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--tf-bg);
    border-radius: 6px;
    font-size: 13px;
    color: var(--tf-text);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ---------- Plant Diary entries ---------- */
.tf-diary-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tf-diary {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 10px;
    overflow: hidden;
}
.tf-diary-good     { border-left-color: var(--tf-leaf); }
.tf-diary-watch    { border-left-color: var(--tf-warn); }
.tf-diary-thirsty  { border-left-color: var(--tf-sky); }
.tf-diary-stressed { border-left-color: var(--tf-error); }
.tf-diary-unknown  { border-left-color: var(--tf-text-muted); }

.tf-diary-photo {
    aspect-ratio: 1 / 1;
    background: #0a0d14;
    overflow: hidden;
    position: relative;
}
.tf-diary-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-diary-photo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; opacity: 0.4;
}

.tf-diary-body {
    padding: 24px 26px;
    display: flex; flex-direction: column;
    gap: 14px;
}

.tf-diary-header { display: flex; flex-direction: column; gap: 4px; }
.tf-diary-eyebrow {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 1px; color: var(--tf-text-muted);
}
.tf-diary-pos {
    background: var(--tf-bg);
    border: 1px solid var(--tf-border);
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 700; color: var(--tf-text-soft);
}
.tf-diary-pod-id { color: var(--tf-text-muted); }
.tf-diary-spacer { flex: 1; }
.tf-diary-name {
    margin: 6px 0 0;
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.5px; color: var(--tf-text);
    display: flex; align-items: baseline; gap: 8px;
}
.tf-diary-emoji { font-size: 22px; }
.tf-diary-archetype {
    color: var(--tf-text-soft);
    font-size: 14px;
}
.tf-diary-mood {
    font-family: var(--tf-mono);
    font-size: 11px;
    color: var(--tf-text-muted);
    margin-left: 4px;
}

.tf-diary-voice {
    margin: 4px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--tf-tomato);
    background: rgba(255, 107, 74, 0.06);
    font-size: 16px; line-height: 1.55;
    color: var(--tf-text);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}
.tf-diary-voice-dim {
    color: var(--tf-text-muted);
    border-left-color: var(--tf-text-muted);
    background: transparent;
}

.tf-diary-footer {
    display: flex; flex-wrap: wrap;
    gap: 12px 18px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 13px;
    color: var(--tf-text-soft);
}
.tf-diary-meta strong { color: var(--tf-text); font-weight: 600; }
.tf-diary-meta-dim { color: var(--tf-text-muted); }

@media (max-width: 720px) {
    .tf-diary {
        grid-template-columns: 1fr;
    }
    .tf-diary-photo {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Wiring power rails ---------- */
.tf-wiring-rails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 18px 0;
}
.tf-rail {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.tf-rail-volts {
    font-family: var(--tf-mono);
    font-size: 22px; font-weight: 700;
    color: var(--tf-text);
    line-height: 1;
}
.tf-rail-volts small { font-size: 14px; color: var(--tf-text-muted); }
.tf-rail-label {
    font-size: 13px; color: var(--tf-text-soft); line-height: 1.45;
}
.tf-rail-230 { border-left-color: var(--tf-error); }
.tf-rail-24  { border-left-color: var(--tf-tomato); }
.tf-rail-12  { border-left-color: var(--tf-warn); }
.tf-rail-5   { border-left-color: var(--tf-leaf); }
.tf-rail-33  { border-left-color: var(--tf-sky); }

/* ---------- Prose list (used in safety bullets etc.) ---------- */
.tf-prose-list {
    margin: 12px 0;
    padding: 0;
    list-style: none;
}
.tf-prose-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    color: var(--tf-text);
    font-size: 15px;
    line-height: 1.55;
}
.tf-prose-list li::before {
    content: "▸";
    position: absolute; left: 0;
    color: var(--tf-tomato);
}

/* ---------- Crew page (rich port from internal /docs/crew) ---------- */
/* back-nav now shared via DocsBackLink/DocsBottomNav (.docs-back* above) */

.tf-crew-hero {
    display: flex; justify-content: center;
    margin: 12px 0 32px;
}
.tf-crew-hero img {
    width: 250px; height: 250px;
    object-fit: contain;
    border-radius: 57px;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

/* Wide crew hero — switch from square badge to landscape AI-polished
   poster. Caps at the container width and keeps a soft glow + rounded
   corners so it sits in the same visual register as the pagehead
   backdrops on the other pages. */
.tf-crew-hero-wide img {
    width: 100%;
    max-width: 880px;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.12);
}

.tf-crew-head { margin-bottom: 24px; }
.tf-crew-eyebrow {
    font-family: var(--tf-mono); font-size: 10px;
    letter-spacing: 2px; color: var(--tf-text-muted);
    display: block; margin-bottom: 12px;
}
.tf-crew-title {
    font-size: 48px; font-weight: 800;
    letter-spacing: -0.8px; margin: 0 0 8px;
    color: var(--tf-text);
}
.tf-crew-subtitle {
    color: #fda4af; font-style: italic;
    font-size: 18px; margin: 0;
}

.tf-crew-shape {
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-left: 3px solid #f43f5e;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 32px;
}
.tf-crew-shape-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #fda4af;
    margin-bottom: 12px;
}
.tf-crew-shape p {
    font-size: 15px; line-height: 1.65;
    color: var(--tf-text); margin: 0 0 12px;
}
.tf-crew-shape p.dim {
    color: var(--tf-text-soft);
    font-size: 14px; margin-bottom: 0;
}

.tf-crew-section-title {
    font-size: 22px; font-weight: 700;
    color: var(--tf-text);
    margin: 36px 0 8px;
    letter-spacing: -0.3px;
}
.tf-crew-section-lead {
    color: var(--tf-text-soft); font-size: 14px;
    line-height: 1.6; margin: 0 0 16px;
}

.tf-crew-thesis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; margin: 12px 0 20px;
}
.tf-crew-thesis-quote {
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    padding: 18px 20px 16px;
    position: relative;
}
.tf-crew-quote-mark {
    font-family: 'Georgia', serif;
    font-size: 56px; font-weight: 700;
    color: rgba(244, 63, 94, 0.27);
    position: absolute; top: -4px; left: 12px;
    line-height: 1;
}
.tf-crew-thesis-quote p {
    font-size: 14px; line-height: 1.55;
    color: var(--tf-text);
    margin: 16px 0 8px; font-style: italic;
}
.tf-crew-quote-source {
    font-family: var(--tf-mono); font-size: 11px;
    color: #fda4af; letter-spacing: 0.5px;
}

.tf-crew-insight {
    font-size: 13.5px; font-style: italic;
    color: #8892a8; text-align: center;
    max-width: 640px; margin: 18px auto 28px;
    padding: 14px 22px;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    background: var(--tf-bg-soft);
    line-height: 1.6;
    text-wrap: balance;
}

.tf-crew-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin: 16px 0 32px;
}
/* Breakpoints raised: at 1100px / 700px the tile padding + content
   left the grid tracks too narrow to look right. 1100 → 2col still
   ok but 900 → 2col reads cleaner. Below 720px we collapse to a
   single column for sure. */
@media (max-width: 1100px) { .tf-crew-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .tf-crew-tile-grid { grid-template-columns: 1fr !important; } }

.tf-crew-tile {
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--accent, #f43f5e);
    border-radius: 10px;
    padding: 20px 22px 18px;
    /* Lets the grid track actually shrink below the tile's natural
       intrinsic width — without min-width:0, long unbroken words
       (model names, mono-spaced "Brainstorming · system thinking")
       blow the grid out and produce horizontal overflow. */
    min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color 0.15s, transform 0.15s;
}
.tf-crew-tile:hover {
    border-color: var(--accent, #f43f5e);
    transform: translateY(-1px);
}

.tf-crew-tile-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.tf-crew-logo {
    width: 56px; height: 56px;
    border: 1px solid var(--tf-border); border-radius: 12px;
    background: var(--tf-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: clip;
}
.tf-crew-logo img {
    width: 38px; height: 38px;
    object-fit: contain; display: block;
}
.tf-crew-logo-invert { filter: invert(1) brightness(0.96); }
.tf-crew-tile.tf-crew-captain .tf-crew-logo img { width: 114px; height: 114px; }

.tf-crew-vendor {
    font-family: var(--tf-mono); font-size: 9px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-crew-tile-name {
    font-size: 18px; font-weight: 700;
    color: var(--tf-text); margin: 6px 0 0; line-height: 1.2;
}
.tf-crew-tile-role {
    font-family: var(--tf-mono); font-size: 10px;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--accent, #f43f5e); margin-bottom: 8px;
}
.tf-crew-tile-quote {
    margin: 0; padding: 0 0 0 12px;
    border-left: 2px solid var(--tf-border);
    font-size: 13px; line-height: 1.55;
    color: #cbd5e1; font-style: italic;
    /* Same defence as on the tile itself — without this, the rare
       long quote without natural breakpoints would push the column
       wider than its track. */
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
}
.tf-crew-tile:hover .tf-crew-tile-quote {
    border-left-color: var(--accent, #f43f5e);
}
.tf-crew-captain-quote {
    font-size: 14px; color: #fed7aa; font-weight: 500;
}
.tf-crew-captain-body {
    font-size: 13px; line-height: 1.55; color: #cbd5e1;
    margin: 4px 0; font-style: normal;
}
.tf-crew-tile-lane {
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed var(--tf-border);
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px;
}
.tf-crew-tile-lane-label {
    font-family: var(--tf-mono); font-size: 9px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-crew-tile-lane > span:last-child { color: #cbd5e1; line-height: 1.5; }
.tf-crew-tile-meta {
    font-size: 11px; color: var(--tf-text-soft);
    margin-top: 2px;
}

.tf-crew-reality {
    background: linear-gradient(135deg, var(--tf-bg-soft) 0%, #1a0a0e 100%);
    border: 1px solid rgba(244, 63, 94, 0.27);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 16px 0 12px;
    text-align: center;
}
.tf-crew-reality-line {
    font-size: 17px; font-weight: 600;
    color: var(--tf-text);
    margin: 4px 0; line-height: 1.5;
}
.tf-crew-reality-mission {
    font-family: var(--tf-mono); font-size: 14px;
    color: #fda4af; margin: 16px 0 0;
    letter-spacing: 0.5px;
}
.tf-crew-reality-mission em { color: #fed7aa; font-style: italic; }

.tf-crew-footer {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--tf-border);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.tf-crew-footer-section { display: flex; flex-direction: column; gap: 6px; }
.tf-crew-footer-label {
    font-family: var(--tf-mono); font-size: 9px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-crew-footer-link {
    font-family: var(--tf-mono);
    color: #b794f4; text-decoration: none;
    border-bottom: 1px dotted #b794f466;
}
.tf-crew-footer-link:hover { color: #c4a8f7; text-decoration: none !important; }
.tf-crew-footer-sep { font-family: var(--tf-mono); color: var(--tf-text-soft); }
.tf-crew-footer-value { font-family: var(--tf-mono); color: var(--tf-text-soft); }

/* OLD 4-card crew (legacy) — kept harmless so build does not warn */
.tf-crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 24px 0;
}
.tf-crew-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 22px;
    display: flex; flex-direction: column; gap: 6px;
}
.tf-crew-human   { border-left-color: var(--tf-tomato); }
.tf-crew-claude  { border-left-color: var(--tf-leaf); }
.tf-crew-chatty  { border-left-color: var(--tf-sky); }
.tf-crew-council { border-left-color: var(--tf-purple); }
.tf-crew-emoji { font-size: 36px; line-height: 1; margin-bottom: 4px; }
.tf-crew-name {
    margin: 0;
    font-size: 22px; font-weight: 800; color: var(--tf-text);
    letter-spacing: -0.3px;
}
.tf-crew-role {
    font-family: var(--tf-mono);
    font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--tf-text-soft);
    margin-bottom: 6px;
}
.tf-crew-bio {
    font-size: 14px; line-height: 1.55; color: var(--tf-text);
    margin: 0;
}

/* ---------- Docs Hub (lane structure, ported from internal) ---------- */
.tf-docs-lane { margin-bottom: 36px; }
.tf-docs-lane:last-of-type { margin-bottom: 16px; }

.tf-docs-lane-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tf-border);
}
.tf-docs-lane-eyebrow {
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 2.4px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
.tf-docs-lane-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tf-text-soft);
    margin: 0;
    max-width: 720px;
}

.tf-docs-grid {
    /*
        The hub now runs at full .tf-main width (1600px). auto-fit + minmax
        keeps ~3 cards per lane on one comfortable row and wraps gracefully
        on narrower viewports.
    */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Doc CONTENT pages (/docs/<slug>) render their hero via MudBlazor typography
   (Typo.h3 / Typo.h6 = Roboto 48 / 20px), which read bigger and off-font next
   to the rest of the site. Pull the title + tagline onto the site scale + Inter
   so /docs/* matches .tf-pagehead-title / -subtitle. Scoped to the shared docs
   header pattern: eyebrow -> title (h3) -> tagline (h6). */
.docs-eyebrow + h3 {
    font-family: var(--tf-sans) !important;
    font-size: 36px !important;
}
.docs-eyebrow + h3 + h6 {
    font-family: var(--tf-sans) !important;
    font-size: 16px !important;
}

.tf-doc-card {
    background: var(--tf-bg-soft);
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}
.tf-doc-card:hover {
    border-color: var(--tf-leaf);
    background: var(--tf-card);
    transform: translateY(-1px);
}
.tf-doc-card-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.tf-doc-card-body { flex: 1; min-width: 0; }
.tf-doc-card-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tf-text);
    margin: 0 0 4px;
}
.tf-doc-card-body p {
    font-size: 13px;
    color: var(--tf-text-soft);
    line-height: 1.5;
    margin: 0 0 8px;
}
.tf-doc-card-meta {
    font-family: var(--tf-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--tf-text-muted);
    text-transform: uppercase;
}
.tf-doc-card-arrow {
    font-family: var(--tf-mono);
    font-size: 20px;
    color: var(--tf-text-muted);
    transition: color 0.15s, transform 0.15s;
}
.tf-doc-card:hover .tf-doc-card-arrow {
    color: var(--tf-leaf);
    transform: translateX(2px);
}

.tf-docs-footnote {
    margin-top: 32px;
    padding: 16px 20px;
    border-top: 1px solid var(--tf-border);
    font-size: 12px;
    color: var(--tf-text-muted);
}
.tf-docs-footnote .mono { color: var(--tf-text-soft); }

/* ---------- Modules ---------- */
.tf-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.tf-mod-card {
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--m-color, var(--tf-text-muted)) 9%, var(--tf-card)) 0%,
            var(--tf-card) 60%);
    border: 1px solid color-mix(in srgb, var(--m-color, var(--tf-text-muted)) 18%, var(--tf-border));
    border-radius: 12px;
    padding: 16px 18px 14px;
    text-decoration: none !important;
    color: inherit;
    display: flex; flex-direction: column; gap: 7px;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.tf-mod-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--m-color, var(--tf-text-muted)) 50%, var(--tf-border));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px color-mix(in srgb, var(--m-color, #000) 22%, rgba(0, 0, 0, 0.35));
}
.tf-mod-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: var(--m-color, var(--tf-text-muted));
    background: color-mix(in srgb, var(--m-color, var(--tf-text-muted)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--m-color, var(--tf-text-muted)) 28%, transparent);
}
.tf-mod-name { font-size: 16px; font-weight: 700; color: var(--tf-text); }
.tf-mod-desc { font-size: 13px; color: var(--tf-text-soft); line-height: 1.5; }
.tf-mod-arrow {
    position: absolute; top: 25px; right: 18px;
    font-family: var(--tf-mono); font-size: 16px; color: var(--tf-text-muted);
    transition: transform 160ms ease, color 160ms ease;
}
.tf-mod-card:hover .tf-mod-arrow { transform: translateX(3px); color: var(--tf-text); }

.tf-mod-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.tf-mod-list {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    padding: 18px 22px;
}
.tf-mod-list-title {
    font-size: 13px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--tf-text-soft);
    margin: 0 0 12px;
    display: flex; align-items: center; gap: 7px;
}
.tf-mod-list ul {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
}
.tf-mod-list li {
    font-size: 14px; color: var(--tf-text);
    padding-left: 14px; position: relative;
}
.tf-mod-list li::before {
    content: "▸";
    position: absolute; left: 0;
    color: var(--tf-text-muted);
}

.tf-mod-parts {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}
.tf-mod-parts li {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: var(--tf-mono);
    font-size: 13px;
    color: var(--tf-text);
}

.tf-pagehead-back {
    color: var(--tf-text-muted) !important;
    text-decoration: none !important;
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1px;
}
.tf-pagehead-back:hover { color: var(--tf-text-soft) !important; }

/* ---------- Architecture flow + cards ---------- */
.tf-flow {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.tf-flow-step {
    flex: 1; min-width: 130px;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-top: 3px solid var(--tf-text-muted);
    border-radius: 6px;
    padding: 16px 12px;
    text-align: center;
}
.tf-flow-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.tf-flow-label { font-size: 13px; font-weight: 700; color: var(--tf-text); margin-bottom: 2px; }
.tf-flow-sub {
    font-family: var(--tf-mono); font-size: 10px;
    letter-spacing: 0.8px; color: var(--tf-text-muted);
}
.tf-flow-arrow {
    display: flex; align-items: center;
    font-family: var(--tf-mono); font-size: 20px; color: var(--tf-text-muted);
}
.tf-flow-step-leaf   { border-top-color: var(--tf-leaf); }
.tf-flow-step-sky    { border-top-color: var(--tf-sky); }
.tf-flow-step-purple { border-top-color: var(--tf-purple); }
.tf-flow-step-tomato { border-top-color: var(--tf-tomato); }
.tf-flow-step-warn   { border-top-color: var(--tf-warn); }

/* Lucide flow icons inherit currentColor — tint to the step accent. */
.tf-flow-step-leaf   .tf-flow-icon { color: var(--tf-leaf); }
.tf-flow-step-sky    .tf-flow-icon { color: var(--tf-sky); }
.tf-flow-step-purple .tf-flow-icon { color: var(--tf-purple); }
.tf-flow-step-tomato .tf-flow-icon { color: var(--tf-tomato); }
.tf-flow-step-warn   .tf-flow-icon { color: var(--tf-warn); }

/* Mobile: stack vertically + rotate the arrows so they point DOWN
   between tiles. Horizontal arrows next to wrapped tiles read like
   "click me" buttons; rotated → preserves the source markup. */
@media (max-width: 700px) {
    .tf-flow { flex-direction: column; align-items: stretch; }
    .tf-flow-arrow {
        transform: rotate(90deg);
        justify-content: center;
        padding: 6px 0;
    }
}

.tf-council-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.tf-council-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.tf-council-name { font-size: 16px; font-weight: 700; color: var(--tf-text); }
.tf-council-role {
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 0.6px; color: var(--tf-text-soft);
}
.tf-council-company {
    font-family: var(--tf-mono); font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--tf-text-muted);
    margin-top: 6px;
}
.tf-council-card-anthropic { border-left-color: var(--tf-tomato); }
.tf-council-card-openai    { border-left-color: var(--tf-leaf); }
.tf-council-card-mistral   { border-left-color: var(--tf-warn); }
.tf-council-card-gemini    { border-left-color: var(--tf-sky); }

.tf-quote {
    margin: 18px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--tf-leaf);
    background: rgba(93, 176, 117, 0.08);
    font-family: var(--tf-mono);
    font-size: 15px;
    color: var(--tf-text);
    border-radius: 0 6px 6px 0;
}

.tf-trigger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.tf-trigger-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
}
.tf-trigger-prio {
    position: absolute; top: 12px; right: 14px;
    font-family: var(--tf-mono); font-size: 11px; font-weight: 700;
    color: var(--tf-text-muted); letter-spacing: 1px;
}
.tf-trigger-icon { font-size: 24px; line-height: 1; }
.tf-trigger-title { font-size: 15px; font-weight: 700; color: var(--tf-text); }
.tf-trigger-desc { font-size: 13px; color: var(--tf-text-soft); line-height: 1.45; }
.tf-trigger-p1 { border-left-color: var(--tf-error); }
.tf-trigger-p2 { border-left-color: var(--tf-leaf); }
.tf-trigger-p3 { border-left-color: var(--tf-sky); }
.tf-trigger-p4 { border-left-color: var(--tf-purple); }
.tf-trigger-p1 .tf-trigger-icon { color: var(--tf-error); }
.tf-trigger-p2 .tf-trigger-icon { color: var(--tf-leaf); }
.tf-trigger-p3 .tf-trigger-icon { color: var(--tf-sky); }
.tf-trigger-p4 .tf-trigger-icon { color: var(--tf-purple); }

/* ---------- Learn-Loop (reuses .tf-flow) ---------- */
/* The "anatomy of a learning agent" beat is a .tf-flow whose arrows are
   + + + = instead of →. Keep those upright on mobile (a rotated "=" reads
   as "||") and give the result tile a faint highlight. */
.tf-flow-step-result {
    background: color-mix(in srgb, var(--tf-warn) 8%, var(--tf-card));
    border-color: color-mix(in srgb, var(--tf-warn) 50%, var(--tf-border));
}
@media (max-width: 700px) {
    .tf-flow-learn .tf-flow-arrow { transform: none; }
}

/* ---------- Stat Grid (Architecture · "Right now, in numbers") ---------- */
.tf-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.tf-stat-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--m-color, var(--tf-text-muted));
    border-radius: 8px;
    padding: 20px;
}
.tf-stat-number {
    font-family: var(--tf-mono);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: var(--tf-text);
}
.tf-stat-label {
    font-family: var(--tf-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--m-color, var(--tf-text-muted));
    margin-top: 8px;
}

/* ---------- Photo Row (3-up trio, square crop) ---------- */
.tf-photo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.tf-photo {
    margin: 0;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--tf-card);
}
.tf-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}
.tf-photo figcaption {
    font-family: var(--tf-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--tf-text-soft);
    padding: 10px 12px;
    border-top: 1px solid var(--tf-border);
}
@media (max-width: 720px) {
    .tf-photo-row { grid-template-columns: 1fr; }
}

/* ---------- Filmstrip (small photo pairs, woven between sections) ---------- */
.tf-filmstrip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1040px;
    margin: 34px auto 38px auto;
}
.tf-filmstrip figure {
    margin: 0;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--tf-card);
}
.tf-filmstrip img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}
.tf-filmstrip figcaption {
    font-family: var(--tf-mono);
    font-size: 10px;
    line-height: 1.45;
    color: var(--tf-text-soft);
    padding: 7px 10px;
    border-top: 1px solid var(--tf-border);
}
@media (max-width: 900px) {
    .tf-filmstrip { grid-template-columns: 1fr 1fr; max-width: 600px; }
}
@media (max-width: 640px) {
    .tf-filmstrip { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- Verdict Grid (Architecture · Safety) ---------- */
.tf-verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.tf-verdict-card {
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.tf-verdict-icon { font-size: 24px; line-height: 1; margin-bottom: 8px; }
.tf-verdict-name {
    font-size: 14px; font-weight: 700;
    color: var(--tf-text); margin-bottom: 4px;
}
.tf-verdict-sub { font-size: 12px; color: var(--tf-text-soft); line-height: 1.5; }
.tf-verdict-allowed { border-left-color: var(--tf-leaf); }
.tf-verdict-allowed .tf-verdict-name { color: var(--tf-leaf); }
.tf-verdict-allowed .tf-verdict-icon { color: var(--tf-leaf); }
.tf-verdict-clamp   { border-left-color: var(--tf-sky); }
.tf-verdict-clamp .tf-verdict-name { color: var(--tf-sky); }
.tf-verdict-clamp .tf-verdict-icon { color: var(--tf-sky); }
.tf-verdict-force   { border-left-color: var(--tf-warn); }
.tf-verdict-force .tf-verdict-name { color: var(--tf-warn); }
.tf-verdict-force .tf-verdict-icon { color: var(--tf-warn); }
.tf-verdict-blocked { border-left-color: var(--tf-error); }
.tf-verdict-blocked .tf-verdict-name { color: var(--tf-error); }
.tf-verdict-blocked .tf-verdict-icon { color: var(--tf-error); }
.tf-verdict-denied  { border-left-color: var(--tf-tomato); }
.tf-verdict-denied .tf-verdict-name { color: var(--tf-tomato); }
.tf-verdict-denied .tf-verdict-icon { color: var(--tf-tomato); }

/* ---------- Timeline (Alerts) ---------- */
.tf-timeline {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 12px;
}
.tf-tl-item {
    display: flex; gap: 14px;
    padding: 16px 18px;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--tf-text-muted);
    border-radius: 8px;
}
.tf-tl-info   { border-left-color: var(--tf-sky); }
.tf-tl-notice { border-left-color: var(--tf-warn); }
.tf-tl-warn   { border-left-color: var(--tf-error); }

.tf-tl-marker {
    font-size: 22px; line-height: 1;
    width: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.tf-tl-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tf-tl-header {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--tf-mono); font-size: 11px;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--tf-text-muted);
}
.tf-tl-type { color: var(--tf-text-soft); font-weight: 700; }
.tf-tl-pod {
    padding: 2px 7px;
    border: 1px solid var(--tf-border); border-radius: 4px;
}
.tf-tl-spacer { flex: 1; }
.tf-tl-when { letter-spacing: 0.6px; text-transform: none; font-size: 11px; }
.tf-tl-title { font-size: 14px; color: var(--tf-text); font-weight: 600; line-height: 1.45; }
.tf-tl-summary { font-size: 13px; color: var(--tf-text-soft); line-height: 1.5; }

/* ---------- Coming-Soon placeholder ---------- */
.tf-coming-soon {
    padding: 60px 32px;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-radius: 12px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.tf-coming-soon-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.8; }
.tf-coming-soon-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    color: var(--tf-text);
}
.tf-coming-soon-body {
    color: var(--tf-text-soft);
    margin: 0 0 24px;
    line-height: 1.55;
}
.tf-coming-soon-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ---------- Legal pages ---------- */
.tf-legal { max-width: 720px; }
.tf-legal h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}
.tf-legal-h2 {
    font-family: var(--tf-mono);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--tf-text-soft);
    margin: 32px 0 12px;
}
.tf-legal-note { color: var(--tf-text-soft); }

/* ---------- Not found ---------- */
.tf-notfound {
    text-align: center;
    padding: 80px 20px;
}
.tf-notfound h1 {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px;
}
.tf-notfound p {
    color: var(--tf-text-soft);
    margin: 0 0 24px;
}

/* ---------- Blazor loader ---------- */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}
.loading-progress circle {
    fill: none;
    stroke: var(--tf-border);
    stroke-width: 0.4rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    /*
        Matches the primary CTA leaf-green. The loader sits next to the
        wordmark on first paint — orange here was an old leftover from
        before we moved the primary action to green; one accent colour
        per role keeps the system honest.
    */
    stroke: #22c55e;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0;
    color: var(--tf-text-soft);
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    background: var(--tf-error);
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   MudBlazor overrides — pin Cards + Paper to our card token so
   MudBlazor's slightly-too-light default surface doesn't fight
   the dark farm theme. Matches the internal Web look (which
   uses the same trick globally).
   ============================================================ */
.mud-card,
.mud-paper {
    background: var(--tf-card) !important;
    border: 1px solid var(--tf-border);
}
.mud-card-content { background: transparent !important; }
.mud-divider      { border-color: var(--tf-border) !important; }

/* ============================================================
   FocusOnNavigate cosmetic patch — Blazor's A11y router puts
   `tabindex="-1"` on the page's <h1> and focuses it on every
   navigation so screen-readers announce the new page. Browsers
   render a default outline on that focus, which on the hero
   title looks like an unwanted box.

   We hide the outline for programmatic focus (mouse / nav) and
   keep it for real keyboard navigation via :focus-visible —
   keyboard users still get a visible cursor when they Tab
   somewhere.
   ============================================================ */
:focus { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* Real keyboard navigation still gets a clear indicator. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   Journey page — "How we built this".

   Each phase is a tf-section with a left accent stripe + small
   timeline dot, a meta row (date + subtitle), the headline,
   the image block (hero on top + strip of small ones below),
   and the story paragraph underneath.

   Style intent: dezent, dark, thin borders, no glow. Same vibe
   as the rest of the site (matches Modules / Architecture / Docs).

   --phase-accent is set inline per phase from JourneyChronicle.
   ============================================================ */
.tf-journey-phase {
    --phase-line: var(--phase-accent, #94a3b8);

    position: relative;
    padding-left: 22px;
    border-left: 2px solid var(--phase-line);
    display: grid;
    grid-template-columns: 1fr 2.33fr;
    grid-template-areas:
        "text  hero"
        "strip strip";
    column-gap: 32px;
    row-gap: 14px;
    align-items: start;
    transition: border-color 0.4s ease;
}

.tf-journey-text  { grid-area: text;  min-width: 0; }
.tf-journey-media { grid-area: hero;  min-width: 0; }
.tf-journey-img-strip { grid-area: strip; }

/* ----- Stepper indicator -----
   Default state (no JS or pre-init): all phases stay in their accent
   colour — no flash, no broken look.

   When the journey-stepper module is loaded, body gets `.js-stepper`
   and we flip into stepper-mode: future phases are dimmed grey, the
   active and passed phases keep their accent colour. JS toggles
   `.tf-journey-phase-active` and `.tf-journey-phase-passed` while
   you scroll. */
.js-stepper .tf-journey-phase {
    --phase-line: #2a2f3a;
}
.js-stepper .tf-journey-phase-active,
.js-stepper .tf-journey-phase-passed {
    --phase-line: var(--phase-accent, #94a3b8);
}

/* The dot itself — visible in stepper-mode only. */
.js-stepper .tf-journey-phase::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #2a2f3a;
    border: 2px solid var(--tf-bg);
    transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.js-stepper .tf-journey-phase-passed::before {
    background: var(--phase-accent, #94a3b8);
}
.js-stepper .tf-journey-phase-active::before {
    background: var(--phase-accent, #94a3b8);
    transform: scale(1.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-accent, #94a3b8) 25%, transparent);
}

.tf-journey-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin-bottom: 6px;
}

.tf-journey-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--phase-accent, #94a3b8);
    font-weight: 600;
}

.tf-journey-subtitle {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
    letter-spacing: 0.04em;
}

.tf-journey-title {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 4px 0 22px 0;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 14px;
}

.tf-journey-icon {
    font-size: 0.85em;
    line-height: 1;
}

/* Image block: hero sits in the right column of the phase grid,
   strip spans the full width below. Strip uses auto-fit so it
   handles any image count from 1 to many. */
.tf-journey-img {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--tf-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tf-journey-img-hero {
    aspect-ratio: 16 / 9;
}

.tf-journey-img-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.tf-journey-img-small {
    aspect-ratio: 4 / 3;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.tf-journey-img-small:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.tf-journey-img-small:active {
    transform: translateY(0);
}

.tf-journey-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slot still has no real image yet — show a subtle placeholder
   instead of a broken-image icon. JS adds this class on <img onerror>. */
.tf-journey-img-missing img { display: none; }
.tf-journey-img-missing::after {
    content: "photo coming";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #4b5563;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tf-journey-story {
    max-width: 68ch;
    color: #d1d5db;
    font-size: 1.02rem;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .tf-journey-phase {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "hero"
            "strip";
        row-gap: 18px;
    }
}

@media (max-width: 720px) {
    .tf-journey-phase {
        padding-left: 16px;
    }
    .tf-journey-img-hero {
        aspect-ratio: 4 / 3;
    }
}

/* Beacon — closing line after the last phase. A slow warm pulse over a
   soft radial glow, so the journey ends on light rather than fading out. */
.tf-journey-outro {
    position: relative;
    padding: 96px 24px 16px;
    margin-top: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.tf-journey-outro::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 320px;
    max-width: 90%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, #f97316 13%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.tf-journey-beacon {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    animation: tf-journey-beacon-pulse 3.6s ease-in-out infinite;
}
@keyframes tf-journey-beacon-pulse {
    0%, 100% {
        opacity: .7;
        box-shadow:
            0 0 0 4px color-mix(in srgb, #f97316 14%, transparent),
            0 0 14px 2px color-mix(in srgb, #f97316 45%, transparent);
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 0 6px color-mix(in srgb, #f97316 20%, transparent),
            0 0 24px 4px color-mix(in srgb, #f97316 65%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tf-journey-beacon { animation: none; }
}
.tf-journey-outro-text {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0;
    font-size: 19px;
    font-style: italic;
    line-height: 1.6;
    color: #c8d0de;
}

.tf-journey-bottom-nav {
    margin: 56px 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tf-journey-totop {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #4a5068;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

.tf-journey-totop:hover { color: #8892a8; }

/* ============================================================
   /journey/days — day-by-day milestone timeline (sibling to
   /journey which tells the phase-level story). Rows tinted by
   the linked phase (or kind fallback).
   ============================================================ */
.tf-days-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--tf-text-muted);
    text-decoration: none;
    margin-bottom: 24px;
}
.tf-days-back:hover { color: var(--tf-text-soft); }

/* Mark Watney quote — opens the chronicle. The whole page is "one problem
   after another, day by day", so the Martian quote literally describes
   the method. English original on purpose — too iconic to translate. */
.tf-days-quote {
    margin: 0 0 40px;
    padding: 22px 28px;
    border-left: 3px solid var(--tf-tomato);
    background: linear-gradient(135deg, var(--tf-card) 0%, #1a1006 100%);
    border-radius: 8px;
}
.tf-days-quote p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
    font-style: italic;
    color: var(--tf-text);
}
.tf-days-quote cite {
    display: block;
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--tf-text-muted);
    font-style: normal;
}
.tf-days-quote cite em {
    color: var(--tf-tomato);
    font-style: italic;
}

.tf-days-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tf-days-row {
    display: grid;
    grid-template-columns: 110px 44px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-left: 3px solid var(--accent, #94a3b8);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tf-days-row:hover {
    background: #161922;
}
.tf-days-day-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.tf-days-day-num {
    font-family: var(--tf-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #cbd5e1);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.tf-days-day-date {
    font-family: var(--tf-mono);
    font-size: 10px;
    color: var(--tf-text-muted);
    letter-spacing: 0.5px;
}
.tf-days-icon {
    font-size: 24px;
    text-align: center;
    line-height: 1;
    color: var(--accent);
}
.tf-days-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tf-days-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tf-text);
    line-height: 1.4;
}
.tf-days-note {
    font-size: 12.5px;
    color: var(--tf-text-muted);
    line-height: 1.4;
}
.tf-days-kind-badge {
    font-family: var(--tf-mono);
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 10px;
    border: 1px solid var(--accent, #2a2e3a);
    color: var(--accent, #8892a8);
    background: transparent;
    white-space: nowrap;
}
.tf-days-kind-milestone .tf-days-row,
.tf-days-row.tf-days-kind-milestone {
    background: linear-gradient(135deg, var(--tf-card) 0%, #1a1006 100%);
}
/* Genesis Day — the capstone card, sown once. Gold frame + soft gold glow
   so it reads as the turn of the page, not just another row. */
.tf-days-row.tf-days-kind-genesis {
    background: linear-gradient(135deg, var(--tf-card) 0%, #1d1604 100%);
    border-color: rgba(251, 191, 36, 0.30);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 8px 30px -12px rgba(251, 191, 36, 0.45);
}
/* Living green sprout against the gold capstone — the only icon that breaks
   from its row accent, on purpose: gold is the day, green is the life in it. */
.tf-days-row.tf-days-kind-genesis .tf-days-icon { color: #4ade80; }
.tf-days-footer {
    margin-top: 32px;
    text-align: center;
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--tf-text-muted);
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .tf-days-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
    }
    .tf-days-day-pill {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
    }
    .tf-days-icon {
        text-align: left;
        font-size: 22px;
    }
    .tf-days-kind-badge {
        justify-self: start;
    }
}

/* Link from /journey's pagehead to /journey/days — sits right under the
   subtitle. Underlined mono link so it reads as a CTA, not as body text.
   align-self prevents it from stretching to full width in the flex-column
   pagehead. */
.tf-journey-days-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-bottom: 2px;
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--tf-tomato);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 107, 74, 0.55);
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}
.tf-journey-days-link:hover {
    color: #ffc4a8;
    border-bottom-color: var(--tf-tomato);
}

/* ============================================================
   Lightbox — clicking any .landing-photo img opens its source
   full-screen on a dimmed backdrop. Click anywhere or press
   Escape to close. Logic lives in wwwroot/js/lightbox.js.
   ============================================================ */
/* Zoom-in affordance for lightbox-enabled photo strips. */
.tf-filmstrip.landing-photo img { cursor: zoom-in; }

/* Same affordance for the doc diagrams + crew hero + generic opt-in, kept in
   sync with LIGHTBOX_SELECTOR in lightbox.js. */
.docs-flow-image,
.mermaid-img,
.tf-crew-hero img,
img.tf-zoomable { cursor: zoom-in; }

/* Floating back-to-top button — global, appears once scrolled past the first
   viewport (the scroll listener in index.html toggles html.tf-scrolled). The
   click is handled by the in-page anchor script (href="#" → smooth scroll). */
.tf-backtotop {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 200;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tf-card, #161922);
    border: 1px solid var(--tf-border, #2a2e3a);
    border-radius: 10px;
    color: var(--tf-text-soft);
    text-decoration: none !important;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
html.tf-scrolled .tf-backtotop { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tf-backtotop:hover { color: var(--tf-text); border-color: var(--tf-tomato); }

/* === Quackbit — the canon rubber duck in the water barrel (ticket #41) ===
   A dezent easter egg at the very bottom of the "How we build" page: a faint, clickable
   hint that unfolds her porthole (a round window into the real barrel water)
   plus a one-liner. Inline in the content flow — no overlay, mobile-safe.
   Pan/zoom the photo with background-position / background-size below. */
.tf-quackbit {
    margin: 2.5rem auto 0.5rem;
    text-align: center;
}
.tf-quackbit-hint {
    background: none; border: 0;
    padding: 0.4rem 0.6rem; border-radius: 8px;
    color: var(--tf-text-soft); opacity: 0.5;
    font-size: 0.82rem; font-style: italic;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.tf-quackbit-hint:hover { opacity: 1; color: var(--tf-text); }
.tf-quackbit.is-open .tf-quackbit-hint { display: none; }

/* Smooth unfold via the grid-rows 0fr->1fr trick (the inner wrapper must clip
   its overflow while the row collapses). */
.tf-quackbit-reveal {
    display: grid; grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.35s ease;
}
.tf-quackbit-reveal > * { overflow: hidden; }
.tf-quackbit.is-open .tf-quackbit-reveal { grid-template-rows: 1fr; opacity: 1; }

.tf-quackbit-inner {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center; gap: 1rem;
    padding-top: 1rem;
}
.tf-quackbit-duck {
    flex: 0 0 auto;
    width: 76px; height: 76px; border-radius: 50%;
    /* Porthole into the real barrel water — background-size = ZOOM,
       background-position = PAN. */
    background-image: url('../img/farm/quackbit.png');
    background-size: 180%;
    background-position: 66% 90%;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 0 14px rgba(0, 0, 0, 0.35);
    animation: tf-quackbit-bob 3.2s ease-in-out infinite;
}
.tf-quackbit-card { text-align: left; max-width: 22rem; }
.tf-quackbit-name { display: block; font-weight: 700; color: var(--tf-text); }
.tf-quackbit-role {
    display: block; margin-bottom: 0.35rem;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--tf-tomato);
}
.tf-quackbit-blurb { margin: 0; font-size: 0.9rem; color: var(--tf-text-soft); }

@keyframes tf-quackbit-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
    .tf-quackbit-duck { animation: none; }
}

.tf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(8, 10, 16, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
    animation: tf-lightbox-fade 0.12s ease-out;
}

.tf-lightbox.is-open { display: flex; }

.tf-lightbox img {
    max-width: 96vw;
    max-height: 94vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}

@keyframes tf-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================================================
   Council Decision Layer — Phase 5c.6 (A1 mockup refactor)
   ============================================================
   Three-box top row (Focus | Verdict | Evidence), 2x2 compact
   ExpertCards, three-box bottom strip (Agreement | Open Questions
   | Next Action), full-width AskBox. Palette narrow: cyan + lila
   + gold + slate. Member accents are subtle border strips +
   avatar tint; body text stays neutral slate.
   See: Components/Council/Council*.razor
   ============================================================ */

.council-section { display: flex; flex-direction: column; gap: 14px; }

.council-section-empty {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    text-align: center;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.35);
    border-radius: 12px;
    border-left: 3px solid #a78bfa;
}

/* === Shared Box container === */
.council-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.council-box-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.council-box-title {
    margin: 0;
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cbd5e1;
    flex: 1;
}

.council-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.78em;
    line-height: 1;
}

.council-icon-focus      { background: rgba(167, 139, 250, 0.20); color: #c4b5fd; }
.council-icon-verdict    { background: rgba(167, 139, 250, 0.20); color: #c4b5fd; }
.council-icon-evidence   { background: rgba(  6, 182, 212, 0.20); color: #67e8f9; }
.council-icon-agreement  { background: rgba(245, 158,  11, 0.18); color: #fbbf24; }
.council-icon-questions  { background: rgba(  6, 182, 212, 0.20); color: #67e8f9; }
.council-icon-next       { background: rgba(167, 139, 250, 0.20); color: #c4b5fd; }
.council-icon-ask        { background: rgba(245, 158,  11, 0.18); color: #fbbf24; }

/* === Top Row (Focus | Verdict) — Evidence box retired in Phase 5c.8;
   camera moved to the centre of the expert grid below. === */
.council-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 700px) { .council-top-row { grid-template-columns: 1fr; } }

.council-box-focus,
.council-box-verdict   { border-left: 3px solid rgba(167, 139, 250, 0.35); }
.council-box-evidence  { border-left: 3px solid rgba(  6, 182, 212, 0.35); }
.council-box-consensus { border-left: 3px solid rgba(148, 163, 184, 0.15); }
/* Each consensus box keeps its own accent on the left rail so the strip
   reads in colour instead of three identical slate borders. Agreement is
   state-driven (green = unanimous/strong, amber = mixed, orange = weak);
   Open Questions = cyan, Next Action = violet — matching their icons. */
.council-box-questions    { border-left-color: rgba(  6, 182, 212, 0.45); }
.council-box-next         { border-left-color: rgba(167, 139, 250, 0.45); }
.council-box-agree-strong { border-left-color: rgba( 34, 197,  94, 0.50); }
.council-box-agree-mixed  { border-left-color: rgba(245, 158,  11, 0.50); }
.council-box-agree-weak   { border-left-color: rgba(251, 146,  60, 0.50); }

/* Focus box specifics */
.council-box-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.council-meta-time { color: #94a3b8; font-size: 0.85em; }

.council-focus-body { margin: 0; color: #cbd5e1; font-size: 0.88em; line-height: 1.55; }

.council-focus-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.council-focus-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.10);
    color: #c4b5fd;
    font-size: 0.72em;
    font-weight: 500;
}

/* Verdict box specifics */
.council-verdict-status {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.council-status-ready { background: rgba( 34, 197,  94, 0.18); color: #4ade80; }
.council-status-idle  { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.council-verdict-text {
    margin: 0;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.25;
    color: #c4b5fd;
    letter-spacing: -0.005em;
}

.council-verdict-fallback { font-style: italic; color: #94a3b8; font-size: 0.95em; font-weight: 400; }

.council-verdict-meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
    font-size: 0.85em;
}

.council-verdict-meta-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: baseline;
    min-width: 0;
}

.council-verdict-meta dt { color: #94a3b8; }
.council-verdict-meta dd { margin: 0; color: #e2e8f0; font-weight: 500; }
.council-verdict-meta-value-accent { color: #fbbf24; }

/* Evidence placeholder (A2 fills with camera) */
.council-evidence-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 90px;
    color: #64748b;
    font-style: italic;
    font-size: 0.85em;
    text-align: center;
}

.council-evidence-placeholder p { margin: 0; }

/* === Session-type badge === */
.council-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.council-badge-alert     { background: rgba(239,  68,  68, 0.18); color: #fca5a5; }
.council-badge-scheduled { background: rgba(  6, 182, 212, 0.18); color: #67e8f9; }
.council-badge-wakeup    { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.council-badge-mini      { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.council-badge-manual    { background: rgba(245, 158,  11, 0.18); color: #fbbf24; }
.council-badge-unknown   { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* === Expert grid (2x2 default; 3-col with camera centre slot) === */
.council-expert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Phase 5c.8: when a camera slot is provided, switch to a 3-col layout
   with camera spanning both rows in the middle. Card DOM order is canonical
   (Claude / Gemini / Mistral / ChatGPT from CouncilUiMeta.KnownMembers) so
   nth-of-type maps straight to grid-area names. */
.council-expert-grid.with-camera {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "claude  camera gemini"
        "mistral camera chatgpt";
}

.council-expert-grid.with-camera > .council-card:nth-of-type(1) { grid-area: claude; }
.council-expert-grid.with-camera > .council-card:nth-of-type(2) { grid-area: gemini; }
.council-expert-grid.with-camera > .council-card:nth-of-type(3) { grid-area: mistral; }
.council-expert-grid.with-camera > .council-card:nth-of-type(4) { grid-area: chatgpt; }
.council-expert-grid.with-camera > .council-camera-slot { grid-area: camera; }

@media (max-width: 1100px) {
    .council-expert-grid.with-camera {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "claude  gemini"
            "camera  camera"
            "mistral chatgpt";
    }
}

@media (max-width: 768px) {
    .council-expert-grid { grid-template-columns: 1fr; }
    .council-expert-grid.with-camera {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
    }
    .council-expert-grid.with-camera > .council-card,
    .council-expert-grid.with-camera > .council-camera-slot {
        grid-area: auto;
    }
}

/* === Camera centre slot (Phase 5c.8) === */
.council-camera-slot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-left: 3px solid rgba(6, 182, 212, 0.55);
    min-height: 0;
}

.council-camera-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.council-camera-title {
    margin: 0;
    flex: 1;
    font-size: 0.85em;
    font-weight: 600;
    color: #cbd5e1;
}

.council-camera-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.council-camera-online  { background: rgba( 34, 197,  94, 0.18); color: #4ade80; }
.council-camera-offline { background: rgba(239,  68,  68, 0.18); color: #fca5a5; }

.council-camera-image-wrapper {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.council-camera-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.council-camera-placeholder {
    color: #64748b;
    font-style: italic;
    font-size: 0.85em;
    text-align: center;
    padding: 24px;
}

.council-camera-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8em;
}

.council-camera-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.council-camera-meta dt { color: #94a3b8; }
.council-camera-meta dd { margin: 0; color: #cbd5e1; font-weight: 500; }

/* === Expert card === */
.council-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.08);
    min-height: 175px;
}

/* Member-colour header wash — soft tint at the top fading into the dark
   card background by ~70px down. Same pattern as the pre-A1 cards;
   identity in the header fade, not in a hard edge. Alphas tuned per hue
   so warm tones (amber/teal) don't overpower cool ones (blue/violet) at
   the same nominal opacity (same balance as the old WashAlpha table). */

.council-card.council-accent-amber {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158,  11, 0.11) 0%, transparent 70px), rgba(15, 23, 42, 0.45);
}
.council-card.council-accent-blue {
    border-left: 3px solid #3b82f6;
    background: linear-gradient(180deg, rgba( 59, 130, 246, 0.16) 0%, transparent 70px), rgba(15, 23, 42, 0.45);
}
.council-card.council-accent-violet {
    border-left: 3px solid #a78bfa;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.14) 0%, transparent 70px), rgba(15, 23, 42, 0.45);
}
.council-card.council-accent-teal {
    border-left: 3px solid #14b8a6;
    background: linear-gradient(180deg, rgba( 20, 184, 166, 0.13) 0%, transparent 70px), rgba(15, 23, 42, 0.45);
}
.council-card.council-accent-slate {
    border-left: 3px solid #64748b;
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.12) 0%, transparent 70px), rgba(15, 23, 42, 0.45);
}

/* ============================================================
   Lucide icons — shared helpers
   ============================================================
   The <LucideIcon> component renders a stroke="currentColor" SVG,
   so colour follows the surrounding text colour. .tf-spin turns a
   static icon (e.g. loader-circle) into a spinner for loading states.
   ============================================================ */

.tf-spin { animation: tf-spin 0.9s linear infinite; }

@keyframes tf-spin {
    to { transform: rotate(360deg); }
}

.council-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.council-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 0.85em;
}

.council-avatar-amber  { background: rgba(245, 158,  11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158,  11, 0.45); }
.council-avatar-blue   { background: rgba( 59, 130, 246, 0.18); color: #93c5fd; border: 1px solid rgba( 59, 130, 246, 0.45); }
.council-avatar-violet { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.45); }
.council-avatar-teal   { background: rgba( 20, 184, 166, 0.18); color: #5eead4; border: 1px solid rgba( 20, 184, 166, 0.45); }
.council-avatar-slate  { background: rgba(100, 116, 139, 0.18); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.45); }

.council-card-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.council-card-name { font-weight: 600; font-size: 0.95em; color: #e2e8f0; }
.council-card-role { color: #94a3b8; font-size: 0.78em; }

/* ACTIVE / STANDBY badge top-right of card header */
.council-card-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.council-card-status-active  { background: rgba( 34, 197,  94, 0.18); color: #4ade80; }
.council-card-status-standby { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.council-card-fields { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.council-card-field { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: baseline; }

.council-card-field dt {
    color: #94a3b8;
    font-size: 0.78em;
    font-weight: 400;
    padding-top: 0;
    align-self: start;
}

.council-card-field dd {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.85em;
    line-height: 1.45;
    /* Cap each field's body so cards stay compact even when an LLM writes
       a long "1-sentence" Position. Two lines reads cleaner and matches
       the mockup style — extra detail lives in the Council page anyway. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.council-card-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.council-card-footer-meta  { color: #64748b; font-size: 0.78em; }
.council-card-footer-label { color: #94a3b8; font-size: 0.78em; margin-right: 4px; }
.council-card-footer-value { color: #cbd5e1; font-size: 0.85em; font-weight: 500; }

.council-card-footer-confidence { display: flex; align-items: baseline; gap: 4px; }
.council-card-confidence-value  { color: #fbbf24; font-size: 0.95em; font-weight: 600; }

/* Run metadata (model - time - latency - tokens) — the maker-transparency
   line on the full /live cards. Compact /live-next omits it via the component. */
.council-card-runmeta {
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
    font-size: 0.7em;
    letter-spacing: 0.02em;
    color: #64748b;
}

.council-card-empty {
    margin: 0;
    padding: 12px 0;
    color: #64748b;
    font-style: italic;
    text-align: center;
    font-size: 0.85em;
}

.council-card-statement-text {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.85em;
    line-height: 1.5;
    white-space: pre-wrap;
}

.council-card-unstructured-tag {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* === Consensus strip (3 icon-boxes) === */
.council-consensus-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) { .council-consensus-strip { grid-template-columns: 1fr; } }

.council-consensus-headline { font-size: 1em; font-weight: 600; color: #e2e8f0; }
.council-consensus-sub { font-size: 0.8em; color: #94a3b8; }

.council-consensus-breakdown {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85em;
    color: #cbd5e1;
}

.council-consensus-breakdown li { display: flex; align-items: center; gap: 6px; }

.council-consensus-breakdown .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.council-dot-support     { background: #4ade80; }
.council-dot-conditional { background: #fbbf24; }
.council-dot-oppose      { background: #f87171; }
.council-dot-unclear     { background: #94a3b8; }

.council-consensus-list {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
    color: #cbd5e1;
    font-size: 0.85em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.council-consensus-list li { padding-left: 14px; position: relative; }

.council-consensus-list-question li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    color: #67e8f9;
    font-weight: 600;
}

.council-consensus-list-action li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    top: 0;
    color: #c4b5fd;
    font-size: 0.9em;
    line-height: 1.5;
}

.council-consensus-list-primary { color: #e2e8f0; font-weight: 500; }

.council-consensus-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    color: #64748b;
    font-size: 0.78em;
}

.council-consensus-foot-accent { color: #fbbf24; font-weight: 500; }

.council-consensus-empty {
    color: #64748b;
    font-style: italic;
    font-size: 0.85em;
}

/* === Ask Box (full-width CTA) === */
.council-ask-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-left: 3px solid rgba(245, 158, 11, 0.55);
}

.council-ask-header { display: flex; align-items: center; gap: 10px; }

.council-ask-text { display: flex; flex-direction: column; gap: 2px; }
.council-ask-title { margin: 0; font-size: 0.95em; font-weight: 600; color: #e2e8f0; }
.council-ask-subtitle { margin: 0; font-size: 0.82em; color: #94a3b8; }

.council-ask-form { display: flex; gap: 8px; align-items: stretch; }

.council-ask-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    font-size: 0.88em;
    font-family: inherit;
    cursor: pointer;
}

.council-ask-input::placeholder { color: #64748b; }

.council-ask-button {
    padding: 8px 20px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.55);
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: inherit;
}

.council-ask-button:hover { background: rgba(245, 158, 11, 0.12); }

@media (max-width: 700px) {
    .council-ask-form { flex-direction: column; }
    .council-ask-button { width: 100%; }
}

/* ============================================================
   Docs footer — long mono paths (TomatoFarm.AI/.../X.cs) are
   single unbreakable tokens; with no wrap opportunity they spill
   out of their grid track into the neighbouring column. Let the
   sections shrink and break long paths at any character.
   Global override: the per-page <style> blocks define .docs-footer
   but never set these two props, so there is no cascade conflict.
   ============================================================ */
.docs-footer-section { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   Docs reference tables — mobile (<=760px). The per-page <style>
   blocks render .docs-coverage-table as a 100%-width grid; long
   mono tokens (worker class names, MQTT topics) force a min-width
   past the phone viewport, the table can't shrink, and the whole
   PAGE overflows and clips. On mobile we drop the table model and
   stack each row as a card. The .tf-main prefix outspecifies the
   single-class per-page rules (no !important needed). js/docs-tables.js
   mirrors each <thead> header onto its body cells as data-label, shown
   here as the caption above each stacked value (a bare priority number
   would otherwise float context-free).
   ============================================================ */
@media (max-width: 760px) {
    .tf-main .docs-coverage-table,
    .tf-main .docs-coverage-table tbody,
    .tf-main .docs-coverage-table tr,
    .tf-main .docs-coverage-table td {
        display: block;
        width: auto;
    }
    .tf-main .docs-coverage-table {
        border: none;
        background: none;
        border-radius: 0;
        overflow: visible;
        margin: 14px 0;
    }
    /* header carried by data-label captions on each cell instead */
    .tf-main .docs-coverage-table thead { display: none; }

    .tf-main .docs-coverage-table tr {
        background: #12141c;
        border: 1px solid #2a2e3a;
        border-radius: 8px;
        padding: 6px 14px 12px;
        margin: 0 0 12px;
    }
    .tf-main .docs-coverage-table tr:last-child { margin-bottom: 0; }

    .tf-main .docs-coverage-table td {
        border-bottom: none;
        padding: 8px 0 0;
        overflow-wrap: anywhere;   /* break long mono tokens instead of spilling */
    }
    .tf-main .docs-coverage-table td:first-child { padding-top: 4px; }

    /* column caption, mirrored from <thead> by js/docs-tables.js */
    .tf-main .docs-coverage-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #4a5068;
    }

    /* MQTT-shape topic rows (Pipeline / Pods / Cameras): same overflow,
       different markup — a 3-up flex row [arrow][topic][desc] that can't
       fit a long topic + its description side by side. Wrap the
       description onto its own line under the topic. */
    .tf-main .topic-row {
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 2px;
        align-items: baseline;
    }
    .tf-main .topic-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .tf-main .topic-desc {
        flex-basis: 100%;
        padding-left: 24px;   /* align under the topic, clear of the arrow */
    }
}

/* ============================================================
   RelatedLinks — reciprocal per-layer "explore the rest" footer.
   Component: Components/RelatedLinks.razor. Desktop: a label + a row
   of ghost cards (auto-fit, single row). Mobile (<=760px): collapses to
   one tappable "Keep exploring · N links" bar (the summary button toggles
   .is-open), default closed, so it never dominates the footer. One home,
   no per-page CSS.
   ============================================================ */
.tf-related-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;           /* desktop: the bar is just a label */
}
.tf-related-label {
    font-family: var(--tf-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tf-text-soft);
}
.tf-related-count,
.tf-related-chev { display: none; }   /* desktop: the summary is just the label */

.tf-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.tf-related-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid var(--tf-border);
    border-radius: 10px;
    color: var(--tf-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.tf-related-card:hover {
    border-color: var(--tf-text-soft);
    transform: translateY(-1px);
}
.tf-related-icon  { display: inline-flex; color: var(--tf-text-soft); }
.tf-related-title { flex: 1; font-weight: 600; font-size: 14px; }
.tf-related-arrow { display: inline-flex; color: var(--tf-text-soft); opacity: 0.7; }
.tf-related-card:hover .tf-related-arrow { opacity: 1; }

/* Mobile: collapse to a quiet bar; the cards appear only when .is-open. */
@media (max-width: 760px) {
    .tf-related { display: none; grid-template-columns: 1fr; margin-top: 12px; }
    .tf-related-wrap.is-open .tf-related { display: grid; }
    .tf-related-summary {
        cursor: pointer;
        margin-bottom: 0;
        padding: 12px 16px;
        border: 1px solid var(--tf-border);
        border-radius: 10px;
    }
    .tf-related-count {
        display: inline;
        margin-left: auto;
        font-size: 12px;
        color: var(--tf-text-soft);
    }
    .tf-related-chev {
        display: inline-flex;
        color: var(--tf-text-soft);
        transition: transform 0.15s ease;
        transform: rotate(90deg);          /* chevron-right → points down (closed) */
    }
    .tf-related-wrap.is-open .tf-related-chev { transform: rotate(-90deg); }  /* up (open) */
}