/* ============================================================================
   portal/styles.css  —  one stylesheet for the whole portal
   Plain, calm, readable. No frameworks, no external fonts (works offline).
   ========================================================================== */

/* Palette lifted from the Green Thumb marketing site so the portal reads as the
   same company. Names kept identical to that site's variables, so a future
   brand tweak can be copied across without translation. */
:root {
    --green:      #14604A;   /* primary brand green  */
    --green2:     #1E7A5F;   /* lighter green        */
    --deep:       #0A2A21;   /* near-black green     */
    --cream:      #faf9f5;   /* page background      */
    --amber:      #d97757;   /* accent / call-outs   */
    --amber2:     #e09b80;
    --ink:        #141413;   /* body text            */
    --muted:      #5e5d52;
    --line:       #e8e6dc;
    --mint:       #7FE0A6;

    /* portal-specific roles, mapped onto the brand palette above */
    --bg:         var(--cream);
    --card-bg:    #fffefb;
    --brand:      var(--green);
    --brand-ink:  #ffffff;
    --danger:     #b5532f;
    --stamp-bg:   #fdf1ec;   /* confidential stamp — amber-tinted */
    --stamp-ink:  #8a3d1f;
    --shadow:     0 1px 2px rgba(20,20,19,.04), 0 12px 30px rgba(20,96,74,.07);

    /* Contrast was MEASURED, not eyeballed (2026-07-21, WCAG formula):
       ink/page 17.50 · muted/page 6.30 · white/green 7.50 · danger 4.91 —
       all clear the 4.5:1 body-text floor. Two came back short:
         --line  #e8e6dc vs page = 1.19:1
         --amber #d97757 vs cream = 2.96:1
       --line is fine as a DECORATIVE edge (1.4.11 governs controls, not
       ornament) but NOT where the border is the control's only affordance, so
       form fields get --line-input below at 3:1. --amber is likewise safe as a
       fill and unsafe as text, hence --amber-text. Using the pale values for
       text is the mistake this pair of names exists to prevent. */
    --line-input: #939187;   /* 3.00:1 on page — form-field edges */
    --amber-text: #b85636;   /* 4.51:1 on cream — amber AS TEXT only */

    /* One spacing scale. Guide 02 asks for a fixed set rather than ad-hoc
       pixel values, which is what stops a layout drifting as it grows. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    /* Touch target floor. WCAG 2.2 SC 2.5.8 (AA) sets 24×24 CSS px as the
       minimum; both Apple and Google recommend ~44–48. A salesperson taps this
       one-handed on a showroom floor, so we take the recommendation, not the
       floor. */
    --tap: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* FONTS — self-hosted, 2026-07-21. Operator ruling: "have 3 families and test
   all 3 - variations within a family is allowed."

   The comment that stood here said the portal "deliberately does NOT load them"
   and offered to self-host on request. That was misleading in the worst way:
   styles.css NAMED Fraunces and Plus Jakarta Sans, but no font files existed,
   so both silently fell through to Georgia and Segoe UI. Every screen reviewed
   until now was the FALLBACK, not the design. Nobody had seen the real thing.

   Now actually shipped, from portal/fonts.css — 4 woff2 files, 122 KB total,
   all SIL OFL 1.1, all served from our own origin. Google never sees a viewer.

   The three families, each with a distinct job:
     Fraunces          headings   variable 400-700
     Plus Jakarta Sans body + UI  variable 400-700  (preloaded — it paints first)
     IBM Plex Mono     DATA only  400 + 600

   Mono is not decoration here. Cards carry registration numbers, VINs, prices
   and phone numbers, read aloud off a phone in a showroom. In a proportional
   face 0/O and 1/l/I collapse into each other, and a salesperson reading a
   registration wrong in front of a customer is the exact failure this product
   exists to prevent. Mono keeps them distinct and keeps digits column-aligned. */
body {
    margin: 0;
    font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    /* 16px is the floor, never smaller — the single most-cited screen-type
       rule, and it matters more here than usual: bright showroom light and a
       phone held at arm's length both cost effective legibility. */
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
}

h1, h2, .card-title {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* Long headings must not fracture into single words on a 320px screen. */
    text-wrap: balance;
}

/* The third family, given a real job. Apply to any span that holds a value a
   salesperson might read aloud or type into a form:
       <span class="data">KA-51-MJ-4829</span>   <span class="data">₹12,45,000</span>
   font-variant-numeric: tabular-nums keeps figures in fixed-width columns, so a
   list of prices lines up on the decimal instead of drifting. */
.data {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas,
                 "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    /* Mono faces run optically larger than a sans at the same px, so 0.94em
       matches the body text rather than shouting over it. */
    font-size: 0.94em;
    letter-spacing: 0.01em;
    /* A registration or VIN must never be broken across two lines — a split
       plate is misread as two different values. */
    white-space: nowrap;
}

.data-strong { font-weight: 600; }

a { color: var(--brand); }

.wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--s5) 18px var(--s7);
}

