@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;600&display=swap");
:root{--navy:#21295C;--ink:#1A1D2E;--paper:#F7F5F0;--card:#FFF;--sunk:#EFEBE3;--line:#DED8CC;
 --mute:#6B6A74;--brass:#8A6410;--oxide:#A3282B;--moss:#3F6B4A;--slate:#4A5578;--dim:#B9B4A8;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --navy:#AEB6E6;--ink:#E8E6E1;--paper:#14161F;--card:#1C1F2B;--sunk:#121420;--line:#2E3241;
 --mute:#9A98A4;--brass:#D8A94A;--oxide:#E2696B;--moss:#7FBC90;--slate:#9AA6CE;--dim:#4A4E5C;}}
:root[data-theme="dark"]{--navy:#AEB6E6;--ink:#E8E6E1;--paper:#14161F;--card:#1C1F2B;--sunk:#121420;
 --line:#2E3241;--mute:#9A98A4;--brass:#D8A94A;--oxide:#E2696B;--moss:#7FBC90;--slate:#9AA6CE;--dim:#4A4E5C;}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);margin:0;font-size:15px;line-height:1.6;
 font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 90px;}
h1{font-family:Bitter,Georgia,serif;font-size:27px;line-height:1.18;margin:0 0 3px;color:var(--navy);
 letter-spacing:-.01em;text-wrap:balance;}
h2{font-family:Bitter,Georgia,serif;font-size:19px;margin:34px 0 4px;color:var(--navy);}
h3{font-family:Bitter,Georgia,serif;font-size:14px;margin:16px 0 5px;}
p{margin:0 0 12px}.sub{color:var(--mute);font-size:12.5px;margin:0 0 16px}
hr.rule{height:2px;background:var(--navy);opacity:.16;margin:7px 0 16px;border:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
a{color:var(--slate)}a:hover{color:var(--navy)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);
 border:1px solid var(--line);border-radius:9px;padding:10px 13px;margin:0 0 10px;}
.bar label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
select,button,input{font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
 border:1.5px solid var(--line);border-radius:7px;padding:7px 11px;}
button,select{cursor:pointer}button:hover,select:hover{border-color:var(--navy)}
select:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
 outline:2px solid var(--navy);outline-offset:2px}
.stamp{font-size:11.5px;color:var(--mute);margin-left:auto}.stamp b{color:var(--ink);font-weight:600}
/* ── The ask bar ─────────────────────────────────────────────────────────────
   This is the primary action on the page and it used to be invisible: same
   border, radius and background as every dropdown, so it read as one more form
   field. It is now the only element on the page with a brass rule and a filled
   ground, which is what makes it findable in under a second. Do not restyle it
   back into the neutral palette. */
.askbox{background:var(--sunk);border:1px solid var(--line);border-left:4px solid var(--brass);
 border-radius:10px;padding:13px 15px 11px;margin:0 0 12px;}
.asktop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 8px}
.askbadge{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:10px;
 font-weight:600;letter-spacing:.13em;color:var(--card);background:var(--brass);
 padding:3px 7px;border-radius:4px;white-space:nowrap;}
.asktop label{font-family:Bitter,Georgia,serif;font-size:15px;font-weight:600;color:var(--navy);
 cursor:pointer;}
.askfield{position:relative;display:flex;align-items:center;background:var(--card);
 border:2px solid var(--navy);border-radius:9px;padding:0 12px;
 transition:box-shadow .12s ease;}
.askfield:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 22%,transparent)}
.askicon{width:19px;height:19px;flex:0 0 19px;color:var(--navy);opacity:.8}
#ask{flex:1 1 auto;width:100%;min-width:0;padding:13px 11px;font-size:16px;
 border:0;border-radius:0;background:transparent;font-family:inherit;color:var(--ink);}
#ask:focus{outline:none}
#ask::-webkit-search-cancel-button{cursor:pointer}
/* The example query is a hint, not content — it must read as grey. */
#ask::placeholder{color:var(--dim);opacity:1;font-style:italic}
#ask::-webkit-input-placeholder{color:var(--dim);opacity:1;font-style:italic}
.askkbd{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:10px;
 color:var(--mute);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
 padding:2px 6px;background:var(--sunk);flex:0 0 auto;}
