/* ============================================================
   Soneium Ambassador Studio · component layer
   ------------------------------------------------------------
   Loads after tokens.css and app.css. Every value here comes
   from a token. Components are defined once and shared by every
   page, so moving Portal -> Map -> Overview -> Leaderboard ->
   Resources -> Update changes the content and nothing else.

   Organised as:
     1  reset and shell
     2  sidebar
     3  header and beta
     4  the three glass tiers
     5  tables
     6  pills and tags
     7  buttons and controls
     8  page specifics (kept minimal, on purpose)
     9  interaction, focus, responsive
    11  the beam
    12  member card
   ============================================================ */


/* ============================================================
   1 · RESET AND SHELL
   ============================================================ */

body{
  margin:0;padding:0;
  background:var(--env-top);
  background-image:var(--env);
  background-attachment:fixed;
  color:var(--t2);
  font-family:"SST",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* numerals line up in columns everywhere they appear */
.num,.val,.pv,.cc,.rkn,.kpi .val,.livestat,.up-val{font-variant-numeric:tabular-nums}
code,.addr,.hash,.mono{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}

.app{display:flex;min-height:100vh}

/* One content grid. Every page starts on the same line. */
.wrap{
  flex:1;min-width:0;
  max-width:var(--page-max);
  margin:0;
  padding:var(--pad-page-y) var(--pad-page-x) var(--s7);
}

.pane{display:none}
.pane.on{display:block}

/* Section rhythm: title, supporting line, then the surface.
   Headings live outside panels, which is what keeps the
   negative space doing its job. */
.section{margin:var(--gap-section) 0 0}
.section:first-child{margin-top:0}
.section h2{font-size:16px;font-weight:500;color:var(--t1);margin:0 0 3px;letter-spacing:-.15px}
.section p.hint{font-size:12.5px;color:var(--t3);margin:0 0 var(--s3);line-height:1.55}
.hint,.micro{color:var(--t3)}
.micro{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500}


/* ============================================================
   2 · SIDEBAR
   One component. Never redefined per page.
   ============================================================ */

.side{
  flex:0 0 var(--side-w);
  background:var(--surface-nav);
  border-right:1px solid var(--divider);
  padding:var(--s5) 0 var(--s4);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}

/* branding · fixed position, identical on every page */
.side .brandline{
  display:flex;align-items:center;gap:10px;
  padding:0 var(--s5) var(--s5);
  color:var(--t1);
}
.side .brandline svg{width:20px;height:20px;flex:none}
.side .brandline b{font-size:14px;font-weight:500;letter-spacing:-.2px}

/* navigation · utility glass on the selected item only */
.tabs#nav{display:block;border:0;margin:0;padding:0 var(--s3);gap:0;flex-wrap:nowrap}
.tabs#nav button{
  display:flex;width:100%;align-items:center;
  height:34px;margin:2px 0;padding:0 var(--s3);
  border:0;border-radius:var(--r-ctrl);
  background:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:400;
  color:var(--t2);text-align:left;
  transition:color var(--t-fast),background var(--t-fast);
}
.tabs#nav button:hover{color:var(--t1);background:rgba(255,255,255,.022)}
.tabs#nav button.on{
  position:relative;color:var(--t1);
  background:rgba(120,150,165,.075);
  box-shadow:var(--inner-hi);
}
.tabs#nav button.on::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-3);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.tabs button.team-only{display:none}
body.is-team .tabs button.team-only{display:flex}

/* footer · pigeon sits as a quiet identity detail, not a mascot.
   It needs air above it, so the divider is pushed away from it. */
.side-foot{
  margin-top:auto;
  padding:var(--s5) var(--s5) 0;
  border-top:1px solid rgba(255,255,255,.035);
}
.side-foot .mascot{
  display:block;width:32px;height:32px;
  margin:0 0 var(--s4);
  opacity:.85;
}
.side-foot .who{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--t2)}
.side-foot .av{
  width:22px;height:22px;border-radius:50%;flex:none;
  background:#37707F;color:var(--t1);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;
}
.side-foot .tagrole{
  display:inline-block;margin-top:var(--s2);
  font-size:10px;color:var(--violet-text);
  background:rgba(164,147,201,.075);
  padding:2px 9px;border-radius:var(--r-pill);
}


/* ============================================================
   3 · HEADER AND BETA
   Same height, same alignment, same position on every page.
   ============================================================ */

.hero{margin:0 0 var(--s5);padding:0;overflow:visible}
.hero .brand{display:flex;align-items:center;gap:11px;min-height:26px}
.hero .logo{width:22px;height:22px;flex:none}
.hero h1{font-size:19px;font-weight:500;color:var(--t1);letter-spacing:-.3px;margin:0;line-height:1.2}
.hero h1 .thin{color:var(--t2);font-weight:400}

/* live · present, never prominent */
.livestat{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--t3);
}
.livedot{
  width:6px;height:6px;border-radius:50%;
  background:#5FA88B;
  box-shadow:0 0 5px rgba(95,168,139,.45);
  animation:lp 2.6s ease-in-out infinite;
}
@keyframes lp{50%{opacity:.42}}

/* beta · amber light inside black glass, never an amber box */
.betabar{
  position:relative;display:block;
  background:var(--glass-2);border:0;border-radius:var(--r-panel);
  padding:var(--s3) var(--pad-card);
  margin:0 0 var(--gap-section);
  font-size:12px;color:var(--t2);line-height:1.55;
  overflow:hidden;
  box-shadow:var(--surface-shadow);
}
.betabar::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:blur(40px);
  background:radial-gradient(180% 120% at 12% 40%,var(--air-amber) 0%,rgba(197,164,105,.02) 45%,transparent 80%);
}
.betabar::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:
    radial-gradient(32px 24px at 3% 3%,rgba(255,255,255,.125),transparent 76%),
    radial-gradient(32px 24px at 97% 3%,rgba(240,200,130,.09),transparent 76%),
    linear-gradient(178deg,var(--rim-2-top) 0%,rgba(230,196,140,.062) 40%,var(--rim-2-bot) 100%);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.betabar b{
  position:relative;display:inline-block;
  font-size:10px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;
  color:var(--amber);background:rgba(197,164,105,.10);
  padding:2px 9px;border-radius:var(--r-pill);
  margin:0 0 var(--s2);
}
.betabar span{position:relative;display:block;color:var(--t2)}


/* ============================================================
   4 · THE THREE GLASS TIERS
   ------------------------------------------------------------
   Tier is expressed by rim strength and internal light, not by
   making the fill lighter. Applied by existing class names so
   the application JavaScript needs no changes.

     tier 1 hero    .kpi .pod .amb-summary>.kpi
     tier 2 data    .pcard .notice .amb-countries .rescard
                    .fcard .step .tiercard .trackcard .gate
                    .portal-top .tbl-shell .amb-profile
     tier 3 utility .btn .cbtn .tag .pill .tierchip .globe-reset
   ============================================================ */

/* shared: every glass surface is a positioned box with no border
   and a masked gradient ring drawn in ::after */
.kpi,.pod,
.pcard,.notice,.amb-countries,.rescard,.fcard,.step,.tiercard,
.trackcard,.gate,.portal-top,.tbl-shell,.amb-profile,.globe-stage,
.up-card,.up-panel{
  position:relative;
  border:0 !important;
}
.kpi::after,.pod::after,
.pcard::after,.notice::after,.amb-countries::after,.rescard::after,
.fcard::after,.step::after,.tiercard::after,.trackcard::after,
.gate::after,.portal-top::after,.tbl-shell::after,.amb-profile::after,
.globe-stage::after,.up-card::after,.up-panel::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background var(--t-med);
}

/* ---- tier 1 · hero ------------------------------------------ */
.kpi,.pod,.up-card{
  background:var(--glass-1);
  border-radius:var(--r-card);
  padding:var(--s4) 18px;
  box-shadow:var(--surface-shadow);
  overflow:hidden;
}
.pod{border-radius:var(--r-panel);padding:var(--pad-card)}
.kpi::after,.pod::after,.up-card::after{background:var(--rim-grad-1)}

/* atmospheric light · the hue arrives from tint() in app-core.js as --air.
   It is a field behind the content, never a fill. If a card has no hue set,
   --air falls back to transparent and the card is simply black glass. */
.kpi::before,.tiercard::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(150% 100% at 50% 0%,var(--air,transparent) 0%,transparent 72%);
}
.kpi>*,.tiercard>*{position:relative;z-index:2}

.kpi .lab,.up-card .lab{
  position:relative;z-index:2;
  font-size:11.5px;color:var(--t3);margin:0 0 var(--s1);
  line-height:1.35;
}
.kpi .val,.up-card .val{
  position:relative;z-index:2;
  font-size:27px;font-weight:500;color:var(--t-num);
  letter-spacing:-.9px;line-height:1.12;
}
.kpi .val small,.up-card .val small{font-size:12px;color:var(--t3);font-weight:400;letter-spacing:0}

/* ---- tier 2 · data ------------------------------------------ */
.pcard,.notice,.amb-countries,.rescard,.fcard,.step,.tiercard,
.trackcard,.gate,.portal-top,.tbl-shell,.amb-profile,.up-panel{
  background:var(--glass-2);
  box-shadow:var(--surface-shadow);
}
.pcard::after,.notice::after,.amb-countries::after,.rescard::after,
.fcard::after,.step::after,.tiercard::after,.trackcard::after,
.gate::after,.portal-top::after,.tbl-shell::after,.amb-profile::after,
.up-panel::after{background:var(--rim-grad-2)}

.pcard,.tiercard,.gate,.portal-top,.tbl-shell,.up-panel{border-radius:var(--r-panel)}
.notice,.rescard,.fcard,.step,.trackcard,.amb-countries,.amb-profile{border-radius:var(--r-card)}

.pcard,.rescard,.fcard,.step,.tiercard,.trackcard,.up-panel{padding:var(--pad-card)}
.notice{padding:var(--s3) var(--s4);font-size:12px;color:var(--t2);line-height:1.55;margin-top:var(--s3)}
.portal-top{padding:18px var(--pad-card)}

.pcard h3{
  font-size:14px;font-weight:500;color:var(--t1);
  margin:0 0 var(--s3);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
}

/* ---- tier 3 · utility --------------------------------------- */
/* small controls get a plain 1px rim; a masked gradient at this
   size is invisible and costs a pseudo-element */
.btn,.cbtn,.globe-reset,.gbtn,.altlink{
  border-radius:var(--r-ctrl);
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}


/* ============================================================
   5 · TABLES
   One system. Roster, leaderboard, activation ideas, and any
   future operational table all use it.
   ------------------------------------------------------------
   The shell is a tier 2 surface. Rows never become cards.
   ============================================================ */

.tbl-shell{
  padding:var(--s2) var(--s2) var(--s1);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.amb-roster,.lbtable,.tasktable,.up-table{
  width:100%;border-collapse:collapse;
  font-size:13px;margin:0;
  min-width:520px;
}

.amb-roster th,.lbtable th,.tasktable th,.up-table th{
  text-align:left;
  padding:10px var(--s3) var(--s2);
  font-size:11px;font-weight:400;
  color:var(--t3);
  letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.055);
  white-space:nowrap;
}
.amb-roster td,.lbtable td,.tasktable td,.up-table td{
  text-align:left;
  padding:11px var(--s3);
  color:var(--t2);
  /* separators dimmed ~30% against the v1 line value */
  border-bottom:1px solid rgba(255,255,255,.038);
  vertical-align:middle;
}
.amb-roster tbody tr:last-child td,
.lbtable tbody tr:last-child td,
.tasktable tbody tr:last-child td,
.up-table tbody tr:last-child td{border-bottom:0}

.amb-roster th.num,.lbtable th.num,.tasktable th.num,.up-table th.num,
.amb-roster td.num,.lbtable td.num,.tasktable td.num,.up-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.amb-roster td.num,.lbtable td.num,.up-table td.num{color:var(--t1);font-weight:500}

/* hover · a faint cool wash, never a grey rectangle */
.amb-roster tbody tr,.lbtable tbody tr{cursor:pointer}
.amb-roster tbody tr:hover,.lbtable tbody tr:hover{
  background:linear-gradient(90deg,rgba(99,185,206,.055) 0%,rgba(99,185,206,.018) 55%,transparent 100%);
}
.tasktable tbody tr:hover,.up-table tbody tr:hover{background:rgba(255,255,255,.014)}

/* roster row hierarchy · the person is the subject, not the code */
.amb-roster .r-name{color:var(--t1);font-weight:500;font-size:13px}
.amb-roster .r-code{
  color:var(--t3);font-size:11px;letter-spacing:.06em;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:color var(--t-fast);
}
.amb-roster tbody tr:hover .r-code{color:var(--cyan-text)}
.amb-roster .r-track{color:var(--t2);font-size:12.5px;line-height:1.4}
.lbtable .rkn{color:var(--t3);width:36px}
.lbtable .lb-country{color:var(--t1);font-weight:500}

/* share bar · flat, minimal, no gradient fireworks */
.lbbar{
  height:5px;border-radius:3px;min-width:4px;
  background:linear-gradient(90deg,var(--cyan-dim),var(--violet));
  opacity:.72;
}


/* ============================================================
   6 · PILLS AND TAGS
   One shared system for every status and label in the product.
   All are dark translucent surfaces with coloured text.
   ============================================================ */

.tag,.pill,.tierchip{
  display:inline-block;
  font-size:10.5px;font-weight:500;
  padding:3px 9px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  white-space:nowrap;
  line-height:1.45;
  vertical-align:middle;
}

/* neutral tag · the default. Quiet, scannable, never blue block. */
.tag{
  background:rgba(255,255,255,.038);
  color:var(--t2);
  border-color:rgba(255,255,255,.055);
  margin:0;
}
.tag.muted{background:rgba(255,255,255,.028);color:var(--t3);border-color:rgba(255,255,255,.04)}

/* skill tags · dark smoked glass with a faint cool rim, not a blue pill */
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;align-items:center}
.tagrow .tag{
  background:rgba(99,185,206,.055);
  color:var(--cyan-text);
  border-color:rgba(99,185,206,.14);
}
.tag-more{
  font-size:10.5px;color:var(--t3);
  padding:3px 6px;
  font-variant-numeric:tabular-nums;
}

/* status pills */
.pill.open,.pill.shipped{background:rgba(111,179,151,.10);color:var(--teal-text);border-color:rgba(111,179,151,.20)}
.pill.soon,.pill.pending{background:rgba(197,164,105,.10);color:var(--amber-text);border-color:rgba(197,164,105,.20)}
.pill.beta{background:rgba(197,164,105,.10);color:var(--amber-text);border-color:rgba(197,164,105,.22)}
.pill.risk{background:rgba(199,123,123,.10);color:#DBA0A0;border-color:rgba(199,123,123,.20)}
.pill.neutral{background:rgba(255,255,255,.038);color:var(--t2);border-color:rgba(255,255,255,.055)}

/* tierchip keeps its inline colour from JS but loses the saturated fill */
.tierchip{font-size:10.5px;font-weight:500}


/* ============================================================
   7 · BUTTONS AND CONTROLS
   One component. Same height, radius, padding, weight everywhere.
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:36px;padding:0 var(--s4);
  font-family:inherit;font-size:13px;font-weight:500;
  border:0;border-radius:var(--r-ctrl);cursor:pointer;text-decoration:none;
  background:rgba(255,255,255,.035);
  color:var(--t2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),var(--inner-hi);
}
.btn:hover{color:var(--t1);background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),var(--inner-hi)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{color:var(--t2);background:rgba(255,255,255,.035)}

.btn-primary{
  background:rgba(99,185,206,.10);
  color:var(--cyan-text);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.22),var(--inner-hi);
}
.btn-primary:hover{
  background:rgba(99,185,206,.15);color:#A8E2F0;
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.32),var(--inner-hi);
}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
.btn-ghost:hover{background:rgba(255,255,255,.03)}

/* one CTA treatment for every resource link */
.rlink,.ov-cta a.rlink{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;color:var(--cyan-text);
  text-decoration:none;
  opacity:.86;transition:opacity var(--t-fast),gap var(--t-fast);
}
.rlink:hover{opacity:1;gap:8px;text-decoration:none}

/* region buttons · utility glass, inset when selected */
.amb-countries{padding:var(--s2);max-height:560px;overflow:auto}
.amb-countries h3{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);font-weight:500;margin:var(--s2) var(--s3) var(--s2);
}
.cbtn{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
  width:100%;height:32px;text-align:left;
  border:0;background:transparent;color:var(--t2);
  font-family:inherit;font-size:12.5px;
  padding:0 var(--s3);border-radius:var(--r-ctrl);cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
.cbtn:hover{background:rgba(255,255,255,.022);color:var(--t1)}
.cbtn.on{
  background:rgba(120,150,165,.075);color:var(--t1);font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),var(--inner-hi);
}
.cbtn .cc{font-size:11px;color:var(--t3)}
.cbtn.on .cc{color:var(--t2)}