/* Measure: 50–75 characters on desktop, 30–40 on a phone. The 920px wrap is
   right for the cards LIST and the audit table (both scan-by-row), but prose
   set at 920px runs past 110 characters, and the eye loses the line return.
   So the constraint lands on running text only, not on the whole page. */
.card-content p,
.card-content li,
.nda-text,
.note { max-width: 68ch; }

/* ---- top bar -------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--brand);
    color: var(--brand-ink);
}
.topbar .brand { font-weight: 700; letter-spacing: .3px; }
.topbar .who { font-size: 14px; opacity: .95; }
.topbar button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    /* was ~32px tall — under the 48px target and awkward one-handed */
    min-height: var(--tap);
    min-width: var(--tap);
    font-size: 15px;
}

/* Keyboard focus must be VISIBLE. Removing the default ring is the most common
   accessibility regression in hand-written CSS; we never remove it, we replace
   it with something that reads against both the cream page and the green bar.
   :focus-visible (not :focus) so mouse users don't get a ring on every click. */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}
.topbar :focus-visible { outline-color: #fff; }

/* ---- classification / purpose header ------------------------------------- */
.classbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--stamp-bg);
    color: var(--stamp-ink);
    border: 1px solid #f0dcc0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 16px 0;
    font-size: 14px;
}
.classbar .stamp {
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.classbar .purpose { color: var(--muted); }

/* ---- cards list ----------------------------------------------------------- */
.card-item {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 12px 0;
    text-decoration: none;
    color: var(--ink);
}
.card-item:hover { border-color: var(--brand); }
.card-item h3 { margin: 0 0 var(--s1); font-size: 17px; }
/* 14px not 13px — this line carries the date and salesman name, and it is read
   at arm's length on a phone. Small print is where "I didn't see it" starts. */
.card-item .meta { color: var(--muted); font-size: 14px; }

.empty {
    background: var(--card-bg);
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
}

/* ---- login ---------------------------------------------------------------- */
.login-card {
    max-width: 380px;
    margin: 8vh auto 0;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 26px;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
/* Labels ABOVE fields, never beside or inside them: placeholder-as-label
   disappears the moment typing starts, which is worst for exactly the user who
   needed it. 14px because a label at 13px is small print on a real phone. */
label {
    display: block;
    font-size: 14px;
    color: var(--muted);
    margin: var(--s3) 0 var(--s1);
    font-weight: 500;
}
input[type=email], input[type=password], input[type=text] {
    width: 100%;
    padding: 12px var(--s3);
    /* --line at 1.19:1 is invisible as a field edge; the border IS the
       affordance here, so this one takes the 3:1 value. */
    border: 1px solid var(--line-input);
    border-radius: 8px;
    /* MUST be >=16px. iOS Safari auto-zooms the page on focus for anything
       smaller, and the zoom does not undo itself — the previous 15px meant the
       login screen visibly lurched on every iPhone. This is a real bug fix,
       not a preference. */
    font-size: 16px;
    min-height: var(--tap);
    background: #fff;
    color: var(--ink);
}
input:focus { border-color: var(--brand); }

.btn-primary {
    background: var(--brand);
    color: #fff;
    border: 0;
    padding: var(--s3) var(--s4);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-top: 18px;
    min-height: var(--tap);
    font-weight: 600;
}
.btn-primary:hover { background: var(--green2); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line-input);
    padding: var(--s3) var(--s4);
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    min-height: var(--tap);
}
.msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.msg.error { color: var(--danger); }

/* ---- NDA modal ------------------------------------------------------------ */
.nda-overlay {
    position: fixed; inset: 0;
    background: rgba(18,28,38,.72);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 1000;
}
.nda-box {
    background: #fff; max-width: 520px; width: 100%;
    border-radius: 12px; padding: 26px 24px;
}
.nda-box h2 { margin: 0 0 12px; }
.nda-text { color: var(--ink); font-size: 15px; }
.nda-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }
.nda-actions .btn-primary, .nda-actions .btn-secondary { width: auto; margin-top: 0; }