.askeg{font-size:11.5px;color:var(--mute);margin:8px 0 0}
@media (max-width:560px){.askkbd{display:none}.asktop label{font-size:14px}}
.readback{font-size:12px;color:var(--mute);margin:6px 0 0;min-height:19px}
.readback b{color:var(--navy);font-weight:600}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.pz{font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);
 background:var(--card);color:var(--mute);cursor:pointer;font-family:inherit}
.pz:hover{border-color:var(--navy);color:var(--navy)}
.pz[aria-pressed="true"]{border-color:var(--navy);color:var(--navy);font-weight:600;background:var(--sunk)}
.pz .c{font-family:"IBM Plex Mono",monospace;font-size:10.5px;opacity:.72;margin-left:5px}
.pzwhy{font-size:12px;color:var(--mute);background:var(--card);border:1px solid var(--line);
 border-left:3px solid var(--brass);border-radius:6px;padding:8px 11px;margin:8px 0 0;display:none}
.pzwhy.on{display:block}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 6px}
.cell{background:var(--card);padding:10px 12px}
.cell .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.cell .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:18px;
 font-weight:600;color:var(--navy);line-height:1.25}
.cell .n{font-size:11px;color:var(--mute)}
.cell.bad .v{color:var(--oxide)}.cell.warn .v{color:var(--brass)}
.q{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 0}
@media(max-width:820px){.q{grid-template-columns:1fr}}
.qbox{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.qbox.u{border-left:4px solid var(--oxide)}.qbox.i{border-left:4px solid var(--brass)}
.qbox.d{border-left:4px solid var(--slate)}.qbox.w{border-left:4px solid var(--moss)}
.qh{font-family:Bitter,Georgia,serif;font-size:13.5px}
.qc{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.07em;margin:0 0 7px}
.qi{font-size:12.5px;padding:5px 0;border-top:1px solid var(--line);cursor:pointer}
.qi:hover{color:var(--navy)}.qi b{font-weight:600}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0}
th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
 font-weight:600;border-bottom:1.5px solid var(--line);padding:5px 8px 5px 0;white-space:nowrap}
td{padding:5px 8px 5px 0;border-bottom:1px solid var(--line);vertical-align:top}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
tr.flag td{background:color-mix(in srgb,var(--oxide) 7%,transparent)}
.acct{background:var(--card);border:1px solid var(--line);border-radius:9px;margin:0 0 7px}
.acct>summary{cursor:pointer;padding:10px 13px;display:grid;grid-template-columns:1fr auto;gap:10px;
 align-items:center;list-style:none}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover{background:var(--sunk)}.acct[open]{border-color:var(--navy)}
.an{font-weight:600;font-size:13.5px}.ac{font-size:10.5px;color:var(--mute)}
.badge{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:2px 6px;border-radius:99px;
 border:1px solid var(--line);color:var(--mute);white-space:nowrap;margin-left:4px}
.badge.red{border-color:var(--oxide);color:var(--oxide)}
.badge.amber{border-color:var(--brass);color:var(--brass)}
.badge.green{border-color:var(--moss);color:var(--moss)}
.body{padding:2px 13px 14px;border-top:1px solid var(--line)}
.step{font-size:12.5px;padding:4px 0 4px 10px;border-left:3px solid var(--line);margin:0 0 3px}
.step.urgent{border-left-color:var(--oxide)}.step.important{border-left-color:var(--brass)}
.step.delegate{border-left-color:var(--slate)}.step.watch{border-left-color:var(--moss)}
.step.none{border-left-color:var(--line);color:var(--mute)}
.raw{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--mute);background:var(--sunk);
 border:1px solid var(--line);border-radius:4px;padding:1px 5px;display:inline-block;
 max-width:100%;overflow-wrap:anywhere}
.iss{font-size:10.5px;color:var(--oxide);font-weight:600}
.ns{font-family:"IBM Plex Mono",monospace;font-size:11.5px;text-decoration:none;
 border-bottom:1px dotted var(--slate)}
