/* ==================================================================
   ORGANIZATIONAL POLITICS NAVIGATOR
   Private instrument at /app/ — the chart-table palette
   #F7F3EA paper | #1C1915 ink | #40372B umber | #7A241C needle

   Ink on paper, matching the landing page. Colour is used sparingly
   and always carries meaning: umber for structure and primary
   actions, seal gold for the canon, verdigris for allies and live
   state, needle red for danger and rivalry.

   Design system
   — Type:    serif display (Iowan/Palatino/Georgia), system sans text,
              mono for data. Scale: 11 / 12.5 / 13.5 / 14.5 / 17 / 22 / 30
   — Space:   4px base rhythm
   — Motion:  240ms cubic-bezier(.32,.72,.24,1); honors reduced-motion
   — Surface: cards lift toward white; controls sit into the paper
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ground + elevation — cards lift, controls recess */
    --bg: #F7F3EA;
    --surface: #FCFAF5;
    --surface-2: #FEFCF8;
    --surface-3: #EFE8DA;
    --surface-4: #E4DBC7;

    /* the paper itself, for text that sits on ink */
    --paper: #F7F3EA;
    --umber: #40372B;

    /* accent */
    --gold: #8A6D24;
    --gold-bright: #A6842F;
    --gold-dim: #6E561C;
    --gold-glow: rgba(138, 109, 36, 0.13);
    --gold-soft: rgba(138, 109, 36, 0.06);
    --teal: #1F5F52;
    --teal-dim: #17473E;
    --teal-glow: rgba(31, 95, 82, 0.11);
    --red: #7A241C;

    /* ink ramp */
    --ink: #14110E;
    --warm: #1C1915;
    --warm-dim: rgba(28, 25, 21, 0.74);
    --warm-muted: rgba(28, 25, 21, 0.58);
    --warm-faint: rgba(28, 25, 21, 0.58); /* the faintest text tier still passes contrast checks */
    --warm-ghost: rgba(28, 25, 21, 0.26);

    /* lines */
    --border: rgba(28, 25, 21, 0.13);
    --border-strong: rgba(28, 25, 21, 0.24);

    /* geometry */
    --radius-s: 3px;
    --radius: 3px;
    --radius-l: 3px;
    --max-w: 1180px;

    /* depth */
    --shadow-1: 0 1px 2px rgba(28, 25, 21, 0.07);
    --shadow-2: 0 10px 28px -10px rgba(28, 25, 21, 0.18);
    --shadow-3: 0 28px 70px -16px rgba(28, 25, 21, 0.22);

    /* motion */
    --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
    --dur: 240ms;
    --dur-fast: 140ms;

    /* faces */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { height: 100%; }

body {
    font-family: var(--font);
    font-weight: 400;
    font-size: 14.5px;
    background: var(--bg);
    color: var(--warm);
    line-height: 1.6;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--teal); text-decoration: none; }
button { font-family: var(--font); cursor: pointer; color: inherit; }
::selection { background: rgba(138, 109, 36, 0.28); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid rgba(138, 109, 36, 0.55);
    outline-offset: 2px;
    border-radius: 3px;
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(28, 25, 21, 0.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 21, 0.14);
    border-radius: 3px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-delay: 0s !important;
        transition-duration: 0.001s !important;
    }
}

/* ── Micro-label ─────────────────────────────────────────────────── */
.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ══ THE WAY IN ═══════════════════════════════════════════════════
   The auth screen is the landing page's room, entered. Same chart
   table, same instrument, same frame — the form stands where the
   landing's door stood. Artwork markup mirrors /index.html; if one
   changes, change both. */
.lock {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    overflow: hidden;
    font-family: var(--serif);
}
.lock[hidden] { display: none; }

/* the table */
.lock .table { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.lock .table svg.chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.lock .dawn { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 34% at 62% 88%, rgba(212,168,100,.2), rgba(212,168,100,.05) 46%, rgba(212,168,100,0) 72%); }
.lock .sky { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(28,25,21,.05), rgba(28,25,21,0) 32%); }
.lock .vig { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 130% 110% at 50% 44%, rgba(28,25,21,0) 50%, rgba(28,25,21,.08) 100%); }
.lock .ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
    height: clamp(88px, 15vh, 190px); pointer-events: none; z-index: 1; display: block; }