/* the control cluster: one flex row, so nothing needs a hand-tuned offset */
.globe-ctl{
  position:absolute;right:var(--s4);top:var(--s3);z-index:3;
  display:flex;align-items:flex-start;gap:8px;
}
.globe-reset{
  position:static;z-index:3;
  border:0;background:rgba(14,17,19,.72);
  color:var(--t2);font-family:inherit;font-size:11.5px;
  height:28px;padding:0 var(--s3);border-radius:var(--r-ctrl);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.globe-reset:hover{color:var(--t1);background:rgba(20,24,27,.85)}
/* pause sits to the left of Reset. Same glass, own offset. */
/* .globe-pause kept as a hook for the label swap; its 96px offset is gone
   with the cluster */

/* sign-in controls inherit the button system */
.gbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:44px;padding:0 var(--s4);
  font-family:inherit;font-size:13.5px;font-weight:500;
  border:0;border-radius:var(--r-ctrl);cursor:pointer;
  background:#F2F4F5;color:#14181B;
}
.gbtn:hover{background:#FFF}
.altlink{
  display:block;width:100%;margin-top:var(--s3);
  height:40px;padding:0 var(--s4);
  font-family:inherit;font-size:12.5px;
  background:transparent;color:var(--t2);cursor:pointer;
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.altlink:hover{color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}


/* ============================================================
   8 · PAGE SPECIFICS
   Deliberately short. If a rule here grows, it belongs above.
   ============================================================ */

/* ---- card rows · equal height, shared top alignment ---------- */
.amb-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:var(--gap-card);margin:0 0 var(--gap-section);align-items:stretch;
}
.ov-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:var(--gap-card);margin:0 0 var(--gap-section);align-items:stretch;
}
.resgrid,.feat,.steps,.trackgrid{
  display:grid;gap:var(--gap-card);align-items:stretch;
}
.resgrid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.feat{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.trackgrid{grid-template-columns:repeat(auto-fit,minmax(236px,1fr));margin-top:var(--gap-card)}
.tiercols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);margin:0 0 var(--gap-card)}

/* resource cards · equal height, CTA pinned to the bottom */
.rescard{display:flex;flex-direction:column;gap:var(--s2);height:100%}
.rescard h3{font-size:14.5px;font-weight:500;color:var(--t1);margin:0;line-height:1.35}
.rescard p{font-size:12.5px;color:var(--t2);margin:0;flex:1;line-height:1.55}
.rescard .rlink{margin-top:var(--s2)}
.rescard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--t-med);
  background:radial-gradient(120% 90% at 50% 0%,var(--air-cyan) 0%,transparent 70%);
}
.rescard:hover::before{opacity:1}
.rescard:hover::after{background:var(--rim-grad-1)}

.fcard,.step,.trackcard{display:flex;flex-direction:column;height:100%}
.fcard .fi{font-size:19px;margin:0 0 var(--s2)}
.fcard h3,.trackcard h4{font-size:14.5px;font-weight:500;color:var(--t1);margin:0 0 var(--s1)}
.fcard p,.trackcard p,.step p{font-size:12.5px;color:var(--t2);margin:0;line-height:1.55}
.step::before{counter-increment:s;content:"0" counter(s);font-weight:500;font-size:11px;color:var(--cyan);letter-spacing:.08em}
.step h3{font-size:14.5px;font-weight:500;color:var(--t1);margin:var(--s2) 0 var(--s1)}

.tiercard .th{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:var(--s2)}
.tiercard .tbig{font-size:19px;font-weight:500;color:var(--t1);margin:var(--s3) 0 2px;letter-spacing:-.3px}
.tiercard li{font-size:12.5px;color:var(--t2);padding:7px 0;border-top:1px solid rgba(255,255,255,.045);display:flex;gap:var(--s2)}
.tiercard li::before{content:"›";color:var(--cyan);opacity:.7}

/* ---- overview hero · open, not a painted box ----------------- */
.ov-hero{
  position:relative;overflow:hidden;
  background:var(--glass-2);border:0;border-radius:var(--r-hero);
  padding:var(--s6) var(--s6) var(--s6);
  margin:0 0 var(--gap-section);
  box-shadow:var(--surface-shadow);
}
.ov-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:blur(60px);
  background:radial-gradient(300px 180px at 78% 8%,var(--air-cyan) 0%,transparent 72%),
             radial-gradient(260px 160px at 20% 96%,var(--air-violet) 0%,transparent 72%);
}
.ov-hero::after{
  content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-1);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.ov-hero>*{position:relative;z-index:2}
.ov-hero h2{font-size:30px;font-weight:500;color:var(--t1);line-height:1.14;letter-spacing:-.8px;margin:var(--s2) 0 0;max-width:620px}
.ov-hero h2 .g{background:linear-gradient(90deg,#63B9CE,#9E93C4);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov-hero p{color:var(--t2);font-size:14px;max-width:560px;margin:var(--s3) 0 var(--s5);line-height:1.6}
.ov-cta{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---- candidate map ------------------------------------------- */
.amb-wrap{display:grid;grid-template-columns:236px 1fr;gap:var(--gap-card);align-items:start}
.amb-wrap.solo{grid-template-columns:1fr}

/* globe viewport · the darkest surface in the product. The Earth
   supplies the colour, so the rim stays quiet and the faint
   cyan/violet reflection is barely above the noise floor. */
.globe-stage{
  border-radius:var(--r-hero);
  background:var(--glass-viewport);
  overflow:hidden;min-height:440px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.038),var(--seat);
}
.globe-stage::after{background:var(--rim-grad-2)}
.globe-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;filter:blur(60px);
  background:radial-gradient(220px 130px at 26% 84%,rgba(79,179,206,.075) 0%,transparent 76%),
             radial-gradient(200px 120px at 80% 16%,rgba(129,111,168,.06) 0%,transparent 76%);
}
.globe-stage.gl{background:#000}
/* .globe-hint went with the instruction line on 27 Aug 2026; the
   coordinate readout keeps the type it shared. */
.globe-coord{color:var(--t3);font-size:11px;line-height:1.5}
.globe-coord{position:absolute;right:var(--s4);bottom:var(--s3);z-index:3;text-align:right}
.amb-legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:11px;color:var(--t3)}
.amb-legend span{display:flex;align-items:center;gap:6px}
.pindot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

.globe-tip{background:rgba(10,13,15,.94);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.globe-tip b{color:var(--cyan-text);font-weight:500}

.amb-profile{
  position:absolute;right:var(--s4);bottom:var(--s4);width:264px;
  padding:var(--s4) 18px;z-index:4;
  background:rgba(9,11,13,.96);
  box-shadow:var(--surface-shadow),0 12px 32px rgba(0,0,0,.5);
}
.amb-profile.hide{display:none}
.ap-code{font-size:10.5px;letter-spacing:.08em;color:var(--cyan-text);font-weight:500}
.ap-name{font-size:18px;font-weight:500;color:var(--t1);margin:2px 0;letter-spacing:-.3px}
.ap-loc{font-size:11.5px;color:var(--t3);margin-bottom:var(--s3)}
.ap-row{display:flex;justify-content:space-between;gap:var(--s3);font-size:12.5px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.ap-row:last-child{border-bottom:0}
.ap-row .k{color:var(--t3)}
.ap-row .v{color:var(--t1);font-weight:500;text-align:right}
.pclose{position:absolute;right:11px;top:8px;color:var(--t3);cursor:pointer;font-size:17px;line-height:1;background:none;border:0}
.pclose:hover{color:var(--t1)}

/* ---- portal --------------------------------------------------- */
.portal-top{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--gap-card)}
.pav{
  width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(135deg,#37707F,#5C5580);
  display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:18px;color:var(--t1);
}
.portal-top .pmeta{flex:1;min-width:0}
.portal-top .pmeta .nm{font-size:15.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.portal-top .pmeta .em{font-size:12px;color:var(--t3);margin-top:2px}
.portal-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gap-card);align-items:start}
.soonrow{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.kv{display:grid;gap:var(--s3)}

.gate{max-width:420px;margin:var(--s7) auto;padding:var(--s6) var(--s5);text-align:center}
.gate .glock{font-size:24px;margin-bottom:var(--s2);opacity:.8}
.gate h2{font-size:19px;font-weight:500;color:var(--t1);margin:0 0 var(--s2)}
.gate p{font-size:13px;color:var(--t2);margin:0 0 var(--s5);line-height:1.6}
.gatehelp{font-size:12.5px;color:var(--t2);line-height:1.6;margin:var(--s3) 0 0;text-align:left}
.gatehelp b{color:var(--t1);font-weight:500}

/* ---- events list · rows, not cards ---------------------------- */
.evrow{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid rgba(255,255,255,.038)}
.evrow:first-child{padding-top:0}
.evrow:last-child{border-bottom:0;padding-bottom:0}
.evrow .ed{color:var(--cyan-text);font-weight:500;font-size:12.5px;width:60px;flex:none;font-variant-numeric:tabular-nums}
.evrow .en{font-size:13.5px;color:var(--t1)}
.evrow .em{font-size:11.5px;color:var(--t3);margin-top:1px}

/* ---- podium · restrained colour identity ---------------------- */
.pod{overflow:hidden}
.pod::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:blur(44px);
  background:radial-gradient(160% 110% at 50% 0%,var(--pod-air,transparent) 0%,transparent 70%);
}
.pod:nth-child(1){--pod-air:var(--air-amber)}
.pod:nth-child(2){--pod-air:var(--air-cyan)}
.pod:nth-child(3){--pod-air:var(--air-teal)}
.pod>*{position:relative;z-index:2}
.pod .rk{font-size:11px;font-weight:500;letter-spacing:.09em;color:var(--t3)}
.pod .pn{font-size:18px;font-weight:500;color:var(--t1);margin:var(--s2) 0 1px;letter-spacing:-.3px}
.pod .pl{font-size:11.5px;color:var(--t3)}
.pod .pv{font-size:26px;font-weight:500;color:var(--t-num);margin-top:var(--s3);letter-spacing:-.8px}
.pod .pv small{font-size:11px;color:var(--t3);font-weight:400;letter-spacing:0}

/* ---- biweekly update ------------------------------------------ */
.up-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap-card);align-items:stretch}
.up-card .delta{
  position:relative;z-index:2;display:inline-block;margin-top:var(--s2);
  font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--r-pill);
}
.up-card .delta.up{background:rgba(111,179,151,.10);color:var(--teal-text)}
.up-card .delta.flat{background:rgba(255,255,255,.035);color:var(--t3)}
.up-panel h3{font-size:14px;font-weight:500;color:var(--t1);margin:0 0 var(--s3)}
.up-bar{display:flex;align-items:center;gap:var(--s3);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.up-bar:last-child{border-bottom:0}
.up-bar .ub-l{font-size:12.5px;color:var(--t2);width:132px;flex:none}
.up-bar .ub-t{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.045);overflow:hidden}
.up-bar .ub-f{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));opacity:.8}
.up-bar .ub-f.v{background:linear-gradient(90deg,#6B5F8C,var(--violet))}
.up-bar .ub-f.g{background:linear-gradient(90deg,#5A9781,var(--teal))}
.up-bar .ub-n{font-size:12.5px;color:var(--t1);font-weight:500;width:46px;text-align:right;font-variant-numeric:tabular-nums}
.up-note{font-size:11.5px;color:var(--t3);line-height:1.6;margin:var(--s3) 0 0}
.up-list{margin:0;padding:0;list-style:none}
.up-list li{font-size:12.5px;color:var(--t2);line-height:1.6;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.038);display:flex;gap:var(--s3)}
.up-list li:last-child{border-bottom:0}
.up-list li b{color:var(--t1);font-weight:500}
.up-list .ix{color:var(--t3);flex:none;font-variant-numeric:tabular-nums;min-width:14px}


/* ============================================================
   9 · INTERACTION, FOCUS, RESPONSIVE
   ============================================================ */

/* hover · light, not movement. No transforms, no neon. */
.kpi,.pod,.pcard,.fcard,.step,.trackcard,.tiercard,.up-card,.up-panel{
  transition:background var(--t-med),box-shadow var(--t-med);
}

/* focus · always visible. The glass look never removes it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(99,185,206,.65);
  outline-offset:2px;
  border-radius:var(--r-ctrl);
}
.tabs#nav button:focus-visible{outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---- responsive · shared components adapt, they do not fork --- */
@media (max-width:1080px){
  .portal-grid{grid-template-columns:1fr}
  .tiercols,.podium{grid-template-columns:1fr 1fr}
  .amb-wrap{grid-template-columns:200px 1fr}
}
@media (max-width:860px){
  :root{--pad-page-x:22px;--pad-page-y:22px;--side-w:184px}
  .amb-wrap{grid-template-columns:1fr}
  .amb-countries{max-height:none}
  .tiercols,.podium{grid-template-columns:1fr}
  .ov-hero{padding:var(--s5)}
  .ov-hero h2{font-size:25px}
  .amb-summary::before,.amb-summary::after,
  .ov-stats::before,.ov-stats::after,
  .up-grid::before,.up-grid::after{display:none}
}
@media (max-width:640px){
  .side{position:static;height:auto;flex-basis:auto;width:100%;border-right:0;border-bottom:1px solid var(--divider)}
  .app{flex-direction:column}
  .tabs#nav{display:flex;overflow-x:auto;padding:0 var(--s3) var(--s2)}
  .tabs#nav button{width:auto;white-space:nowrap}
  .side-foot{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-top:1px solid rgba(255,255,255,.035)}
  .side-foot .mascot{margin:0;width:26px;height:26px}
  .side-foot .tagrole{margin-top:0}
}


/* ============================================================
   11 · THE BEAM
   ------------------------------------------------------------
   A horizontal light line behind KPI card rows. 1px crisp in
   the gaps, soft haze behind glass. Never thicker, never a
   laser. The glow is held at --beam-haze so it does not
   dominate the page.
   ============================================================ */

.amb-summary,.ov-stats,.up-grid{position:relative;isolation:isolate}

/* crisp line */
.amb-summary::before,.ov-stats::before,.up-grid::before{
  content:"";position:absolute;left:-4%;right:-4%;top:var(--beam-y);
  height:1px;background:var(--beam);opacity:.9;z-index:0;pointer-events:none;
}
/* haze */
.amb-summary::after,.ov-stats::after,.up-grid::after{
  content:"";position:absolute;left:-4%;right:-4%;
  top:calc(var(--beam-y) - var(--beam-reach));
  height:calc(var(--beam-reach)*2);
  background:var(--beam);filter:blur(var(--beam-reach));
  opacity:var(--beam-haze);z-index:0;pointer-events:none;
}

/* cards sit above, translucent so the beam diffuses behind */
.amb-summary>.kpi,.ov-stats>.kpi,.up-grid>.up-card{
  position:relative;z-index:1;
  background:rgba(8,9,11,.88);
  backdrop-filter:blur(14px) saturate(115%);
}
@supports not (backdrop-filter:blur(1px)){
  .amb-summary>.kpi,.ov-stats>.kpi,.up-grid>.up-card{background:var(--glass-1)}
}


/* ============================================================
   12 · MEMBER CARD
   ------------------------------------------------------------
   Shown on the Studio pane when a candidate signs in. Square art
   at the top takes an uploaded avatar as-is; the identity plate
   sits below it so nothing can ever cover a face. The foil is
   invisible at rest and only lifts under the pointer, so the page
   does not shimmer while someone is reading their numbers.
   ============================================================ */

.studio-top{display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--gap-section)}
.studio-side{flex:1;min-width:290px}
.studio-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card)}

.mcard-wrap{perspective:1100px;flex:none}
.mcard{position:relative;width:236px;height:352px;border-radius:16px;
  transform-style:preserve-3d;transition:transform .35s var(--ease);cursor:pointer}
.mcard.live{transition:transform .08s linear}
.mcard-body{position:absolute;inset:0;border-radius:16px;background:#0C0E11;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.16),
             0 18px 40px rgba(0,0,0,.55)}
.mcard-inner{position:absolute;inset:7px;border-radius:10px;overflow:hidden;
  background:var(--glass-viewport);display:flex;flex-direction:column}

.mcard-art{position:relative;width:222px;height:222px;flex:none;background:#080A0D}
.mcard-art img{width:100%;height:100%;object-fit:cover;display:block}
/* a short fade so the square meets the plate without a hard seam */
.mcard-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,transparent,rgba(10,12,15,.85))}