.ns:hover{border-bottom-style:solid}
.spark{width:100%;max-width:100%;height:auto;display:block;margin:6px 0 2px}
.spark .axis{stroke:var(--line);stroke-width:1}
.legend{font-size:10.5px;color:var(--mute)}
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--slate);
 border-radius:7px;padding:12px 15px;font-size:13px;margin:12px 0}
.count{font-size:12px;color:var(--mute);margin:10px 0 8px}
.hit{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--slate);
 border-radius:6px;padding:8px 11px;margin:0 0 6px}
.hit .t{font-size:13px;font-weight:600}.hit .m{font-size:11.5px;color:var(--mute)}
.empty{font-size:13px;color:var(--mute);padding:14px 0}
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin:14px 0 10px;flex-wrap:wrap}
.tab{font-size:12.5px;padding:7px 13px;border:0;background:none;color:var(--mute);
 border-bottom:2px solid transparent;border-radius:0;cursor:pointer;font-family:inherit}
.tab[aria-selected="true"]{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}

/* the answer panel — only appears once a question has actually been asked */
#answer{display:none;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--navy);border-radius:9px;padding:14px 17px;margin:10px 0 4px;}
.ansq{font-size:12px;color:var(--mute);margin:0 0 7px;}
.ansb{font-size:14.5px;line-height:1.62;}
.ansb p{margin:0 0 11px;} .ansb p:last-child{margin:0;}
.ansb.err{color:var(--oxide);}
.anscite{font-size:11.5px;color:var(--mute);margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;overflow-wrap:anywhere;}
.who{font-size:11.5px;color:var(--mute);}
/* Theme picker — a three-state segmented control. Auto is a real option and is
   the default, so the page follows the operating system unless told otherwise. */
.themer{display:inline-flex;border:1px solid var(--line);border-radius:99px;
 background:var(--card);padding:2px;gap:2px;flex:0 0 auto}
.themer button{font-family:inherit;font-size:10.5px;letter-spacing:.04em;color:var(--mute);
 background:none;border:0;border-radius:99px;padding:3px 10px;cursor:pointer;line-height:1.7}
.themer button:hover{color:var(--navy)}
.themer button[aria-pressed="true"]{background:var(--navy);color:var(--paper);font-weight:600}
.themer button[aria-pressed="true"]:hover{color:var(--paper)}
.who b{color:var(--ink);}


/* ── Today ──────────────────────────────────────────────────────────────────
   The landing pane. Deliberately sparse: one headline, at most six sentences,
   and this month's numbers. Everything that makes a dashboard feel like
   homework — dense tables, controls, things to configure — is on other tabs. */
.today{max-width:860px}
.tglance{padding:22px 0 4px}
.tbig{font-family:Bitter,Georgia,serif;font-size:clamp(24px,3.4vw,34px);
  line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.tglance.ok .tbig{color:var(--moss)}
.tglance.act .tbig{color:var(--oxide)}
.tsub{font-size:13px;color:var(--mute);margin-top:6px}

.tlist{list-style:none;margin:20px 0 0;padding:0;counter-reset:t}
.tlist li{position:relative;padding:15px 0 15px 38px;border-top:1px solid var(--line)}
.tlist li:last-child{border-bottom:1px solid var(--line)}
.tlist li::before{counter-increment:t;content:counter(t);position:absolute;left:0;top:15px;
  width:23px;height:23px;border-radius:50%;background:var(--sunk);color:var(--mute);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;display:grid;place-items:center}
.tl{font-size:16px;line-height:1.5;color:var(--ink)}
.tl b{font-family:"IBM Plex Mono",monospace;font-size:14.5px;font-weight:600}
.tw{font-size:13px;color:var(--mute);margin-top:3px}
.tgo{display:inline-block;margin-top:8px;font-size:12.5px;font-family:inherit;
  color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.tgo:hover{color:var(--oxide)}
.tmore{font-size:13.5px;color:var(--mute);margin-top:14px}

.tmon{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:14px 0 4px}
.tm{background:var(--card);padding:13px 15px}
.tm .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}
.tm .v{font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600;color:var(--ink);
  line-height:1.2;margin-top:3px;font-variant-numeric:tabular-nums}
.tm .n{font-size:11.5px;color:var(--mute);margin-top:2px;line-height:1.35}
.tm.bad .v{color:var(--oxide)}
.tm.good .v{color:var(--moss)}

.tfoot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--mute);max-width:66ch}