.lock .grain { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .036 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the instrument */
.lock .instrument {
    position: absolute; z-index: 1;
    top: 50%; right: clamp(-6vw, 2vw, 8vw); transform: translateY(-50%);
    width: clamp(340px, min(78vh, 44vw), 720px); height: auto;
    opacity: 0; animation: instrumentIn 2s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes instrumentIn {
    from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
    to   { opacity: 1; transform: translateY(-50%); }
}
.lock .needle {
    transform-box: view-box; transform-origin: 300px 300px;
    transform: rotate(27deg);
    transition: transform 1.7s cubic-bezier(.22,.61,.24,1);
    animation: findNorth 2.6s cubic-bezier(.34,1.28,.42,1) .6s backwards;
}
@keyframes findNorth {
    0%   { transform: rotate(-151deg); }
    62%  { transform: rotate(35deg); }
    100% { transform: rotate(27deg); }
}
/* the needle swings true as you reach for the way in — as on the landing */
.lock:has(#auth-submit:hover) .needle,
.lock:has(#auth-submit:focus-visible) .needle { transform: rotate(0deg); }

/* the frame */
.lock .framec { position: absolute; inset: clamp(14px, 2.1vw, 26px); pointer-events: none; z-index: 5; }
.lock .framec i { position: absolute; width: 15px; height: 15px; opacity: 0;
    animation: frameFade 1.4s cubic-bezier(.16,1,.3,1) 1.6s forwards; }
.lock .framec i::before, .lock .framec i::after { content: ''; position: absolute; background: var(--border-strong); }
.lock .framec i::before { width: 100%; height: 1px; }
.lock .framec i::after { height: 100%; width: 1px; }
.lock .framec .tl { top: 0; left: 0; }      .lock .framec .tl::before { top: 0; left: 0; }     .lock .framec .tl::after { top: 0; left: 0; }
.lock .framec .tr { top: 0; right: 0; }     .lock .framec .tr::before { top: 0; right: 0; }    .lock .framec .tr::after { top: 0; right: 0; }
.lock .framec .bl { bottom: 0; left: 0; }   .lock .framec .bl::before { bottom: 0; left: 0; }  .lock .framec .bl::after { bottom: 0; left: 0; }
.lock .framec .br { bottom: 0; right: 0; }  .lock .framec .br::before { bottom: 0; right: 0; } .lock .framec .br::after { bottom: 0; right: 0; }
@keyframes frameFade { to { opacity: 1; } }

/* the way in — where the landing's door stands */
/* Fixed-height frame, vertically centred. The content is pinned to its
   top, so switching to Create account grows the form downward into the
   slack instead of shoving the wordmark and tabs up the screen. */
.lock-column {
    position: absolute; z-index: 3;
    left: clamp(2.4rem, 9vw, 9.5rem); top: 50%; transform: translateY(-50%);
    width: min(23rem, 44vw); min-width: 17.5rem;
    height: min(32rem, 92vh);
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start;
}
@keyframes lock-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.lock-eyebrow {
    font-size: clamp(.54rem, .82vw, .62rem); letter-spacing: .4em;
    text-transform: uppercase; color: var(--warm-faint);
    display: flex; align-items: center; gap: 1rem;
    opacity: 0; animation: lock-rise 1.3s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.lock-eyebrow::after { content: ''; width: 3rem; height: 1px; background: var(--border-strong); }

.lock-word {
    margin-top: clamp(1.1rem, 2.6vh, 1.8rem);
    font-family: var(--serif); font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 400; line-height: 1; letter-spacing: .16em;
    text-transform: uppercase; color: var(--umber);
    opacity: 0; animation: lock-rise 1.4s cubic-bezier(.16,1,.3,1) .68s forwards;
}

/* sign in / create account */
.auth-tabs {
    display: flex; gap: 1.4rem;
    margin-top: clamp(1.6rem, 3.4vh, 2.3rem);
    opacity: 0; animation: lock-rise 1.4s cubic-bezier(.16,1,.3,1) .86s forwards;
}
.auth-tabs button {
    background: none; border: none; padding: .3rem 0;
    font-family: var(--serif); font-size: .82rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--warm-faint);
    border-bottom: 1px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.auth-tabs button:hover { color: var(--warm-dim); }
.auth-tabs button.on { color: var(--ink); border-bottom-color: var(--red); }

#auth-form {
    width: 100%;
    margin-top: clamp(1.1rem, 2.4vh, 1.6rem);
    display: flex; flex-direction: column; gap: .55rem;
    opacity: 0; animation: lock-rise 1.4s cubic-bezier(.16,1,.3,1) 1s forwards;
}
/* The name field eases open on Create account rather than popping in.
   Collapsed, its negative margin cancels the form's gap so it takes up
   no room at all. */
.name-slot {
    width: 100%;
    display: grid; grid-template-rows: 0fr;
    opacity: 0; margin-bottom: -0.55rem;
    transition: grid-template-rows var(--dur) var(--ease),
                opacity var(--dur) var(--ease),
                margin-bottom var(--dur) var(--ease);
}
.name-slot > div { overflow: hidden; min-height: 0; }
.name-slot.on { grid-template-rows: 1fr; opacity: 1; margin-bottom: 0; }
#auth-form input {
    width: 100%;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    padding: .78rem .95rem;
    color: var(--ink);
    font-family: var(--serif); font-size: .95rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
#auth-form input::placeholder { color: var(--warm-faint); }
#auth-form input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--umber);
    box-shadow: 0 0 0 3px rgba(64, 55, 43, 0.08);
}

/* show / hide the password you typed */
.pw-field { position: relative; display: flex; }
.pw-field input { padding-right: 4.2rem; }
.pw-peek {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: .3rem .45rem; border-radius: 3px;
    font-family: var(--serif); font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--warm-faint);
    transition: color var(--dur-fast) var(--ease);
}
.pw-peek:hover { color: var(--ink); }
.pw-peek[aria-pressed="true"] { color: var(--umber); }

#auth-submit {
    margin-top: clamp(.5rem, 1.4vh, .9rem);
    position: relative; overflow: hidden; isolation: isolate;
    font-family: var(--serif);
    font-size: clamp(.6rem, .92vw, .68rem);
    letter-spacing: .38em; text-indent: .38em; text-transform: uppercase;
    color: var(--paper);
    padding: clamp(.95rem, 2.1vh, 1.15rem) 1rem;
    background: var(--umber); border: 1px solid var(--umber); border-radius: 3px;
    box-shadow: none;
    transition: border-color .5s var(--ease);
}
#auth-submit::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform .55s var(--ease);
}
#auth-submit:hover, #auth-submit:focus-visible { border-color: var(--ink); }
#auth-submit:hover::before, #auth-submit:focus-visible::before { transform: translateY(0); }
#auth-submit:disabled { opacity: .55; }
#auth-submit:disabled::before { transform: translateY(101%); }

.lock-error {
    color: var(--red); font-family: var(--font); font-size: .78rem;
    line-height: 1.5; margin-top: .8rem; min-height: 1.2em;
    width: 100%; overflow-wrap: anywhere;
}

.lock-forgot {
    margin-top: .7rem;
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: var(--serif); font-style: italic; font-size: .8rem;
    color: var(--warm-dim);
}
.lock-forgot:hover { color: var(--ink); }
.lock-error.ok { color: var(--umber); }

.lock-learn {
    margin-top: clamp(1.3rem, 2.8vh, 1.9rem);
    font-size: clamp(.56rem, .84vw, .63rem);
    letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
    color: var(--warm-muted);
    padding: .35rem 0; border-bottom: 1px solid transparent;
    transition: color .35s var(--ease), border-color .35s var(--ease);
    opacity: 0; animation: lock-rise 1.35s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}
.lock-learn:hover, .lock-learn:focus-visible { color: var(--ink); border-color: var(--warm-faint); }

/* smaller rooms */
@media (max-width: 1080px) {
    .lock-column { left: clamp(2rem, 7vw, 6rem); width: min(22rem, 48vw); }
    .lock .instrument { width: clamp(320px, min(70vh, 46vw), 600px); right: clamp(-8vw, 0vw, 4vw); }
}
@media (max-width: 760px) {
    .lock { overflow-y: auto; }
    .lock .instrument { opacity: .16 !important; right: -18vw; width: min(115vw, 620px); }
    .lock-column {
        position: relative; top: auto; left: auto; transform: none;
        width: auto; min-width: 0;
        margin: 0 auto; padding: clamp(3rem, 9vh, 5rem) 1.5rem 3rem;
        max-width: 26rem;
    }
}

/* ══ CHROME ═══════════════════════════════════════════════════════ */
.bar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(247, 243, 234, 0.88);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--border);
}
.bar-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
    height: 58px; display: flex; align-items: center; gap: 2.6rem;
}
.bar-mark {
    color: var(--ink); font-weight: 600; font-size: 0.86rem;
    letter-spacing: 0.32em;
    display: flex; align-items: center; gap: 0.75rem;
    transition: opacity var(--dur-fast) var(--ease);
}
.bar-mark:hover { opacity: 0.85; }
.bar-logo { width: 30px; height: 30px; flex-shrink: 0; }
.bar-word { display: flex; align-items: baseline; gap: 0.9rem; }
.bar-mark-sub {
    font-weight: 500; font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--warm-faint);
}