/* ---- card view + watermark ----------------------------------------------- */
.card-viewport {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 26px;
    overflow: hidden;
}
.card-content { position: relative; z-index: 1; }
.card-content h2 { font-size: clamp(27px,5vw,38px); margin-top: 1.5em; }
.card-content h3 { font-size: 21px; margin-top: 1.7em; color: var(--deep); }
.card-content h4 { font-size: 16px; margin-top: 1.6em; text-transform: uppercase; letter-spacing: .04em; }
.card-content blockquote { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-left: 4px solid var(--amber); background: var(--stamp-bg); color: var(--muted); }
.card-content blockquote + blockquote { margin-top: calc(-1 * var(--s4)); padding-top: 0; }
.card-content code { font-family: "IBM Plex Mono",monospace; font-size: .88em; background: #f0f2ec; padding: 2px 4px; border-radius: 4px; }
.card-table-wrap { overflow-x: auto; margin: var(--s4) 0 var(--s5); }
.card-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.card-table th,.card-table td { text-align: left; vertical-align: top; padding: var(--s3); border: 1px solid #d8ddd5; overflow-wrap: anywhere; }
.card-table th { background: var(--deep); color: #fff; font-size: 12px; letter-spacing: .04em; }
.card-table td:first-child { width: 34%; font-weight: 600; color: var(--deep); }
.card-table tr:nth-child(even) td { background: #f7f7f2; }

/* The watermark grid sits ON TOP of the content but ignores clicks.
   It repeats the viewer's name + time. Deterrent only — see app.js. */
.watermark-grid {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px 20px;
    transform: rotate(-30deg) scale(1.6);
    transform-origin: center;
    pointer-events: none;
    z-index: 2;
}
.wm-cell {
    font-size: 12px;
    color: rgba(20,40,30,.10);
    white-space: nowrap;
    user-select: none;
}

/* ---- analytics table (dealer principal) ---------------------------------- */
table.audit {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}
table.audit th, table.audit td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}
table.audit th { background: #eef3f7; color: var(--muted); font-weight: 600; }
table.audit tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---- footer note ---------------------------------------------------------- */
.note { color: var(--muted); font-size: 13px; margin-top: 18px; }
.pill {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 12px; background: #eef3f7; color: var(--muted);
}

/* ============================================================================
   REFLOW — the page must work at 320px CSS width with no sideways scrolling
   (WCAG 1.4.10). 320px is a real phone, and the showroom is where this gets
   used. Wide things are allowed to scroll INSIDE their own box; the page body
   never does.
   ========================================================================== */
@media (max-width: 480px) {
    .wrap { padding: var(--s4) var(--s3) var(--s6); }
    .login-card {
        margin: var(--s5) auto 0;
        padding: var(--s5) var(--s4);
        border: 0;              /* full-bleed on a small screen reads calmer */
        background: transparent;
    }
    .topbar { padding: var(--s2) var(--s3); }
    .topbar .who { font-size: 13px; }
    /* Measure on a phone is 30–40 characters, not 68. */
    .card-content p, .card-content li, .nda-text, .note { max-width: 100%; }
    .nda-actions { flex-direction: column-reverse; }
    .nda-actions .btn-primary, .nda-actions .btn-secondary { width: 100%; }
}

/* Nothing in the page may force the body sideways. */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Long unbroken strings — a pasted URL, a VIN, a registration number — are the
   usual cause of a 320px page scrolling sideways. */
.card-content, .card-item, td { overflow-wrap: anywhere; }

/* Respect the OS "reduce motion" setting. Some people get genuinely unwell
   from movement; there is nothing here worth that. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   PRINT CSS — honest approach.
   Blocking printing in the browser is fake security (a photo of the screen
   defeats it instantly). So instead of pretending to block, we make any
   printout MORE traceable: force the watermark darker and add a banner.
   ========================================================================== */
@media print {
    .topbar button, .btn-primary, .btn-secondary { display: none !important; }
    .card-viewport { border: none; }
    .wm-cell { color: rgba(20,40,30,.28) !important; }   /* darker on paper */
    .watermark-grid { gap: 40px 16px; }
    body::before {
        content: "CONFIDENTIAL — printed copy is traceable to the signed-in viewer";
        display: block;
        text-align: center;
        color: #8a4b00;
        font-weight: 700;
        padding: 8px;
        border-bottom: 2px solid #8a4b00;
    }
}

/* 2026 pilot experience: progress that only accumulates, never punishes. */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s5) var(--s4);
    background:
      radial-gradient(circle at 12% 8%, rgba(127,224,166,.22), transparent 34%),
      radial-gradient(circle at 88% 88%, rgba(217,119,87,.12), transparent 32%),
      var(--cream);
}
.auth-page .login-card { margin: 0; width: 100%; box-shadow: var(--shadow); }
.eyebrow {
    margin: 0 0 var(--s2);
    color: var(--amber-text);
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.login-card h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.08; }
.login-card .sub { font-size: 15px; line-height: 1.55; }
.trust-line {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
}
.topbar .brand { color: #fff; text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: var(--s2); }
.topbar nav a { color: #fff; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s2); }
.text-button { border: 0; background: none; color: var(--green); min-height: var(--tap); cursor: pointer; font: inherit; text-decoration: underline; }
.mfa-qr { width: 220px; aspect-ratio: 1; margin: var(--s4) auto; display: block; border: 10px solid #fff; }
.manual-key { background: #f2f4ee; padding: var(--s3); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.manual-key code { color: var(--deep); }

.welcome { display: grid; grid-template-columns: 1.4fr .8fr; gap: var(--s6); align-items: end; padding: var(--s6) 0; }
.welcome h1 { margin: 0; font-size: clamp(34px, 6vw, 58px); line-height: 1.02; max-width: 14ch; }
.lede { max-width: 62ch; color: var(--muted); font-size: 17px; }
.hero-count { background: var(--deep); color: #fff; border-radius: 18px; padding: var(--s5); box-shadow: var(--shadow); }
.hero-count strong { display: block; font-size: clamp(52px, 9vw, 82px); line-height: .95; color: var(--mint); }
.hero-count span { display: block; margin-top: var(--s3); max-width: 22ch; font-size: 14px; line-height: 1.4; }
.progress-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s4); margin-bottom: var(--s7); }
.progress-panel, .goal-panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px; padding: var(--s5); box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; gap: var(--s4); align-items: start; }
.panel-head h2, .goal-panel h2 { margin: 0; font-size: 25px; }
.tier-chip { background: #e8f5ed; color: var(--green); padding: 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.tier-band { height: 14px; position: relative; border-radius: 999px; margin: var(--s6) 8px var(--s2); background: linear-gradient(90deg,#dfeae2 0 25%,#a8dabb 25% 50%,#70c698 50% 75%,#1e7a5f 75%); }
.tier-band span { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translateY(-50%); background: #fff; border: 5px solid var(--deep); box-shadow: 0 2px 7px rgba(10,42,33,.22); transition: left .45s ease; }
.tier-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
details { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
summary { min-height: var(--tap); cursor: pointer; color: var(--green); font-weight: 700; }
.goal-panel { display: flex; align-items: center; gap: var(--s5); }
.goal-ring { --goal: 0%; flex: 0 0 132px; width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) var(--goal),#e6ebe5 0); position: relative; }
.goal-ring::after { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--card-bg); }
.goal-ring span { position: relative; z-index: 1; text-align: center; }
.goal-ring b { display: block; color: var(--deep); font-size: 32px; }
.goal-ring small { color: var(--muted); }
.briefing-section { margin-bottom: var(--s7); }
.section-head { display: flex; justify-content: space-between; gap: var(--s4); align-items: end; margin-bottom: var(--s4); }
.section-head h2 { margin: 0; font-size: 30px; }
.section-head a { min-height: var(--tap); display: inline-flex; align-items: center; }
.briefing-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); }
.card-item { margin: 0; min-height: 154px; transition: transform .2s ease, box-shadow .2s ease; }
.card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-item-top { display: flex; justify-content: space-between; gap: var(--s3); }
.open-cue { color: var(--green); font-weight: 700; }
.card-item h3 { font-family: "Fraunces", Georgia, serif; font-size: 22px; margin-top: var(--s4); }
.morning { margin-bottom: var(--s7); }
.snap-row { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); }
.snap-row article { scroll-snap-align: start; flex: 0 0 min(78vw,290px); min-height: 190px; background: var(--deep); color: #fff; border-radius: 16px; padding: var(--s5); }
.snap-row article:nth-child(2) { background: var(--green); }
.snap-row article:nth-child(3) { background: #76452f; }
.snap-row span { color: var(--mint); font-family: "IBM Plex Mono",monospace; }
.snap-row h3 { font-family: "Fraunces",Georgia,serif; font-size: 24px; margin: var(--s6) 0 var(--s2); }
.snap-row p { color: rgba(255,255,255,.82); font-size: 14px; }
.portal-footer { text-align: center; padding: var(--s5); border-top: 1px solid var(--line); }
.confidential-note { margin-top: var(--s4); padding: var(--s4); border-left: 4px solid var(--amber); background: var(--stamp-bg); color: var(--muted); font-size: 13px; }
.reading-guide { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(190px,.65fr) 1.35fr; gap: var(--s4); align-items: center; margin: var(--s3) 0; padding: var(--s3); border: 1px solid rgba(20,96,74,.18); border-radius: 13px; background: rgba(250,249,245,.96); box-shadow: 0 8px 24px rgba(10,42,33,.08); backdrop-filter: blur(10px); }
.reading-guide .eyebrow { margin: 0; font-size: 10px; }
.reading-guide-status strong { display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--deep); font-size: 13px; }
.reading-track { height: 3px; margin-top: var(--s2); overflow: hidden; border-radius: 999px; background: #dfe7e1; }
.reading-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--green),var(--mint)); transition: width .15s linear; }
.reading-jumps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; padding-bottom: 2px; }
.reading-jumps button { flex: 0 0 auto; scroll-snap-align: start; min-height: 38px; max-width: 180px; padding: 7px 10px; overflow: hidden; border: 1px solid var(--line-input); border-radius: 999px; background: #fff; color: var(--muted); font: 600 12px/1.2 "Plus Jakarta Sans",sans-serif; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.reading-jumps button.active { border-color: var(--green); background: #e8f5ed; color: var(--green); }
.card-content h3 { scroll-margin-top: 118px; }
.trust-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s4); margin: var(--s6) 0; }
.trust-grid article { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; padding: var(--s5); }
.trust-grid h2 { margin-top: 0; font-size: 21px; }
.trust-grid p { color: var(--muted); }

