/*
 * Track That Race web skin — loaded LAST on the member app, the dashboard, the
 * scope pages and the sign-in pages, so it wins over the inherited MMM styles
 * without editing them. That keeps every MMM merge clean: MMM's templates keep
 * their own CSS, and Track That Race's look lives here, in one file.
 *
 * The look follows the round-one design pack (DASH-01 to DASH-04, SCOPE-01,
 * CREW-02 log in): dark and near-neutral, square corners, Archivo, brand green
 * and yellow for identity and primary actions only, amber and red reserved for
 * gone-quiet and panic.
 *
 * Author: Maré Greyling (Thevertex) <mare.greyling@gmail.com> — https://mare-greyling.com
 */

/* The inherited stylesheets read these names, so re-pointing them re-colours
   most of the app at once. --navy doubles as "ink" there, so it becomes text. */
:root{
  --ttr-green:#1FA357; --ttr-green-hi:#27B864; --ttr-yellow:#DBDB51;
  --ttr-amber:#F59E0B; --ttr-red:#DC2626;
  /* Round-three values, read from the rendered design (04-dashboard). */
  --ttr-bg:#0C0F0E; --ttr-side:#000000; --ttr-surface:#141817; --ttr-surface-2:#1A1E1C;
  --ttr-line:#2A2E2C; --ttr-line-2:#3A3A38; --ttr-line-soft:rgba(255,255,255,.06);
  --ttr-text:#FFFFFF; --ttr-text-2:#D8D6D4; --ttr-idle:#B8B5B2; --ttr-muted:#8A8785; --ttr-faint:#6E6B69;
  --ttr-paper:#EDEDEA;
  --ttr-font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --navy:var(--ttr-text); --ink:var(--ttr-text); --deep:var(--ttr-side);
  --gold:var(--ttr-yellow); --coral:var(--ttr-amber); --steel:var(--ttr-muted);
  --cream:var(--ttr-text); --bg:var(--ttr-bg); --line:var(--ttr-line);
  --ok:var(--ttr-green); --okbg:rgba(31,163,87,.14);
  --radius:0px; --pill:0px;
}