.bar-nav { display: flex; gap: 1.9rem; flex: 1; }
.bar-nav a {
    position: relative;
    color: var(--warm-muted);
    font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
    padding: 0.45rem 0;
    transition: color var(--dur) var(--ease);
}
.bar-nav a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease);
}
.bar-nav a:hover { color: var(--ink); }
.bar-nav a.active { color: var(--gold); }
.bar-nav a.active::after { transform: scaleX(1); }
/* The gold underline is the focus indicator here; the global focus ring
   would draw a box around the word on top of it. */
.bar-nav a:focus-visible { outline: none; color: var(--ink); }
.bar-nav a:focus-visible::after { transform: scaleX(1); }

.bar-lock {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--warm-faint);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.42rem 0.85rem;
    transition: all var(--dur-fast) var(--ease);
}
.bar-lock:hover { color: var(--warm); border-color: var(--border-strong); background: var(--surface); }

/* ══ VIEW FRAME ═══════════════════════════════════════════════════ */
.view {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2.6rem 1.5rem 5rem;
}
.view > * { animation: view-in 0.5s var(--ease) both; }
.view > :nth-child(2) { animation-delay: 45ms; }
.view > :nth-child(3) { animation-delay: 90ms; }
.view > :nth-child(4) { animation-delay: 135ms; }
.view > :nth-child(5) { animation-delay: 180ms; }
.view > :nth-child(n+6) { animation-delay: 220ms; }
@keyframes view-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.foot {
    max-width: var(--max-w); margin: 0 auto;
    padding: 1.4rem 1.5rem 2.4rem;
    border-top: 1px solid var(--border);
    color: var(--warm-faint); font-size: 0.74rem;
}

/* page header */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.page-head h1 {
    font-family: var(--serif);
    font-size: 1.85rem; font-weight: 500; line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin-top: 0.5rem;
    text-wrap: balance;
}
.page-head .page-desc {
    color: var(--warm-muted); font-size: 0.86rem; line-height: 1.62;
    max-width: 620px; margin-top: 0.6rem;
}
.page-desc b { color: var(--warm-dim); font-weight: 500; }
.page-actions { display: flex; gap: 0.6rem; flex-shrink: 0; align-items: center; }

/* ══ BUTTONS ══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    height: 36px; padding: 0 1.05rem;
    border-radius: var(--radius-s);
    font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
    line-height: 1; white-space: nowrap;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}
.btn-primary {
    color: var(--paper); font-weight: 600;
    background: var(--umber);
    box-shadow: var(--shadow-1);
}
.btn-primary:hover { filter: brightness(1.18); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.97); box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.07); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--warm-dim); }
.btn-ghost:hover { border-color: var(--border-strong); color: var(--ink); background: var(--surface); }
.btn-ghost:active { background: var(--surface-2); }

.btn-teal { background: transparent; border-color: rgba(31, 95, 82, 0.32); color: var(--teal); }
.btn-teal:hover { background: var(--teal-glow); border-color: rgba(31, 95, 82, 0.5); }
.btn-teal:active { background: rgba(31, 95, 82, 0.18); }

.btn-danger { background: transparent; border-color: rgba(122, 36, 28, 0.32); color: var(--red); }
.btn-danger:hover { background: rgba(122, 36, 28, 0.1); border-color: rgba(122, 36, 28, 0.5); }

.btn-sm { height: 28px; padding: 0 0.7rem; font-size: 0.74rem; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none !important; filter: none !important; }

/* ══ CARDS / GRIDS ════════════════════════════════════════════════ */
.grid { display: grid; gap: 1rem; }
.grid-situations { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.grid-people { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.card {
    position: relative;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 1.2rem 1.3rem 1.1rem;
    display: block; color: var(--warm);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}
.card:active { transform: translateY(0); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.55rem; }
.card-top .chip { margin-top: 0.28rem; }
.card-title {
    font-family: var(--serif);
    font-size: 1.08rem; font-weight: 500; line-height: 1.3;
    color: var(--ink);
    letter-spacing: 0.005em;
}
.card-sub { color: var(--warm-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.card-body {
    color: var(--warm-dim); font-size: 0.83rem; line-height: 1.58; margin-top: 0.55rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem; }

/* status chips */
.chip {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase;
    height: 20px; padding: 0 0.6rem;
    border-radius: 999px; border: 1px solid;
    flex-shrink: 0; line-height: 1;
}
.chip-active   { color: var(--teal); border-color: rgba(31, 95, 82, 0.38); background: var(--teal-glow); }
.chip-watching { color: var(--gold); border-color: rgba(138, 109, 36, 0.38); background: var(--gold-soft); }
.chip-resolved { color: var(--warm-faint); border-color: var(--border); background: transparent; }
.chip-off      { color: var(--warm-faint); border-color: var(--border); background: transparent; }

/* initial marks */
.marks { display: flex; }
.mark {
    width: 27px; height: 27px; border-radius: 50%;
    background: linear-gradient(180deg, var(--surface-4), var(--surface-3));
    border: 1px solid var(--border-strong);
    color: var(--warm-dim);
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: -7px;
    box-shadow: 0 0 0 2px var(--bg);
}
.mark:first-child { margin-left: 0; }
.mark-lg {
    width: 46px; height: 46px; font-size: 0.86rem;
    background: linear-gradient(180deg, rgba(138, 109, 36, 0.16), rgba(138, 109, 36, 0.06));
    border-color: rgba(138, 109, 36, 0.36);
    color: var(--gold);
    box-shadow: none;
}

/* ══ EMPTY STATES ═════════════════════════════════════════════════ */
.empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-l);
    padding: 3.4rem 2rem;
    text-align: center;
    max-width: 560px; margin: 2.5rem auto;
    background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(138, 109, 36, 0.035), transparent);
}
.empty h3 {
    font-family: var(--serif);
    font-weight: 500; font-size: 1.15rem; color: var(--ink);
    margin-bottom: 0.55rem;
}
.empty p { color: var(--warm-muted); font-size: 0.85rem; line-height: 1.62; margin-bottom: 1.5rem; }
.empty .btn { margin: 0 0.25rem; }

/* ══ FORMS ════════════════════════════════════════════════════════ */
.form { max-width: 760px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }

.field { margin-bottom: 1.15rem; }
.field label {
    display: block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--warm-dim);
    margin-bottom: 0.38rem;
}
.field .hint {
    color: var(--warm-faint); font-size: 0.74rem; font-weight: 400;
    letter-spacing: 0; text-transform: none; margin-left: 0.5rem;
}
.field input, .field textarea, .field select {
    width: 100%;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.58rem 0.8rem;
    color: var(--ink);
    font-size: 0.87rem; font-family: var(--font); font-weight: 400;
    line-height: 1.55;
    box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.06);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--warm-faint); }