.mcard-plate{flex:1;padding:11px 11px 10px;display:flex;flex-direction:column}
.mcard-top{display:flex;align-items:flex-start;gap:var(--s2)}
.mcard-id{flex:1;min-width:0}
.mcard-name{font-size:14.5px;font-weight:500;letter-spacing:.2px;color:var(--t1);
  text-transform:uppercase;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-h{font-size:10.5px;color:var(--cyan-text);margin-top:3px;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-year{text-align:right;line-height:1;flex:none}
.mcard-year b{display:block;font-size:20px;font-weight:500;letter-spacing:-1px;color:rgba(255,255,255,.28)}
.mcard-year i{display:block;font-style:normal;font-size:8px;letter-spacing:.14em;
  color:rgba(143,210,226,.62);margin-top:3px;white-space:nowrap}
.mcard-role{margin-top:auto;display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.05);border-radius:8px;padding:6px 9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mcard-role span{font-size:10px;color:#C3CCD3;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard-role svg{width:12px;height:12px;color:var(--cyan-text);flex:none}

.mcard-foil,.mcard-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.mcard-foil{z-index:6;mix-blend-mode:color-dodge;opacity:.12;
  background:repeating-linear-gradient(105deg,
    rgba(99,185,206,.42) 0%,rgba(129,111,168,.42) 7%,rgba(111,179,151,.34) 13%,
    rgba(197,164,105,.24) 19%,rgba(99,185,206,.42) 26%);
  background-size:280% 280%;
  transition:opacity .3s,background-position .08s linear}
.mcard:hover .mcard-foil{opacity:.30}
.mcard-glare{z-index:7;mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.mcard:hover .mcard-glare{opacity:1}

@media (max-width:720px){
  .studio-top{gap:var(--s4)}
  .studio-stats{grid-template-columns:1fr 1fr}
}


/* ============================================================
   13 · THEME v2 · THE LIGHT SYSTEM
   ------------------------------------------------------------
   Locked 24 Aug 2026. Read the "Theme rules v2" block in
   CLAUDE.md before changing a number in here.

   Colour behaves as light. There are no painted fills. Every
   surface has ONE light source and it is always visible:

     beam-lit    hero KPI rows            (the 2px --beam2)
     dot-lit     panels                   (a 2px recording dot)
     self-lit    the member card          (its own material)
     unlit       controls, until hover

   This section comes last in the file on purpose: it is the
   layer that resets the older glass to the v2 standard.
   ============================================================ */

/* ---- 13a · glass standard ----------------------------------
   Near-opaque fill. Nothing shows through, so backdrop-filter
   buys nothing and is dropped: light is painted deliberately.
   This is also what makes the beam terminate dead clean at a
   card edge instead of bleeding under it. */
.kpi,.pod,.up-card,
.pcard,.notice,.amb-countries,.rescard,.fcard,.step,.tiercard,
.trackcard,.gate,.portal-top,.tbl-shell,.amb-profile,
.up-panel,.panel,.soon,.cpop{
  background:var(--glass-fill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),
             inset 0 2px 3px rgba(0,0,0,.42);
}
.amb-summary>.kpi,.ov-stats>.kpi,.up-grid>.up-card,.beamrow>.kpi{
  background:var(--glass-fill);
  backdrop-filter:none;
}
@supports not (backdrop-filter:blur(1px)){
  .amb-summary>.kpi,.ov-stats>.kpi,.up-grid>.up-card{background:var(--glass-fill)}
}

/* ---- 13b · header beam, the 2px variant --------------------
   The 1px --beam in section 11 still exists and still runs
   behind the older KPI rows. This is the second, thicker bar,
   used by the Studio hero trio and the Global pair.

   The bar stops HARD at glass, because the cards above it are
   opaque, and feathers to transparent in open air, because
   both tips of --beam2 end at alpha 0. */
.beamrow{position:relative;isolation:isolate}
.beamrow::before{                       /* the bar */
  content:"";position:absolute;left:-24px;right:-24px;
  top:calc(50% - 1px);height:var(--beam2-h);
  background:var(--beam2);
  z-index:0;pointer-events:none;
}
.beamrow::after{                        /* the haze */
  content:"";position:absolute;left:-24px;right:-24px;
  top:calc(50% - 11px);height:var(--beam2-haze-h);
  background:var(--beam2);filter:blur(var(--beam2-haze-blur));
  opacity:var(--beam2-haze-o);
  z-index:0;pointer-events:none;
}
.beamrow>.kpi{position:relative;z-index:1;overflow:hidden}

/* the interior wash. The bar does not cross the card, its light
   does: two soft pools entering from the left and right walls. */
.kpi .bloom{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  opacity:var(--beam2-bloom);filter:blur(16px);
  background:
    radial-gradient(85% 80% at 8% 50%,var(--hue-la,transparent),transparent 72%),
    radial-gradient(85% 80% at 92% 50%,var(--hue-ra,transparent),transparent 72%);
}
.kpi>.lab,.kpi>.val,.kpi>.kdelta{position:relative;z-index:2}

/* a lit surface tints its side walls full height in the interior
   hue. Unlit rims stay neutral. The top edge keeps its white
   catch either way, so the light still reads as coming from above. */
.kpi.lit::after{
  background:
    linear-gradient(90deg,var(--hue-l,transparent) 0%,transparent 4%,
                    transparent 96%,var(--hue-r,transparent) 100%),
    var(--rim-grad-1);
}

/* ---- 13c · recording dots ----------------------------------
   Every beam-less panel carries one. 2px, inset 13px from the
   top right, breathing on a 3.2s cycle. It is the light source,
   so the panel's wash radiates from that same corner. */
/* Removed entirely on 25 Aug 2026 (Ramz), second pass: first the
   breathe went, then the dots themselves. The only status light left
   on the site is the livedot in the header. The markup keeps its
   <span class="rec"> so the hue map (which also drives each panel's
   wash and hover colour) stays wired; only the light is gone. */
.rec{display:none}
.panel,.soon{
  position:relative;border:0;
  border-radius:var(--r-panel);padding:var(--pad-card);
  overflow:hidden;
}
.panel::before,.soon::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(85% 100% at 100% 0%,var(--wash,transparent),transparent 70%);
  opacity:var(--air-o);filter:blur(var(--air-blur));
}
.panel::after,.soon::after,.cpop::after{
  content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-2);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:background var(--t-hover);
}
/* The :not() list is load-bearing. This rule lifts panel children above
   the panel's wash, but it is (0,2,0) and quietly beats any child that
   positions itself, which is only (0,1,0). It has now cost two bugs:

   .rec  — the recording dot landed inline at the TOP LEFT instead of
           pinned to the top right corner.
   .fd-pop (27 Aug 2026) — the comment popup kept its
           translate(-50%,-50%) so it LOOKED centred over the feed, but
           position:relative left it in normal flow, so the panel grew
           by the popup's full height and opened a dead 155px gap under
           the last row.

   Anything in a panel that sets its own position belongs in this list.
   Do not fix the next one with !important. */
.panel>*:not(.rec):not(.fd-pop),.soon>*:not(.rec){position:relative;z-index:2}

/* hue map. One light source per surface, one hue per source.
   --hover-hue derives the hover rim from the panel's own wash hue
   (25 Aug 2026), so a panel lights in its own colour: radar cyan,
   highlights teal, feed magenta, calendar violet. The calendar
   derives from its WASH, not its white dot, which is why the wash
   is the source here. Surfaces without a wash fall back to the
   global cyan --hover-rim. */
.panel,.soon{--hover-hue:color-mix(in srgb,var(--wash,#63B9CE) 34%,transparent)}
.panel.h-radar{--hue:var(--dot-radar);--wash:var(--wash-radar);
  --hue-glow:rgba(99,185,206,.5);--hue-far:rgba(99,185,206,.22)}
.panel.h-highlights{--hue:var(--dot-highlights);--wash:var(--wash-highlights);
  --hue-glow:rgba(111,179,151,.5);--hue-far:rgba(111,179,151,.22)}
.panel.h-feed{--hue:var(--dot-feed);--wash:var(--wash-feed);
  --hue-glow:rgba(224,79,180,.5);--hue-far:rgba(224,79,180,.22)}
/* the calendar dot is white. Its wash stays violet. */
.panel.h-calendar{--hue:var(--dot-calendar);--wash:var(--wash-calendar);
  --hue-glow:rgba(255,255,255,.42);--hue-far:rgba(255,255,255,.18)}
.soon{--hue:var(--dot-radar);--wash:var(--wash-radar);
  --hue-glow:rgba(99,185,206,.5);--hue-far:rgba(99,185,206,.22)}

/* ---- 13d · hover grammar -----------------------------------
   Site wide, and it replaces every hover that came before it.
   Rim tints cyan, a faint cyan wash pools from the top, text and
   icons brighten. About .2s both ways.

   NO OUTER BOX-SHADOW, EVER. The member card's drop shadow is
   the single exception in the product and it is not a hover. */
.btn,.cbtn,.globe-reset,.altlink,.qbtn,.sicon,.mc-flip,
.side-signin,.side-signout,.feed-link,.rlink{
  /* transition only. This rule must NOT set position: it once carried
     position:relative and that silently overrode .globe-reset's
     position:absolute, dropping the Reset button out of the
     corner of the globe chamber and on top of the hint text. The
     hover grammar is background and box-shadow, so it never needed
     a positioned box in the first place. */
  transition:color var(--t-hover),background var(--t-hover),
             box-shadow var(--t-hover),opacity var(--t-hover);
}
.btn:hover,.cbtn:hover,.globe-reset:hover,.altlink:hover,
.qbtn:hover,.sicon:hover,.mc-flip:hover,.feed-link:hover{
  color:var(--t1);
  background:
    radial-gradient(120% 90% at 50% 0%,var(--hover-wash),transparent 70%),
    var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--hover-rim),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.btn:hover,.qbtn:hover{background-color:var(--glass-fill)}
.qbtn:hover .qi,.sicon:hover svg,.mc-flip:hover svg{color:var(--cyan-text)}

/* destructive controls use the same grammar in muted red */
.side-signout:hover{
  color:var(--red);
  background:
    radial-gradient(120% 90% at 50% 0%,var(--hover-wash-danger),transparent 70%),
    var(--glass-fill);
  box-shadow:inset 0 0 0 1px var(--hover-rim-danger),
             inset 0 1px 0 rgba(255,255,255,.05);
}

/* panels and cards lift their rim rather than their shadow, and a
   panel lifts it in its OWN hue via --hover-hue from the hue map.
   The wash brightens with it, .14 resting to .20 (ceiling .22),
   so the hover reads as the panel's light turning up, not a new
   light arriving. */
.panel::before,.soon::before{transition:opacity var(--t-hover)}
.panel:hover::before,.soon:hover::before{opacity:.20}
.panel:hover::after,.rescard:hover::after,.soon:hover::after{
  background:
    linear-gradient(180deg,var(--hover-hue,var(--hover-rim)) 0%,transparent 55%),
    var(--rim-grad-2);
}


/* ============================================================
   14 · MEMBER CARD v2
   ------------------------------------------------------------
   Replaces the section 12 rules above. Geometry is a ratio,
   196 x 282, scaled to the container. The photo window is
   square and the image is CONTAINED, never cropped. Bands of
   44 (15.6 per cent of the height) top and bottom.

   The card is self-lit: no beam, no recording dot. Its drop
   shadow is the one outer box-shadow allowed in the product.
   Every constant here is locked in app-card.js and CLAUDE.md.
   ============================================================ */

.mcard-wrap{
  perspective:1100px;flex:none;
  /* positioned: the flip stardust glints are absolutely placed in here */
  position:relative;
  width:min(236px,100%);
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
}
.mcard{
  position:relative;width:100%;height:auto;aspect-ratio:196/282;
  border-radius:14px;
  transform-style:preserve-3d;
  cursor:pointer;outline:none;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.mc-face{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
/* the card is glass like everything else: the same masked gradient rim
   as the hero surfaces, drawn per face so it turns with the card */
.mc-face::after{
  content:"";position:absolute;inset:0;z-index:8;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--rim-grad-1);
  -webkit-mask:var(--rim-mask);mask:var(--rim-mask);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.mc-back{transform:rotateY(180deg)}
.mc-base{position:absolute;inset:0;background:#0A0B0D;z-index:0}

/* the photo window · square, contained, never cropped.
   Full bleed to the top since 25 Aug 2026: the photo meets the top, left
   and right edges, the name sits ON it over a scrim, and everything else
   lives below the square. 196/282 = the square ends at 69.5% height. */
.mc-photo{
  position:absolute;left:0;right:0;top:0;aspect-ratio:1;
  z-index:1;display:flex;align-items:center;justify-content:center;
}
.mc-photo img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* ---- the material, bottom to top ---- */
.mc-plasma{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:calc(var(--o,.4) * .55);
  background:radial-gradient(60% 55% at var(--gx,50%) var(--gy,50%),
    rgba(120,190,225,.55),transparent 70%);
}
.mc-pattern{
  position:absolute;inset:-14%;z-index:3;pointer-events:none;
  mix-blend-mode:color-dodge;opacity:var(--o,.4);
}
.mc-glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  mix-blend-mode:soft-light;opacity:calc(var(--o,.4) * .9);
  background:radial-gradient(38% 34% at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.9),transparent 62%);
}

/* Candidate · curtains, vertical, steel one-tone, softness 5 */
.tier-candidate .mc-pattern{
  filter:blur(5.5px);
  opacity:calc(var(--o,.4) * .775);
  background:repeating-linear-gradient(90deg,
    transparent 0 12px,#4a5862 24px,#AEBDC7 32px,#4a5862 40px,
    transparent 52px 64px);
  background-size:220% 100%;
  background-position:var(--px,0px) 0;
}
/* Ambassador · liquid marble. Two pools travel with the pointer,
   the third runs against it, which is what makes it look wet. */
.tier-ambassador .mc-pattern{
  filter:blur(9px);
  background:
    radial-gradient(42% 38% at calc(38% + var(--mx,0) * 1%) calc(34% + var(--my,0) * 1%),#35C9D6,transparent 66%),
    radial-gradient(46% 40% at calc(64% + var(--mx,0) * .7%) calc(58% + var(--my,0) * .8%),#8f7fe2,transparent 68%),
    radial-gradient(38% 34% at calc(48% - var(--mx,0) * 1.2%) calc(78% - var(--my,0) * .9%),#35C9D6,transparent 64%);
}
/* Final tier · galaxy spin. The hue ships, the name does not. */
.tier-final .mc-pattern{
  filter:blur(2.5px);
  background:conic-gradient(from var(--ang,0deg) at 50% 50%,
    #35C9D6 0deg,#0A0B0D 42deg,#5B9FD4 88deg,#0A0B0D 134deg,
    #8f7fe2 178deg,#0A0B0D 224deg,#e04fb4 268deg,#0A0B0D 316deg,#35C9D6 360deg);
}

/* ---- identity bands ---- */
.mc-band{
  position:absolute;left:0;right:0;height:15.6%;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);padding:0 11px;
}
/* the plate is everything under the square: name large, then cohort ·
   tier · joined, then the serial. The photo above runs clean. */
.mc-bot{
  top:69.5%;bottom:0;height:auto;
  flex-direction:column;align-items:flex-start;justify-content:center;
  gap:5px;padding:0 14px;
}
.mc-brow{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--s2)}
.mc-brow .flag{margin-right:0;flex:none}
.mc-brow .flag-emoji{font-size:16px}
.mc-meta{
  display:flex;justify-content:space-between;gap:var(--s2);width:100%;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);line-height:1.4;
}
.mc-meta span{white-space:nowrap}
/* on the back the serial sits under the wordmark */
.mc-mark .mc-no{margin-top:var(--s3)}
.mc-name{
  flex:1;min-width:0;
  font-size:17px;font-weight:500;letter-spacing:.04em;color:var(--t1);
  text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-year{font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:.06em;flex:none}
.mc-pill{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t1);background:rgba(255,255,255,.07);
  padding:3px 9px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.mc-no{
  font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.42);flex:none;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- the back ---- */
.mc-mark{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);
}
.mc-mark svg{width:34%;height:auto;display:block}
.mc-word{font-size:12px;letter-spacing:.42em;color:var(--t1);text-indent:.42em}
.mc-sub{
  font-size:8.5px;letter-spacing:.34em;color:rgba(255,255,255,.44);text-indent:.34em;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- flip control ---- */
.mc-flip{
  width:30px;height:30px;border-radius:50%;border:0;
  background:var(--glass-fill);color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.mc-flip svg{width:15px;height:15px}
.mc-flip.turned svg{transform:scaleX(-1)}


/* ============================================================
   15 · STUDIO PANE
   ------------------------------------------------------------
   Candidate view. Order is fixed: hero, quick actions, radar
   and highlights, the next two weeks, the region feed, then
   the provisional-numbers note.

   Type scale, and no new sizes: greeting 16.5 · section titles
   10 mono letterspaced · KPI numerals 19 · body 11.5 to 12.5 ·
   metadata 10.
   ============================================================ */

/* ---- the hero grid (27 Aug 2026) ----------------------------------
   Two columns, two rows, four children:

     card   |  greeting, cohort, next step
     circles|  KPI trio

   The second row is what this is for. The circles and the KPIs are grid
   siblings in it, centred, so the laser that runs through the middle of
   the KPI row runs through the middle of the circles too, at every
   width, with nothing to keep in step by hand. */
.st-hero{
  display:grid;
  grid-template-columns:min(236px,100%) 1fr;
  column-gap:var(--s5);row-gap:var(--s4);
  align-items:start;
  margin-bottom:var(--gap-section);
}
.st-hero>.st-actions,.st-hero>.st-kpis{align-self:center}
/* Row one: both cells stretch to the row's height, which the card sets,
   and the side column pushes its greeting to the top and the next-step
   pill to the bottom. The pill's bottom edge therefore lands on the
   card's bottom edge, and the space that opens between the greeting and
   the pill is the slot the entertainment line sits in. */
.st-hero>.st-cardcol,.st-hero>.st-side{align-self:stretch}
.st-side{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
/* the pill's bottom margin dates from when the KPI row still sat inside
   this column and needed clearing. The KPIs are a grid sibling now, and
   space-between aligns the MARGIN box, so that 24px was holding the pill
   24px clear of the card's bottom edge. */
.st-side>.st-next{margin-bottom:0}

/* Stacked, there is no row to line up with, so the grid collapses and
   `order` puts the circles back under the card where they belong. */
@media (max-width:860px){
  .st-hero{grid-template-columns:1fr}
  .st-hero>.st-cardcol{order:1}
  /* held to the card's width, or the four circles spread across the
     whole column and stop reading as belonging to the card. They stay
     in one row of four here, they do not become a column. */
  .st-hero>.st-actions{order:2;max-width:min(236px,100%)}
  .st-hero>.st-side{order:3}
  .st-hero>.st-kpis{order:4}
}
.st-greet{font-size:16.5px;font-weight:500;color:var(--t1);letter-spacing:-.2px}
.st-cohort{font-size:11.5px;color:var(--t3);margin:var(--s1) 0 var(--s4)}

/* ONE next step. The only cyan-rimmed element on the page, which
   is the whole reason it reads as the next thing to do. */
.st-next{
  position:relative;border-radius:var(--r-card);
  padding:var(--s3) var(--s4);margin-bottom:var(--s5);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(99,185,206,.10),transparent 70%),
    var(--glass-fill);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.34),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.st-next .lab{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-text);margin-bottom:var(--s1);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.st-next .txt{font-size:12.5px;color:var(--t1);line-height:1.5}

.st-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.st-kpis .kpi .val{font-size:19px;letter-spacing:-.5px}
.st-kpis .kpi .lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.kdelta{position:relative;z-index:2;display:block;margin-top:var(--s1);font-size:10px;color:var(--teal-text)}
.kdelta.flat{color:var(--t3)}

/* ---- quick actions · four circles under the card ------------------
   Rebuilt 26 Aug 2026. The old full-width pills read as inert bars and
   the space under the card was dead, so the actions moved into the card
   column as circles: icon carrying the weight, short label under it.
   The circle is the glass surface, NOT the cell, so hover lights the
   circle alone. The generic .qbtn:hover in section 13d would paint the
   whole cell, hence the explicit reset. */
.st-cardcol{
  flex:none;width:min(236px,100%);
  display:flex;flex-direction:column;gap:var(--s4);
}
.st-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}

.qbtn{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;border:0;background:none;box-shadow:none;
  font-family:inherit;text-decoration:none;cursor:pointer;
}
.qbtn .qi{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  color:var(--t2);
  transition:color var(--t-hover),background var(--t-hover),box-shadow var(--t-hover);
}
.qbtn .qi svg{width:18px;height:18px}
.qbtn .ql{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:center;transition:color var(--t-hover);
}
/* light inside the circle, never an outer glow */
.st-actions .qbtn:hover,.st-actions .qbtn:focus-visible{background:none;box-shadow:none;outline:none}
.st-actions .qbtn:hover .qi,.st-actions .qbtn:focus-visible .qi{
  color:var(--t1);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--hover-rim);
}
.st-actions .qbtn:hover .ql,.st-actions .qbtn:focus-visible .ql{color:var(--t2)}
.qbtn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}

/* ---- section titles ---- */
/* Lightened twice on 25 Aug 2026: t3 read as barely there, t2 still
   sat back too far at 10px mono. Now a mix sitting between t2 and t1,
   from the existing tokens so the greys stay in one family. The scale
   stays 10px: brighter beats bigger here, and glowing text is off the
   table for the same reason the pulsing dots went. */
.st-h{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t1) 55%,var(--t2));
  margin:0 0 var(--s3);font-weight:400;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.st-row{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap-card);margin-bottom:var(--gap-section)}
.st-block{margin-bottom:var(--gap-section)}
.st-note{font-size:11.5px;color:var(--t3);line-height:1.55;margin-top:var(--s5)}
.st-empty{font-size:11.5px;color:var(--t3);line-height:1.55}

/* ---- radar · filleted shape, ghost trail, insights ------------
   Spec locked 26 Aug 2026: circular grid, middle watermark at .055,
   filleted vertices (8px), scrubber resting on the current 30 days,
   ghost trail floor .065 / ceiling .22 capped at six, settling
   dissolve at both extremes. Deltas render ONLY inside the insights
   disclosure; "There is no right shape." closes its body. The old
   legend and Most grown / Room to try chips are absorbed by the
   slider labels and the insights rows. Behaviour lives in
   bindRadar() in app-auth.js. */
.rd-wrap{display:flex;flex-direction:column}
.rd-svg svg{width:100%;max-width:300px;display:block;margin:0 auto}
.rd-read{min-height:18px;text-align:center;font-size:12px;color:var(--t3);padding:2px 0 6px}
.rd-read b{color:var(--t1);font-weight:500}
.rd-read .now{color:var(--cyan-text)}
.rd-read .pri{color:var(--violet-text)}
.rd-slide{display:flex;align-items:center;gap:10px;padding:0 6px}
.rd-lab{font-size:11px;white-space:nowrap}
.rd-lab.lp{color:var(--violet-text)}
.rd-lab.lc{color:var(--cyan-text)}
/* hairline scrubber (26 Aug 2026): the native control rendered as a
   fat cyan pill. Now a 2px rail whose tint follows the thumb, violet
   behind it and cyan ahead (--f is set per input in bindRadar), with
   a 10px dot thumb centred on the rail. Hover brightens the thumb;
   no halo, outer shadows stay forbidden. */
.rd-slide input{
  -webkit-appearance:none;appearance:none;
  flex:1;height:18px;margin:0;background:transparent;cursor:pointer;
}
.rd-slide input:focus{outline:none}
.rd-slide input::-webkit-slider-runnable-track{
  height:2px;border-radius:1px;
  background:linear-gradient(90deg,
    rgba(129,111,168,.35) var(--f,100%),rgba(99,185,206,.55) var(--f,100%));
}
.rd-slide input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:10px;height:10px;border-radius:50%;border:0;
  background:var(--cyan);
  /* (thumb 10px - track 2px) / 2 = 4px lift, dead centre on the rail */
  margin-top:-4px;
  transition:background var(--t-fast);
}
.rd-slide input:hover::-webkit-slider-thumb,
.rd-slide input:focus-visible::-webkit-slider-thumb{background:var(--cyan-text)}
.rd-slide input::-moz-range-track{
  height:2px;border-radius:1px;
  background:linear-gradient(90deg,
    rgba(129,111,168,.35) var(--f,100%),rgba(99,185,206,.55) var(--f,100%));
}
.rd-slide input::-moz-range-thumb{
  width:10px;height:10px;border-radius:50%;border:0;background:var(--cyan);
}
.rd-slide input:hover::-moz-range-thumb{background:var(--cyan-text)}
.rd-ins{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:transparent;border:0;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:14px;padding:11px 2px 2px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t1) 55%,var(--t2));
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:color var(--t-fast);
}
.rd-ins:hover,.rd-ins:focus-visible{color:var(--t1)}
.rd-ins .ch{font-size:12px;letter-spacing:0}
.rd-bd{padding-top:4px}
.rd-lead{font-size:12px;color:var(--t2);margin:2px 0 6px;line-height:1.55}
.rd-lead b{color:var(--cyan-text);font-weight:500}
.rd-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;color:var(--t2)}
.rd-row .d{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
.rd-row .up{color:var(--cyan-text)}
.rd-row .dn{color:var(--violet-text)}
.rd-cap{font-size:11px;color:var(--t3);margin:8px 0 0;line-height:1.5}

/* ---- highlights ---- */
.hl-row{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.038);
  font-size:12px;color:var(--t2);
}
.hl-row:last-child{border-bottom:0}
.hl-row .t{flex:1;min-width:0;line-height:1.45}
.hl-row .w{flex:none;font-size:10px;color:var(--t3)}