@media (max-width: 700px) {
    .welcome, .progress-grid { grid-template-columns: 1fr; }
    .welcome { gap: var(--s5); }
    .hero-count { display: flex; align-items: center; gap: var(--s4); }
    .hero-count strong { flex: 0 0 auto; font-size: 56px; }
    .goal-panel { align-items: center; }
    .goal-ring { flex-basis: 112px; width: 112px; }
    .briefing-list, .trust-grid { grid-template-columns: 1fr; }
    .topbar .who { display: none; }
    .section-head { align-items: start; flex-direction: column; }
    .card-viewport { padding: var(--s4); }
    .card-table,.card-table tbody,.card-table tr,.card-table td { display: block; width: 100%; }
    .card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .card-table tr { border: 1px solid #d8ddd5; border-radius: 10px; margin-bottom: var(--s3); overflow: hidden; }
    .card-table td { border: 0; border-bottom: 1px solid #e2e5df; padding: var(--s3); }
    .card-table td:last-child { border-bottom: 0; }
    .card-table td::before { content: attr(data-label); display: block; margin-bottom: var(--s1); color: var(--amber-text); font-family: "IBM Plex Mono",monospace; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
    .reading-guide { grid-template-columns: 1fr; gap: var(--s2); margin-inline: calc(-1 * var(--s2)); padding: var(--s2); border-radius: 10px; }
    .reading-guide-status { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: center; }
    .reading-guide-status .reading-track { grid-column: 1 / -1; margin-top: 0; }
    .reading-guide-status strong { text-align: right; }
    .reading-jumps button { min-height: 36px; max-width: 150px; }
    .card-content h3 { scroll-margin-top: 154px; }
}

@media (max-width: 380px) {
    .goal-panel { align-items: flex-start; flex-direction: column; }
    .tier-labels span:nth-child(2), .tier-labels span:nth-child(3) { display: none; }
}