/* SOURCE OF TRUTH: ../shared/portal-theme.css — Firebase Hosting cannot
   serve a file from outside a target's own public directory (each of
   crew/pulse/build maps to a different subdomain), so this file is a
   physical copy, not a symlink. Edit the source, then copy it here and
   into the other site directories that use it. */

  :root{
    /* dark is the base */
    --bg:#100E17;
    --surface:#17141F;
    --surface-2:#1C1927;
    --surface-3:#221E30;
    --line:#2A2638;
    --line-2:#332E45;
    --ink:#F5F3F8;
    --ink-mid:#ACA6BC;
    --ink-dim:#736D84;
    --accent:#8B5CF6;
    --accent-ink:#C4ADFF;
    --accent-wash:rgba(139,92,246,.14);
    --good:#34D399;   --good-wash:rgba(52,211,153,.13);
    --warn:#FBBF24;   --warn-wash:rgba(251,191,36,.13);
    --bad:#F87171;    --bad-wash:rgba(248,113,113,.13);
    --info:#60A5FA;
    --radius:10px;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --side-w:224px;
  }
  /* light theme tokens — applied on explicit choice, or by OS preference when
     the user hasn't chosen. Every rule below reads these variables, so this
     block is all that changes between modes. */
  :root[data-theme="light"]{
    --bg:#F6F5FB;
    --surface:#FFFFFF;
    --surface-2:#F3F1F9;
    --surface-3:#EBE8F4;
    --line:#E6E3F0;
    --line-2:#D8D3E7;
    --ink:#1B1730;
    --ink-mid:#57516C;
    --ink-dim:#8B8599;
    --accent:#7C4DEE;
    --accent-ink:#6A34D9;
    --accent-wash:rgba(124,77,238,.12);
    --good:#0E9F6E;   --good-wash:rgba(14,159,110,.13);
    --warn:#B45309;   --warn-wash:rgba(180,83,9,.13);
    --bad:#DC2626;    --bad-wash:rgba(220,38,38,.10);
    --info:#2563EB;
    --shadow:0 1px 2px rgba(24,18,44,.06), 0 10px 26px -14px rgba(24,18,44,.16);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#F6F5FB;
      --surface:#FFFFFF;
      --surface-2:#F3F1F9;
      --surface-3:#EBE8F4;
      --line:#E6E3F0;
      --line-2:#D8D3E7;
      --ink:#1B1730;
      --ink-mid:#57516C;
      --ink-dim:#8B8599;
      --accent:#7C4DEE;
      --accent-ink:#6A34D9;
      --accent-wash:rgba(124,77,238,.12);
      --good:#0E9F6E;   --good-wash:rgba(14,159,110,.13);
      --warn:#B45309;   --warn-wash:rgba(180,83,9,.13);
      --bad:#DC2626;    --bad-wash:rgba(220,38,38,.10);
      --info:#2563EB;
      --shadow:0 1px 2px rgba(24,18,44,.06), 0 10px 26px -14px rgba(24,18,44,.16);
    }
  }
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--ink-mid);
    font-family:'Anek Latin',system-ui,-apple-system,sans-serif;
    font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  a{color:var(--accent-ink); text-decoration:none;}
  a:hover{text-decoration:underline;}
  h1,h2,h3{margin:0; color:var(--ink); font-weight:700; letter-spacing:-.01em;}
  ::selection{background:var(--accent-wash);}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.4rem;
    font:inherit; font-weight:600; font-size:.875rem; cursor:pointer;
    border-radius:8px; padding:.5rem .9rem; border:1px solid var(--line-2);
    background:var(--surface-2); color:var(--ink);
    transition:background .14s ease, border-color .14s ease, opacity .14s ease;
    white-space:nowrap;
  }
  .btn:hover{background:var(--surface-3); border-color:var(--accent);}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn--primary{background:var(--accent); border-color:var(--accent); color:#fff;}
  .btn--primary:hover{filter:brightness(1.08);}
  .btn--ghost{background:transparent; border-color:transparent; color:var(--ink-mid);}
  .btn--ghost:hover{background:var(--surface-2); color:var(--ink);}
  .btn--danger{color:var(--bad); border-color:transparent; background:transparent;}
  .btn--danger:hover{background:var(--bad-wash); border-color:var(--bad);}
  .btn--sm{padding:.32rem .6rem; font-size:.8rem; border-radius:6px;}
  .btn[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none;}

  /* ---------- gate (signed out / forbidden) ---------- */
  .gate{
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  }
  .gate-card{
    width:100%; max-width:380px; text-align:center;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:2.4rem 2rem; box-shadow:var(--shadow);
  }
  .gate-mark{
    width:44px; height:44px; margin:0 auto 1.2rem; display:block; color:var(--accent);
  }
  .gate-card h2{font-size:1.25rem; margin-bottom:.5rem;}
  .gate-card p{margin:0 0 1.4rem; color:var(--ink-dim); font-size:.92rem;}
  .gate-card .btn{width:100%; justify-content:center;}
  .gate-err{margin:.9rem 0 0; font-size:.85rem; color:var(--bad); min-height:1.1em;}
  .gate-card p.gate-note{margin:0 0 1.2rem; padding:.7rem .9rem; border-radius:10px; background:var(--surface-3); color:var(--ink-mid); font-size:.85rem;}

  /* ---------- app shell ---------- */
  .app{display:flex; min-height:100vh;}
  .side{
    width:var(--side-w); flex-shrink:0; position:fixed; inset:0 auto 0 0;
    display:flex; flex-direction:column; gap:.25rem;
    background:var(--surface); border-right:1px solid var(--line); padding:1.1rem .8rem;
  }
  .brand{
    display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem 1rem;
    font-weight:800; font-size:1.05rem; color:var(--ink); letter-spacing:-.02em;
  }
  .brand svg{width:20px; height:20px; color:var(--accent);}
  .brand span{color:var(--ink-dim); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;}

  .nav{display:flex; flex-direction:column; gap:2px; flex:1 1 auto;}
  .nav-item{
    display:flex; align-items:center; gap:.65rem; width:100%;
    font:inherit; font-weight:600; font-size:.9rem; text-align:left; cursor:pointer;
    padding:.55rem .6rem; border-radius:8px; border:0; background:transparent; color:var(--ink-mid);
    transition:background .12s ease, color .12s ease;
  }
  .nav-item svg{width:18px; height:18px; flex-shrink:0; opacity:.8;}
  .nav-item:hover{background:var(--surface-2); color:var(--ink);}
  .nav-item.active{background:var(--accent-wash); color:var(--accent-ink);}
  .nav-item.active svg{opacity:1;}
  .nav-item .count{
    margin-left:auto; font-size:.72rem; font-weight:700; padding:.1rem .4rem;
    border-radius:99px; background:var(--surface-3); color:var(--ink-mid); min-width:1.2rem; text-align:center;
  }
  .nav-item.active .count{background:var(--accent); color:#fff;}

  .side-user{
    display:flex; align-items:center; gap:.6rem; padding:.6rem;
    border-top:1px solid var(--line); margin-top:.4rem;
  }
  .side-user img{width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--surface-3);}
  .side-user .meta{min-width:0; flex:1 1 auto;}
  .side-user .email{display:block; font-size:.8rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .side-user .btn{margin-top:.15rem; padding:0; font-size:.76rem; color:var(--ink-dim); border:0; background:none;}
  .side-user .btn:hover{color:var(--bad); background:none;}

  .theme-toggle{
    width:100%; font:inherit; font-size:.82rem; font-weight:600; text-align:left; cursor:pointer;
    padding:.5rem .6rem; border-radius:8px; border:0; background:transparent; color:var(--ink-mid);
  }
  .theme-toggle:hover{background:var(--surface-2); color:var(--ink);}
  .theme-toggle span{display:flex; align-items:center; gap:.55rem;}
  .theme-toggle svg{width:16px; height:16px; flex-shrink:0;}
  /* base = dark -> offer "Light mode"; hide the "Dark mode" option */
  .theme-toggle .opt-dark{display:none;}
  :root[data-theme="light"] .theme-toggle .opt-light{display:none;}
  :root[data-theme="light"] .theme-toggle .opt-dark{display:flex;}
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]) .theme-toggle .opt-light{display:none;}
    :root:not([data-theme="dark"]) .theme-toggle .opt-dark{display:flex;}
  }

  .main{
    margin-left:var(--side-w); flex:1 1 auto; min-width:0;
    padding:2rem clamp(1rem, 4vw, 2.75rem) 4rem;
  }
  .panel{max-width:1080px;}
  .panel[hidden]{display:none;}

  /* ---------- panel header ---------- */
  .phead{
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
    margin-bottom:1.6rem;
  }
  .phead h2{font-size:1.35rem;}
  .phead p{margin:.25rem 0 0; font-size:.88rem; color:var(--ink-dim); max-width:52ch;}
  .phead-actions{flex-shrink:0;}

  /* ---------- KPI groups ---------- */
  .kpi-groups{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap:1.4rem 1.6rem; margin-bottom:2.2rem;
  }
  .kpi-group-h{
    font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-dim); margin-bottom:.65rem;
  }
  .kpi-group-h .muted{color:var(--ink-dim); font-weight:600; opacity:.7; letter-spacing:.03em;}
  .kpis{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
  .kpi{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:.85rem 1rem; min-width:0;
  }
  .kpi--hero{
    background:linear-gradient(180deg, var(--accent-wash), transparent 70%);
    border-color:color-mix(in srgb, var(--accent) 32%, var(--line));
  }
  .kpi-label{
    display:block; font-size:.72rem; font-weight:600; letter-spacing:.03em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:.35rem;
  }
  .kpi-value{
    display:block; font-size:1.55rem; font-weight:800; color:var(--ink);
    font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;
  }
  .kpi--hero .kpi-value{font-size:2rem;}
  .kpi-sub{display:block; margin-top:.35rem; font-size:.78rem; color:var(--ink-dim);}
  .kpi-sub b{color:var(--ink-mid); font-weight:700; font-variant-numeric:tabular-nums;}

  /* ---------- generic card ---------- */
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:1.3rem 1.4rem;
  }
  .card + .card{margin-top:1rem;}
  .card-h{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:1.1rem;
  }
  .link-btn{
    font:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
    background:none; border:0; color:var(--accent-ink); padding:.15rem .1rem;
  }
  .link-btn:hover{text-decoration:underline;}
  .cols{display:grid; grid-template-columns:3fr 2fr; gap:1rem; margin-bottom:1rem;}
  @media (max-width:900px){ .cols{grid-template-columns:1fr;} }

  /* segmented range control */
  .seg{
    display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
    border-radius:8px; padding:2px; gap:1px;
  }
  .seg button{
    font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; border:0;
    background:transparent; color:var(--ink-dim); padding:.3rem .62rem; border-radius:6px;
    transition:background .12s ease, color .12s ease;
  }
  .seg button:hover{color:var(--ink);}
  .seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
  .card-h-tools{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;}
  .role-sel{
    width:auto; font-size:.78rem; font-weight:600; padding:.28rem 1.7rem .28rem .55rem;
    text-transform:capitalize;
  }
  .chk{display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--ink-mid); padding:.5rem 0;}
  .chk input{width:auto; margin:0; accent-color:var(--accent);}
  .j-flag{font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--warn); margin-left:.5rem;}

  /* ---------- traffic chart ---------- */
  .chart{width:100%;}
  .chart svg{display:block; width:100%; height:auto; overflow:visible;}
  .chart .cx-bar{fill:var(--accent); transition:fill .12s ease;}
  .chart .cx-bar:hover{fill:var(--accent-ink);}
  .chart .cx-base{stroke:var(--line-2); stroke-width:1;}
  .chart .cx-grid{stroke:var(--line); stroke-width:1; stroke-dasharray:2 3;}
  .chart .cx-tick{fill:var(--ink-dim); font-size:9px; font-family:inherit;}
  .chart .cx-ymax{fill:var(--ink-dim); font-size:9px; font-family:inherit;}
  .chart-legend{
    display:flex; gap:1rem; margin-top:.7rem; font-size:.76rem; color:var(--ink-dim);
  }

  /* ---------- data table ---------- */
  .dt-wrap{
    border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);
  }
  .dt-scroll{overflow-x:auto;}
  table.dt{width:100%; border-collapse:collapse; font-size:.86rem;}
  table.dt th, table.dt td{
    text-align:left; padding:.7rem .9rem; vertical-align:top;
    border-bottom:1px solid var(--line);
  }
  table.dt thead th{
    position:sticky; top:0; background:var(--surface-2); z-index:1;
    font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-dim);
  }
  table.dt tbody tr:last-child td{border-bottom:0;}
  table.dt tbody tr:hover td{background:var(--surface-2);}
  table.dt td.num, table.dt th.num{text-align:right; font-variant-numeric:tabular-nums;}
  table.dt td:first-child{white-space:nowrap;}
  table.dt td.strong{color:var(--ink); font-weight:600;}
  table.dt .cell-links a{margin-right:.55rem; font-size:.82rem;}
  table.dt .cell-why{max-width:30ch; min-width:16ch; color:var(--ink-dim);}

  /* ---------- pills / tags ---------- */
  .tag{
    display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; padding:.16rem .5rem; border-radius:99px; line-height:1.4;
  }
  .tag--open{background:var(--good-wash); color:var(--good);}
  .tag--closed{background:var(--bad-wash); color:var(--bad);}
  .tag--draft{background:var(--warn-wash); color:var(--warn);}
  .tag--role{background:var(--accent-wash); color:var(--accent-ink);}
  .tag--muted{background:var(--surface-3); color:var(--ink-mid);}

  /* ---------- job list ---------- */
  .job-row{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.95rem 1.1rem; border-bottom:1px solid var(--line);
  }
  .job-row:last-child{border-bottom:0;}
  .job-row .j-meta{min-width:0;}
  .job-row .j-title{display:flex; align-items:center; gap:.55rem; color:var(--ink); font-weight:600; font-size:.95rem;}
  .job-row .j-type{margin:.2rem 0 0; font-size:.8rem; color:var(--ink-dim);}
  .job-row .j-actions{display:flex; gap:.35rem; flex-shrink:0;}

  /* ---------- forms ---------- */
  .form-panel{margin-top:1rem;}
  .field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;}
  .field:last-of-type{margin-bottom:0;}
  .field label{font-size:.8rem; font-weight:600; color:var(--ink-mid);}
  .field .hint{font-weight:400; color:var(--ink-dim); font-size:.76rem;}
  .field-row{display:grid; grid-template-columns:2fr 1fr 1fr; gap:.9rem;}
  @media (max-width:640px){ .field-row{grid-template-columns:1fr;} }
  input[type=text], input[type=email], input[type=number], select, textarea{
    font:inherit; font-size:.9rem; color:var(--ink); width:100%;
    background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px;
    padding:.6rem .75rem; transition:border-color .12s ease, background .12s ease;
  }
  input::placeholder, textarea::placeholder{color:var(--ink-dim);}
  input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--accent); background:var(--surface-3);
  }
  textarea{resize:vertical; min-height:4.5rem; line-height:1.55;}
  select{appearance:none; background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2rem;}
  .form-actions{display:flex; align-items:center; gap:.7rem; margin-top:1.2rem;}
  .msg{font-size:.83rem; min-height:1.1em;}
  .msg.ok{color:var(--good);}
  .msg.err{color:var(--bad);}

  .inline-form{
    display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end; margin-top:1.1rem;
    padding-top:1.1rem; border-top:1px solid var(--line);
  }
  .inline-form .field{margin-bottom:0;}

  /* ---------- bars ---------- */
  .bars{display:flex; flex-direction:column; gap:.6rem;}
  .bar{display:grid; grid-template-columns:8rem 1fr 2.5rem; align-items:center; gap:.75rem; font-size:.85rem;}
  .bar-lbl{color:var(--ink-mid); text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .bar-track{display:block; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
  .bar-fill{display:block; height:7px; min-width:2px; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-ink));}
  .bar-n{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums;}

  /* ---------- empty / loading ---------- */
  .empty{
    display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
    padding:2.6rem 1rem; color:var(--ink-dim); font-size:.88rem;
  }
  .empty svg{width:26px; height:26px; opacity:.5;}
  .loading{padding:2rem 1rem; color:var(--ink-dim); font-size:.86rem;}

  [hidden]{display:none !important;}

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .app{flex-direction:column;}
    .side{
      position:static; width:auto; height:auto; flex-shrink:0; flex-direction:column;
      border-right:0; border-bottom:1px solid var(--line); padding:.8rem;
    }
    .brand{padding:.2rem .3rem .7rem;}
    .nav{flex-direction:row; overflow-x:auto; gap:.3rem; -webkit-overflow-scrolling:touch;}
    .nav-item{width:auto; white-space:nowrap; padding:.5rem .7rem;}
    .nav-item .count{margin-left:.3rem;}
    .theme-toggle{width:auto;}
    .side-user{border-top:1px solid var(--line); margin-top:.5rem;}
    .main{margin-left:0; padding:1.4rem 1rem 3rem; max-width:100%;}
    .panel{max-width:100%;}
    .phead{flex-direction:column;}
    .kpis{grid-template-columns:1fr;}
    .card{padding:1.1rem;}
    table.dt{min-width:640px;}
  }

  /* ---------- review card (Verification/Billboard/applications-style rows) ---------- */
  .review-card{
    display:flex; gap:1rem; align-items:flex-start;
    padding:1rem 1.1rem; border-top:1px solid var(--line);
  }
  .review-card:first-child{border-top:0;}
  .review-card img{border-radius:50%; object-fit:cover; background:var(--surface-2); flex-shrink:0;}
  .review-card .rc-body{flex:1 1 auto; min-width:0;}
  .review-card .rc-actions{display:flex; gap:.5rem; flex-shrink:0;}

  /* ---------- severity / status pills (Pulse) ---------- */
  .sev{
    display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.03em;
    padding:.16rem .5rem; border-radius:99px; line-height:1.4;
  }
  .sev--t1{background:var(--bad-wash); color:var(--bad);}
  .sev--t2{background:var(--warn-wash); color:var(--warn);}
  .sev--t3{background:var(--info); color:#fff; opacity:.85;}
  .status{
    display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.02em;
    padding:.16rem .55rem; border-radius:99px; line-height:1.4; text-transform:capitalize;
  }
  .status--triggered{background:var(--bad-wash); color:var(--bad);}
  .status--acknowledged{background:var(--warn-wash); color:var(--warn);}
  .status--resolved{background:var(--good-wash); color:var(--good);}

  /* ---------- on-call widget (Pulse) ---------- */
  .oncall-widget{
    display:flex; align-items:center; gap:1rem; padding:1.3rem 1.4rem;
    background:linear-gradient(135deg, var(--accent-wash), transparent 65%);
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius:14px;
  }
  .oncall-widget .oc-avatar{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.2rem;
  }
  .oncall-widget .oc-name{font-size:1.05rem; font-weight:800; color:var(--ink);}
  .oncall-widget .oc-meta{font-size:.82rem; color:var(--ink-dim); margin-top:.15rem;}
  .oncall-widget .oc-until{margin-left:auto; text-align:right; font-size:.78rem; color:var(--ink-dim); flex-shrink:0;}

  /* ---------- timeline (incident detail) ---------- */
  .timeline{display:flex; flex-direction:column; gap:0; margin-top:.9rem;}
  .timeline-item{
    display:flex; gap:.8rem; padding:.6rem 0; border-top:1px dashed var(--line);
    font-size:.85rem;
  }
  .timeline-item:first-child{border-top:0;}
  .timeline-item .tl-dot{
    width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:.4rem;
  }
  .timeline-item .tl-body{flex:1 1 auto; min-width:0;}
  .timeline-item .tl-when{font-size:.74rem; color:var(--ink-dim);}

  /* ---------- simple stat row (Build dashboard) ---------- */
  .stat-row{display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.4rem;}
  .stat-row .stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.3rem; min-width:9rem;}
  .stat-row .stat-n{font-size:1.7rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
  .stat-row .stat-l{font-size:.76rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem;}

  .refcode{
    display:inline-flex; align-items:center; gap:.5rem; font-family:monospace; font-size:1.1rem;
    font-weight:700; color:var(--accent-ink); background:var(--surface-2); border:1px solid var(--line-2);
    border-radius:8px; padding:.4rem .8rem;
  }