/* ---- next two weeks ---- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cell{
  position:relative;border-radius:9px;padding:6px 7px;min-height:62px;
  background:rgba(255,255,255,.018);
  display:flex;flex-direction:column;gap:3px;
}
.cal .cell.w2{opacity:.55}
.cal .cell.today{box-shadow:inset 0 0 0 1px rgba(99,185,206,.5)}
.cal .d{font-size:10px;color:var(--t3);letter-spacing:.04em}
.cal .d b{color:var(--t1);font-weight:500}
.evpill{
  display:block;font-size:9.5px;line-height:1.3;border-radius:5px;
  padding:3px 5px;color:var(--t1);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;
}
.evpill.team{background:rgba(129,111,168,.24);box-shadow:inset 0 0 0 1px rgba(129,111,168,.34)}
.evpill.region{background:rgba(99,185,206,.20);box-shadow:inset 0 0 0 1px rgba(99,185,206,.32)}
/* ecosystem blue: from the ecosystem, placed by the team */
.evpill.eco{background:rgba(91,159,212,.20);box-shadow:inset 0 0 0 1px rgba(91,159,212,.34)}
/* learning (31 Aug 2026): bootcamps, workshops, office hours. Sage, the
   palette's growth hue, deliberately not gold. */
.evpill.learn{background:rgba(111,179,151,.20);box-shadow:inset 0 0 0 1px rgba(111,179,151,.34)}
/* the time leads the pill, so two sittings of the same session are
   distinguishable. Without it they read as one event listed twice. */
.evpill b{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
.cal-legend{display:flex;gap:var(--s4);margin-top:var(--s3);font-size:10px;color:var(--t3);flex-wrap:wrap}
.cal-legend i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:6px}
.cal-legend .lt i{background:rgba(129,111,168,.6)}
.cal-legend .lr i{background:rgba(99,185,206,.6)}
.cal-legend .ll i{background:rgba(111,179,151,.6)}
.cal-legend .le i{background:rgba(91,159,212,.6)}

/* ---- region feed ---- */
.feed{max-height:340px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.feed-row{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.038);
}
.feed-row:last-child{border-bottom:0}
/* these three are spans, so they need display:block to stack. Without
   it the name, the tier line and the text ran together on one line. */