.field textarea { resize: vertical; min-height: 86px; }
.field textarea.tall { min-height: 132px; }
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: rgba(138, 109, 36, 0.5);
    box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.06), 0 0 0 3px rgba(138, 109, 36, 0.1);
    outline: none;
}
.field select { appearance: none; }

.form-actions { display: flex; gap: 0.6rem; margin-top: 1.6rem; align-items: center; }
.form-actions .spacer { flex: 1; }

.form-section { margin: 2rem 0 1.15rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-section .eyebrow { display: block; margin-bottom: 0.3rem; }
.form-section p { color: var(--warm-muted); font-size: 0.8rem; line-height: 1.6; }

/* people picker */
.picker { border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-1); }
.picker-row {
    display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 0.8rem;
    align-items: center;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    transition: background var(--dur-fast) var(--ease);
}
.picker-row:last-child { border-bottom: none; }
.picker-row.on { background: var(--surface-2); }
.picker-name { font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.picker-name .picker-role { color: var(--warm-faint); font-size: 0.74rem; font-weight: 400; margin-left: 0.4rem; }
.picker-row input[type="text"] {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.35rem 0.65rem;
    color: var(--ink); font-size: 0.78rem; font-family: var(--font);
    width: 100%;
    transition: border-color var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.picker-row input[type="text"]:focus { border-color: rgba(138, 109, 36, 0.5); outline: none; }
.picker-row input[type="checkbox"] { accent-color: #8A6D24; width: 15px; height: 15px; cursor: pointer; }
.picker-row .picker-fields { display: contents; }
.picker-row:not(.on) .picker-fields input { opacity: 0.22; pointer-events: none; }
.picker-new { color: var(--teal); font-size: 0.72rem; letter-spacing: 0.05em; }

/* ══ DOSSIER ══════════════════════════════════════════════════════ */
.dossier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    gap: 1.5rem; align-items: start;
}
.dossier-main { min-width: 0; }

.dossier-head { margin-bottom: 1.5rem; }
.dossier-head .head-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.dossier-head h1 {
    font-family: var(--serif);
    font-size: 1.9rem; font-weight: 500; line-height: 1.2;
    letter-spacing: 0.005em; color: var(--ink);
    text-wrap: balance;
}
.dossier-meta {
    color: var(--warm-faint); font-size: 0.74rem; margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.dossier-sec {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 1.15rem 1.35rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-1);
}
.dossier-sec > .eyebrow { display: block; margin-bottom: 0.5rem; }
.dossier-sec .sec-body { color: var(--warm-dim); font-size: 0.88rem; line-height: 1.66; white-space: pre-wrap; }
.dossier-sec .sec-empty { color: var(--warm-faint); font-size: 0.8rem; font-style: italic; }

/* inline edit */
.sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; }
.sec-head-row .eyebrow { margin-bottom: 0; }
.sec-edit {
    background: none; border: none;
    color: var(--warm-faint);
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.15rem 0.3rem;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.dossier-sec:hover .sec-edit, .sec-edit:focus-visible { opacity: 1; }
.sec-edit:hover { color: var(--gold); }
.sec-editor {
    width: 100%;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(138, 109, 36, 0.45);
    border-radius: var(--radius-s);
    padding: 0.65rem 0.85rem;
    color: var(--ink);
    font-size: 0.87rem; font-family: var(--font); line-height: 1.6;
    min-height: 112px; resize: vertical;
    box-shadow: 0 0 0 3px rgba(138, 109, 36, 0.08);
}
.sec-editor:focus { outline: none; }
.sec-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; }

/* stance spectrum */
.spec {
    position: relative; display: inline-block;
    width: 56px; height: 8px;
    margin-left: 0.65rem; vertical-align: middle;
}
.spec-track {
    position: absolute; left: 0; right: 0; top: 3px; height: 2px;
    background: linear-gradient(90deg, rgba(122, 36, 28, 0.5), rgba(28, 25, 21, 0.18), rgba(31, 95, 82, 0.5));
    border-radius: 2px;
}
.spec-mid { position: absolute; left: 50%; top: 0; width: 1px; height: 8px; background: var(--border-strong); }
.spec-dot {
    position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px var(--bg), 0 1px 3px rgba(28, 25, 21, 0.15);
}

/* ══ THE TERRAIN MAP ══════════════════════════════════════════════ */
.map-sec { padding-bottom: 1rem; }
.map-hint { color: var(--warm-faint); font-size: 10.5px; letter-spacing: 0.06em; }
.map-holder { margin: 0.4rem -0.45rem 0; }

.tmap { width: 100%; height: auto; display: block; touch-action: none; }
.tmap-frame {
    fill: rgba(255, 255, 255, 0.55);
    stroke: var(--border);
    rx: 10;
}
.tmap-grid { stroke: rgba(28, 25, 21, 0.09); stroke-dasharray: 3 5; }
.tmap-grid-soft { stroke: rgba(28, 25, 21, 0.045); }
.tmap-axis {
    fill: rgba(28, 25, 21, 0.32);
    font-size: 10.5px; font-family: var(--mono);
    letter-spacing: 0.2em;
}

.tmap-edge { stroke-width: 1.5; opacity: 0.82; transition: opacity var(--dur) var(--ease); }
.tmap-edge:hover { opacity: 1; }
.edge-listens { stroke: #8A6D24; }
.edge-allied  { stroke: #1F5F52; }
.edge-rival   { stroke: #7A241C; stroke-dasharray: 5 4; }
.edge-owes    { stroke: #8A6D24; stroke-dasharray: 2 4; }
.edge-reports { stroke: rgba(28, 25, 21, 0.32); }

.tmap-node { cursor: grab; }
.tmap-node.dragging { cursor: grabbing; }
.tmap-circle {
    fill: var(--surface);
    stroke-width: 1.7;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--dur-fast) var(--ease), fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
    filter: drop-shadow(0 3px 6px rgba(28, 25, 21, 0.14));
}
.tmap-node:hover .tmap-circle { fill: #F1EADC; transform: scale(1.06); }
.tmap-node.dragging .tmap-circle { transform: scale(1.14); }
.tmap-node.unplaced .tmap-circle { stroke-dasharray: 3 3; opacity: 0.7; }
.tmap-init {
    fill: var(--ink);
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    font-family: var(--font);
    pointer-events: none;
}
.tmap-name {
    fill: rgba(28, 25, 21, 0.62);
    font-size: 11.5px; font-family: var(--font); font-weight: 500;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(247, 243, 234, 0.9);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.map-legend { display: flex; gap: 1.15rem; flex-wrap: wrap; margin-top: 0.7rem; }
.legend-item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--warm-faint); font-size: 10.5px; letter-spacing: 0.06em;
}
.legend-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid; border-radius: 1px; }
.legend-line.edge-listens { border-color: #8A6D24; }
.legend-line.edge-allied  { border-color: #1F5F52; }
.legend-line.edge-rival   { border-color: #7A241C; border-top-style: dashed; }
.legend-line.edge-owes    { border-color: #8A6D24; border-top-style: dotted; }
.legend-line.edge-reports { border-color: rgba(28, 25, 21, 0.32); }

/* ══ PEOPLE ROWS / PROFILE ════════════════════════════════════════ */
.dperson {
    display: flex; gap: 0.95rem; align-items: flex-start;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}
.dperson:last-child { border-bottom: none; padding-bottom: 0.15rem; }
.dperson:first-child { padding-top: 0.25rem; }
.dperson .mark { margin: 0.1rem 0 0; flex-shrink: 0; box-shadow: none; }
.dperson-name { font-size: 0.92rem; font-weight: 500; }
.dperson-name a { color: var(--ink); transition: color var(--dur-fast) var(--ease); }
.dperson-name a:hover { color: var(--gold); }
.dperson-role { color: var(--warm-faint); font-size: 0.76rem; margin-top: 0.05rem; }
.dperson-stance { color: var(--warm-dim); font-size: 0.8rem; margin-top: 0.3rem; line-height: 1.5; }
.dperson-stance b { color: var(--gold); font-weight: 500; }

.profile-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.profile-head h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.profile-head .card-sub { margin-top: 0.05rem; }

/* relationships */
.rel-list { margin-bottom: 0.85rem; }
.rel-row {
    display: flex; gap: 0.7rem; align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.rel-row:last-child { border-bottom: none; }
.rel-text { flex: 1; color: var(--warm-dim); line-height: 1.55; }
.rel-text b { color: var(--ink); font-weight: 500; }
.rel-note { color: var(--warm-faint); font-size: 0.78rem; }
.rel-add { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.rel-add-name { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.rel-add select, .rel-add input {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink); font-size: 0.78rem; font-family: var(--font);
    padding: 0.38rem 0.55rem;
    transition: border-color var(--dur-fast) var(--ease);
}
.rel-add input { flex: 1; min-width: 140px; }
.rel-add select:focus, .rel-add input:focus { border-color: rgba(138, 109, 36, 0.5); outline: none; }

/* ══ CONSULT PANEL ════════════════════════════════════════════════ */
.coach {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    display: flex; flex-direction: column;
    height: calc(100vh - 134px);
    position: sticky; top: 78px;
    min-height: 480px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
}
.coach-full { position: static; height: calc(100vh - 240px); }

/* the coach as the whole page: no card chrome around what is already the page */
.consult-page { max-width: 860px; margin: 0 auto; }
.consult-page .coach { border: none; background: none; box-shadow: none; height: calc(100vh - 150px); }
.consult-page .coach-head { background: none; border-bottom: 1px solid var(--border); }
.consult-page .coach-head .eyebrow { display: none; }
.consult-page .coach-body { padding: 1.6rem 0.2rem; }
.consult-page .coach-input { border-top: 1px solid var(--border); }

/* ── Consult rail: every conversation, grouped by situation ───── */
.consult-page.has-rail {
    max-width: 1170px; display: flex; gap: 1.5rem; position: relative;
}
.consult-main { flex: 1; min-width: 0; max-width: 860px; margin: 0 auto; }
.rail {
    width: 284px; flex-shrink: 0;
    height: calc(100vh - 150px); overflow-y: auto;
    border-right: 1px solid var(--border);
    padding: 0.7rem 0.9rem 1.2rem 0;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.rail-head { display: flex; align-items: center; gap: 0.5rem; }
.rail-head .btn { flex: 1; }
.rail-toggle {
    width: 31px; height: 31px; flex-shrink: 0; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-s);
    color: var(--warm-dim); font-size: 0.85rem; line-height: 1;
}
.rail-toggle:hover { color: var(--ink); border-color: var(--warm-faint); }
.rail-toggle-closed { display: none; position: absolute; left: 0; top: 0.55rem; }
.consult-page.rail-closed .rail { display: none; }
.consult-page.rail-closed .rail-toggle-closed { display: block; }
.rail-sec { margin-top: 0.35rem; }
.rail-sec-title {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: var(--radius-s);
    font-size: 0.67rem; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--warm-faint);
    padding: 0.32rem 0.5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font);
}
.rail-sec-title:hover { color: var(--ink); }
.rail-sec-title.on { color: var(--gold); }
.rail-row {
    display: flex; align-items: stretch;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.rail-row:hover { background: rgba(28, 25, 21, 0.04); }
.rail-row.on {
    border-left-color: var(--gold);
    background: rgba(138, 109, 36, 0.08);
}
.rail-item {
    flex: 1; min-width: 0; text-align: left; cursor: pointer;
    background: none; border: none;
    font-size: 0.82rem; color: var(--warm-muted); font-family: var(--font);
    padding: 0.34rem 0.3rem 0.34rem 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-row:hover .rail-item, .rail-row.on .rail-item { color: var(--ink); }
.rail-ren, .rail-del {
    flex-shrink: 0; width: 1.55rem; cursor: pointer;
    background: none; border: none; color: var(--warm-faint);
    font-size: 0.78rem; visibility: hidden;
}
.rail-del { font-size: 0.95rem; }
.rail-row:hover .rail-ren, .rail-row:hover .rail-del,
.rail-ren:focus-visible, .rail-del:focus-visible { visibility: visible; }
.rail-ren:hover { color: var(--ink); }
.rail-del:hover { color: var(--red); }
.rail-edit {
    flex: 1; min-width: 0; margin: 0.1rem 0.3rem 0.1rem 0.7rem;
    background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(138, 109, 36, 0.5);
    border-radius: var(--radius-s); outline: none;
    font-size: 0.82rem; color: var(--ink); font-family: var(--font);
    padding: 0.2rem 0.4rem;
}
.rail-empty { font-size: 0.8rem; color: var(--warm-faint); line-height: 1.55; padding: 0.3rem 0.5rem; }

@media (max-width: 760px) {
    /* Anchored to the consult container, not the viewport: the page
       transition animates with a transform, which would silently turn a
       fixed rail into this exact layout anyway. Absolute makes it stable. */
    .rail {
        position: absolute; top: 0; left: 0; bottom: 0; z-index: 60;
        width: min(82vw, 300px); height: auto;
        background: var(--paper); border-right: 1px solid var(--border);
        box-shadow: 0 0 44px rgba(28, 25, 21, 0.28);
        padding: 1rem 0.9rem;
    }
}

.coach-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.75rem 1.05rem;
    border-bottom: 1px solid var(--border);
    background: rgba(239, 232, 218, 0.66);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.coach-head .eyebrow { flex: 1; }
.coach-head select {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--warm-dim);
    font-size: 0.72rem; font-family: var(--font);
    padding: 0.32rem 0.55rem;
    max-width: 200px;
    transition: border-color var(--dur-fast) var(--ease);
}

/* labelled pickers in the coach header — a bare <select> tells you nothing */
.coach-pick {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--warm-faint);
}
.coach-pick select { max-width: 190px; }
.coach-head select:focus { border-color: rgba(138, 109, 36, 0.5); outline: none; }

.coach-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.1rem; overscroll-behavior: contain; }

.coach-welcome { color: var(--warm-muted); font-size: 0.84rem; line-height: 1.62; padding: 0.4rem 0.2rem; }
.coach-welcome b { color: var(--warm-dim); font-weight: 500; }
.coach-welcome .starters { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.starter {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--warm-dim);
    font-size: 0.77rem;
    padding: 0.42rem 0.95rem;
    text-align: left;
    transition: all var(--dur-fast) var(--ease);
}
.starter:hover {
    border-color: rgba(138, 109, 36, 0.42);
    color: var(--gold);
    background: var(--gold-soft);
    transform: translateX(2px);
}

.msg { margin-bottom: 1.2rem; animation: msg-in 0.35s var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg-user {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.65rem 0.95rem;
    margin-left: 2.4rem;
    font-size: 0.86rem; line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    box-shadow: var(--shadow-1);
}
.msg-coach { font-size: 0.86rem; color: var(--warm-dim); line-height: 1.66; }
.msg-coach .msg-tag {
    font-size: 10px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
    color: var(--gold);
    display: block; margin-bottom: 0.4rem;
}
.msg-coach p { margin-bottom: 0.7rem; }
.msg-coach p:last-child { margin-bottom: 0; }
.msg-coach strong { color: var(--ink); font-weight: 600; }
.msg-coach em { color: var(--warm); }
.msg-coach ul, .msg-coach ol { margin: 0.45rem 0 0.75rem 1.25rem; }
.msg-coach li { margin-bottom: 0.3rem; }
.msg-coach h1, .msg-coach h2, .msg-coach h3, .msg-coach h4 {
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink);
    margin: 1.05rem 0 0.45rem;
}
.msg-coach code {
    font-family: var(--mono); font-size: 0.78rem;
    background: var(--surface-3);
    padding: 0.1rem 0.38rem; border-radius: 3px;
}
.msg-coach pre {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.75rem 0.95rem;
    overflow-x: auto;
    margin: 0.5rem 0 0.85rem;
}
.msg-coach pre code { background: none; padding: 0; }
.msg-coach table {
    border-collapse: collapse; margin: 0.5rem 0 0.85rem;
    font-size: 0.78rem; width: 100%;
    font-variant-numeric: tabular-nums;
}
.msg-coach th, .msg-coach td { border: 1px solid var(--border); padding: 0.38rem 0.6rem; text-align: left; }
.msg-coach th { color: var(--ink); font-weight: 500; background: var(--surface-2); }
.msg-coach blockquote {
    border-left: 2px solid var(--gold-dim);
    padding-left: 0.85rem;
    margin: 0.5rem 0 0.85rem;
    color: var(--warm-muted);
}

/* draft / update cards */
.draft {
    border: 1px solid rgba(138, 109, 36, 0.34);
    background:
        linear-gradient(180deg, rgba(138, 109, 36, 0.1), rgba(138, 109, 36, 0.04));
    border-radius: var(--radius);
    padding: 0.9rem 1.05rem;
    margin: 0.75rem 0;
    box-shadow: var(--shadow-1);
}
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.45rem; }
.draft-title { font-size: 0.87rem; font-weight: 600; color: var(--ink); }
.draft-fields { color: var(--warm-muted); font-size: 0.76rem; line-height: 1.5; margin-bottom: 0.75rem; }

/* pin action */
.msg-actions { margin-top: 0.45rem; }
.pin-btn {
    background: none; border: none;
    color: var(--warm-faint);
    font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    padding: 0.15rem 0;
    transition: color var(--dur-fast) var(--ease);
}
.pin-btn:hover { color: var(--gold); }
.pin-btn:disabled { color: var(--warm-faint); cursor: default; }

/* typing */
.typing { display: inline-flex; gap: 4px; padding: 0.3rem 0; }
.typing span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold);
    animation: tblink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tblink { 0%, 70%, 100% { opacity: 0.2; } 35% { opacity: 1; } }

/* input */
.coach-input {
    display: flex; gap: 0.55rem;
    padding: 0.8rem 0.95rem;
    border-top: 1px solid var(--border);
    background: rgba(239, 232, 218, 0.66);
    align-items: flex-end;
    flex-shrink: 0;
}
.coach-input textarea {
    flex: 1;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    color: var(--ink);
    font-size: 0.86rem; font-family: var(--font); line-height: 1.5;
    resize: none;
    max-height: 140px;
    box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.07);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.coach-input textarea::placeholder { color: var(--warm-faint); }
.coach-input textarea:focus {
    border-color: rgba(138, 109, 36, 0.5);
    box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.07), 0 0 0 3px rgba(138, 109, 36, 0.1);
    outline: none;
}
.coach-input button {
    /* Same border, padding, and line metrics as the textarea, so the two
       are exactly the same height when the textarea is one row. */
    border: 1px solid var(--umber); border-radius: var(--radius-s);
    padding: 0.6rem 1rem;
    font-size: 0.86rem; font-weight: 600; line-height: 1.5;
    color: var(--paper);
    background: var(--umber);
    box-shadow: var(--shadow-1);
    transition: all var(--dur-fast) var(--ease);
}
.coach-input button:hover { filter: brightness(1.07); }
.coach-input button:active { filter: brightness(0.97); }
.coach-input button:disabled { opacity: 0.4; cursor: default; filter: none; }

/* ══ DOCTRINE ═════════════════════════════════════════════════════ */
.doc-row {
    display: flex; align-items: center; gap: 1.1rem;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 1rem 1.3rem;
    margin-bottom: 0.7rem;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.doc-row:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.doc-main { flex: 1; min-width: 0; }
.doc-title { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); letter-spacing: 0.005em; }
.doc-meta { color: var(--warm-faint); font-size: 0.74rem; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

/* toggle */
.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle .knob {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--surface-4);
    border: 1px solid var(--border-strong);
    transition: all var(--dur) var(--ease);
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(28, 25, 21, 0.09);
}
.toggle .knob::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--warm-muted);
    box-shadow: 0 1px 3px rgba(28, 25, 21, 0.14);
    transition: all var(--dur) var(--ease);
}
.toggle input:checked + .knob {
    background: rgba(31, 95, 82, 0.22);
    border-color: rgba(31, 95, 82, 0.5);
}
.toggle input:checked + .knob::after { left: 18px; background: var(--teal); }
.toggle input:focus-visible + .knob { outline: 2px solid rgba(138, 109, 36, 0.55); outline-offset: 2px; }

.doctrine-note {
    border-left: 2px solid var(--gold-dim);
    padding: 0.25rem 0 0.25rem 1.05rem;
    color: var(--warm-muted);
    font-size: 0.83rem; line-height: 1.62;
    max-width: 680px;
    margin-bottom: 1.7rem;
}
.doctrine-note b { color: var(--warm-dim); font-weight: 500; }

/* absorb zone */
.absorb {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-l);
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.7rem;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.absorb.drag { border-color: var(--gold); background: var(--gold-soft); }
.absorb-idle { display: flex; align-items: center; gap: 1.2rem; }
.absorb-idle > div { flex: 1; }
.absorb-title { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--ink); }
.absorb-desc { color: var(--warm-muted); font-size: 0.79rem; line-height: 1.58; margin-top: 0.25rem; max-width: 660px; }
.absorb-desc b { color: var(--warm-dim); font-weight: 500; }