/* tracking numbers, wherever a record row shows them */
.trk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;margin-top:3px;line-height:1.5}
.trk a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.trk a:hover{color:var(--oxide)}
.trk .more{color:var(--mute)}

/* the "only mine" toggle beside the account selector */
.minebtn{border:1.5px solid var(--line);background:var(--card);color:var(--mute);
  padding:5px 10px;border-radius:6px;font-family:inherit;font-size:12.5px;cursor:pointer}
.minebtn:hover{border-color:var(--navy);color:var(--ink)}
.minebtn[aria-pressed="true"]{background:var(--sunk);border-color:var(--navy);color:var(--ink);font-weight:600}


/* ── Today owns the screen ───────────────────────────────────────────────────
   Hiding the strip and the chips is not decoration. Somebody opening this for
   the first time should see one heading and a short list of sentences, not a
   control panel. Everything hidden here is one tab away and unchanged. */
body.quiet .presets,
body.quiet .pzwhy,
body.quiet .strip,
body.quiet .legend{display:none}
body.quiet .askbox{margin-bottom:8px}

/* ── Month-on-month, per store ──────────────────────────────────────────────
   The meeting asked to see a store's last month against this one, because the
   $800-to-$300 drop is the thing worth a phone call. Colour is reserved for a
   real swing: down 35% or up 20%. Everything in between stays neutral, so the
   colour keeps meaning something. */
.smon{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;
  padding:8px 11px;margin:0 0 14px;line-height:1.6}
.smon .k{color:var(--mute);font-size:11px}
.smon .sw{font-weight:600}
.smon.down{border-color:var(--oxide)} .smon.down .sw{color:var(--oxide)}
.smon.up{border-color:var(--moss)} .smon.up .sw{color:var(--moss)}

.amon{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mute);margin-top:2px}
.amon .sw{font-weight:600}
.amon.down .sw{color:var(--oxide)}
.amon.up .sw{color:var(--moss)}

/* ── /kpi — every account on one screen ─────────────────────────────────────
   Ownership's view. Dense on purpose: this page is scanned, not read, and the
   whole value is that twenty accounts fit above the fold. */
.kpitop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0 4px}
.linky{background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:underline;
  text-underline-offset:2px;color:var(--navy)}
.linky:hover{color:var(--oxide)}

.kpisort{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:16px 0 10px}
.kpisort .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute)}
.kpisort .mini[aria-pressed="true"]{background:var(--sunk);border-color:var(--navy);
  color:var(--ink);font-weight:600}

table.kpi{border-collapse:collapse;width:100%;min-width:940px;font-size:13.5px}
table.kpi th{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);text-align:left;
  padding:10px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--paper);z-index:2}