.feed-row .who{display:block;font-size:12px;color:var(--t1);font-weight:500}
.feed-row .sub{display:block;font-size:10px;color:var(--t3);margin-top:1px}
.feed-row .txt{display:block;font-size:11.5px;color:var(--t2);line-height:1.5;margin-top:4px}
.feed-mid{flex:1;min-width:0}
.feed-right{display:flex;align-items:center;gap:var(--s2);flex:none}
.feed-right .w{font-size:10px;color:var(--t3)}
.feed-link{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:7px;color:var(--t3);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.feed-link svg{width:13px;height:13px}

/* ---- halo rings · tier material, one system ---- */
.halo{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;color:var(--t1);
  background:rgba(255,255,255,.04);
}
/* Quiet ring since 25 Aug 2026 (Ramz): the tier hue stays as a crisp
   1px ring and the outer glow is gone. The glow made every feed row
   twinkle, and the rest of the product keeps its light inside the
   glass. Tier is still legible at a glance from the ring colour. */
.halo.t-candidate{box-shadow:inset 0 0 0 1px var(--halo-cand)}
.halo.t-ambassador{box-shadow:inset 0 0 0 1px var(--halo-amb)}
.halo.t-final{box-shadow:inset 0 0 0 1px var(--halo-final)}
/* the SAP feed's author ring. Gold, because a team post is the
   programme speaking, and gold already means exactly that. Not a tier
   material: team is not a tier. */
.halo.t-team{box-shadow:inset 0 0 0 1px rgba(224,190,106,.55);color:var(--gold)}


/* ============================================================
   16 · GO GLOBAL
   ------------------------------------------------------------
   The beam wrapped around the planet. The chamber's light IS
   the globe, so it carries no recording dot.
   ============================================================ */

.gg-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card);margin-bottom:var(--gap-section)}
.gg-kpis .kpi .val{font-size:24px;letter-spacing:-.7px}
.gg-kpis .kpi .lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* the spectrum halo, left to right behind the sphere */
.globe-stage::before{
  content:"";position:absolute;left:50%;top:50%;
  width:min(78%,430px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;inset:auto;
  background:linear-gradient(90deg,#35C9D6,#5B9FD4 36%,#8f7fe2 64%,#e04fb4);
  filter:blur(34px);opacity:.34;
  z-index:0;pointer-events:none;
}
/* WebGL renders on an opaque canvas, so a CSS layer can never sit behind
   the sphere there: this ::before painted IN FRONT of the earth instead,
   as a second, smaller off-size disc (found live on 25 Aug 2026). The
   shader in app-globe.js already wraps the spectrum around the real
   sphere, so on the .gl stage the CSS halo and limb are switched off.
   They exist only for the SVG fallback, where there is no shader. */
.globe-stage.gl::before,
.globe-stage.gl .limb{display:none}

/* the sphere's own limbs · cyan on the left, magenta on the right */
.globe-stage .limb{
  position:absolute;left:50%;top:50%;
  width:min(60%,330px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:1;pointer-events:none;
  box-shadow:inset 14px 0 26px -10px rgba(53,201,214,.5),
             inset -14px 0 26px -10px rgba(224,79,180,.42);
}

/* country popup */
.cpop{
  /* bottom clears the coordinate readout (two 11px lines at bottom
     right) instead of sitting on top of it */
  position:absolute;right:var(--s4);bottom:56px;width:270px;
  z-index:5;border-radius:var(--r-panel);padding:var(--s4) 18px;
  border:0;
}
.cpop.hide{display:none}
.cpop-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.cpop-c{font-size:14px;font-weight:500;color:var(--t1)}
.cpop-n{
  font-size:10px;letter-spacing:.12em;color:var(--cyan-text);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* five rows tall (rows run ~45px), then it scrolls */
.cpop-list{max-height:225px;overflow-y:auto;margin:0 -2px;padding:0 2px}
.cpop-row{display:flex;align-items:center;gap:var(--s3);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.cpop-row:last-child{border-bottom:0}
.cpop-row .nm{flex:1;min-width:0;font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpop-row .tl{font-size:10px;color:var(--t3);flex:none}
.cpop-close{position:absolute;right:11px;top:8px;background:none;border:0;color:var(--t3);font-size:17px;line-height:1;cursor:pointer;z-index:4}
.cpop-close:hover{color:var(--t1)}


/* ============================================================
   17 · SIDEBAR · SOCIALS AND AUTH
   ------------------------------------------------------------
   Auth lives here now, in both states. renderSideFoot() is the
   single owner of this area. The Studio pane no longer carries
   a sign-out button.
   ============================================================ */

.side-social{padding:0 var(--s5) var(--s4);margin-top:auto}
.side-social .lab{
  font-size:10px;letter-spacing:.16em;color:var(--t3);margin-bottom:var(--s2);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.side-icons{display:flex;gap:var(--s2)}
.sicon{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.sicon svg{width:15px;height:15px}

.side-foot{margin-top:0}
.side-foot .who{align-items:center}
.side-foot .who .meta{flex:1;min-width:0}
.side-foot .who .nm{font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-signout{
  width:26px;height:26px;border-radius:8px;border:0;flex:none;
  background:none;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.side-signout svg{width:14px;height:14px}
.side-signin{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;height:34px;border:0;border-radius:var(--r-ctrl);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(99,185,206,.10),transparent 70%),
    var(--glass-fill);
  color:var(--t1);font-family:inherit;font-size:12.5px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.34),inset 0 1px 0 rgba(255,255,255,.05);
}
.side-signin svg{width:14px;height:14px}
.side-signin:hover{box-shadow:inset 0 0 0 1px rgba(99,185,206,.55),inset 0 1px 0 rgba(255,255,255,.06)}

/* ---- collapsed rail --------------------------------------------
   app-nav.js collapses the sidebar to icons with body.rail-min.
   nav.css predates the socials block and the sidebar auth, so both
   need their own collapse rules:
   - the three social buttons stack, otherwise they hold the rail wide
     (rail-min sizes the rail by its widest content)
   - nav.css hides the name with opacity:0;width:0, but width:0 does
     not stop flex-grow, so .meta kept stretching and shoved the
     sign-out icon to the far edge. display:none does stop it.
   - the Sign in button drops its text and keeps the icon */
body.rail-min .side-social{padding-left:0;padding-right:0}
body.rail-min .side-social .lab{display:none}
body.rail-min .side-icons{flex-direction:column;align-items:center}
body.rail-min .side-foot .who{flex-direction:column;gap:var(--s2)}
body.rail-min .side-foot .who .meta{display:none}
body.rail-min .side-signin{font-size:0;gap:0;width:34px;padding:0;margin:0 auto}
/* same flex trap as the sign-out row: nav.css hides the brand word with
   width:0, but its flex:1 1 auto keeps growing and rams the mark into
   the left edge. display:none is the only thing that stops flex-grow. */
body.rail-min .side .brandline b{display:none}

/* ---- the gate, dot-lit -----------------------------------------
   Same light grammar as every panel: one cyan dot, its wash from the
   same corner. The mark replaces the old padlock emoji. */
.gate{
  --hue:var(--dot-radar);
  --hue-glow:rgba(99,185,206,.5);--hue-far:rgba(99,185,206,.22);
  overflow:hidden;
}
.gate::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(85% 100% at 100% 0%,var(--wash-radar),transparent 70%);
  opacity:var(--air-o);filter:blur(var(--air-blur));
}
.gate>*:not(.rec){position:relative;z-index:2}
.gate .gmark{display:flex;justify-content:center;margin-bottom:var(--s3);color:var(--t2)}
.gate .gmark svg{width:26px;height:26px}
.gate .gnote{font-size:11.5px;color:var(--t3);line-height:1.6;margin-top:var(--s4);text-align:left}


/* ============================================================
   18 · COMING SOON PANES
   ============================================================ */

.soon{
  max-width:420px;margin:var(--s7) auto;text-align:center;
  padding:var(--s6) var(--s5);
}
.soon .si{display:flex;justify-content:center;color:var(--t3);margin-bottom:var(--s3)}
.soon .si svg{width:22px;height:22px}
.soon h2{font-size:16.5px;font-weight:500;color:var(--t1);margin:0 0 var(--s2)}
.soon p{font-size:12.5px;color:var(--t2);line-height:1.6;margin:0}


/* ---- responsive ---- */
@media (max-width:1080px){
  .st-row{grid-template-columns:1fr}
}
@media (max-width:860px){
  .st-kpis{grid-template-columns:1fr}
  .gg-kpis{grid-template-columns:1fr}
  .beamrow::before,.beamrow::after{display:none}
  .cal{grid-template-columns:repeat(4,1fr)}
  .cpop{position:static;width:auto;margin-top:var(--gap-card)}
}


/* ---- nav gating --------------------------------------------
   Lives in nav.css now, not here. Both this file and nav.css had
   the same fix for the same bug (the id in .tabs#nav button beat
   .tabs button.team-only, so team tabs showed to everyone). One
   copy is enough, and nav.css is the file that owns the rail. */


/* ---- the live indicator ------------------------------------
   app.css gave this a plain outer glow, `0 0 8px var(--green)`,
   which is the one thing theme rules v2 forbids outright. It is
   a status light, so it joins the recording dot system instead
   of keeping a bespoke glow. Static like the dots since 25 Aug
   2026; animation:none is load-bearing, it silences app.css's
   `lp` which would otherwise resume pulsing. */
.livestat .livedot{
  width:2px;height:2px;
  background:var(--teal);
  --hue:var(--teal);
  --hue-glow:rgba(111,179,151,.5);
  --hue-far:rgba(111,179,151,.22);
  opacity:.8;
  box-shadow:0 0 2px 1px var(--hue),0 0 7px 2px var(--hue-glow);
  animation:none;
}


/* ============================================================
   19 · PUBLIC TEASER (v4, locked 25 Aug 2026)
   ------------------------------------------------------------
   Signed out, My Studio renders the real Studio layout as a
   blurred, dimmed, inert backdrop built from TEASER_PROFILE,
   with the sign-in panel floating over it. The panel reuses
   .gate glass (standard glass, rim-2); the sign-in tile inside
   it is the only cyan-rimmed element on the page, the same
   treatment as ONE NEXT STEP in section 15.
   ============================================================ */

/* The overlay sits in normal flow and sizes the container, so the
   teaser is always exactly tall enough for the panel and never taller
   than it has to be; the backdrop is absolute behind it and clips. */
.teaser{
  position:relative;overflow:hidden;
  min-height:min(calc(100vh - 215px),720px);
  border-radius:var(--r-panel);
}
/* blur ~14px, dimmed to .45, and inert in the markup. The blur is
   heavy but the backdrop never repaints outside the card's own rAF. */
.teaser-back{
  position:absolute;inset:0;
  filter:blur(14px);opacity:.45;pointer-events:none;user-select:none;
}
.gate-overlay{
  position:relative;z-index:4;
  min-height:inherit;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);
}
/* margin:0 undoes .gate's own centring; the overlay centres it instead */
.gate-panel{margin:0;width:100%}
.gate-panel h2{font-size:17px}
.gate-panel .gp-body{margin:0;font-size:12.5px;color:var(--t2);line-height:1.6}

/* the sign-in tile · same cyan recipe as .st-next, and for the same
   reason: one cyan rim on the page marks the one thing to do next */
.gp-signin{
  position:relative;border-radius:var(--r-card);
  padding:var(--s4);margin:var(--s5) 0;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(99,185,206,.10),transparent 70%),
    var(--glass-fill);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.34),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.gp-wait{font-size:13.5px;font-weight:500;color:var(--t1);margin-bottom:var(--s3)}
.gp-btn{
  display:block;width:100%;height:40px;padding:0 var(--s4);
  font-family:inherit;font-size:13px;font-weight:500;
  border:0;border-radius:var(--r-ctrl);cursor:pointer;
  background:var(--glass-fill);color:var(--t1);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.30),
             inset 0 1px 0 rgba(255,255,255,.06);
  transition:background var(--t-fast),box-shadow var(--t-fast);
}
/* hover = light inside the glass, never an outer glow */
.gp-btn:hover{
  background:rgba(99,185,206,.08);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.45),
             inset 0 1px 0 rgba(255,255,255,.09);
}
.gp-micro{font-size:11px;color:var(--t3);margin-top:var(--s3)}
.gp-curious{text-align:left;margin-top:var(--s2)}
.gp-curious p{font-size:12px;color:var(--t3);line-height:1.6;margin:0 0 var(--s2)}
.gp-link{font-size:12.5px;color:var(--cyan-text);text-decoration:none;transition:color var(--t-fast)}
.gp-link:hover{color:var(--t1)}

/* ---- Global public tiles (v4) ----------------------------
   Three beam-lit KPI cards fed from PUBLIC_STATS. The caption
   sits over the row in --t2; the counted-onchain line sits under
   it, 10px mono in --t3. */
.gg-cap{font-size:12.5px;color:var(--t2);margin:0 0 var(--s3)}
.gg-kpis{grid-template-columns:repeat(3,1fr);margin-bottom:var(--s2)}
/* Bottom RIGHT of the globe stage, opposite the legend, and a size down
   from where it sat in the flow (27 Aug 2026). It is a footnote about
   freshness, not a caption, so it belongs in a corner rather than in
   the column under the tiles. */
.globe-stage .gg-upd,.gg-upd{
  font-size:9px;color:var(--t3);letter-spacing:.08em;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  margin:0;
}
/* ---- country search on the globe (27 Aug 2026) ---------------------
   Sits in the control cluster with Pause and Reset. The team country
   list already existed but is team-only, so this is the only route to a
   country for candidates and signed-out visitors. */
.gsearch{position:relative}
.gs-field{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  border-radius:var(--r-pill);padding:4px 12px;
  transition:box-shadow var(--t-fast);
  /* 18px line box + 10px padding = 28px, matching Pause and Reset. The
     taller caret pushed this to 30 and left the field standing proud of
     the two buttons beside it. */
  box-sizing:border-box;height:28px;
}
.gs-field:focus-within{box-shadow:inset 0 0 0 1px rgba(99,185,206,.45)}
.gs-field svg{width:13px;height:13px;flex:none;color:var(--t3)}
.gs-field input{
  border:0;background:none;outline:none;color:var(--t1);
  font-family:inherit;width:128px;padding:0;
  /* The caret's height follows the line box, so line-height:normal at
     11.5px left a 15px stub in a 28px field. 13px on a 20px line box
     gives a caret that reads as a cursor rather than a speck. */
  font-size:13px;line-height:20px;
  caret-color:var(--cyan-text);
}
.gs-field input::placeholder{color:var(--t3)}
/* The caret always sits at text position zero, and so does the first
   letter of the placeholder, so the two overlapped and the cursor read
   as an artefact stuck on the S of Search. Clearing the placeholder on
   focus leaves the caret alone in the field, which is what makes it
   look deliberate. */
.gs-field input:focus::placeholder{color:transparent}
/* anchored LEFT: the search is the first control in the cluster now, so
   the list opens under it and runs rightwards */
.gs-list{
  position:absolute;left:0;top:calc(100% + 6px);min-width:190px;max-height:236px;
  overflow-y:auto;z-index:8;
  background:rgba(9,10,12,.97);border-radius:var(--r-card);padding:5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.6);
}
.gs-row{
  display:flex;align-items:center;gap:9px;width:100%;border:0;cursor:pointer;
  background:none;color:var(--t2);font-family:inherit;font-size:12px;
  padding:7px 9px;border-radius:9px;text-align:left;
  transition:color var(--t-fast),background var(--t-fast);
}
.gs-row .gs-n{
  margin-left:auto;font-size:10px;color:var(--t3);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.gs-row:hover,.gs-row.cur{background:rgba(255,255,255,.06);color:var(--t1)}
.gs-row:hover .gs-n,.gs-row.cur .gs-n{color:var(--t2)}
.gs-none{font-size:11.5px;color:var(--t3);padding:8px 9px}
/* the cluster wraps rather than pushing the search off the stage */
@media (max-width:640px){
  .gs-field input{width:96px}
}

/* the bottom-left stack: legend first, freshness note under it */
.globe-foot{
  position:absolute;left:16px;bottom:14px;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.globe-foot .amb-legend{position:static}

/* The Verified hover bubble was cut on 25 Aug 2026 (Ramz): the tile
   label is plain text now. Do not reintroduce a tooltip here without
   remembering that .beamrow>.kpi clips overflow and that .lab and
   .val are sibling stacking contexts. */

@media (max-width:860px){
  .gg-kpis{grid-template-columns:1fr}
}

/* ---- opportunities · shares the highlights slot (25 Aug 2026) ---
   The bulletin board flips with recent highlights behind the arrow
   control in the header. Violet dot and wash: amber stays reserved
   for beta/warning/pending, and violet quietly reads as "the team
   put this here". The hover hue follows via the hue map above. */
/* Two stacked panels since 26 Aug 2026 (the weighted single panel
   lasted a day: text-heavy). Opportunities wear Soneium gold, capped
   under half the column; highlights fill the rest in the person's
   own tier material and each panel scrolls inside itself. The hue
   variables drive the wash, the (hidden) dot and the hover light,
   same as every panel. */
.panel.h-opps{--hue:var(--dot-opps);--wash:var(--wash-opps);
  --hue-glow:rgba(224,190,106,.5);--hue-far:rgba(224,190,106,.22)}
.panel.h-mine.t-candidate{--hue:#AEBDC7;--wash:rgba(174,189,199,1);
  --hue-glow:rgba(174,189,199,.5);--hue-far:rgba(174,189,199,.22)}
.panel.h-mine.t-ambassador{--hue:var(--cyan);--wash:rgba(99,185,206,1);
  --hue-glow:rgba(99,185,206,.5);--hue-far:rgba(99,185,206,.22)}
.panel.h-mine.t-final{--hue:#E04FB4;--wash:rgba(224,79,180,1);
  --hue-glow:rgba(224,79,180,.5);--hue-far:rgba(224,79,180,.22)}
.st-col{display:flex;flex-direction:column;gap:var(--gap-card);min-height:0}
.panel.h-opps{flex:0 1 auto;max-height:52%;display:flex;flex-direction:column}
.opp-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.panel.h-mine{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hl-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
/* single-column widths: the row has no fixed height to divide, so the
   caps come off and the highlights list gets its own ceiling instead
   of growing without end */
@media (max-width:1080px){
  .panel.h-opps{max-height:none}
  .hl-scroll{max-height:320px}
}
.opp-row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.opp-row:last-child{border-bottom:0;padding-bottom:0}
.opp-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.opp-t{font-size:12.5px;font-weight:500;color:var(--t1)}
.opp-d{font-size:11.5px;color:var(--t2);line-height:1.5;margin:3px 0 4px}
.opp-meta{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.opp-meta .opp-rew{color:var(--violet-text);font-weight:400}

/* ---- community feed · tabs, actions, support popup (26 Aug 2026) --
   The region feed as a social surface. Rows lead with the Discord
   identity; Like and Support open x.com intents, so the buttons only
   promise what they do. The support popup is free-text only. */
/* Four tabs since 27 Aug 2026 (Country, Region, Global, SAP). With a
   long country and a long region the row only had 12px of slack at
   560px, so it wraps rather than clipping the last tab off the panel.
   Wrapped, the tabs take their own line and sit left under the title. */
.fd-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s2) var(--s3);flex-wrap:wrap}
.fd-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fd-tab{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:3px 12px;border-radius:var(--r-pill);cursor:pointer;
  background:transparent;color:var(--t3);
  border:1px solid rgba(255,255,255,.10);
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.fd-tab.on{
  color:#E8A5D2;
  border-color:rgba(224,79,180,.45);
  background:rgba(224,79,180,.08);
}
.fd-tab:hover{color:var(--t1)}
.fd-sub{font-size:11px;color:var(--t3);margin:0 0 var(--s2)}
/* padded pills (25 Aug 2026): invisible at rest, both actions
   identical. The row is pulled left by the pill's own padding so the
   heart still optically aligns with the post text. Hover and keyboard
   focus light in the feed's OWN pink, and outline:none is safe only
   because focus-visible carries the ring instead: the browser default
   drew a tight ellipse hugging the label. */
.fd-acts{display:flex;gap:8px;margin-top:6px;margin-left:-12px}
.fd-act{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;
  padding:4px 12px;border-radius:var(--r-pill);
  font-family:inherit;font-size:11px;color:var(--t3);text-decoration:none;
  outline:none;
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.fd-act:hover,.fd-act:focus-visible{
  color:var(--magenta-text);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(224,79,180,.35);
}
.fd-act svg{width:13px;height:13px}
/* the popup floats over the panel only, glass on glass, no page dim */
.panel.h-feed{position:relative}
.fd-pop{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88%;max-width:380px;z-index:6;
  background:rgba(9,10,12,.97);border-radius:var(--r-card);padding:var(--s4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.fd-txt{
  width:100%;box-sizing:border-box;resize:none;
  background:rgba(255,255,255,.04);border:0;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  color:var(--t1);font-size:12px;font-family:inherit;line-height:1.5;
  padding:8px 10px;
}
/* the popup lives inside the feed, so it wears the feed's magenta,
   not the site's default cyan (26 Aug 2026) */
.fd-txt:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(224,79,180,.40)}
.fd-pop-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s3);gap:var(--s3)}
.fd-note{font-size:10.5px;color:var(--t3)}
.fd-btns{display:flex;gap:8px}
.fd-cancel,.fd-go{
  font-family:inherit;font-size:11px;padding:6px 12px;border-radius:9px;
  border:0;cursor:pointer;transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.fd-cancel{background:transparent;color:var(--t2)}
.fd-cancel:hover{color:var(--t1)}
.fd-go{
  background:rgba(224,79,180,.08);color:var(--magenta-text);font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(224,79,180,.40);
}
.fd-go:hover{background:rgba(224,79,180,.14)}

/* ---- daily rhythm + weekly momentum (26 Aug 2026) -----------------
   Gold, because gold means the program's invitations to act. A strip,
   not a panel: no dot markup, the wash is its own. Dots fill as the
   day or the week does; the counter turns gold when a row completes.
   Vocabulary is rhythm and momentum, never tasks. */
/* TWO PILLS ON A GOLD LASER since 27 Aug 2026. The single stacked strip
   sat inside the right column, which left the space under the four
   circles dead. Now it is a full-width beam row: the same mechanism as
   the KPI trio with --beam2 repointed from cyan to gold, at the hotter
   setting Ramz picked (haze .58, bloom .48). The bar stops hard at the
   glass and feathers to nothing in open air, so the laser reads in the
   gap between the pills and off both ends. */
.rhythm{
  --beam2:linear-gradient(90deg,rgba(224,190,106,0) 0%,#E0BE6A 9%,
          #E0BE6A 50%,#E0BE6A 91%,rgba(224,190,106,0) 100%);
  --beam2-haze-o:.58;
  --beam2-bloom:.48;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-card);
  margin-bottom:var(--gap-section);
}
.rhp{
  position:relative;z-index:1;overflow:hidden;
  background:var(--glass-fill);
  border-radius:var(--r-card);
  padding:var(--s3) var(--s4);
}
/* gold side rims full height, because a lit surface tints its own
   walls in the interior hue; the top edge keeps its white catch */
.rhp::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:
    linear-gradient(90deg,rgba(224,190,106,.40) 0%,transparent 4%,
                    transparent 96%,rgba(224,190,106,.40) 100%),
    var(--rim-grad-1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
/* the bar does not cross the pill, its light does */
.rhp .bloom{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  opacity:var(--beam2-bloom);filter:blur(16px);
  background:
    radial-gradient(85% 80% at 8% 50%,rgba(224,190,106,.26),transparent 72%),
    radial-gradient(85% 80% at 92% 50%,rgba(224,190,106,.26),transparent 72%);
}
.rhp>.rh-head,.rhp>.rh-row{position:relative;z-index:2}

/* ---- the entertainment line (27 Aug 2026) --------------------------
   Sits between the greeting and the next-step pill. Texture, not
   controls: no container, no hover, pointer-events off, and smaller
   than the quick-action circles so it cannot be mistaken for a second
   toolbar. Only the light moves; the glyphs never do, which keeps it
   inside the motion budget. */
.ent-line{
  display:block;width:fit-content;max-width:100%;
  pointer-events:none;overflow:hidden;
  margin:2px 0;
}
.ent-line svg{display:block;height:26px;width:auto;overflow:visible}
@keyframes ent-sweep{
  from{transform:translateX(0)}
  to{transform:translateX(var(--ent-travel,534px))}
}
.ent-sweep{animation:ent-sweep 8s linear infinite}
/* frozen, the row shows quietly rather than leaving an empty strip:
   a reveal-by-default element is exactly what breaks when motion is off */
@media (prefers-reduced-motion:reduce){
  .ent-sweep{animation:none}
  .ent-line g[mask]{mask:none;opacity:.34}
}
/* stacked, the row would crowd the greeting */
@media (max-width:860px){
  .ent-line svg{height:22px}
}

/* ---- gm (27 Aug 2026) ---------------------------------------------
   The sun sits where the daily counter's dots sit. Off it is a bare
   disc with no rays: the sun is behind cloud. Clicked, the rays come
   out, the disc floods gold, and daylight enters the pill from that
   corner. Chosen over three quieter versions because the ritual should
   be worth doing.

   All of it is light inside the glass. No outer shadow, nothing moves,
   so it stays inside the motion budget: the two transitions are a
   colour and an opacity. */
.gm{
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  color:var(--t3);
  transition:color var(--t-hover);
}
.gm svg{width:18px;height:18px;overflow:visible}
.gm .gm-ray{opacity:0;transition:opacity .3s ease}
.gm .gm-disc{transition:fill .3s ease,stroke .3s ease}
.gm:hover{color:color-mix(in srgb,var(--gold) 60%,var(--t2))}
.gm:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gm[aria-pressed="true"]{color:var(--gold);cursor:default}
.gm[aria-pressed="true"] .gm-ray{opacity:1}
.gm[aria-pressed="true"] .gm-disc{fill:var(--gold);fill-opacity:.92;stroke:var(--gold)}

/* ---- the daylight -------------------------------------------------
   gm lights the WHOLE row, both pills, not just the one holding the
   sun. There is still only ONE light source: the sun sits at the right
   edge of the daily pill, which is the middle of the row, so daily
   catches it on its right wall and weekly catches it on its left. Light
   entering both pills from the same point is what makes it read as
   daylight rather than two separate glows.

   Lit also drives the laser itself past its resting setting, so the bar
   between the pills burns while the day's gm stands. */
.rhp .sun{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .45s ease;filter:blur(18px);
}
.rhythm .rhp:first-child .sun{
  background:radial-gradient(66% 140% at 96% 24%,rgba(224,190,106,.30),transparent 72%);
}
.rhythm .rhp:last-child .sun{
  background:radial-gradient(66% 140% at 4% 24%,rgba(224,190,106,.30),transparent 72%);
}
/* a step above the resting setting, not a flood: the row should read as
   warmer, and the eye should still go to the sun rather than the wash */
.rhythm.lit{--beam2-haze-o:.66;--beam2-bloom:.56}
.rhythm.lit .rhp .sun{opacity:1}
/* the side rim nearest the sun takes a little more catch */
.rhythm.lit .rhp:first-child::after{
  background:
    linear-gradient(90deg,rgba(224,190,106,.36) 0%,transparent 4%,
                    transparent 92%,rgba(224,190,106,.56) 100%),
    var(--rim-grad-1);
}
.rhythm.lit .rhp:last-child::after{
  background:
    linear-gradient(90deg,rgba(224,190,106,.56) 0%,transparent 8%,
                    transparent 96%,rgba(224,190,106,.36) 100%),
    var(--rim-grad-1);
}

@media (prefers-reduced-motion:reduce){
  .gm,.gm .gm-ray,.gm .gm-disc,.rhp .sun,.rhp .bloom{transition:none}
}

/* stacked, the laser means nothing, same rule as the 1px beam below 860 */
@media (max-width:760px){
  .rhythm{grid-template-columns:1fr}
  .rhythm::before,.rhythm::after{display:none}
}
.rh-head{display:flex;justify-content:space-between;align-items:baseline;min-height:16px}
.rh-div{border-top:1px solid rgba(255,255,255,.07);margin-top:var(--s2);padding-top:var(--s3)}
.rh-t{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--t1) 55%,var(--t2));
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.rh-n{font-size:10px;color:var(--t3)}
/* ---- one row height, one circle size (27 Aug 2026) -----------------
   The rows used to size themselves to whatever control they held, so
   daily came out 38px and 36px against weekly's 31px and 31px, and the
   labels missed each other across the two pills by up to 10px. Every
   row is now the same box, tall enough for the largest control, with
   its contents centred. Add a taller control and raise --rh-row rather
   than letting one row grow.

   Circles were five different sizes: 8px support dots, 13px weekly
   dots, 14px check. They are one size now, --rh-o, so a check and a dot
   read as the same object. */
:root{--rh-row:36px;--rh-o:13px;--rh-gap:7px}
.rh-row{display:flex;justify-content:space-between;align-items:center;
  min-height:var(--rh-row);padding:0}
.rh-l{font-size:12.5px;color:var(--t2)}
/* gap 7, not 5 (27 Aug 2026). Two ADJACENT FILLED dots have no rim, so
   at 5px they ran together into one capsule and 2/5 stopped being
   countable at a glance; the hollow ones were always fine because their
   1px rim did the separating. 7px is a little over half the 13px dot,
   which reads as five objects while keeping the group compact.

   A dark separator ring on the filled dots tested better on flat black
   and worse in place: the pill carries a gold wash, and once gm lights
   it the ring reads as a dark halo around each bead rather than as a
   gap. Outer shadows are off the table here anyway. */
.rh-right{display:flex;align-items:center;gap:var(--rh-gap)}
/* The daily dots live inside a wrapper span that paintRhythm() refills,
   and that span was NOT a flex container, so those five dots had a gap
   of exactly ZERO while the weekly dots, which are direct children of
   .rh-right, got the row gap. That asymmetry is what made the daily
   pair merge. Same container, same gap, one token. */
.rh-dots{display:flex;align-items:center;gap:var(--rh-gap)}
.rh-dot{
  width:var(--rh-o);height:var(--rh-o);border-radius:50%;display:inline-block;flex:none;
  box-shadow:inset 0 0 0 1px rgba(224,190,106,.4);
}
/* .big is kept so existing markup stays valid; it no longer resizes */
.rh-dot.big{width:var(--rh-o);height:var(--rh-o)}
.rh-dot.on{background:rgba(224,190,106,.9);box-shadow:none}
.rh-c{
  font-size:11px;color:var(--t3);margin-left:6px;
  font-variant-numeric:tabular-nums;
  min-width:24px;text-align:right;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.rh-c.done{color:var(--gold)}
.rh-check{
  width:var(--rh-o);height:var(--rh-o);border-radius:50%;flex:none;
  background:rgba(224,190,106,.9);
  display:flex;align-items:center;justify-content:center;color:#0A0B0D;
}
.rh-check svg{width:9px;height:9px;stroke-width:3.4}

/* ---- ecosystem provenance + closing deadlines ---------------------- */
.opp-meta .opp-src{color:var(--blue-text);font-weight:400}
.opp-meta .opp-soon{color:#C5A469}

/* ============================================================
   20 · CONTENT PIPELINE (v5, 26 Aug 2026)
   ------------------------------------------------------------
   My Submissions (candidate) and Content Review (leader). Both
   reuse the panel glass and the hue map; only the rows are new.
   Status colours are the status palette, not decoration: teal
   published, amber in review, muted red not published. Amber
   here is legitimate, "in review" is pending by definition.
   ============================================================ */

/* teal for the candidate's own submissions, violet for the review
   queue: the team put that queue there, same as opportunities */
.panel.h-subs{--hue:var(--dot-highlights);--wash:var(--wash-highlights);
  --hue-glow:rgba(111,179,151,.5);--hue-far:rgba(111,179,151,.22)}
.panel.h-review{--hue:var(--violet);--wash:rgba(129,111,168,1);
  --hue-glow:rgba(129,111,168,.5);--hue-far:rgba(129,111,168,.22)}

/* ---- My Submissions ---- */
.sb-add{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:4px 12px;border-radius:var(--r-pill);cursor:pointer;
  text-decoration:none;color:var(--t2);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.sb-add:hover{color:var(--t1);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(111,179,151,.35)}
.sb-add[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.sb-strip{display:flex;gap:var(--s5);margin:var(--s2) 0 var(--s3)}
.sb-stat{display:flex;flex-direction:column;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t3)}
.sb-stat b{font-size:17px;font-weight:500;color:var(--t1);letter-spacing:-.4px;line-height:1.2}
.sb-stat.ok b{color:var(--teal-text)}
.sb-stat.wait b{color:#C5A469}
.sb-stat.no b{color:var(--red)}
.sb-row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.038)}
.sb-row:last-child{border-bottom:0;padding-bottom:0}
.sb-top{display:flex;align-items:baseline;gap:var(--s2)}
.sb-t{flex:1;min-width:0;font-size:12.5px;color:var(--t1);font-weight:500}
.sb-meta{font-size:10px;letter-spacing:.06em;color:var(--t3);margin-top:2px;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
.sb-why{font-size:11.5px;color:var(--red);line-height:1.5;margin-top:4px}
.sb-chip{
  flex:none;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:var(--r-pill);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.sb-chip.ok{color:var(--teal-text);background:rgba(111,179,151,.10)}
.sb-chip.wait{color:#C5A469;background:rgba(197,164,105,.10)}
.sb-chip.no{color:var(--red);background:rgba(199,123,123,.10)}

/* ---- Content Review ---- */
.lr-row{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.038);transition:opacity var(--t-fast)}
.lr-row:last-child{border-bottom:0}
.lr-row.busy{opacity:.5;pointer-events:none}
.lr-top{display:flex;align-items:center;gap:var(--s3)}
.lr-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.lr-mid .who{font-size:12.5px;font-weight:500;color:var(--t1)}
.lr-mid .sub{font-size:11px;color:var(--t3)}
.lr-right{display:flex;align-items:center;gap:var(--s2);flex:none}
.lr-right .w{font-size:11px;color:var(--t3)}
.lr-desc{font-size:12.5px;color:var(--t2);line-height:1.55;margin:6px 0 0}
.lr-badges{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:6px}
.lr-flag{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:var(--r-pill);
  color:#C5A469;background:rgba(197,164,105,.10);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.lr-need{font-size:10px;letter-spacing:.06em;color:var(--t3);align-self:center;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
.lr-acts{display:flex;gap:8px;margin-top:8px;margin-left:-12px}
.lr-ok,.lr-no{
  font-family:inherit;font-size:11px;padding:4px 12px;border-radius:var(--r-pill);
  border:0;background:none;cursor:pointer;color:var(--t3);outline:none;
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.lr-ok:hover,.lr-ok:focus-visible{color:var(--teal-text);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(111,179,151,.35)}
.lr-no:hover,.lr-no:focus-visible{color:var(--red);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(199,123,123,.38)}
.lr-why{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.lr-reason,.lr-note-in{
  font-family:inherit;font-size:11.5px;color:var(--t1);
  background:rgba(255,255,255,.04);border:0;border-radius:9px;padding:6px 9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.lr-note-in{flex:1;min-width:160px}
.lr-reason:focus,.lr-note-in:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(129,111,168,.45)}
.lr-btns{display:flex;gap:6px;margin-left:auto}
.lr-err{font-size:11.5px;color:var(--red)}
.lr-note{
  border-radius:var(--r-card);padding:var(--s3) var(--s4);margin-top:var(--s2);
  background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.lr-note b{font-size:12.5px;color:var(--t1);font-weight:500}
.lr-note p{font-size:11.5px;color:var(--t2);line-height:1.55;margin:4px 0 0}

/* the second approve path. Same quiet pill as Approve, but it lights in
   the feed's magenta because global IS the feed's reach, not a stronger
   version of publishing. */
.lr-glob:hover,.lr-glob:focus-visible{
  color:var(--magenta-text);
  box-shadow:inset 0 0 0 1px rgba(224,79,180,.35);
}
/* why a feed row has no Like or Comment. Quiet: it is an explanation,
   not a warning. */
.fd-none{font-size:11px;color:var(--t3);margin-top:6px}

/* ============================================================
   21 · MEMBER CARD, HORIZONTAL (27 Aug 2026)
   ------------------------------------------------------------
   Wallet proportions, 340:214. Replaces the vertical card: the
   old .mc-* rules in section 14 no longer match any markup and
   are dead, kept only until someone sweeps them.

   Front is identity, back is credentials. No code on the front,
   because candidates screenshot the front and the code carries
   their country. Photo full bleed with a scrim top and bottom so
   type survives any avatar; no photo and the mark takes over.
   ============================================================ */
.mcard-wrap{perspective:1100px;position:relative;width:100%}
.mcard{
  position:relative;width:100%;aspect-ratio:340/214;
  border-radius:14px;overflow:hidden;cursor:pointer;
  transform-style:preserve-3d;will-change:transform;
  background:linear-gradient(160deg,#141a22 0%,#0b0d11 45%,#08090c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.06),
             0 14px 34px rgba(0,0,0,.5);
}
/* tier still shows as material: a hairline of the tier hue on the rim */
.mcard.tier-candidate{box-shadow:inset 0 0 0 1px rgba(174,189,199,.20),inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}
.mcard.tier-ambassador{box-shadow:inset 0 0 0 1px rgba(99,185,206,.26),inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}
.mcard.tier-final{box-shadow:inset 0 0 0 1px rgba(224,79,180,.26),inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}

.mcx-photo{position:absolute;inset:0}
.mcx-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* darkens the bottom third for the name and the top strip for the tier;
   the middle, where a face usually sits, is left alone */
.mcx-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(5,7,10,.96) 0%,rgba(5,7,10,.82) 26%,rgba(5,7,10,.18) 54%,
    rgba(5,7,10,.05) 72%,rgba(5,7,10,.55) 100%);
}
/* no photo: the mark fills the space so the card is never an empty box */
.mcx-ghost{position:absolute;left:-8%;bottom:-24%;width:46%;height:auto;opacity:.055;pointer-events:none}
.mcard.no-pfp{background:linear-gradient(160deg,#161d26 0%,#0c0f14 45%,#08090c 100%)}

.mcx-top{position:absolute;left:6.5%;right:6.5%;top:9%;display:flex;justify-content:space-between;align-items:baseline;z-index:3}
.mcx-bot{position:absolute;left:6.5%;right:6.5%;bottom:8%;z-index:3}
.mcx-tier{
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
.tier-candidate .mcx-tier{color:#C6D2DA}
.tier-ambassador .mcx-tier{color:var(--cyan-text)}
.tier-final .mcx-tier{color:var(--magenta-text)}
.mcx-meta{
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9AA5AF;
}
.mcx-name{font-size:25px;font-weight:500;color:var(--t1);letter-spacing:-.5px;line-height:1}
.mcx-bot .mcx-meta{margin-top:10px}

/* back: mark, code, flag on one line. Nothing behind them. */
.mcx-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px}
.mcx-mark{width:26px;height:26px;opacity:.9;flex:none}
.mcx-div{width:1px;height:22px;background:rgba(255,255,255,.14);flex:none}
.mcx-code{
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;letter-spacing:.18em;color:var(--cyan-text);
}
.mcx-flag{font-size:19px;line-height:1}
.mcx-flag .flag{margin:0}
/* ---- foil grain (chosen 27 Aug 2026 over five others) --------------
   Real trading-card foil: fine diagonal lines at 5.5% white, masked to
   a pool that follows the pointer, so the grain only catches where the
   person is looking. The wide diagonal underneath is the old static
   sheen, kept as the resting highlight.

   The pool is light, not motion, so it is on-system: nothing moves, the
   card simply catches differently. --mx / --my are written by
   bindMemberCard() on pointermove and rest at the middle-upper default
   below, which is also where the card sits under
   prefers-reduced-motion and on touch. */
.mcx-sheen{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(102deg,rgba(255,255,255,.055) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,transparent 26%,rgba(255,255,255,.07) 46%,transparent 64%);
  -webkit-mask:radial-gradient(72% 118% at var(--mx,50%) var(--my,42%),#000 8%,transparent 72%);
  mask:radial-gradient(72% 118% at var(--mx,50%) var(--my,42%),#000 8%,transparent 72%);
}

@media (max-width:420px){
  .mcx-name{font-size:21px}
}

/* ---- loading skeleton (27 Aug 2026) -------------------------------
   The silhouette of the Studio, so nothing shifts when the record
   lands, with the site's beam crossing the top. Two lights, no moving
   objects. Frozen under prefers-reduced-motion. */
@keyframes sk-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes sk-sweep{0%{transform:translateX(-55%)}100%{transform:translateX(155%)}}
.sk-wrap{position:relative;overflow:hidden;border-radius:var(--r-panel);padding-top:2px}
.sk-beam{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;pointer-events:none}
.sk-beam>i{display:block;width:38%;height:100%;animation:sk-sweep 1.6s ease-in-out infinite;
  background:linear-gradient(90deg,transparent,var(--cyan) 40%,#8f7fe2 70%,transparent)}
.sk{border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.028) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.028) 75%);
  background-size:200% 100%;animation:sk-shimmer 1.8s linear infinite}
.sk-hero{display:flex;gap:var(--s4);margin-bottom:var(--gap-card)}
.sk-col{flex:none;width:min(236px,100%);display:flex;flex-direction:column;gap:var(--s4)}
.sk-card{width:100%;aspect-ratio:340/214;border-radius:14px}
.sk-circles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.sk-circles .sk{height:44px;border-radius:50%}
.sk-side{flex:1;min-width:280px;display:flex;flex-direction:column;gap:var(--s2)}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.sk-pair{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--gap-card)}
@media (prefers-reduced-motion:reduce){
  .sk,.sk-beam>i{animation:none}
}

/* ---- native forms, v6 (28 Aug 2026) --------------------------------
   The four operational forms open as an OVERLAY on the Studio, not as a
   pane. A report is five questions and does not need a whole page; the
   quick-action circles sit under the member card, so a pane would mean
   click a circle, lose the Studio, find the way back. The country popup
   and the feed comment popup already work this way.

   HUE: a form wears the colour of the surface its output lands on, using
   the panel hue map that already exists. A report becomes a recent
   highlight, so sage. Content reaches the community feed, so magenta. An
   event goes on the regional calendar, so violet. Gas asks the team for
   something and lands nowhere public, so it keeps the system cyan. That
   is a signal, not decoration: the colour tells you where the thing you
   are writing will end up. Per theme rules v2 the hue is a RIM and an
   interior wash with a visible source, never a painted fill.

   Dismiss: the close button, Escape, or the scrim. The scrim does NOT
   discard a form that has been typed in, because someone pasting twenty
   addresses and clicking slightly wide would lose all of it. Untouched
   closes silently, touched asks first. fmClose() owns that. */
.fm-scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,4,5,.62);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t-hover,.2s);
}
.fm-scrim.in{opacity:1}

.fm-sheet{
  --fm-hue:99,185,206;                 /* cyan, the system default */
  position:fixed;z-index:61;left:50%;top:50%;
  transform:translate(-50%,-48%);
  width:min(640px,calc(100vw - 32px));
  max-height:min(86vh,900px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:16px;padding:24px;
  background:var(--glass-1,#08090B);
  /* the hue arrives as a rim and one wash from above, per theme rules v2 */
  background-image:radial-gradient(120% 68% at 50% -12%,
    rgba(var(--fm-hue),.055), transparent 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),
             inset 0 1px 0 rgba(var(--fm-hue),.22),
             0 32px 80px rgba(0,0,0,.55);
  opacity:0;transition:opacity var(--t-hover,.2s),transform var(--t-hover,.2s);
  position:fixed;overflow:hidden auto;
}
.fm-sheet.in{opacity:1;transform:translate(-50%,-50%)}
.fm-sheet.h-report  {--fm-hue:111,179,151}   /* becomes a recent highlight */
.fm-sheet.h-content {--fm-hue:224,79,180}    /* reaches the community feed */
.fm-sheet.h-event   {--fm-hue:129,111,168}   /* goes on the calendar */
@media (prefers-reduced-motion:reduce){
  .fm-scrim,.fm-sheet{transition:none}
  .fm-sheet{transform:translate(-50%,-50%)}
}
@media (max-width:640px){
  .fm-sheet{width:100vw;max-height:100vh;height:100vh;top:0;left:0;
    transform:none;border-radius:0;padding:16px}
  .fm-sheet.in{transform:none}
}

/* the circle's own mark, cropped by the corner, in the form's hue */
.fm-mark{position:absolute;top:-16px;right:-16px;width:132px;height:132px;
  color:rgb(var(--fm-hue));opacity:.07;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 0%,#000 40%,transparent 78%);
  mask-image:radial-gradient(120% 120% at 100% 0%,#000 40%,transparent 78%)}
.fm-mark svg{width:100%;height:100%;stroke-width:1}
.fm-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;position:relative}
.fm-title{font-size:17px;font-weight:500;color:var(--t1)}
.fm-as{font-size:12px;color:var(--t3)}
.fm-x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--t3);
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.fm-x:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.fm-sub{font-size:12.5px;color:var(--t2);margin:0 0 24px;line-height:1.5}

.fm-f{margin-bottom:16px}
.fm-f>label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:8px}
.fm-hint{display:block;font-size:11.5px;color:var(--t3);margin-top:4px;line-height:1.5}
.fm-in{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  border:0;border-radius:8px;padding:8px 12px;
  color:var(--t1);font-family:inherit;font-size:13px;line-height:20px;
  outline:none;transition:box-shadow var(--t-hover,.2s),background var(--t-hover,.2s);
}
.fm-in::placeholder{color:var(--t3)}
/* Unlit until focus, then the form's own hue, INSIDE the glass.
   The global :focus-visible rule paints a 2px cyan outline 2px outside
   the box, and a text input gets :focus-visible on a plain mouse click
   per spec, so every field in every form was wearing two rings: this one
   and a cyan halo around it. Suppressing the outline here is also the
   more correct reading of theme rules v2, which put light inside the
   glass and forbid outer shadows. The inset ring goes to 2px so it is
   still an unmistakable focus state for anyone on a keyboard. */
.fm-in:focus{box-shadow:inset 0 0 0 2px rgba(var(--fm-hue),.50);
  background:rgba(255,255,255,.055)}
.fm-in:focus,.fm-in:focus-visible,
.fm-sel:focus,.fm-sel:focus-visible,
.fm-adr:focus,.fm-adr:focus-visible,
.fm-btn:focus-visible,.fm-go:focus-visible,
.fm-rm:focus-visible,.fm-x:focus-visible,
.fm-cancel:focus-visible,.fm-esc button:focus-visible{outline:none}
/* the controls that have no inset ring of their own still need to show
   focus, so they take one rather than losing the state entirely */
.fm-btn:focus-visible,.fm-go:focus-visible{box-shadow:inset 0 0 0 2px rgba(var(--fm-hue),.55)}
.fm-rm:focus-visible,.fm-x:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.fm-cancel:focus-visible,.fm-esc button:focus-visible{color:var(--t1);text-decoration:underline}
.fm-in.bad{box-shadow:inset 0 0 0 1px rgba(199,123,123,.42);background:rgba(199,123,123,.045)}
textarea.fm-in{resize:vertical;min-height:64px;line-height:1.55}
textarea.fm-mono,.fm-mono{font-family:var(--mono,ui-monospace),monospace;font-size:12px}
select.fm-in{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),
    linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px,calc(100% - 12px) 16px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.fm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* The native time picker is browser chrome and cannot be themed: it lands
   as an OS panel in system grey and system blue, against everything else
   here. Two selects can be themed, and a time is simple enough that the
   custom control costs nothing. The DATE input stays native on purpose:
   its picker is genuinely good on a phone and a hand-built calendar is a
   lot of surface for no gain. */
.fm-time{display:flex;align-items:center;gap:8px}
.fm-time .fm-in{flex:1;min-width:0;text-align:center;padding-right:24px}
.fm-colon{color:var(--t3);font-family:var(--mono,ui-monospace),monospace;flex:none}
/* required marker: mark the few rather than label the many */
.fm-req{color:rgba(var(--fm-hue),.85);font-size:12px;margin-left:1px}
.fm-tz{color:var(--t3);font-size:11.5px;margin-left:8px}
@media (max-width:560px){.fm-row2{grid-template-columns:1fr}}

/* what a funded report inherits from its gas request */
.fm-inh{padding:12px 16px;border-radius:12px;margin-bottom:16px;
  background:rgba(var(--fm-hue),.05);box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.24)}
.fm-inh h5{margin:0 0 4px;font-size:13px;font-weight:500;color:var(--t1)}
.fm-inh .sub{font-size:11.5px;color:var(--t3);line-height:1.5}
.fm-esc{margin-top:8px;font-size:11.5px}
.fm-esc button{background:none;border:0;padding:0;color:var(--t3);cursor:pointer;
  font-family:inherit;font-size:11.5px;text-decoration:underline;text-underline-offset:2px}
.fm-esc button:hover{color:var(--t2)}
.fm-pick{display:flex;flex-direction:column;gap:8px}
.fm-pick label{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:8px;
  cursor:pointer;background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow var(--t-hover,.2s)}
.fm-pick label:hover{box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.30)}
.fm-pick input{margin:3px 0 0;accent-color:rgb(var(--fm-hue));flex:none;width:14px;height:14px}
.fm-pick .nm{font-size:12.5px;color:var(--t1);display:block}
.fm-pick .mt{font-size:11.5px;color:var(--t3);display:block;margin-top:4px}

.fm-nudge{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:12.5px;
  line-height:1.55;color:var(--t2);background:rgba(111,179,151,.045);
  box-shadow:inset 0 0 0 1px rgba(111,179,151,.24)}
.fm-nudge b{color:var(--teal-text,#6FB397);font-weight:500}
.fm-warn{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:12.5px;
  line-height:1.55;color:var(--t2);background:rgba(197,164,105,.045);
  box-shadow:inset 0 0 0 1px rgba(197,164,105,.26)}
.fm-warn b{color:var(--amber-text,#C5A469);font-weight:500}
.fm-cap{margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--amber-text,#C5A469)}
.fm-amt{font-size:12.5px;color:var(--t2);margin-top:8px}
.fm-amt b{color:var(--t1);font-weight:500;font-variant-numeric:tabular-nums}

/* the person table */
.fm-btn{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  border:0;border-radius:var(--r-pill,999px);padding:8px 12px;cursor:pointer;
  color:var(--t2);font-family:inherit;font-size:12px;
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.fm-btn:hover{color:var(--t1);background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.30)}
.fm-btnrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.fm-tb{margin-top:12px;border-radius:12px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fm-th,.fm-tr{display:grid;grid-template-columns:112px 1fr 24px;align-items:center;gap:8px}
.fm-th{padding:8px 12px;background:rgba(255,255,255,.028);
  font:500 10px/1 var(--mono,ui-monospace),monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3)}
.fm-tr{padding:4px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);position:relative}
.fm-tr.same{box-shadow:none}
.fm-tr.same .fm-sel{visibility:hidden}
/* a shared spine says "these rows are one person" without repeating the label */
.fm-tr.grp::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:2px;
  background:rgba(var(--fm-hue),.35)}
.fm-tr.grp-first::before{top:50%}
.fm-tr.grp-last::before{bottom:50%}
.fm-empty{padding:16px 12px;font-size:11.5px;color:var(--t3);line-height:1.5}
.fm-sel{width:100%;background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border:0;border-radius:8px;
  padding:4px 8px;color:var(--t2);font-family:inherit;font-size:11.5px;
  outline:none;appearance:none;cursor:pointer;
  transition:color var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.fm-sel:hover{color:var(--t1);box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.30)}
.fm-sel:focus{box-shadow:inset 0 0 0 2px rgba(var(--fm-hue),.50);color:var(--t1)}
.fm-adr{width:100%;box-sizing:border-box;background:none;border:0;outline:none;
  padding:4px 8px;border-radius:8px;color:var(--t2);
  font-family:var(--mono,ui-monospace),monospace;font-size:11.5px;
  transition:box-shadow var(--t-hover,.2s),color var(--t-hover,.2s)}
.fm-adr:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fm-adr:focus{box-shadow:inset 0 0 0 2px rgba(var(--fm-hue),.50);color:var(--t1)}
.fm-adr.bad,.fm-adr.own{color:#DBA0A0}
.fm-adr.warn{color:var(--amber-text,#C5A469)}
.fm-why{display:block;font-size:11px;margin:0 0 4px 8px;line-height:1.45}
.fm-why.bad{color:#DBA0A0}
.fm-why.warn{color:var(--amber-text,#C5A469)}
.fm-rm{width:24px;height:24px;border-radius:8px;border:0;background:none;cursor:pointer;
  color:var(--t3);display:grid;place-items:center;
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.fm-rm:hover{color:#C77B7B;background:rgba(199,123,123,.10)}
.fm-count{margin-top:12px;display:flex;align-items:baseline;gap:8px;font-size:12.5px;
  color:var(--t2);flex-wrap:wrap}
.fm-count b{color:var(--t1);font-weight:500;font-variant-numeric:tabular-nums;font-size:14px}
.fm-count .note{color:var(--t3);font-size:11.5px}
.fm-count .warn{color:var(--amber-text,#C5A469);font-size:11.5px}
.fm-count .bad{color:#C77B7B;font-size:11.5px}
.fm-log{margin-top:8px;font-size:11.5px;line-height:1.6}
.fm-log div{color:var(--t3)}
.fm-log .warn{color:var(--amber-text,#C5A469)}
.fm-log .bad{color:#DBA0A0}

.fm-help{display:flex;flex-direction:column;gap:8px}
.fm-help-r{display:flex;gap:8px;align-items:center}
.fm-help-r .fm-in{flex:1}

.fm-foot{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.fm-foot+.fm-foot{margin-top:16px;padding-top:0;box-shadow:none}
.fm-consent{display:flex;gap:12px;align-items:flex-start;font-size:12px;color:var(--t2);
  line-height:1.5;cursor:pointer}
/* A consent row inside .fm-f was losing its layout: `.fm-f>label` is
   specificity 0,1,1 and `.fm-consent` is 0,1,0, so display:block won and
   the checkbox sat hard against the text with no gap. Measured at
   -2.9px and 0px before this line existed. */
.fm-f>label.fm-consent{display:flex;margin-bottom:0}
/* 12px and a 14px box. At 9px against a browser checkbox's own built-in
   margin the tick sat almost against the first letter. */
/* A 14px box on an 18px line box needs (18-14)/2 = 2px to sit centred on
   the first line. Measured, not guessed: at 1px it read 1px high. */
.fm-consent input{margin:2px 0 0;accent-color:rgb(var(--fm-hue));flex:none;
  width:14px;height:14px}
.fm-go{background:rgba(var(--fm-hue),.12);box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.34);
  border:0;border-radius:var(--r-pill,999px);padding:8px 24px;cursor:pointer;
  color:rgb(var(--fm-hue));font-family:inherit;font-size:13px;
  transition:background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.fm-go:hover{background:rgba(var(--fm-hue),.18);box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.50)}
.fm-go[disabled]{opacity:.4;cursor:not-allowed}
.fm-cancel{background:none;border:0;color:var(--t3);font-family:inherit;font-size:12.5px;
  cursor:pointer;transition:color var(--t-hover,.2s)}
.fm-cancel:hover{color:var(--t2)}
.fm-err{margin-top:12px;padding:12px 16px;border-radius:12px;font-size:12.5px;line-height:1.55;
  color:#DBA0A0;background:rgba(199,123,123,.05);box-shadow:inset 0 0 0 1px rgba(199,123,123,.26)}
.fm-ok{text-align:center;padding:32px 12px}
.fm-ok .tick{width:40px;height:40px;border-radius:50%;margin:0 auto 16px;display:grid;
  place-items:center;background:rgba(var(--fm-hue),.10);
  box-shadow:inset 0 0 0 1px rgba(var(--fm-hue),.34);color:rgb(var(--fm-hue))}
.fm-ok h4{margin:0 0 4px;font-size:15px;font-weight:500;color:var(--t1)}
.fm-ok p{margin:0;font-size:12.5px;color:var(--t2);line-height:1.55}

/* ---- leader queue: selection and bulk (28 Aug 2026) ----------------
   Approving one row at a time is why a queue of 83 sat unworked. The
   whole visible queue can be ticked and sent in one request, and the
   count is always of what is SELECTED rather than what exists, so
   nothing is approved that a reviewer did not choose. */
.lr-bulk{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:8px;border-radius:12px;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.lr-pick{display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:12.5px;color:var(--t2)}
.lr-pick input{margin:0;accent-color:var(--cyan-text,#63B9CE);flex:none;width:14px;height:14px}
.lr-bulk-acts{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.lr-row.picked{box-shadow:inset 0 0 0 1px rgba(99,185,206,.30)}
.lr-row .lr-top>.lr-pick{flex:none;margin-right:4px}
/* promote a row that already published, which is the only way the 92 that
   went live on arrival can ever reach the global feed */
.lr-tiny{background:rgba(129,111,168,.10);box-shadow:inset 0 0 0 1px rgba(129,111,168,.28);
  border:0;border-radius:var(--r-pill,999px);padding:4px 12px;cursor:pointer;
  color:#A794C9;font-family:inherit;font-size:11.5px;margin-left:auto;
  transition:background var(--t-hover,.2s)}
.lr-tiny:hover{background:rgba(129,111,168,.18)}

/* ==== 24 · Gas Station (team, 28 Aug 2026) =========================
   Hues are the existing pending/done language, not a new one. Amber is
   the reserved pending hue and money owed is genuinely pending; sage is
   what the rest of the site already uses for a thing that landed. Gold
   stays out of it: gold means the programme inviting someone to act,
   and a payout is the programme settling up. */
.panel.h-gas{--hue:var(--amber);--wash:rgba(197,164,105,1);
  --hue-glow:rgba(197,164,105,.5);--hue-far:rgba(197,164,105,.22)}
.panel.h-sent{--hue:var(--dot-highlights);--wash:var(--wash-highlights);
  --hue-glow:rgba(111,179,151,.5);--hue-far:rgba(111,179,151,.22)}

/* One grid for the head and every row, so the columns cannot drift.
   The tx field spans the full width on its own line: it only appears
   on a selected row, and a hash is 66 characters. */
.pay-tb{margin-top:var(--s3);display:flex;flex-direction:column}
.pay-head,.pay-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 74px 84px 150px 176px;
  align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s2);
}
.pay-head{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  padding-bottom:var(--s2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.pay-row{box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
  transition:background var(--t-hover,.2s)}
.pay-row:hover{background:rgba(255,255,255,.02)}
/* selected is a lit row, not a moved one */
.pay-row.picked{background:rgba(197,164,105,.05);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04),inset 2px 0 0 var(--amber)}
.pay-row.sent{opacity:.72}

.pay-pick{display:flex;align-items:center;justify-content:center;min-height:18px}
.pay-pick input{width:14px;height:14px;margin:0;accent-color:var(--amber);cursor:pointer}

.pay-who{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:13.5px;color:var(--t1)}
.pay-who small{font-size:11px;color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pay-usd,.pay-eth{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:12.5px;text-align:right}
.pay-usd{color:var(--t1)}
.pay-eth{color:var(--t2)}
.pay-usd small{display:block;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber-text)}

.pay-adr{display:flex;align-items:center;gap:6px;min-width:0;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--t3)}
.pay-cp{background:transparent;border:0;padding:2px;cursor:pointer;color:var(--t3);
  display:flex;transition:color var(--t-fast,.12s)}
.pay-cp:hover{color:var(--t1)}
.pay-cp.done{color:var(--dot-highlights)}

.pay-state{display:flex;flex-wrap:wrap;gap:4px}
.pay-chip{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:2px 7px;border-radius:var(--r-pill,999px);line-height:1.5}
.pay-chip.go{color:var(--t2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.pay-chip.wait{color:var(--amber-text);background:rgba(197,164,105,.10)}
.pay-chip.ok{color:#8FC7AE;background:rgba(111,179,151,.10)}
.pay-chip.quiet{color:var(--t3);opacity:.8}

.pay-tx{grid-column:1/-1;margin-top:var(--s2);margin-bottom:2px}
.pay-txin,.pay-rate input{
  width:100%;background:rgba(255,255,255,.02);color:var(--t1);
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  border-radius:var(--r-sm,8px);padding:7px 10px;font-family:inherit;font-size:12.5px}
.pay-txin{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
.pay-txin:focus,.pay-rate input:focus{outline:0;
  box-shadow:inset 0 0 0 2px rgba(197,164,105,.45)}

.pay-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s3)}
.pay-rate{display:flex;align-items:center;gap:var(--s2)}
.pay-rate span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.pay-rate input{width:110px;font-variant-numeric:tabular-nums}
.pay-hint{font-size:11.5px;color:var(--t3);flex:1 1 220px;min-width:0}

.pay-act{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pay-tot{font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums}
.pay-tot b{color:var(--t1);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
/* A wash and a lit rim, not a painted pill. The first version filled it
   solid with --amber, which broke two rules at once: colour behaves as
   light here and interiors stay near-black, and amber is reserved for
   beta, warning and pending rather than being a button colour. Sending
   a payment is a primary action, so it wears the same treatment as
   .btn-primary, in the panel's own amber. */
.pay-send{margin-left:auto;font-family:inherit;font-size:12.5px;cursor:pointer;
  padding:8px 18px;border:0;border-radius:var(--r-pill,999px);
  color:var(--amber-text);background:rgba(197,164,105,.10);
  box-shadow:inset 0 0 0 1px rgba(197,164,105,.24),var(--inner-hi);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.pay-send:hover{color:#E3CB9C;background:rgba(197,164,105,.16);
  box-shadow:inset 0 0 0 1px rgba(197,164,105,.34),var(--inner-hi)}
.pay-send:disabled{color:var(--t3);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:default}
.pay-need{font-size:11.5px;color:var(--amber-text);flex-basis:100%;text-align:right}

.pay-block{margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-sm,8px);
  background:rgba(199,123,123,.07);box-shadow:inset 0 0 0 1px rgba(199,123,123,.28);
  font-size:12.5px;color:var(--t2);line-height:1.5}
.pay-block b{color:#D89C9C}

/* Below 900px the wallet and state columns have nowhere to go, so the
   row becomes two lines rather than a horizontal scroll of six. */
@media (max-width:900px){
  .pay-head{display:none}
  .pay-row{grid-template-columns:26px minmax(0,1fr) 74px 84px;
    row-gap:var(--s2)}
  .pay-adr,.pay-state{grid-column:2/-1}
}
/* On a phone the four-column version left the name 90px, so a candidate
   read as "Nadia K." over two lines and the activation title truncated to
   "Kara...". The title is how you know WHICH request you are paying, so
   it gets the full width and the money stacks beside it. */
@media (max-width:640px){
  .pay-row{
    grid-template-columns:26px minmax(0,1fr) auto;
    grid-template-areas:"pick who usd" "pick who eth" ". adr adr" ". st st" ". tx tx";
    row-gap:5px}
  .pay-pick{grid-area:pick;align-self:start;margin-top:2px}
  .pay-who{grid-area:who;align-self:start}
  .pay-who small{white-space:normal}
  .pay-usd{grid-area:usd;align-self:end}
  .pay-eth{grid-area:eth;align-self:start}
  .pay-adr{grid-area:adr}
  .pay-state{grid-area:st}
  .pay-tx{grid-area:tx;margin-top:0}
  .pay-send{margin-left:0;width:100%}
  .pay-need{text-align:left}
  .pay-rate input{width:100%}
  .pay-rate{flex:1 1 100%}
}
.pay-chip.tx{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  transition:background var(--t-hover,.2s),color var(--t-hover,.2s)}
.pay-chip.tx:hover{background:rgba(111,179,151,.20);color:#A8D8C1}
.pay-chip.tx svg{opacity:.6}
.pay-plan{grid-column:2/-1;font-size:11.5px;line-height:1.5;color:var(--t2);
  padding:6px 10px;margin-top:2px;border-radius:var(--r-sm,8px);
  background:rgba(255,255,255,.02);box-shadow:inset 2px 0 0 rgba(197,164,105,.35)}

/* The data strip: quiet by default, muted red when backups are not
   actually running. It is a statement of fact plus the two levers, not
   a panel, so it sits outside the glass. */
.pay-data{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-sm,8px);
  background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pay-data.bad{background:rgba(199,123,123,.06);box-shadow:inset 0 0 0 1px rgba(199,123,123,.26)}
.pay-data-l{display:flex;flex-direction:column;gap:3px;flex:1 1 320px;min-width:0}
.pay-data-l b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace}
.pay-data-l span{font-size:12px;color:var(--t3);line-height:1.5}
.pay-data.bad .pay-data-l span{color:#D89C9C}
.pay-data-r{display:flex;gap:var(--s2);flex-wrap:wrap}
.pay-min{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:6px 14px;border:0;border-radius:var(--r-pill,999px);color:var(--t2);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.pay-min:hover{color:var(--t1);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pay-min:disabled{opacity:.4;cursor:default}
@media (max-width:640px){.pay-data-r{width:100%}.pay-min{flex:1 1 auto}}

/* ==== 25 · Content review, scoped roles (28 Aug 2026) ===============
   The page a country or region leader works in. Sections are by what
   you can DO, not by geography, because the verb is the thing that
   differs between two people looking at the same queue. The server puts
   that verb on every row so the page never decides it for itself. */

/* the scope banner: what am I responsible for */
.ct-scope{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-radius:var(--r-sm,8px);margin-bottom:var(--s4);
  background:rgba(99,185,206,.05);box-shadow:inset 0 0 0 1px rgba(99,185,206,.20)}
.ct-scope b{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-text)}
.ct-scope span{font-size:12.5px;color:var(--t2)}

/* section headings inside the queue */
.ct-sec{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s5) 0 var(--s3);flex-wrap:wrap}
.ct-sec h3{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin:0;font-weight:400}
.ct-sec p{font-size:12px;color:var(--t3);margin:0}
.ct-sec:first-of-type{margin-top:var(--s3)}

/* Recommend is VIOLET because it is a request to someone else, not a
   decision. Cyan stays the decide colour. Two verbs, two hues. */
.lr-rec{font-family:inherit;font-size:12px;cursor:pointer;padding:6px 14px;border:0;
  border-radius:var(--r-pill,999px);color:#A794C9;background:rgba(129,111,168,.10);
  box-shadow:inset 0 0 0 1px rgba(129,111,168,.24);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.lr-rec:hover{color:#BCA9DC;background:rgba(129,111,168,.17);
  box-shadow:inset 0 0 0 1px rgba(129,111,168,.34)}

/* your own row: locked, and ACCOUNTED FOR. Rows sitting inert with no
   explanation read as a bug rather than a rule. */
.lr-row.own{opacity:.9}
.lr-own{display:flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-size:12px;color:var(--t3);padding:7px 11px;border-radius:var(--r-sm,8px);
  background:rgba(255,255,255,.02);box-shadow:inset 2px 0 0 rgba(197,164,105,.35)}

/* an existing recommendation, and one click to take it */
.lr-recd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--s2);
  font-size:12px;color:var(--t2);padding:8px 11px;border-radius:var(--r-sm,8px);
  background:rgba(129,111,168,.07);box-shadow:inset 2px 0 0 rgba(129,111,168,.45)}
.lr-recd b{color:#A794C9;font-weight:500}
.lr-recd .take{margin-left:auto;font-family:inherit;font-size:11.5px;cursor:pointer;
  padding:5px 12px;border:0;border-radius:var(--r-pill,999px);color:var(--cyan-text);
  background:rgba(99,185,206,.11);box-shadow:inset 0 0 0 1px rgba(99,185,206,.26);
  transition:background var(--t-hover,.2s)}
.lr-recd .take:hover{background:rgba(99,185,206,.18)}

/* escalation, stated rather than silent */
.ct-stale{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text);
  background:rgba(197,164,105,.10);padding:2px 7px;border-radius:var(--r-pill,999px)}

/* The guidance. Expanded until acknowledged, then one line that stays.
   Fully expanded forever becomes wallpaper and stops being read, which
   is the failure mode for exactly the guidance that matters most. */
.ct-guide{border-radius:var(--r-sm,8px);margin-bottom:var(--s4);
  background:rgba(129,111,168,.05);box-shadow:inset 0 0 0 1px rgba(129,111,168,.22)}
.ct-guide-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);flex-wrap:wrap}
.ct-guide-h b{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#A794C9}
.ct-guide-h span{font-size:12.5px;color:var(--t2);flex:1 1 260px;min-width:0}
.ct-guide-b{padding:0 var(--s4) var(--s4)}
.ct-lead{font-size:13.5px;color:var(--t1);margin:0 0 var(--s3);line-height:1.6;max-width:66ch}
.ct-guide ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ct-guide li{font-size:13px;color:var(--t2);line-height:1.6;padding-left:16px;
  position:relative;max-width:70ch}
.ct-guide li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:rgba(129,111,168,.6)}
.ct-guide li b{color:var(--t1);font-weight:500}
.ct-agree{margin-top:var(--s4);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ct-agree button{font-family:inherit;font-size:12.5px;cursor:pointer;padding:8px 18px;border:0;
  border-radius:var(--r-pill,999px);color:#A794C9;background:rgba(129,111,168,.12);
  box-shadow:inset 0 0 0 1px rgba(129,111,168,.28);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.ct-agree button:hover{color:#BCA9DC;background:rgba(129,111,168,.19)}
.ct-agree small{font-size:11.5px;color:var(--t3)}
.ct-guide.done .ct-guide-b{display:none}
.ct-chev{margin-left:auto;color:var(--t3);font-size:11px;cursor:pointer;background:none;
  border:0;font-family:inherit;padding:4px 8px;transition:color var(--t-hover,.2s)}
.ct-chev:hover{color:var(--t1)}
@media (max-width:640px){
  .ct-chev{margin-left:0}
  .lr-recd .take{margin-left:0}
}

/* the review-role cell on the roster row (team only) */
.amb-roster th:last-child,.r-role{white-space:nowrap}
.r-role{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl-chip{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-text);
  background:rgba(99,185,206,.11);box-shadow:inset 0 0 0 1px rgba(99,185,206,.24);
  padding:3px 9px;border-radius:var(--r-pill,999px)}
.rl-btn{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  padding:3px 9px;border:0;border-radius:var(--r-pill,999px);color:var(--t3);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s),box-shadow var(--t-hover,.2s)}
.rl-btn:hover{color:var(--t1);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
.rl-btn.off:hover{color:#D89C9C;box-shadow:inset 0 0 0 1px rgba(199,123,123,.34)}
.rl-non{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);opacity:.55}
/* "Not a reviewer" is the resting state for almost every row, so it is
   the quietest thing in the table. The grant lives behind one verb. */
.rl-none{font-size:11.5px;color:var(--t3);opacity:.5}
/* opened: the actual grants, which state the scope they would cover so
   nobody has to infer it from a one-word pill */
.r-role.open{gap:6px}
.rl-go{font-family:inherit;font-size:11px;cursor:pointer;padding:4px 11px;border:0;
  border-radius:var(--r-pill,999px);color:var(--cyan-text);background:rgba(99,185,206,.11);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.26);white-space:nowrap;
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.rl-go:hover{color:#A8E2F0;background:rgba(99,185,206,.18)}
/* the two grants are nested, not alternatives, and saying so once here
   is cheaper than everyone discovering it by trying */
.rl-hint{flex-basis:100%;font-size:11px;color:var(--t3);line-height:1.5;margin-bottom:2px}

/* Count only: approved, but deliberately not in the feed. Steel rather
   than cyan, because it is a real approval and not a lesser rejection,
   yet it must not read as the same act as Publish. */
.lr-count{color:var(--t2)!important;background:rgba(255,255,255,.03)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)!important}
.lr-count:hover{color:var(--t1)!important;background:rgba(255,255,255,.07)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}

/* ==== 26 · Team Studio (31 Aug 2026) ================================
   The authoring surface. Each panel wears the hue candidates already
   read that thing in: opportunities gold, calendar violet, the feed
   magenta. Team writes in the same colour the candidate reads. */
.ts-wrap{display:flex;flex-direction:column}
.ts-lede{font-size:13.5px;color:var(--t2);line-height:1.6;margin:0 0 var(--s4);max-width:64ch}
.ts-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s3);margin-bottom:var(--s5)}

.ts-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ts-head .st-h{margin:0}
.ts-new{margin-left:auto;font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
  padding:5px 13px;border:0;border-radius:var(--r-pill,999px);color:var(--t2);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.ts-new:hover{color:var(--t1);background:rgba(255,255,255,.05)}

.ts-row{display:flex;align-items:center;gap:var(--s3);padding:11px 0;flex-wrap:wrap;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.ts-row:last-child{box-shadow:none}
.ts-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ts-mid b{font-size:13px;font-weight:500;color:var(--t1)}
.ts-mid span{font-size:11.5px;color:var(--t3)}
.ts-when{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap;
  min-width:74px}
.ts-tag{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;
  border-radius:var(--r-pill,999px);white-space:nowrap}
.tg-team{color:#A794C9;background:rgba(129,111,168,.13)}
/* sage for learning: the palette's growth hue, unused on the calendar,
   and deliberately NOT gold. Gold means the programme's invitations to
   act and nothing else, and beside amber at 9.5px nobody could tell. */
.tg-learn{color:#8FC7AE;background:rgba(111,179,151,.13)}
.tg-eco{color:#8CC0E6;background:rgba(91,159,212,.13)}
.tg-rew{color:#A794C9;background:rgba(129,111,168,.16);
  box-shadow:inset 0 0 0 1px rgba(129,111,168,.3)}
.ts-x{background:none;border:0;color:var(--t3);cursor:pointer;font-size:11px;
  padding:4px 8px;font-family:inherit;transition:color var(--t-hover,.2s)}
.ts-x:hover{color:#D89C9C}

/* the form, inline above the panels rather than in a modal: it is a
   working surface, not an interruption */
.ts-form .ts-fields{margin-top:var(--s3)}
.ts-form .fm-f{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.ts-form .fm-f label{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.ts-form .fm-f input,.ts-form .fm-f textarea{background:rgba(255,255,255,.02);color:var(--t1);
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);border-radius:var(--r-sm,8px);
  padding:9px 11px;font-family:inherit;font-size:13px;width:100%}
.ts-form .fm-f textarea{min-height:74px;resize:vertical;line-height:1.55}
.ts-form .fm-f input:focus,.ts-form .fm-f textarea:focus{outline:0;
  box-shadow:inset 0 0 0 2px rgba(129,111,168,.45)}
.ts-form .fm-f small{font-size:11px;color:var(--t3);line-height:1.5}
.ts-form .fm-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ts-form .pillrow{display:flex;gap:6px;flex-wrap:wrap}
.ts-form .pill{font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
  padding:6px 13px;border:0;border-radius:var(--r-pill,999px);color:var(--t3);
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.ts-form .pill.on{color:var(--cyan-text);background:rgba(99,185,206,.12);
  box-shadow:inset 0 0 0 1px rgba(99,185,206,.30)}
.ts-form .fm-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--s3)}
.ts-form .fm-check input{width:14px;height:14px;margin:2px 0 0;accent-color:var(--cyan);flex:none}
.ts-form .fm-check span{font-size:12.5px;color:var(--t2);line-height:1.5}
.ts-form .fm-check span i{display:block;font-style:normal;font-size:11.5px;
  color:var(--t3);margin-top:2px}
.ts-form .ov-acts{display:flex;gap:10px;align-items:center;margin-top:var(--s4);flex-wrap:wrap}
.ts-form .ov-go{font-family:inherit;font-size:13px;cursor:pointer;padding:9px 20px;border:0;
  border-radius:var(--r-pill,999px);color:#A794C9;background:rgba(129,111,168,.12);
  box-shadow:inset 0 0 0 1px rgba(129,111,168,.28);
  transition:color var(--t-hover,.2s),background var(--t-hover,.2s)}
.ts-form .ov-go:hover{color:#BCA9DC;background:rgba(129,111,168,.19)}
.ts-form .ov-go:disabled{opacity:.45;cursor:default}
.ts-form .ov-cancel{background:none;border:0;color:var(--t3);font-family:inherit;
  font-size:12.5px;cursor:pointer}
.ts-form .ov-cancel:hover{color:var(--t1)}
.ts-form .ov-hint{margin-left:auto;font-size:11.5px;color:var(--t3)}
@media (max-width:640px){
  .ts-form .fm-two{grid-template-columns:1fr}
  .ts-form .ov-hint{margin-left:0;flex-basis:100%}
  .ts-when{min-width:0}
}

/* A refusal belongs beside the form that caused it. This used to render
   below three panels, so a rejected publish looked like a dead button. */
.ts-err{margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--r-sm,8px);
  font-size:12.5px;line-height:1.5;color:#D89C9C;
  background:rgba(199,123,123,.07);box-shadow:inset 0 0 0 1px rgba(199,123,123,.28)}