.absorb-stages { display: flex; flex-direction: column; gap: 0.5rem; }
.astage {
    display: flex; gap: 0.7rem; align-items: baseline;
    font-size: 0.83rem; color: var(--warm-faint);
    transition: color var(--dur) var(--ease);
}
.astage .amark {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface-4);
    border: 1px solid var(--border-strong);
    position: relative; top: -1px;
    transition: all var(--dur) var(--ease);
}
.astage.current { color: var(--ink); }
.astage.current .amark {
    background: var(--gold); border-color: var(--gold);
    box-shadow: 0 0 10px var(--gold-glow);
    animation: apulse 1.4s infinite ease-in-out;
}
@keyframes apulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.astage.done { color: var(--warm-dim); }
.astage.done .amark { background: var(--teal); border-color: var(--teal); animation: none; }
.astage .ameta { color: var(--warm-faint); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.absorb-live {
    margin-top: 0.85rem;
    font-family: var(--mono); font-size: 0.7rem;
    color: var(--warm-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 1em;
}
.absorb-err { color: var(--red); font-size: 0.78rem; margin-top: 0.6rem; }

/* absorb review */
.rev-sec {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1.05rem;
    margin-bottom: 0.55rem;
    background: var(--surface);
    transition: border-color var(--dur-fast) var(--ease);
}
.rev-sec:hover { border-color: var(--border-strong); }
.rev-sec summary {
    cursor: pointer;
    font-size: 0.86rem; color: var(--warm-dim);
    list-style: none;
    display: flex; gap: 0.55rem; align-items: baseline;
}
.rev-sec summary::-webkit-details-marker { display: none; }
.rev-sec summary b { color: var(--gold); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; }
.rev-sec[open] summary { margin-bottom: 0.4rem; color: var(--ink); }
.rev-words { margin-left: auto; color: var(--warm-faint); font-size: 0.7rem; font-family: var(--mono); flex-shrink: 0; }

/* ══ INTEL LOG ════════════════════════════════════════════════════ */
.intel-capture { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.intel-capture input[type="text"] {
    flex: 1;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.48rem 0.75rem;
    color: var(--ink); font-size: 0.83rem; font-family: var(--font);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.intel-capture input[type="text"]::placeholder { color: var(--warm-faint); }
.intel-capture input[type="text"]:focus {
    border-color: rgba(138, 109, 36, 0.5);
    box-shadow: 0 0 0 3px rgba(138, 109, 36, 0.08);
    outline: none;
}
.intel-capture select {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--warm-dim); font-size: 0.76rem; font-family: var(--font);
    padding: 0.3rem 0.45rem;
    max-width: 140px;
}
.intel-row {
    display: flex; gap: 0.75rem; align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.83rem;
}
.intel-row:last-child { border-bottom: none; }
.intel-date {
    color: var(--warm-faint); font-size: 0.7rem;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    flex-shrink: 0; width: 88px;
}
.intel-body { flex: 1; color: var(--warm-dim); line-height: 1.55; }
.intel-body b { color: var(--ink); font-weight: 500; }
.intel-del {
    background: none; border: none;
    color: var(--warm-faint); font-size: 1rem; line-height: 1;
    padding: 0 0.3rem;
    opacity: 0;
    transition: all var(--dur-fast) var(--ease);
}
.intel-row:hover .intel-del, .rel-row:hover .intel-del, .intel-del:focus-visible { opacity: 1; }
.intel-del:hover { color: var(--red); }

/* ══ BRIEFINGS ════════════════════════════════════════════════════ */
.brief-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--warm-dim);
}
.brief-row:last-child { border-bottom: none; }
.brief-row-title {
    font-family: var(--serif); font-size: 0.98rem;
    transition: color var(--dur-fast) var(--ease);
}
.brief-row:hover .brief-row-title { color: var(--gold); }
.brief-row-date {
    color: var(--warm-faint); font-size: 0.72rem;
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* The briefing is the one artifact that leaves the instrument: a paper
   deliverable. Deliberately light — a printed document floating on the
   dark workspace. Its own ink ramp; does not use the app tokens. */
.brief-page { max-width: 812px; margin: 0 auto; padding: 0.4rem 0 3rem; }
.brief-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.brief-doc-actions { display: flex; gap: 0.5rem; }

/* the briefing is a printed sheet lying on the desk — lighter than
   the paper around it, lifted by its shadow */
.brief-sheet {
    --sheet: #FDFAF1;
    --sheet-edge: #E4DCC9;
    --pink: #100D07;          /* near-black ink */
    --pink-dim: #3B342A;
    --pink-soft: #6A6152;
    --seal: #9A7B2E;          /* darker gold that reads on paper */

    background:
        linear-gradient(180deg, #FFFDF7, var(--sheet));
    color: var(--pink-dim);
    border: 1px solid var(--sheet-edge);
    border-radius: 3px;
    padding: 4rem clamp(1.6rem, 5vw, 4.2rem) 3.2rem;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 40px 80px -28px rgba(28, 25, 21, 0.21),
        0 8px 24px -12px rgba(28, 25, 21, 0.15);
    position: relative;
}
/* faint fore-edge, so it reads as a physical sheet */
.brief-sheet::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: linear-gradient(180deg, var(--seal), rgba(154,123,46,0.35));
    border-radius: 3px 0 0 3px;
}

.brief-kicker {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--font);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--seal);
    padding-bottom: 1.5rem;
}
.brief-kicker span:last-child {
    color: var(--pink-soft); font-weight: 500; letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.brief-doc-title {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.6vw, 2.35rem); font-weight: 600; line-height: 1.16;
    letter-spacing: -0.005em;
    color: var(--pink);
    margin-bottom: 1.15rem;
    text-wrap: balance;
}
.brief-rule {
    height: 2px; width: 64px;
    background: var(--seal);
    margin-bottom: 1.9rem;
}