table.kpi th.num,table.kpi td.num{text-align:right;font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.kpi td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.kpi tbody tr:hover{background:var(--sunk)}
table.kpi tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--oxide)}
.klink{font-weight:600;color:var(--ink);text-decoration:none;font-size:14.5px}
.klink:hover{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.ksub{font-size:10.5px;color:var(--mute);margin-top:2px;line-height:1.4}
table.kpi .bad{color:var(--oxide)}
table.kpi .good{color:var(--moss)}

/* ── the lead ────────────────────────────────────────────────────────────────
   One sentence above the day's list. It is the only element on the desk that
   names people to go and speak to, because on this problem the answer is a
   conversation and not another report. */
.lead{border:1px solid var(--line);border-left:4px solid var(--mute);border-radius:6px;
  padding:13px 16px;margin:0 0 16px;background:var(--card)}
.lead.act{border-left-color:var(--brass);background:var(--card)}
.lead.wait{opacity:.62}
.lead .lt{font-size:15.5px;line-height:1.5;font-weight:600}
.lead .la{font-size:13.5px;line-height:1.55;color:var(--mute);margin-top:6px}
.lead .lit{font-size:12.5px;margin-top:9px;padding-top:9px;border-top:1px dotted var(--line);
  line-height:1.9;color:var(--mute)}
.lead .lit .k{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;margin-right:4px}

/* the per-order reason */
.why{margin:6px 0 8px;padding:7px 10px;border-left:3px solid var(--line);
  background:var(--tint,rgba(127,127,127,.06));border-radius:0 4px 4px 0}
.why.hold{border-left-color:var(--brass)}
.why.van{border-left-color:var(--moss)}
.why.buy{border-left-color:var(--oxide)}
.why.ok{border-left-color:var(--moss);opacity:.75}
.why .wt{font-size:12.8px;line-height:1.5}
.why .wo{font-size:11px;color:var(--mute);margin-top:3px;
  text-transform:uppercase;letter-spacing:.05em}
.iss.why-hold{color:var(--brass)}
.iss.why-buy{color:var(--oxide)}
a.dock{font-family:"IBM Plex Mono",monospace;font-size:.95em;
  text-decoration:underline;text-underline-offset:2px;text-decoration-style:dotted}
a.dock:hover{text-decoration-style:solid}

/* Dockmaster's lookup field */
.dockfind{display:flex;gap:8px;margin:4px 0 18px;max-width:620px}
.dockfind input{flex:1;font:inherit;font-size:14px;padding:8px 11px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:inherit}
.cell.good .v{color:var(--moss)}
table.kpi .warn{color:var(--brass)}

/* ── the decisions band ──────────────────────────────────────────────────────
   The top of the executive view. Sal, Marc and Joe open this page to find out
   which call is theirs, so the verb comes first and is the largest thing in
   the card — not the account name, and not the number. */
.decide{margin:22px 0 8px}
.decide h2{margin:0 0 2px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px;margin:0 0 10px}
.dcard{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--mute);border-radius:7px;
  padding:12px 14px;transition:border-color .12s,transform .12s}
.dcard:hover{border-color:var(--navy);transform:translateY(-1px)}
.dcard.bad{border-left-color:var(--oxide)}
.dcard.warn{border-left-color:var(--brass)}
.dverb{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.dcard.bad .dverb{color:var(--oxide)}
.dcard.warn .dverb{color:var(--brass)}
.dwho{font-size:12.5px;color:var(--ink);margin-top:5px;font-weight:600}
.dchan{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute);
  border:1px solid var(--line);border-radius:99px;padding:1px 6px;margin-left:6px;font-weight:500}
.dwhat{font-size:12.5px;color:var(--mute);line-height:1.5;margin-top:4px}
.dgo{font-size:11px;color:var(--navy);margin-top:8px}
table.kpi td b.bad{color:var(--oxide)}
table.kpi td b.warn{color:var(--brass)}

/* Dockmaster — the inbox half */
.flaglist{list-style:none;padding:0;margin:0 0 14px}
.flaglist li{border-left:3px solid var(--brass);background:var(--card);border:1px solid var(--line);
  border-left-width:3px;border-radius:0 6px 6px 0;padding:9px 12px;margin:0 0 7px;font-size:13.5px;
  line-height:1.55}
.flaglist .fitem,.flaglist .fthread{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  border-radius:99px;padding:2px 7px;margin-right:8px;border:1px solid var(--line);color:var(--mute)}
.flaglist .fitem{border-color:var(--brass);color:var(--brass)}
.flaglist a.klink{margin-left:8px;font-size:12px;font-weight:500}
.itemchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ichip{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:7px;padding:8px 12px;
  min-width:104px;transition:border-color .12s}
.ichip:hover{border-color:var(--navy)}
.ichip b{font-family:"IBM Plex Mono",monospace;font-size:13px}
.ichip span{font-size:10.5px;color:var(--mute)}
.wstep{margin-right:10px;white-space:nowrap}
.wstep b{margin-left:3px}
.lead .lit .good{color:var(--moss)}
.lead .lit .bad{color:var(--oxide)}

/* Sign in with Google */
.gbtn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:8px;
  padding:11px 18px;font-size:15px;font-weight:500;transition:border-color .12s,box-shadow .12s}
.gbtn:hover{border-color:var(--navy);box-shadow:0 1px 6px rgba(0,0,0,.08)}