html,body{background:var(--ttr-bg)!important;color:var(--ttr-text)}
body,input,select,textarea,button{font-family:var(--ttr-font)!important}
h1,h2,h3,h4,.topbar h1{font-family:var(--ttr-font)!important;font-weight:800;letter-spacing:-.01em;color:var(--ttr-text)}
a{color:inherit}
::selection{background:var(--ttr-green);color:#fff}

/* ── Shell: sidebar ───────────────────────────────────────────────────── */
.side{background:var(--ttr-side)!important;color:var(--ttr-muted);border-right:1px solid var(--ttr-line);padding:0!important}
.side .logo{padding:22px 20px!important;margin:0!important;border-bottom:1px solid var(--ttr-line)!important}
.side .logo img{width:100%!important;max-width:200px!important;height:auto!important;border-radius:0!important}
.side .logo b{display:none!important}
.nav{gap:0!important;padding:8px 0}
.nav a{border-radius:0!important;padding:13px 20px!important;font-weight:600!important;font-size:15px!important;color:var(--ttr-muted)!important;border-left:3px solid transparent}
.nav a:hover{background:var(--ttr-surface)!important;color:var(--ttr-text)!important}
.nav a.active{background:var(--ttr-surface)!important;color:var(--ttr-text)!important;border-left-color:var(--ttr-green);font-weight:800!important}
.nav a .ic{color:inherit}
.nav a.help .ic{color:var(--ttr-yellow)}
.nav .navsec{color:var(--ttr-faint)!important;border-top-color:var(--ttr-line)!important;letter-spacing:.14em!important;margin:14px 20px 6px!important}
.nav a .bell{background:var(--ttr-yellow)!important;color:#0D0F0D!important;border-radius:0!important}
.side .foot{padding:0 16px 16px}
.userchip{background:var(--ttr-surface)!important;border:1px solid var(--ttr-line);border-radius:0!important}
.userchip .av{background:var(--ttr-green)!important;border-radius:0!important;color:#fff}
.userchip b{color:var(--ttr-text)!important;font-family:var(--ttr-font)!important}
.userchip small{color:var(--ttr-muted)!important}
.userrow a{border-radius:0!important;background:var(--ttr-surface)!important;border:1px solid var(--ttr-line);color:var(--ttr-muted)!important}
.madeby{color:var(--ttr-faint)!important}
.madeby a{color:var(--ttr-text)!important}

/* ── Shell: main column ───────────────────────────────────────────────── */
.main{background:var(--ttr-bg)}
.topbar h1{font-size:28px!important}
.topbar .subtitle{color:var(--ttr-muted)!important}
.rolebar{background:var(--ttr-surface)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.rolebar .rb-lbl{color:var(--ttr-muted)!important;font-family:var(--ttr-font)!important;text-transform:uppercase;letter-spacing:.12em;font-size:11px!important}
.rolebar .rb{background:transparent!important;color:var(--ttr-muted)!important;border:1px solid var(--ttr-line);border-radius:0!important}
.rolebar .rb:hover{color:var(--ttr-text)!important;border-color:var(--ttr-muted)}
.rolebar .rb.on{background:var(--ttr-green)!important;border-color:var(--ttr-green);color:#fff!important}
.rolebar .rb-note{color:var(--ttr-faint)!important}
.search{background:var(--ttr-surface)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.search input{color:var(--ttr-text)!important}
.search .mic{background:var(--ttr-green)!important;border-radius:0!important}
.navToggle{background:var(--ttr-surface)!important;color:var(--ttr-text)!important;border-radius:0!important}

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card,.panel,.box,.tile,.stat,.emptybox,.ttr-named{
  background:var(--ttr-surface)!important;border:1px solid var(--ttr-line)!important;
  border-radius:0!important;box-shadow:none!important;color:var(--ttr-text)}
a.card:hover{border-color:var(--ttr-green)!important;box-shadow:none!important;transform:none!important}
.emptybox{border-style:dashed!important;color:var(--ttr-muted)!important}
.emptybox b{color:var(--ttr-text)!important;font-family:var(--ttr-font)!important}
.skel,.skel.ttr-skel-item,.ttr-shim{background:var(--ttr-surface-2)!important;border-radius:0!important}
.skel::after,.ttr-shim::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)!important}
.ttr-retry{background:var(--ttr-surface-2)!important;color:var(--ttr-muted)!important}
.ttr-bgstrip{background:rgba(31,163,87,.25)!important}
.ttr-bgstrip i{background:var(--ttr-green)!important}
.ttr-bgstrip .lbl{background:var(--ttr-surface)!important;color:var(--ttr-muted)!important}
hr{border-color:var(--ttr-line)}
table{border-color:var(--ttr-line)}
th{color:var(--ttr-muted)!important;text-transform:uppercase;letter-spacing:.1em;font-size:11px!important}
td,th{border-color:var(--ttr-line)!important}

/* ── Buttons: green primary, outlined secondary, square ───────────────── */
.btn{border-radius:0!important;font-family:var(--ttr-font)!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;font-size:13px!important}
.btn-navy,.btn-primary,.btn-green,button[type=submit].btn{background:var(--ttr-green)!important;color:#fff!important;border:1px solid var(--ttr-green)!important}
.btn-navy:hover,.btn-primary:hover{background:var(--ttr-green-hi)!important;filter:none!important}
.btn-wht,.btn-ghost,.btn-outline,.btn-line{background:transparent!important;color:var(--ttr-text)!important;border:1px solid var(--ttr-muted)!important}
.btn-wht:hover,.btn-ghost:hover,.btn-outline:hover{border-color:var(--ttr-text)!important}

/* ── Forms ────────────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=search],input[type=url],input[type=date],input[type=time],input[type=datetime-local],select,textarea{
  background:var(--ttr-surface-2)!important;color:var(--ttr-text)!important;
  border:1px solid var(--ttr-line)!important;border-radius:0!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--ttr-green)!important;box-shadow:0 0 0 2px rgba(31,163,87,.25)!important}
input::placeholder,textarea::placeholder{color:var(--ttr-faint)!important}
label{color:var(--ttr-muted)!important;letter-spacing:.12em!important}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ttr-yellow)!important;outline-offset:2px;border-radius:0!important}
.ttr-reveal-btn{color:var(--ttr-green)!important}

/* ── Messages ─────────────────────────────────────────────────────────── */
.msg{border-radius:0!important;background:rgba(31,163,87,.12)!important;color:var(--ttr-text)!important;border:1px solid rgba(31,163,87,.45)!important}
.msg.error,.err{background:rgba(220,38,38,.12)!important;color:#FCA5A5!important;border:1px solid rgba(220,38,38,.45)!important;border-radius:0!important}
.msg.warning{background:rgba(245,158,11,.12)!important;color:#FCD34D!important;border-color:rgba(245,158,11,.45)!important}
.msg.info,.note{background:var(--ttr-surface-2)!important;color:var(--ttr-text)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.ok{background:rgba(31,163,87,.12)!important;color:#86EFAC!important;border-radius:0!important}

/* ── Sign-in pages (login, register, forgot, verify) ──────────────────── */
body.ttr-auth,.ttr-auth body{background:var(--ttr-bg)!important}
.left{background:var(--ttr-side) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cpath d='M0 60 L60 20 L120 60 L180 20 L240 60' fill='none' stroke='%231FA357' stroke-opacity='.10' stroke-width='18'/%3E%3Cpath d='M0 110 L60 70 L120 110 L180 70 L240 110' fill='none' stroke='%23DBDB51' stroke-opacity='.07' stroke-width='18'/%3E%3C/svg%3E") repeat!important;color:var(--ttr-text)!important;border-right:1px solid var(--ttr-line)}
.left img,.left .logo img{width:min(340px,80%)!important;height:auto!important;border-radius:0!important;box-shadow:none!important}
.left .logo{justify-content:center}
.left .logo b{display:none!important}
.left h2{color:var(--ttr-text)!important;font-family:var(--ttr-font)!important;font-weight:900!important;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;font-size:30px!important;line-height:1.05}
.left p,.left .stp{color:var(--ttr-muted)!important}
.left .stp .no{background:transparent!important;border:1px solid var(--ttr-line);border-radius:0!important;color:var(--ttr-text)!important}
.left .stp.on .no,.left .stp.done .no{background:var(--ttr-green)!important;border-color:var(--ttr-green)}
.refnote{background:rgba(219,219,81,.08)!important;border:1px solid rgba(219,219,81,.35)!important;color:var(--ttr-text)!important;border-radius:0!important}
.right{background:var(--ttr-bg)!important;color:var(--ttr-text)!important}
.right h1{color:var(--ttr-text)!important;font-family:var(--ttr-font)!important;font-weight:800!important}
.right .lede,.newhere{color:var(--ttr-muted)!important}
.newhere a,.right a:not(.btn){color:var(--ttr-yellow)!important}
.right a.btn,a.btn{text-decoration:none!important}
.right .btn-navy,.right a.btn-navy{color:#fff!important}
.or{color:var(--ttr-faint)!important}
.or:before,.or:after{background:var(--ttr-line)!important}
.oauthErr{color:var(--ttr-amber)!important}
.foot,.demo,.muted{color:var(--ttr-faint)!important}
.foot a{color:var(--ttr-text)!important}

/* ── Help widget (partials/help_widget.html) ─────────────────────────────
   The widget paints its panels with --navy, which this skin turns into text
   colour, so the panels went near-white under white text. Give them the dark
   surface back here rather than editing the inherited template. */
.hw-menu,.hw-guide,.hw-modal{background:var(--ttr-surface)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.hw-modal h3,.hw-menu button,.hw-clip b{color:var(--ttr-text)!important}
.hw-modal p.sub,.hw-msg,.hw-menu button small,.hw-files .hw-fileslbl,.hw-asknote{color:var(--ttr-muted)!important}
.hw-guide p,.hw-ans,.hw-files input{color:var(--ttr-text)!important}
.hw-modal textarea{background:var(--ttr-bg)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important;color:var(--ttr-text)!important}
.hw-btn{border-radius:0!important}
.hw-btn.ghost{background:transparent!important;border:1px solid var(--ttr-line)!important;color:var(--ttr-text)!important}
.hw-btn.gold{background:var(--ttr-yellow)!important;color:#0D0F0D!important}

/* ── Scope board, wizard and notes (templates/dashboard/scope/) ───────────
   The inherited scope styles paint white cards with --navy text, and this
   skin makes --navy near-white, so every line title vanished. Dark surface,
   readable text, square corners — until SCOPE-01 to 03 are designed. */
.scheck,.wcard{background:var(--ttr-surface)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important;box-shadow:none!important}
.sc-head b,.sc-steps label,.sc-cmt,.sc-pass,.sc-pass a,.sc-grouphd b{color:var(--ttr-text)!important}
.sc-roll,.sc-cmt span,.sc-wrow span,.sc-msg{color:var(--ttr-muted)!important}
.sc-built,.sc-toggle{background:var(--ttr-surface-2)!important;color:var(--ttr-muted)!important;border-radius:0!important}
.sc-pass{background:rgba(219,219,81,.08)!important;border-left:3px solid var(--ttr-yellow)!important;border-radius:0!important}
.sc-pass span{color:var(--ttr-yellow)!important}
.sc-steps input,.sc-built input{accent-color:var(--ttr-green)!important}
.sc-ctext,.wstep-text,.sc-editor input,.sc-editor textarea,.sc-wrow input{background:var(--ttr-bg)!important;color:var(--ttr-text)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.sc-editor,.sc-wortheditor{background:var(--ttr-surface-2)!important;border:1px solid var(--ttr-line)!important;border-radius:0!important}
.scheck .btn.ghost,.wcard .btn.ghost{background:transparent!important;color:var(--ttr-text)!important;border:1px solid var(--ttr-line)!important}
.sc-approve.on{background:rgba(31,163,87,.16)!important;border-color:var(--ttr-green)!important;color:var(--ttr-green)!important}
.sc-decline.on{background:rgba(220,38,38,.14)!important;border-color:var(--ttr-red)!important;color:#fca5a5!important}
.scheck .chip{border-radius:0!important}

/* ── Track That Race dashboard (templates/races/, round three web-42 to 45) ─
   Dark, square, neutral. Green only for the primary action, yellow for focus,
   amber and red never used here for decoration. */
.ttr-rolebar{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:flex-end;margin:0 0 18px}
.ttr-rb-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ttr-muted);margin-right:12px}
.ttr-rb{padding:7px 12px;font-size:12.5px;color:var(--ttr-text);border:1px solid var(--ttr-line);margin-left:-1px;text-decoration:none}
.ttr-rb.on{background:var(--ttr-text);color:#0D0F0D;font-weight:700}
.ttr-count{margin-left:auto;border:1px solid var(--ttr-line);padding:0 6px;font-size:11px;color:var(--ttr-text)}
.nav a{border-radius:0!important}
.ttr-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.ttr-head h1{font-size:22px!important;margin:0}
.ttr-head .sp{flex:1}
.ttr-chip{border:1px solid var(--ttr-line);padding:4px 9px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ttr-text)}
.ttr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.ttr-stat{background:var(--ttr-surface);border:1px solid var(--ttr-line);padding:16px}
.ttr-stat b{display:block;font-size:26px;font-weight:800;color:var(--ttr-text)}
.ttr-stat b small{font-size:13px;color:var(--ttr-muted);font-weight:600}
.ttr-stat span{display:block;margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ttr-muted)}
.ttr-grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
@media (max-width:980px){.ttr-grid2{grid-template-columns:1fr}}
.ttr-panel{background:var(--ttr-surface);border:1px solid var(--ttr-line);margin:0 0 12px}
.ttr-panel>h2{font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ttr-muted)!important;margin:0;padding:14px 16px;border-bottom:1px solid var(--ttr-line);display:flex;gap:10px;align-items:center}
.ttr-panel>h2 .sp{flex:1}
.ttr-panel .pad{padding:14px 16px}
.ttr-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ttr-line-soft);font-size:13.5px}
.ttr-row:last-child{border-bottom:0}
.ttr-row .grow{flex:1;min-width:0}
.ttr-row .muted,.ttr-muted{color:var(--ttr-muted);font-size:12.5px}
.ttr-table{width:100%;border-collapse:collapse;font-size:13px}
.ttr-table th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ttr-muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--ttr-line)}
.ttr-table td{padding:11px 12px;border-bottom:1px solid var(--ttr-line-soft);vertical-align:top;color:var(--ttr-text)}
.ttr-table td small{display:block;color:var(--ttr-muted);font-size:11.5px}
.ttr-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--ttr-muted);background:transparent;color:var(--ttr-text);font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.ttr-btn:hover{border-color:var(--ttr-text)}
.ttr-btn.primary{background:var(--ttr-green);border-color:var(--ttr-green);color:#fff}
.ttr-btn[disabled]{opacity:.45;cursor:not-allowed}
.ttr-form label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ttr-muted);margin:0 0 5px}
.ttr-form input,.ttr-form select,.ttr-form textarea{width:100%;box-sizing:border-box;background:var(--ttr-bg);color:var(--ttr-text);border:1px solid var(--ttr-line);padding:9px 10px;font:inherit;font-size:13.5px;border-radius:0}
.ttr-form input:focus,.ttr-form select:focus,.ttr-form textarea:focus,.ttr-btn:focus-visible{outline:2px solid var(--ttr-yellow);outline-offset:1px}
.ttr-form .f{margin:0 0 12px}
.ttr-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ttr-tabs{display:flex;gap:0;margin:0 0 12px}
.ttr-tabs a{padding:7px 12px;border:1px solid var(--ttr-line);margin-left:-1px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ttr-text);text-decoration:none}
.ttr-tabs a.on{background:var(--ttr-text);color:#0D0F0D;font-weight:700}
.ttr-note{font-size:12.5px;color:var(--ttr-muted);line-height:1.5}
.ttr-empty{padding:22px 16px;color:var(--ttr-muted);font-size:13px}
.ttr-state{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ttr-muted)}
.ttr-banner{border:1px solid var(--ttr-line);background:var(--ttr-surface-2);padding:10px 14px;font-size:13px;margin:0 0 14px}
.sc-section{font-size:15px!important;margin:26px 0 10px!important;color:var(--ttr-text)!important}
.sc-section span{color:var(--ttr-muted);font-weight:500}
.sc-grouphd{display:flex;align-items:baseline;gap:10px;margin:16px 0 8px}
.sc-grouphd b{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sc-grouphd .rule{flex:1;height:1px;background:var(--ttr-line)}
.sc-grouphd span{font-size:12px;color:var(--ttr-muted)}
.ds-line .scheck{border-color:var(--ttr-muted)!important}

/* First-time empty states (web-115 to web-117): a label, one plain sentence,
   one line of help and the one green action. No illustrations. */
.ttr-first{max-width:560px;margin:14vh 0 0 24px}
.ttr-first .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ttr-muted);font-weight:700}
.ttr-first h2{font-size:28px!important;font-weight:900;margin:8px 0 10px;color:var(--ttr-text)!important}
.ttr-first p{font-size:14px;line-height:1.55;color:var(--ttr-text);margin:0 0 18px}
.ttr-first .act{display:flex;gap:14px;align-items:center}
.ttr-first .act .ttr-muted{font-size:12px;max-width:140px}

/* ── Shell, round three (04-dashboard, 26 Sep 2026) ─────────────────────────
   Sidebar 232px on black with the logo over a 3px green rule; a 64px black top
   bar with the page title left and "Viewing as" right; content padded 22/24 and
   76px at the bottom so the two helper clusters never cover a control. */
.shell{min-height:100vh}
.side{width:232px!important;flex:0 0 232px!important;background:var(--ttr-side)!important;border-right:1px solid var(--ttr-line)!important;padding:0 0 84px!important;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{padding:20px 18px!important;border-bottom:3px solid var(--ttr-green)!important;display:flex;align-items:center}
.side .logo img{height:68px!important;width:auto!important;max-width:196px!important}
.nav{padding:0!important}
.nav a{padding:12px 18px!important;font-size:14px!important;font-weight:400!important;color:var(--ttr-idle)!important;border-left:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:8px}
.nav a:hover{background:var(--ttr-surface)!important;color:var(--ttr-text)!important}
.nav a.active{background:var(--ttr-surface)!important;color:var(--ttr-text)!important;border-left-color:var(--ttr-green)!important;font-weight:800!important}
.nav .navsec{margin:10px 18px 4px!important;border-top:1px solid var(--ttr-line)!important;padding-top:12px!important;font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--ttr-muted)!important;font-weight:800!important}
.nav .navsec ~ a{padding:10px 18px!important}
.ttr-count{margin-left:auto;border:1px solid var(--ttr-muted);padding:1px 6px;font-size:11px;font-weight:800;color:var(--ttr-text);line-height:1.3}
.side .foot{padding:12px 14px 0!important;margin-top:auto}
.userrow{margin-top:8px!important}
.userchip{padding:9px 10px!important;gap:10px!important}
.userchip .av{width:32px!important;height:32px!important;font-size:12px!important}
.userchip .av img{border-radius:0!important}
.userchip b{font-size:13px!important}
.userrow>a[title="Log out"]{border-radius:0!important;background:var(--ttr-surface)!important;border:1px solid var(--ttr-line);color:var(--ttr-idle)!important}
.madeby{font-size:11px!important;margin-top:10px!important}

.main{padding:0!important;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.ttr-top{position:sticky;top:0;z-index:30;background:var(--ttr-side);border-bottom:1px solid var(--ttr-line);min-height:64px;padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ttr-top-l{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.ttr-top .ttr-head{margin:0!important;flex:1 1 auto;min-width:0;gap:14px}
.ttr-top .ttr-head h1,.ttr-top .dashhead h1,.ttr-top h1{font-size:18px!important;font-weight:800!important;margin:0!important;white-space:nowrap;color:var(--ttr-text)!important;font-family:var(--ttr-font)!important;letter-spacing:0}
.ttr-top .dashhead{margin:0!important;flex:1 1 auto}
.ttr-top .ttr-muted,.ttr-top .subtitle{font-size:12px!important;color:var(--ttr-muted)!important;margin:0!important}
.ttr-top .ttr-chip{border-color:var(--ttr-line-2);color:var(--ttr-text-2);font-weight:800;padding:7px 11px;font-size:11px}
.ttr-top .ttr-rolebar{margin:0;flex:0 0 auto}
.ttr-rb-lbl{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--ttr-muted);margin-right:14px}
.ttr-rolebar .ttr-rb{padding:8px 11px;font-size:12px;color:var(--ttr-idle);border:1px solid var(--ttr-line-2);margin-left:-1px;white-space:nowrap}
.ttr-rolebar .ttr-rb:hover{color:var(--ttr-text)}
.ttr-rolebar .ttr-rb.on{background:var(--ttr-paper);color:#000;font-weight:800;border-color:var(--ttr-paper)}
.ttr-navbtn{display:none;width:40px;height:40px;background:var(--ttr-surface);border:1px solid var(--ttr-line-2);color:var(--ttr-text);font-size:18px;cursor:pointer;flex:0 0 auto}
.ttr-body{flex:1 1 auto;padding:22px 24px 84px;min-width:0}
.ttr-body>.ttr-topbar-rest{margin:0 0 16px!important;justify-content:flex-end}
.ttr-body .topbar .navToggle{display:none!important}
.main .rolebar{display:none!important}
@media (max-width:960px){
  .side{position:fixed!important;height:100vh;top:0}
  .ttr-navbtn{display:inline-flex;align-items:center;justify-content:center}
  .ttr-top{padding:10px 14px}
  .ttr-top .ttr-rolebar{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .ttr-body{padding:16px 14px 90px}
}

/* Panels, rows and stats to the round-three measures. */
.ttr-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 16px}
.ttr-stat{padding:14px 16px}
.ttr-stat b{font-size:28px}
.ttr-stat b small{font-size:16px;color:var(--ttr-muted)}
.ttr-stat span{font-size:11px;letter-spacing:.1em;margin-top:4px}
.ttr-grid2{gap:16px}
.ttr-panel{margin:0 0 16px}
.ttr-panel>h2{padding:13px 18px;font-weight:400!important;letter-spacing:.1em}
.ttr-panel>h2 .ttr-muted,.ttr-panel>h2 a{font-size:12px;letter-spacing:0;text-transform:none;color:var(--ttr-text-2)}
.ttr-panel .pad{padding:14px 18px}
.ttr-row{padding:10px 18px;border-bottom:1px solid var(--ttr-line);font-size:13px}
.ttr-table{table-layout:auto}
.ttr-table th{font-size:10px;font-weight:400;padding:9px 12px;color:var(--ttr-muted)!important}
.ttr-table td{padding:10px 12px;border-bottom:1px solid var(--ttr-line)}
.ttr-table td small{color:var(--ttr-muted);font-size:11px}
.ttr-panel{min-width:0}
.ttr-panel .ttr-scroll,.ttr-panel>.ttr-table{max-width:100%}
.ttr-btn{padding:7px 11px;font-size:11px;letter-spacing:.06em;border-color:var(--ttr-line-2);color:var(--ttr-text-2)}
.ttr-btn:hover{border-color:var(--ttr-text);color:var(--ttr-text)}
.ttr-btn.primary{color:#fff}
.ttr-btn.primary:hover{background:var(--ttr-green-hi);border-color:var(--ttr-green-hi)}
.ttr-btn.light{border-color:var(--ttr-paper);color:var(--ttr-text);padding:9px 13px}
.ttr-tabs a{padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.06em;border-color:var(--ttr-line-2);color:var(--ttr-text-2)}
.ttr-tabs a.on{background:var(--ttr-paper);color:#000;border-color:var(--ttr-paper)}
.ttr-chip{border-color:var(--ttr-line-2)}

/* AI marker (R3-ANSWERS §8): outlined, neutral, one word after it. */
.ttr-ai{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ttr-text-2)}
.ttr-ai b{border:1px solid var(--ttr-text-2);padding:0 4px;font-weight:800;color:var(--ttr-text)}

/* Status words: neutral by default; amber and red only for quiet and panic. */
.ttr-quiet{color:var(--ttr-amber)!important}
.ttr-panic{color:var(--ttr-red)!important}

/* Loading rows (web-118 to web-123): grey bars in the real layout. */
.ttr-skel{display:block;height:12px;background:var(--ttr-surface-2);position:relative;overflow:hidden}
.ttr-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:ttrShim 1.4s infinite}
@keyframes ttrShim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.ttr-skel::after{animation:none}}

/* Help widget, round three: neutral recording states (red is panic only). */
.hw-ev button{border-radius:0!important;background:transparent!important;border:1px solid var(--ttr-line-2)!important;color:var(--ttr-text-2)!important;font-weight:800!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase}
.hw-ev button.on{background:var(--ttr-paper)!important;border-color:var(--ttr-paper)!important;color:#000!important}
.hw-clip{background:var(--ttr-surface-2)!important;border:1px solid var(--ttr-line-2)!important;color:var(--ttr-text-2)!important;border-radius:0!important}
.hw-recbar{background:#000!important;border:1px solid var(--ttr-line-2);border-radius:0!important}
.hw-recbar .d{background:var(--ttr-yellow)!important}
.hw-recbar button{border-radius:0!important;background:var(--ttr-paper)!important;color:#000!important}
.hw-btn.gold,.hw-send{background:var(--ttr-green)!important;color:#fff!important}
.hw-overlay{background:rgba(0,0,0,.72)!important}
.hw-modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.hw-modal .acts button{border-radius:0;font:800 11px var(--ttr-font);letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;cursor:pointer;border:1px solid var(--ttr-line-2);background:transparent;color:var(--ttr-text-2)}
.hw-modal .acts button.gold{background:var(--ttr-green);border-color:var(--ttr-green);color:#fff}
.hw-menu{min-width:260px!important}
.hw-menu button{padding:13px 16px!important;font-weight:800!important;font-size:14px!important}
.hw-menu button small{color:var(--ttr-muted)!important;font-weight:400!important;font-size:12px!important;margin-top:2px}

/* Sidebar logo and account row (round three). */
.side .logo a{display:block;line-height:0}
.side .logo img{height:auto!important;width:168px!important;max-width:100%!important;max-height:68px!important;object-fit:contain}
.ttr-foot{padding:14px 18px 0!important;border-top:1px solid var(--ttr-line);margin-top:auto}
.ttr-me{display:flex;align-items:stretch;gap:0;border:1px solid var(--ttr-line-2)}
.ttr-me-n{flex:1;min-width:0;padding:8px 10px;text-decoration:none;display:block}
.ttr-me-n b{display:block;font-size:13px;color:var(--ttr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttr-me-n small{display:block;font-size:11px;color:var(--ttr-muted)}
.ttr-me-n:hover b{text-decoration:underline}
.ttr-out{display:flex;align-items:center;padding:0 10px;border-left:1px solid var(--ttr-line-2);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ttr-idle);text-decoration:none;white-space:nowrap}
.ttr-out:hover{color:var(--ttr-text)}
.side{display:flex!important;flex-direction:column}
.nav a{padding:10px 18px!important}
.nav .navsec ~ a{padding:8px 18px!important}
.ttr-me-n small{display:none}
.ttr-me-n{padding:9px 10px}
.madeby{margin:8px 0 0!important}
.ttr-rb-lbl{white-space:nowrap}
@media (max-width:960px){
  .ttr-top-l{flex:1 1 0;min-width:0}
  .ttr-top .ttr-head{flex-wrap:wrap;row-gap:6px}
  .ttr-top .ttr-head h1{font-size:17px!important}
}
@media (max-width:960px){.ttr-top{position:static}}

/* ── Help, round five (partials/help_widget.html, js/ttr-journey.js) ─────
   One yellow square help button bottom left; the right flag is gone. Only the
   left column keeps its 76px bottom padding; the content area no longer has to
   keep the bottom-right corner clear. Narrow screens (one column) keep room
   for the button. */
.side{padding-bottom:76px!important}
@media (min-width:961px){.ttr-body{padding-bottom:24px}}

/* Say what is missing (29 Sep 2026, js/ttr-need.js): one amber line naming every missing
   thing, and an amber outline on each box until it is filled. Buttons stay pressable. */
.ttr-need{border-left:3px solid var(--ttr-amber);background:rgba(245,158,11,.10);color:var(--ttr-text);padding:10px 12px;font-size:13px;font-weight:700;line-height:1.45;margin:0 0 12px}
.ttr-need[hidden]{display:none!important}
.ttr-missing{outline:2px solid var(--ttr-amber)!important;outline-offset:2px}

/* Round nine (Maré, 1 Oct 2026): "Created by Thevertex" sits at the bottom right of the screen, never
   under the Help button at the bottom left of the menu. */
.madeby{position:fixed!important;right:14px;bottom:8px;margin:0!important;z-index:5;font-size:11px!important;text-align:right!important;pointer-events:auto}
/* On a phone the line stays in the menu (static), so it never sits over a page's own buttons. */
@media (max-width:760px){.madeby{position:static!important;text-align:center!important;margin:8px 0 0!important}}