.brief-doc-body {
    font-family: var(--serif);
    font-size: 1.09rem; line-height: 1.78;
    color: var(--pink-dim);
}
.brief-doc-body p { margin-bottom: 1.05rem; }
.brief-doc-body p:first-of-type::first-letter {
    font-size: 3.1rem; line-height: 0.82; float: left;
    padding: 0.3rem 0.6rem 0 0;
    color: var(--pink); font-weight: 600;
}
.brief-doc-body strong { color: var(--pink); font-weight: 700; }
.brief-doc-body em { color: var(--pink); font-style: italic; }
.brief-doc-body a { color: #7A5E1C; text-decoration: underline; text-underline-offset: 2px; }
.brief-doc-body ul, .brief-doc-body ol { margin: 0.5rem 0 1.1rem 1.4rem; }
.brief-doc-body li { margin-bottom: 0.42rem; }
.brief-doc-body h1, .brief-doc-body h2, .brief-doc-body h3, .brief-doc-body h4 {
    font-family: var(--font);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--seal);
    margin: 1.9rem 0 0.65rem;
}
.brief-doc-body code {
    font-family: var(--mono); font-size: 0.82rem;
    background: rgba(16,13,7,0.06);
    padding: 0.08rem 0.35rem; border-radius: 3px;
    color: var(--pink);
}
.brief-doc-body pre {
    background: rgba(16,13,7,0.05);
    border: 1px solid rgba(16,13,7,0.1);
    border-radius: 3px;
    padding: 0.75rem 0.95rem; overflow-x: auto; margin: 0.6rem 0 1rem;
}
.brief-doc-body pre code { background: none; padding: 0; }
.brief-doc-body table {
    border-collapse: collapse; margin: 0.7rem 0 1.1rem;
    font-size: 0.88rem; width: 100%;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
}
.brief-doc-body th, .brief-doc-body td { border: 1px solid rgba(16,13,7,0.16); padding: 0.44rem 0.68rem; text-align: left; }
.brief-doc-body th { color: var(--pink); font-weight: 600; background: rgba(16,13,7,0.045); }
.brief-doc-body blockquote {
    border-left: 2px solid var(--seal);
    padding-left: 1.1rem;
    margin: 0.7rem 0 1.1rem;
    color: var(--pink-soft);
    font-style: italic;
}
.brief-doc-body hr { border: none; border-top: 1px solid rgba(16,13,7,0.14); margin: 1.4rem 0; }

.brief-colophon {
    margin-top: 2.6rem; padding-top: 1.3rem;
    border-top: 1px solid rgba(16,13,7,0.12);
    font-family: var(--font);
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--pink-soft);
}
::selection { }
.brief-sheet ::selection { background: rgba(154,123,46,0.28); color: var(--pink); }


/* ══ THE DRAFTED WORDS ════════════════════════════════════════════
   The artifact the principal actually came for: ready to copy and
   send. Given a sheet of its own so it reads as a thing, not as more
   chat. */
.msg-card {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #FDFBF6;
    overflow: hidden;
    margin: 0.85rem 0 0.4rem;
    box-shadow: var(--shadow-1);
}
.msg-head {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    padding: 0.6rem 0.95rem;
    border-bottom: 1px solid var(--border);
    background: rgba(28, 25, 21, 0.025);
    font-size: 0.78rem; color: var(--warm-muted);
}
.msg-head b { color: var(--ink); font-weight: 600; }
.msg-sep { color: var(--warm-ghost); }
.msg-btns { margin-left: auto; display: flex; gap: 0.4rem; }
.msg-body {
    padding: 1rem 1.15rem;
    font-family: var(--serif); font-size: 1.02rem; line-height: 1.62;
    color: var(--ink);
}
.msg-body p { margin-bottom: 0.7rem; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-why {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.15rem 0.85rem;
    font-size: 0.85rem; line-height: 1.55; color: var(--warm-muted);
}
.msg-why b { color: var(--warm-dim); font-weight: 600; }

/* ══ TOAST ════════════════════════════════════════════════════════ */
.toast {
    position: fixed; bottom: 1.6rem; left: 50%;
    transform: translateX(-50%) translateY(16px) scale(0.97);
    background: rgba(252, 250, 245, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font-size: 0.82rem; font-weight: 500;
    padding: 0.62rem 1.2rem;
    border-radius: 999px;
    opacity: 0; pointer-events: none;
    box-shadow: var(--shadow-3);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 300;
    max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.error { border-color: rgba(122, 36, 28, 0.5); color: var(--red); }

/* ══ LOADING ══════════════════════════════════════════════════════ */
.loading {
    text-align: center;
    color: var(--warm-faint);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    padding: 4.5rem 0;
    animation: apulse 1.6s infinite ease-in-out;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .dossier { grid-template-columns: 1fr; }
    .coach { position: static; height: 70vh; }
    .bar-mark-sub { display: none; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 1.6rem; }
    .dossier-head h1 { font-size: 1.6rem; }
}
@media (max-width: 640px) {
    .bar-inner { gap: 1.2rem; padding: 0 1rem; overflow-x: auto; }
    .bar-nav { gap: 1.1rem; }
    .bar-word { display: none; }
    .view { padding: 1.7rem 1rem 3.2rem; }
    .picker-row { grid-template-columns: auto 1fr; }
    .picker-row .picker-fields { display: flex; grid-column: 1 / -1; gap: 0.5rem; }
    .brief-doc-title { font-size: 1.55rem; }
}

/* ══ ACCOUNTS & KNOWLEDGE (OPC additions) ═════════════════════════ */

/* The auth screen is styled once, under "THE WAY IN" at the top of this
   file. Nothing about it belongs here. */

/* Signed-in identity in the top bar */
.bar-user {
    color: var(--warm-faint); font-size: 0.78rem; letter-spacing: 0.02em;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-right: 0.6rem;
    background: none; border: none; cursor: pointer; font-family: var(--font); padding: 0.3rem 0;
}
.bar-user:hover { color: var(--ink); }
@media (max-width: 720px) { .bar-user { display: none; } }

/* Account page danger zone */
.danger {
    border: 1px solid rgba(122, 36, 28, 0.35); border-radius: var(--radius);
    padding: 1rem 1.2rem; margin-top: 0.4rem;
}
.danger p { color: var(--warm-muted); font-size: 0.85rem; line-height: 1.55; margin-bottom: 0.8rem; }
.danger #acct-del-confirm { margin-top: 0.9rem; }
.btn-danger {
    background: var(--red); border: 1px solid var(--red); color: #F7F3EA;
}
.btn-danger:hover { filter: brightness(1.12); }

/* Stock-library badge on knowledge documents */
.chip-stock {
    background: rgba(138, 109, 36, 0.12);
    border-color: rgba(138, 109, 36, 0.4);
    color: var(--gold-bright);
    margin-left: 0.5rem; vertical-align: 1px;
}

/* Checkbox row (save-to-stock, absorb review) */
.check-row {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--warm-dim); font-size: 0.88rem; cursor: pointer;
}
.check-row input { width: auto; accent-color: var(--gold); }