/* The hidden attribute must actually hide.

   A class rule in this stylesheet beats the browser's own [hidden] rule
   whatever the specificity, because author styles outrank user-agent ones. So
   any element given `hidden` and also styled with `display:` somewhere stayed
   on screen — which is how the People page ended up showing "No members
   found." underneath a list of members, in a box a full viewport tall.

   This is the third time it has happened in this stylesheet; see the overlay
   note further down. One line makes the attribute mean what it says,
   everywhere, permanently. */
[hidden]{display:none !important}

/* Tanda /web — ONE brand. Warm, calm, trust-first. Mobile-first, card-first. No build step.
   This :root is the SINGLE source of truth for the whole product (loaded on every page via
   base.html); event.css consumes these same tokens. Unified from the former split
   green(app)/warm(event) systems — see docs/UX_AUDIT.md (C1). */
:root{
  /* Surfaces — clean white so deep brown text + burnt orange read sharp */
  --paper:#FFFFFF;                 /* white (cards / hero / topbar fills) */
  --bg:#FFFFFF;                    /* white page (owner decision, 2026-10-12) */
  --card:#ffffff;
  --ink:#3A2A1E;                   /* deep brown — text & headings */
  --muted:#756550;                 /* warm brown-grey muted (AA on white) */
  --line:rgba(58,42,30,.12);

  /* Brand — Deep brown text/tiles + Burnt orange (links, accent, CTA) on white */
  --navy:#3A2A1E;                  /* deep brown — structural tiles / numbers */
  --brand:var(--t-accent);                 /* burnt orange — accent (progress, chips, focus) */
  --brand-strong:var(--t-accent);          /* burnt orange action fill — white text ≈5.1:1 (AA) */
  --brand-ink:var(--t-accent);             /* burnt orange — links / wordmark / brand text */
  --brand-soft:#F6E1D2;            /* soft burnt-orange tint (fills, hover) */

  /* Glass / gloss */
  --glass:rgba(255,255,255,.60);
  --glass-hi:rgba(255,255,255,.85);   /* top sheen highlight / light border */
  --glass-ring:0 0 0 1px rgba(58,42,30,.06);
  --blur:saturate(150%) blur(14px);

  /* Status */
  --ok:var(--t-confirmed); --warn:#9a6a00; --bad:#B0182F;   /* crimson — kept cool/distinct from the burnt-orange brand */

  /* Shape & rhythm — tightened to a precise scale; geometric corners, crisp elevation */
  --radius:10px; --radius-sm:6px; --radius-lg:12px; --pad:16px;
  --shadow:0 2px 10px -6px rgba(58,42,30,.28);
  --shadow-lg:0 10px 28px -18px rgba(58,42,30,.35);
  --hair:1px solid var(--line);

  /* Type */
  /* Aliases. The families live in tokens.css so there is one answer to
     "what does this product read in"; these names stay because 38 rules use
     them and renaming those is churn, not clarity. */
  --sans:var(--t-font-body);
  --serif:var(--sans);
  --mono:var(--t-font-mono);

  /* legacy aliases (kept so any older rule referencing them still resolves) */
  --brand-green:var(--t-brand);               /* locked product green */
  --ios-blue:#147EFB;
  --ios-blue-soft:#EAF3FF;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--bg)}
body{
  background:transparent;
  color:var(--ink);
  font:16px/1.55 var(--sans);
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}
/* Animated aurora wash — slow, subtle, sits behind everything; disabled for reduced motion */
body::before{
  content:"";position:fixed;inset:-15% -10% auto -10%;height:80vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 400px at 18% 26%, rgba(176,82,26,.18), transparent 60%),
    radial-gradient(560px 380px at 82% 16%, rgba(58,42,30,.13), transparent 60%),
    radial-gradient(520px 360px at 55% 60%, rgba(190,94,35,.12), transparent 62%);
  animation:aurora 26s ease-in-out infinite alternate;will-change:transform;
}
@keyframes aurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(-1%,2%,0) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;border-radius:8px;z-index:10}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad);background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-hi);box-shadow:0 1px 0 rgba(58,42,30,.05);
  position:sticky;top:0;z-index:20;
  /* Stated rather than left to whatever the logo happens to measure, because
     the sidebar sticks to the underside of this bar and has to know where it
     ends. */
  min-height:var(--t-topbar-h);box-sizing:border-box}
.brand{font-family:var(--sans);font-weight:700;font-size:1.08rem;color:var(--brand-ink);letter-spacing:0}
.brand img{display:block;width:120px;height:36px;object-fit:contain}
.wrap{max-width:560px;margin:0 auto;padding:var(--pad)}
.foot{max-width:560px;margin:0 auto;padding:8px var(--pad) 32px;color:var(--muted)}

.wrap:has(.console-login){max-width:none;min-height:100vh;display:grid;place-items:center;padding:20px var(--pad) 32px;
  background:#0B1016;color:#E7EEF6}
body:has(.console-login){background:#0B1016;color:#E7EEF6}
body:has(.console-login)::before{display:none}
body:has(.console-login) .topbar,body:has(.console-login) .foot{display:none}
.wrap:has(.console-login)::after{content:"";position:fixed;left:50%;bottom:24px;width:min(352px,calc(100vw - 80px));height:16px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(37,211,102,.2),rgba(37,211,102,.1) 42%,rgba(37,211,102,0) 74%);border-radius:999px;pointer-events:none}
.console-login{width:min(420px,100%);font-family:var(--t-font-body);transform:translateY(-10px)}
.console-login-panel{background:rgba(14,21,29,.72);border:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:12px;padding:24px;box-shadow:0 24px 70px -48px #000}
.console-login-head{margin-bottom:24px;text-align:center}
.console-login-brand{display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.auth-brand-logo{display:block;width:150px;height:45px;object-fit:contain}
.console-login-brand strong{display:block;color:#E7EEF6;font-size:15px;line-height:20px;font-weight:600}
.console-login-brand small{display:block;color:#8B9BB0;font-size:12px;line-height:16px}
.console-login-head h2{margin:0;color:#F8FBFF;font-size:24px;line-height:32px;font-weight:600}
.console-login-head p{margin:8px 0 0;color:#8B9BB0;font-size:13px;line-height:20px}
.console-login-form{display:grid;gap:16px}
.console-login-form label{margin:0 0 8px;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.console-input-wrap{display:flex;align-items:center;gap:8px;height:48px;border:1px solid #243041;border-radius:14px;
  background:#FFFFFF;padding:0 12px;transition:border-color .12s ease,box-shadow .12s ease}
.console-input-wrap:focus-within{border-color:var(--t-brand);box-shadow:inset 0 0 0 1px var(--t-brand)}
.console-input-wrap input{height:auto;min-width:0;flex:1;border:0;background:transparent;padding:0;color:var(--t-ink);
  font-size:13px;line-height:20px;box-shadow:none}
.console-input-wrap input:focus{outline:0;box-shadow:none}
.console-input-wrap input::placeholder{color:#5C6B7A}
.console-input-wrap:has(input:user-invalid){border-color:#E25C5C;box-shadow:0 0 0 3px rgba(226,92,92,.14)}
.console-password-toggle{align-self:center;margin-left:auto;padding:0;border:0;background:transparent;color:var(--t-brand-deep);font:inherit;font-size:12px;line-height:16px;font-weight:500;cursor:pointer}
.console-forgot-link{margin-top:-8px;color:var(--t-brand-deep);text-decoration:none;font-size:13px;line-height:20px;font-weight:500}
.console-forgot-link:hover{text-decoration:underline}
.console-remember{display:flex!important;align-items:flex-start;gap:8px;margin:0!important;color:var(--t-ink)!important;
  font-size:13px!important;line-height:20px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important}
.console-remember input{width:18px;height:18px;margin-top:1px;accent-color:var(--t-brand)}
.console-remember strong{display:block;color:var(--t-ink);font-size:13px;line-height:20px;font-weight:500}
.console-remember small{display:block;color:#8B9BB0;font-size:12px;line-height:16px}
.console-login-form .btn{height:48px;border-radius:14px;margin-top:8px;background:var(--t-brand);color:#07110D;
  box-shadow:none;font-size:16px;line-height:24px;font-weight:500}
.console-login-form .btn:hover{filter:none;background:var(--t-green-bright)}
.console-login-footer{margin:16px 0 0;text-align:center;color:#8B9BB0;font-size:12px;line-height:16px}
@media(max-width:520px){
  .wrap:has(.console-login){place-items:center;padding:20px 16px}
  .console-login-panel{padding:24px}
  .console-login-form .btn{height:48px}
}

body:has(.member-auth){background:var(--t-bg);color:var(--t-ink)}
body:has(.member-auth)::before{display:none}
body:has(.member-auth) .topbar,body:has(.member-auth) .foot{display:none}
.wrap:has(.member-auth){max-width:none;min-height:100vh;display:grid;place-items:center;margin:0;padding:32px var(--pad);
  background:
    radial-gradient(700px 420px at 78% 10%,rgba(42,165,106,.12),transparent 62%),
    radial-gradient(560px 360px at 18% 82%,rgba(143,221,189,.08),transparent 65%),
    var(--t-bg)}
.member-auth{width:min(408px,100%);font-family:var(--t-font-body)}
.member-auth-panel{padding:28px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(14,21,29,.78);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 80px -52px #000}
.member-auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.member-auth-brand .auth-brand-logo{width:150px;height:45px}
.member-auth-mark{width:34px;height:34px;border-radius:8px;display:block;object-fit:contain;flex:0 0 34px}
.member-auth-brand strong{display:block;color:var(--t-ink);font-size:15px;line-height:20px;font-weight:650}
.member-auth-brand small{display:block;color:var(--t-muted);font-size:12px;line-height:16px}
.member-auth h2{margin:0;color:var(--t-ink);font-size:24px;line-height:32px;font-weight:650}
.member-auth p{margin:4px 0 0;color:var(--t-muted);font-size:13px;line-height:20px}
.member-auth-form{display:grid;gap:14px;margin-top:22px}
.member-auth-form label{display:block;margin:0 0 6px;color:var(--t-muted);font-size:11px;line-height:16px;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em}
.member-auth input[type=text],.member-auth input[type=email],.member-auth input[type=tel],.member-auth input[type=password]{
  width:100%;height:48px;min-height:48px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-bg);color:var(--t-ink);
  padding:0 12px;font-size:13px;line-height:20px;box-shadow:none}
.member-auth input::placeholder{color:#5C6B7A}
.member-auth input:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.member-password-row{position:relative}
.member-password-row input{padding-right:58px!important}
.member-password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--t-brand-deep);
  font:inherit;font-size:12px;line-height:16px;font-weight:650;cursor:pointer}
.member-auth .btn{height:48px;margin-top:2px;border-radius:8px;background:var(--t-brand);color:#07110D;box-shadow:none;
  font-size:13px;line-height:20px;font-weight:700}
.member-auth .btn:hover{filter:none;background:var(--t-green-bright)}
.member-auth .btn.ghost{background:#FFFFFF;color:var(--t-brand-deep);border:1px solid var(--t-line)}
.member-auth .auth-row{margin-top:-4px;text-align:right}
.member-auth a{color:var(--t-brand-deep);text-decoration:none;font-weight:600}
.member-auth a:hover{text-decoration:underline}
.member-auth .auth-alt{margin-top:18px;color:var(--t-muted);text-align:center}
.member-auth-note{margin-top:2px!important;color:var(--t-muted)!important;font-size:12px!important;line-height:18px!important}
.member-auth-provider-reserve{height:10px}
.member-auth-footer{margin-top:22px!important;text-align:center;color:#6F8198!important;font-size:12px!important;line-height:16px!important}
.member-auth .notice{background:rgba(42,165,106,.12);border-color:rgba(42,165,106,.25);color:#BFEBD7}
.member-auth .err{margin-top:14px;color:#FFC9C9;background:rgba(226,92,92,.12);border:1px solid rgba(226,92,92,.24);
  border-radius:8px;padding:10px 12px;font-size:13px;line-height:18px}
@media(max-width:520px){
  .wrap:has(.member-auth){place-items:start center;padding:24px 16px}
  .member-auth-panel{padding:24px}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad);margin:0 0 14px}
.card h2{margin:0 0 6px;font-family:var(--sans);font-size:1.15rem;line-height:1.25;font-weight:600}
.card h3{margin:0 0 4px;font-size:1rem;line-height:1.3;font-weight:600}
h1{font-family:var(--sans);font-weight:700;line-height:1.12}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:600;color:var(--brand-ink)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.page-head h2{font-size:1.35rem}
.page-head p{margin:0}
.page-head .pill{align-self:flex-start}
.head-action{width:auto;margin-top:0;white-space:nowrap}
.circle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;color:inherit}
.circle-row:hover{border-color:rgba(176,82,26,.35);box-shadow:var(--shadow)}
.circle-row strong{display:block;font-size:1rem}
.circle-row p{margin:3px 0 0}
.row-meta{display:flex;align-items:center;gap:10px;color:var(--brand-ink);font-weight:700}
.action-empty .btn{max-width:220px;margin-left:auto;margin-right:auto}
.step-list{display:grid;gap:8px;margin-top:10px}
.setup-step{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.setup-step.done{background:#E7F4EE;border-color:rgba(46,125,91,.25)}
.step-dot{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-soft);color:var(--brand-ink);font-weight:800;font-size:.86rem}
.setup-step.done .step-dot{background:var(--ok);color:#fff}
.member-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.member-line p{margin:2px 0 0}
.inline-add{margin-top:14px}
.inline-fields{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.inline-fields .btn{width:auto;margin-top:0}
.quiet-card{background:linear-gradient(180deg,#fff,#FEFCFA)}

/* Authenticated product surfaces */
body:has(.admin-shell){background:#0F1115}
body:has(.admin-shell)::before{display:none}
body:has(.admin-shell) .topbar,body:has(.admin-shell) .foot{display:none}
.wrap:has(.admin-shell){max-width:none;padding:0;margin:0}
:root{--console-nav-width:220px}
body:has(.console-workbench){background:#0B1016;color:#E7EEF6}
body:has(.console-workbench)::before{display:none}
body:has(.console-workbench) .topbar,body:has(.console-workbench) .foot{display:none}
.wrap:has(.console-workbench){max-width:none;margin:0;padding:0}
.console-workbench{min-height:100vh;padding:80px 24px 24px calc(var(--console-nav-width) + 24px);background:#0B1016;color:#E7EEF6;
  font-family:var(--t-font-body);font-size:13px;line-height:20px}
.console-sidebar{position:fixed;z-index:70;inset:0 auto 0 0;width:var(--console-nav-width);padding:16px 12px;background:#0E151D;
  border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:18px}
.console-brand{display:flex;gap:10px;align-items:center;color:#E7EEF6;text-decoration:none;padding:8px;border-radius:8px}
.console-brand:hover{background:rgba(255,255,255,.03)}
.console-brand-mark{width:34px;height:34px;border-radius:8px;display:block;object-fit:contain;flex:0 0 34px}
.console-brand-copy{min-width:0;display:grid;gap:1px}
.console-brand strong{display:block;font-size:15px;line-height:20px;font-weight:600}
.console-brand small{display:block;color:#8B9BB0;font-size:12px;line-height:16px;white-space:normal;overflow-wrap:break-word}
.console-nav{display:grid;gap:4px}
.console-nav a{position:relative;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  border-radius:8px;color:#B8C5D6;text-decoration:none;font-size:13px;line-height:20px;font-weight:500}
.console-nav a::before{content:attr(data-icon);width:16px;height:16px;display:grid;place-items:center;flex:0 0 16px;border-radius:4px;
  color:#8B9BB0;background:transparent;font-size:16px;line-height:16px;font-weight:600}
.console-nav a:hover{background:rgba(255,255,255,.03);color:#E7EEF6}
.console-nav a.active{background:rgba(42,165,106,.12);color:#E7EEF6}
.console-nav a.active::after{content:"";position:absolute;left:0;top:12px;width:2px;height:24px;border-radius:99px;background:var(--t-brand)}
.console-nav a.active::before{color:var(--t-green-soft);background:rgba(42,165,106,.14)}
.console-nav .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-nav b{min-width:22px;padding:1px 7px;border-radius:999px;background:#243041;color:#E7EEF6;font-size:11px;line-height:16px;text-align:center}
.console-nav-resizer{position:absolute;top:0;right:-2px;width:4px;height:100%;border:0;padding:0;background:transparent;cursor:col-resize}
.console-nav-resizer:hover,.console-nav-resizer.is-dragging{background:var(--t-brand)}
.console-nav-toggle,.console-nav-scrim{display:none}
html.console-nav-collapsed .console-sidebar{padding-left:8px;padding-right:8px}
html.console-nav-collapsed .console-brand{justify-content:center;padding:8px 0}
html.console-nav-collapsed .console-brand-copy,html.console-nav-collapsed .console-nav .nav-label,
html.console-nav-collapsed .console-nav b,html.console-nav-collapsed .console-sidebar-footer{display:none}
html.console-nav-collapsed .console-nav a{justify-content:center;padding:8px 0}
html.console-nav-collapsed .console-nav a::before{width:24px;height:24px;flex-basis:24px}
.console-sidebar-footer{margin-top:auto;padding:10px 4px}
.console-wave{display:block;width:118px;height:12px;position:relative;overflow:hidden}
.console-wave::before,.console-wave::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:99px;
  background:linear-gradient(90deg,rgba(37,211,102,.16),rgba(37,211,102,0));animation:console-wave 18s ease-in-out infinite alternate}
.console-wave::after{top:6px;width:84px;opacity:.7;animation-delay:-6s}
@keyframes console-wave{from{transform:translateX(0)}to{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.console-wave::before,.console-wave::after{animation:none}}
.console-globalbar{position:fixed;z-index:65;top:0;left:var(--console-nav-width);right:0;height:56px;padding:8px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(14,21,29,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.console-search{display:flex;align-items:center;gap:8px;min-width:260px;max-width:none;flex:1 1 auto;height:40px;margin:0;
  padding:0 12px;border:1px solid #243041;border-radius:8px;background:#0B1016;color:#8B9BB0}
.console-search input{border:0;background:transparent;color:#E7EEF6;padding:0;min-height:auto;font-size:13px;box-shadow:none}
.console-search input:focus{outline:0;box-shadow:none}
.console-search input::placeholder{color:#5C6B7A}
.console-global-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.console-global-actions>button,.console-review-indicator,.console-operator-menu summary{min-height:34px;border:1px solid #243041;
  border-radius:8px;background:#141C26;color:#B8C5D6;padding:6px 10px;text-decoration:none;font:inherit;font-weight:500}
.console-review-indicator{display:inline-flex;align-items:center;gap:7px}
.console-review-indicator span{width:8px;height:8px;border-radius:999px;background:#E8A83A}
.console-review-indicator b,.console-review-indicator em{font:inherit}
.console-review-indicator em{font-style:normal}
.console-operator-menu{position:relative}
.console-operator-menu summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;max-width:210px}
.console-operator-menu summary::-webkit-details-marker{display:none}
.console-operator-menu summary span{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:#E7EEF6;color:#0B1016;font-size:11px;font-weight:700;flex:0 0 24px}
.console-operator-menu summary b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-operator-menu div{position:absolute;right:0;top:42px;min-width:190px;padding:8px;border:1px solid #243041;border-radius:8px;
  background:#0E151D;box-shadow:0 18px 50px -30px #000}
.console-operator-menu a,.console-operator-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:#E7EEF6;
  text-align:left;text-decoration:none;font:inherit}
.console-operator-menu a:hover,.console-operator-menu button:hover{background:rgba(255,255,255,.04)}
.console-workbench-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;
  max-width:1180px;margin:0 auto 16px;padding:14px 0}
.console-workbench-top>a:first-child{display:grid;place-items:center;width:38px;height:38px;border:1px solid #243244;border-radius:8px;
  color:#E7EEF6;text-decoration:none;background:#111A24}
.console-workbench-top h2{margin:0 0 4px;color:#F8FBFF;font-size:1.55rem;line-height:1.12;font-weight:760}
.console-workbench-top p{margin:0;color:#8B9BB0}
.console-workbench .eyebrow{color:#2EC9A0}
.console-top-actions{display:flex;align-items:center;gap:8px}
.console-card,.triage-lane,.circle-ops-summary,.console-alert{max-width:1180px;margin:0 auto 12px;border:1px solid #243244;
  border-radius:8px;background:#141C26;color:#E7EEF6}
.console-card{padding:16px}
.console-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.console-section-head h3{margin:0;color:#F8FBFF;font-size:1rem;font-weight:760}
.console-section-head p{margin:3px 0 0;color:#8B9BB0;font-size:.88rem}
.console-chip,.billing-chip,.circle-type-chip,.market-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 9px;
  border:1px solid #2A394B;border-radius:999px;background:#101821;color:#B8C5D6;text-decoration:none;font-size:.78rem;font-weight:720}
.console-chip.ok,.billing-chip.ok{border-color:rgba(46,201,160,.3);background:rgba(46,201,160,.1);color:#56DDBA}
.console-chip.warn,.billing-chip.warn{border-color:rgba(232,168,58,.34);background:rgba(232,168,58,.11);color:#F0BF67}
.console-chip.info,.circle-type-chip,.market-chip{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.1);color:#AFCBFF}
.console-flash{max-width:1180px;margin:0 auto 12px;color:#F0BF67}
.console-kpi-row{max-width:1180px;margin:0 auto 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.console-kpi-row div{min-width:0;border:1px solid #243244;border-radius:8px;background:#141C26;padding:14px}
.console-kpi-row strong{display:block;color:#F8FBFF;font-size:1.55rem;line-height:1.12;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.console-kpi-row span{display:block;color:#8B9BB0;font-size:.82rem;overflow-wrap:break-word}
.console-queue-table{max-width:1180px;margin:0 auto 12px;border:1px solid #243041;border-radius:8px;background:#141C26;overflow-x:auto;overflow-y:visible}
.console-queue-table table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.console-queue-table th{height:36px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#8B9BB0;
  font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.console-queue-table td{height:44px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#E7EEF6;font-size:13px;line-height:20px}
.console-queue-table th,.console-queue-table td{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:280px}
.console-queue-table th:first-child,.console-queue-table td:first-child{position:sticky;left:0;z-index:2;background:#141C26}
.console-queue-table th:last-child,.console-queue-table td:last-child{position:sticky;right:0;z-index:2;background:#141C26}
.console-queue-table th:first-child{z-index:3}.console-queue-table th:last-child{z-index:3}
.console-column-resizer{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:5}
.console-column-resizer:hover,.console-column-resizer.is-dragging{background:var(--t-brand)}
.console-queue-table tr:hover td{background:rgba(255,255,255,.03)}
.console-queue-table tr[data-href]{cursor:pointer}
.console-queue-table tr:last-child td{border-bottom:0}
.console-queue-table a{color:var(--t-green-soft);text-decoration:none;font-weight:500}
.console-queue-table small{display:block;color:#8B9BB0;font-size:12px;line-height:16px}
.console-row-action{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:1px solid #243041;border-radius:999px;
  background:#101821;color:#B8C5D6;text-decoration:none;font:inherit}
.console-row-action:hover{border-color:var(--t-brand);color:var(--t-green-soft)}
.billing-table table{min-width:1080px}
.markets-directory table{min-width:0}
.markets-directory th,.markets-directory td{max-width:none}
.roster-detail-table table{min-width:940px}
.billing-table .seat-meter.compact{min-width:190px;gap:6px}
.billing-table .seat-meter.compact .seat-meter-head{font-size:12px;line-height:16px}
.billing-table .seat-meter.compact .seat-ticks span{height:6px}
.billing-row-menu{position:relative}
.billing-row-menu summary{list-style:none;min-width:54px;min-height:44px;padding:0 14px;display:grid;place-items:center;border:1px solid #243041;
  border-radius:999px;background:#101821;color:#B8C5D6;font-size:12px;font-weight:700;cursor:pointer}
.billing-row-menu summary::-webkit-details-marker{display:none}
.billing-drawer{position:absolute;right:0;top:36px;z-index:90;width:320px;padding:14px;border:1px solid #243041;border-radius:8px;
  background:rgba(14,21,29,.96);box-shadow:0 24px 70px -40px #000}
.billing-drawer strong{display:block;color:#F8FBFF;font-size:13px;line-height:20px;font-weight:600}
.billing-drawer p{margin:4px 0 12px;color:#8B9BB0;font-size:13px;line-height:20px}
.billing-drawer label{margin:0 0 6px;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.billing-drawer input{height:44px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:0 10px;font-size:13px}
.billing-drawer input:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.billing-action-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.billing-action-grid button{min-height:44px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;font:inherit;font-weight:500}
.billing-action-grid button:hover{border-color:var(--t-brand);color:var(--t-green-soft)}
.pause-record-modal{width:min(420px,calc(100vw - 32px));border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:18px;
  box-shadow:0 24px 70px -40px #000}
.pause-record-modal::backdrop{background:rgba(0,0,0,.5)}
.pause-record-modal h3{margin:0 0 8px;color:#F8FBFF;font-size:20px;line-height:28px}
.pause-record-modal p{margin:0 0 14px;color:#8B9BB0}
.pause-record-modal label{display:block;margin:10px 0 6px;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pause-record-modal textarea{width:100%;min-height:96px;border:1px solid #243041;border-radius:8px;background:#0B1016;color:#E7EEF6;padding:10px;font:inherit}
.pause-record-modal textarea:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.pause-record-modal .console-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:#E7EEF6}
.pause-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

@media(max-width:760px){
  .channel-status-grid{grid-template-columns:1fr}
  .channel-preview-list article{grid-template-columns:1fr;gap:4px}
  .channel-checklist div{grid-template-columns:1fr;gap:2px}
  .channel-test-grid{grid-template-columns:1fr}
  .console-queue-table{border:0;background:transparent;overflow:visible}
  .console-queue-table table,.console-queue-table tbody,.console-queue-table tr,.console-queue-table td{display:block;width:100%;min-width:0}
  .console-queue-table thead{display:none}
  .console-queue-table tbody{display:grid;gap:10px}
  .console-queue-table tr{padding:12px;border:1px solid #243041;border-radius:10px;background:#141C26}
  .console-queue-table td{height:auto;padding:7px 0;border:0;max-width:none;white-space:normal}
  .console-queue-table th:first-child,.console-queue-table td:first-child,
  .console-queue-table th:last-child,.console-queue-table td:last-child{position:relative;left:auto;right:auto;z-index:auto;background:transparent}
  .console-queue-table td[data-label]{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start}
  .console-queue-table td[data-label]::before{content:attr(data-label);color:#6F8198;font-size:10px;line-height:18px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .console-queue-table td[data-label="Circle"]{grid-template-columns:1fr}
  .console-queue-table td[data-label="Circle"]::before{display:none}
  .triage-drawer{position:static;width:auto;max-width:none;max-height:none;margin:12px 0 0;transform:none;opacity:1;pointer-events:auto;display:none}
  .triage-drawer.is-open{display:block}
  .billing-table{border:0;background:transparent;overflow:visible}
  .billing-table table,.billing-table tbody,.billing-table tr,.billing-table td{display:block;width:100%;min-width:0}
  .billing-table thead{display:none}
  .billing-table tbody{display:grid;gap:10px}
  .billing-table tr{padding:12px;border:1px solid #243041;border-radius:10px;background:#141C26}
  .billing-table td{height:auto;padding:8px 0;border:0}
  .billing-table td[data-label]{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start}
  .billing-table td[data-label]::before{content:attr(data-label);color:#6F8198;font-size:10px;line-height:18px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .billing-table td[data-label="Circle"]{grid-template-columns:1fr}
  .billing-table td[data-label="Circle"]::before{display:none}
  .billing-table td[data-label="Peak active"]{grid-template-columns:1fr}
  .billing-table td[data-label="Peak active"]::before{display:none}
  .billing-table .seat-meter.compact{min-width:0}
  .billing-table td[data-label="More"]{grid-template-columns:1fr}
  .billing-table td[data-label="More"]::before{display:none}
  .billing-row-menu summary{margin-left:auto}
  .billing-drawer{position:static;width:100%;margin-top:8px;box-shadow:none}
  .support-case-table{border:0;background:transparent;overflow:visible}
  .support-case-table table,.support-case-table tbody,.support-case-table tr,.support-case-table td{display:block;width:100%;min-width:0}
  .support-case-table thead{display:none}
  .support-case-table tbody{display:grid;gap:10px}
  .support-case-table tr{padding:12px;border:1px solid #243041;border-radius:10px;background:#141C26}
  .support-case-table td{height:auto;padding:7px 0;border:0}
  .support-case-table td[data-label]{display:grid;grid-template-columns:98px minmax(0,1fr);gap:10px;align-items:start}
  .support-case-table td[data-label]::before{content:attr(data-label);color:#6F8198;font-size:10px;line-height:18px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.support-case-table td[data-label="Case"]{grid-template-columns:1fr}
.support-case-table td[data-label="Case"]::before{display:none}
.support-case-table small{max-width:100%;white-space:normal}
.support-case-table td[data-label="Open"]{grid-template-columns:1fr}
.support-case-table td[data-label="Open"]::before{display:none}
.support-case-drawer{position:static;width:100%;margin-top:8px;box-shadow:none}
.support-case-drawer-head{flex-direction:column}
.support-actions form{flex-direction:column}
  .campaign-review-table{border:0;background:transparent;overflow:visible}
  .campaign-review-table table,.campaign-review-table tbody,.campaign-review-table tr,.campaign-review-table td{display:block;width:100%;min-width:0}
  .campaign-review-table thead{display:none}
  .campaign-review-table tbody{display:grid;gap:10px}
  .campaign-review-table tr{padding:12px;border:1px solid #243041;border-radius:10px;background:#141C26}
  .campaign-review-table td{height:auto;padding:7px 0;border:0}
  .campaign-review-table td[data-label]{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start}
  .campaign-review-table td[data-label]::before{content:attr(data-label);color:#6F8198;font-size:10px;line-height:18px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .campaign-review-table td[data-label="Campaign"]{grid-template-columns:1fr}
  .campaign-review-table td[data-label="Campaign"]::before{display:none}
  .campaign-review-table td[data-label="Actions"]{grid-template-columns:1fr}
  .campaign-review-table td[data-label="Actions"]::before{display:none}
  .campaign-review-drawer{position:static;width:auto;max-width:none;max-height:none;margin:12px 0 0;transform:none;opacity:1;
    pointer-events:auto;display:none;box-shadow:none}
  .campaign-review-drawer.is-open{display:block}
  .campaign-review-drawer-head{flex-direction:column}
  .campaign-action-grid.inline{display:grid}
}
.triage-board{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.triage-lane{padding:14px}
.triage-lane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.triage-lane-head h3{margin:0;color:#F8FBFF;font-size:.98rem}
.triage-lane-head span{color:#8B9BB0;font-variant-numeric:tabular-nums}
.needs-list{display:grid;gap:6px}
.needs-you-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #243244;
  border-radius:8px;background:#101821;color:inherit;text-decoration:none}
.needs-you-row strong{display:block;color:#E7EEF6}
.needs-you-row small,.needs-you-row>span:last-child,.triage-empty{color:#8B9BB0;font-size:.84rem}
.triage-empty{margin:8px 0 0}
.channel-status-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.channel-status-card{padding:14px;border:1px solid #243041;border-radius:8px;background:#141C26}
.channel-status-card dl{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px 10px;margin:12px 0 14px}
.channel-status-card dt{color:#6F8198;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.channel-status-card dd{margin:0;color:#E7EEF6;font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-preview-list{display:grid;gap:8px}
.channel-preview-list article{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.channel-preview-list article:first-child{border-top:0}
.channel-preview-list span{color:#8B9BB0;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.channel-preview-list p{margin:0;color:#E7EEF6;font-size:13px;line-height:20px}
.channel-checklist{display:grid;gap:8px;margin-top:12px}
.channel-checklist div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.channel-checklist div:first-child{border-top:0;padding-top:0}
.channel-checklist span{color:#6F8198;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.channel-checklist b{min-width:0;color:#E7EEF6;font-size:13px;line-height:18px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-note{margin:12px 0 0;color:#F0BF67;font-size:12px;line-height:18px}
.channel-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.channel-test-grid form{display:grid;gap:8px;margin:0;padding:12px;border:1px solid #243041;border-radius:8px;background:#101821}
.channel-test-grid label{color:#8B9BB0;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.channel-test-grid input{height:38px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:0 10px;font:inherit;font-size:13px}
.channel-test-grid input:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.console-queue-table tr.is-selected td{background:rgba(42,165,106,.1)}
.triage-drawer{position:fixed;z-index:64;right:16px;top:72px;width:360px;max-width:calc(100vw - var(--console-nav-width) - 48px);
  max-height:calc(100vh - 88px);overflow:auto;padding:14px;border:1px solid #243041;border-radius:10px;
  background:rgba(14,21,29,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 70px -42px #000;
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.triage-drawer.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.triage-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.triage-drawer-head span{display:block;color:#8B9BB0;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.triage-drawer-head strong{display:block;color:#F8FBFF;font-size:16px;line-height:24px}
.triage-drawer-head button{width:30px;height:30px;border:1px solid #243041;border-radius:8px;background:#101821;color:#B8C5D6;font:inherit}
.triage-drawer dl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px 12px;margin:0 0 14px}
.triage-drawer dt{color:#6F8198;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.triage-drawer dd{margin:0;color:#E7EEF6}
.triage-drawer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.support-case-table{max-width:1180px;margin:0 auto;border:1px solid #243041;border-radius:8px;background:#141C26;overflow:auto}
.support-case-table table{width:100%;min-width:1040px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.support-case-table th{height:36px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#8B9BB0;
  font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.support-case-table td{height:48px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#E7EEF6;font-size:13px;line-height:20px}
.support-case-table th,.support-case-table td{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:1px}
.support-case-table th:first-child,.support-case-table td:first-child{position:sticky;left:0;z-index:2;background:#141C26}
.support-case-table th:last-child,.support-case-table td:last-child{position:sticky;right:0;z-index:2;background:#141C26}
.support-case-table th:first-child,.support-case-table th:last-child{z-index:3}
.support-case-table tr:hover td{background:rgba(255,255,255,.03)}
.support-case-table tr:last-child td{border-bottom:0}
.support-case-table strong{display:block;color:#F8FBFF;font-size:13px;font-weight:600}
.support-case-table small{display:block;max-width:320px;color:#8B9BB0;font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-case-table a{color:var(--t-green-soft);text-decoration:none;font-weight:500}
.support-case-drawer{position:fixed;z-index:66;right:16px;top:72px;width:420px;max-width:calc(100vw - var(--console-nav-width) - 48px);
  max-height:calc(100vh - 88px);overflow:auto;padding:14px;border:1px solid #243041;border-radius:10px;
  background:rgba(14,21,29,.76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 70px -42px #000;
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.support-case-drawer.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.support-case-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.support-case-drawer-head span{display:block;color:#8B9BB0;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.support-case-drawer-head a{white-space:nowrap}
.support-case-drawer-head button{width:30px;height:30px;border:1px solid #243041;border-radius:8px;background:#101821;color:#B8C5D6;font:inherit}
.support-case-meta{display:grid;grid-template-columns:88px minmax(0,1fr);gap:7px 10px;padding:10px;border:1px solid #243041;border-radius:8px;background:#101821}
.support-case-meta span{color:#6F8198;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.support-case-meta b{color:#E7EEF6;font-size:13px;font-weight:500}
.support-case-rule{margin:12px 0;color:#8B9BB0;font-size:12px;line-height:18px}
.support-playbook{display:grid;gap:6px;margin:12px 0;padding:10px;border:1px solid #243041;border-radius:8px;background:#101821}
.support-playbook span{color:#6F8198;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.support-playbook p{margin:0;color:#D6E0EC;font-size:12px;line-height:18px}
.support-levers{display:grid;gap:8px;margin:12px 0;padding:10px;border:1px solid #243041;border-radius:8px;background:#101821}
.support-levers>span,.support-microcopy span{color:#6F8198;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.support-lever-row{display:flex;flex-wrap:wrap;gap:8px}
.support-lever-row .console-mini-button{text-decoration:none}
.support-microcopy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.support-microcopy div{padding:10px;border:1px solid #243041;border-radius:8px;background:#101821}
.support-microcopy p{margin:6px 0 0;color:#D6E0EC;font-size:12px;line-height:18px}
.support-actions{display:grid;gap:8px}
.support-actions form{display:flex;gap:8px;margin:0}
.support-actions form[data-support-resolve]{display:grid}
.support-actions label{display:block;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.support-actions input,.support-actions textarea{width:100%;min-height:44px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:0 10px;font-size:13px}
.support-actions textarea{min-height:76px;padding:10px;resize:vertical}
.support-actions input:focus,.support-actions textarea:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.support-reply-toggle{display:flex!important;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important}
.support-reply-toggle input{width:16px;min-height:16px;height:16px;accent-color:var(--t-brand)}
.support-actions .console-mini-button{background:var(--t-brand);border-color:var(--t-brand);color:#06120C}
.support-actions .console-mini-button.ghost{background:#101821;border-color:#243041;color:#B8C5D6}
.pwa-console .console-kpi-row small{display:block;margin-top:2px;color:#6F8198;font-size:11px;line-height:16px;font-weight:500}
.pwa-filter-row{max-width:1180px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(4,minmax(130px,1fr)) auto;gap:10px;align-items:end}
.pwa-filter-row label{display:grid;gap:5px;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.pwa-filter-row input,.pwa-filter-row select{width:100%;height:40px;border:1px solid #243041;border-radius:8px;background:#101821;color:#E7EEF6;padding:0 10px;font:inherit;font-size:13px;line-height:20px}
.pwa-filter-row input:focus,.pwa-filter-row select:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.pwa-rate-row{max-width:1180px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pwa-rate-row div{min-height:76px;padding:14px;border:1px solid #243041;border-radius:8px;background:#141C26}
.pwa-rate-row strong{display:block;color:#F8FBFF;font-size:24px;line-height:30px}
.pwa-rate-row span{display:block;color:#8B9BB0;font-size:12px;line-height:18px}
.pwa-grid{max-width:1180px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pwa-breakdown-list{display:grid;gap:8px}
.pwa-breakdown-list div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:36px;padding:8px 10px;border:1px solid #243041;border-radius:8px;background:#101821}
.pwa-breakdown-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#D6E0EC;font-size:13px;line-height:20px}
.pwa-breakdown-list b{color:#F8FBFF;font-size:13px}
.pwa-breakdown-list em{color:#8B9BB0;font-style:normal;font-size:12px}
.access-table{max-width:1180px;margin:0 auto;border:1px solid #243041;border-radius:8px;background:#141C26;overflow:auto}
.access-table table{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.access-table th{height:36px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#8B9BB0;
  font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.access-table td{height:48px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#E7EEF6;font-size:13px;line-height:20px}
.access-table th,.access-table td{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:1px}
.access-table th:first-child,.access-table td:first-child{position:sticky;left:0;z-index:2;background:#141C26}
.access-table th:last-child,.access-table td:last-child{position:sticky;right:0;z-index:2;background:#141C26}
.access-table th:first-child,.access-table th:last-child{z-index:3}
.access-table tr:hover td{background:rgba(255,255,255,.03)}
.access-table tr:last-child td{border-bottom:0}
.access-table strong{display:block;color:#F8FBFF;font-size:13px;font-weight:600}
.access-table small{display:block;color:#8B9BB0;font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.access-row-menu{position:relative}
.access-row-menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;
  border:1px solid #243041;border-radius:999px;background:#101821;color:#B8C5D6;font-size:12px;font-weight:600;cursor:pointer}
.access-row-menu summary::-webkit-details-marker{display:none}
.access-row-menu div{position:absolute;right:0;top:36px;z-index:100;min-width:160px;padding:6px;border:1px solid #243041;border-radius:8px;
  background:#0E151D;box-shadow:0 18px 50px -36px #000}
.access-row-menu button{display:block;width:100%;min-height:44px;border:0;border-radius:6px;background:transparent;color:#E7EEF6;text-align:left;
  padding:7px 9px;font:inherit;font-size:12px}
.access-row-menu button:hover{background:rgba(255,255,255,.05)}
.access-row-menu form{margin:0}
.access-create summary{cursor:pointer;color:#F8FBFF;font-weight:700}
.access-create form{display:grid;grid-template-columns:1fr 1fr 180px auto;gap:8px;align-items:end;margin-top:12px}
.access-create label{display:grid;gap:5px;color:#8B9BB0;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.access-create input,.access-create select{height:44px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:0 10px;font:inherit;font-size:13px}
.access-create input:focus,.access-create select:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
@media(max-width:760px){
  .support-case-table td[data-label="Case"]{grid-template-columns:1fr}
  .support-case-table td[data-label="Case"]::before{display:none}
  .support-case-table small{max-width:100%;white-space:normal}
  .support-case-table td[data-label="Open"]{grid-template-columns:1fr}
  .support-case-table td[data-label="Open"]::before{display:none}
  .support-case-drawer{position:static;width:auto;max-width:none;max-height:none;margin:12px 0 0;transform:none;opacity:1;
    pointer-events:auto;display:none;box-shadow:none}
  .support-case-drawer.is-open{display:block}
  .support-case-drawer-head{flex-direction:column}
  .support-actions form{flex-direction:column}
  .pwa-filter-row,.pwa-rate-row,.pwa-grid{grid-template-columns:1fr}
  .access-table{border:0;background:transparent;overflow:visible}
  .access-table table,.access-table tbody,.access-table tr,.access-table td{display:block;width:100%;min-width:0}
  .access-table thead{display:none}
  .access-table tbody{display:grid;gap:10px}
  .access-table tr{padding:12px;border:1px solid #243041;border-radius:10px;background:#141C26}
  .access-table td{height:auto;padding:7px 0;border:0;max-width:none;white-space:normal}
  .access-table th:first-child,.access-table td:first-child,
  .access-table th:last-child,.access-table td:last-child{position:relative;left:auto;right:auto;z-index:auto;background:transparent}
  .access-table td[data-label]{display:grid;grid-template-columns:94px minmax(0,1fr);gap:10px;align-items:start}
  .access-table td[data-label]::before{content:attr(data-label);color:#6F8198;font-size:10px;line-height:18px;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .access-table td[data-label="Name"],.access-table td[data-label="Actions"]{grid-template-columns:1fr}
  .access-table td[data-label="Name"]::before,.access-table td[data-label="Actions"]::before{display:none}
  .access-row-menu summary{margin-left:auto}
  .access-row-menu div{position:static;margin-top:8px;box-shadow:none}
  .access-create form{grid-template-columns:1fr}
}
.campaign-review-table{max-width:1180px;margin:0 auto;border:1px solid #243041;border-radius:8px;background:#141C26;overflow:auto}
.campaign-review-table table{width:100%;min-width:1040px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.campaign-review-table th{height:36px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#8B9BB0;
  font-size:11px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.campaign-review-table td{height:48px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#E7EEF6;font-size:13px;line-height:20px}
.campaign-review-table th,.campaign-review-table td{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:1px}
.campaign-review-table th:first-child,.campaign-review-table td:first-child{position:sticky;left:0;z-index:2;background:#141C26}
.campaign-review-table th:last-child,.campaign-review-table td:last-child{position:sticky;right:0;z-index:2;background:#141C26}
.campaign-review-table th:first-child,.campaign-review-table th:last-child{z-index:3}
.campaign-review-table tr:hover td{background:rgba(255,255,255,.03)}
.campaign-review-table tr:last-child td{border-bottom:0}
.campaign-review-table a{color:var(--t-green-soft);text-decoration:none;font-weight:500}
.campaign-review-table strong{color:#F8FBFF}
.campaign-review-table small{display:block;color:#8B9BB0;font-size:12px;line-height:16px}
.campaign-review-drawer{position:fixed;z-index:66;right:16px;top:72px;width:420px;max-width:calc(100vw - var(--console-nav-width) - 48px);
  max-height:calc(100vh - 88px);overflow:auto;padding:14px;border:1px solid #243041;border-radius:10px;
  background:rgba(14,21,29,.76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 70px -42px #000;
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.campaign-review-drawer.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.campaign-review-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.campaign-review-drawer-head strong{display:block;color:#F8FBFF}
.campaign-review-drawer-head span{display:block;color:#8B9BB0;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.campaign-review-drawer-head a{white-space:nowrap}
.campaign-review-drawer-head button{width:30px;height:30px;border:1px solid #243041;border-radius:8px;background:#101821;color:#B8C5D6;font:inherit}
.campaign-quote{padding:10px;border:1px solid #243041;border-radius:8px;background:#101821}
.campaign-quote span{display:block;margin-bottom:6px;color:#F0BF67;font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.campaign-quote p{margin:0;color:#E7EEF6;font-size:13px;line-height:20px}
.campaign-quote.large{margin-top:8px;padding:14px}
.campaign-quote.large p{font-size:14px;line-height:22px}
.campaign-action-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.campaign-action-grid.inline{display:flex;flex-wrap:wrap}
.campaign-action-grid button{height:34px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;font:inherit;font-weight:500}
.campaign-action-grid button:first-child{background:var(--t-brand);border-color:var(--t-brand);color:#06120C}
.campaign-action-grid button:hover{border-color:var(--t-brand);color:var(--t-green-soft)}
.campaign-action-grid a{justify-content:center;text-align:center}
.campaign-copy-preview{margin-top:12px;border:1px solid #243041;border-radius:8px;background:#101821}
.campaign-copy-preview summary{padding:10px 12px;color:#B8C5D6;cursor:pointer;font-weight:600}
.campaign-copy-preview p{margin:0;padding:0 12px 12px;color:#8B9BB0;line-height:22px}
.console-muted{color:#8B9BB0;font-size:12px}
.circle-ops-summary{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(260px,1fr) auto;gap:16px;align-items:center;padding:16px}
.circle-money{display:grid;gap:6px}
.circle-money strong{color:#F8FBFF;font-size:1.75rem;font-variant-numeric:tabular-nums}
.circle-money small{color:#8B9BB0}
.seat-meter{display:grid;gap:8px}
.seat-meter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8B9BB0;font-size:.84rem}
.seat-meter-head b.ok{color:#56DDBA}.seat-meter-head b.warn{color:#F0BF67}
.seat-ticks{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.seat-ticks span{height:8px;border-radius:99px;background:#263344}
.seat-ticks span.filled{background:#2EC9A0}
.ops-chip-stack{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.circle-ops-tabs{max-width:1180px;margin:0 auto 12px;display:flex;gap:6px;overflow:auto}
.circle-ops-tabs a{min-height:34px;padding:7px 12px;border:1px solid #243244;border-radius:999px;background:#101821;
  color:#B8C5D6;text-decoration:none;font-size:.84rem;font-weight:700;white-space:nowrap}
@media(max-width:768px){
  .circle-ops-tabs{gap:5px}
  .circle-ops-tabs a{min-height:32px;padding:6px 10px;font-size:12px}
}
.console-alert{padding:12px 14px}
.console-alert.warn{border-color:rgba(232,168,58,.32);background:rgba(232,168,58,.08)}
.console-alert strong{color:#F0BF67}.console-alert p{margin:4px 0 0;color:#B8C5D6}
.console-roster-table{display:grid;border:1px solid #243244;border-radius:8px;overflow:hidden}
.console-roster-head,.console-roster-row{display:grid;grid-template-columns:minmax(180px,1.25fr) minmax(150px,1fr) .6fr .75fr 1fr .8fr;
  gap:10px;align-items:center}
.console-roster-head{padding:10px 12px;background:#101821;color:#8B9BB0;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.console-roster-row{padding:12px;border-top:1px solid #243244}
.console-roster-row.receiver{background:rgba(59,130,246,.08)}
.console-roster-row strong{display:block;color:#F8FBFF}
.console-roster-row small{display:block;color:#8B9BB0;margin-top:2px}
.deep-link{color:var(--t-green-soft);text-decoration:none;font-weight:700}
.deep-link:hover{text-decoration:underline}
.confirmation-pair{display:flex;gap:5px;flex-wrap:wrap}
.confirmation-pair span{padding:3px 7px;border-radius:999px;background:#263344;color:#8B9BB0;font-size:.74rem;font-weight:800}
.confirmation-pair span.ok{background:rgba(46,201,160,.12);color:#56DDBA}
.confirmation-pair span.wait{background:rgba(232,168,58,.11);color:#F0BF67}
.confirmation-pair span.info{background:rgba(59,130,246,.1);color:#AFCBFF}
.console-mini-button{border:1px solid #2A394B;border-radius:999px;background:#101821;color:#E7EEF6;padding:6px 10px;font:inherit;font-size:.78rem;font-weight:750;cursor:pointer}
.campaign-action-grid form{margin:0}
.console-form-grid{display:grid;grid-template-columns:minmax(180px,1fr) 160px minmax(180px,1fr) auto;gap:10px;align-items:end}
.console-form-grid label{display:grid;gap:6px;color:#8B9BB0;font-size:11px;line-height:16px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.console-form-grid input,.console-form-grid select{min-height:38px;border:1px solid #243041;border-radius:8px;background:#141C26;color:#E7EEF6;padding:0 10px;font:inherit;font-size:13px}
.console-form-grid input[type=file]{padding:8px 10px}
.console-form-grid input:focus,.console-form-grid select:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.console-form-grid p{grid-column:1/-1;margin:0}
.console-textarea{width:100%;min-height:96px;margin:10px 0;border:1px solid #243041;border-radius:8px;background:#101821;color:#E7EEF6;padding:10px;font:inherit;font-size:13px;line-height:20px}
.console-textarea:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.pulse-list{display:grid;gap:6px}
.pulse-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-inset)}
.pulse-row>span:first-child{width:8px;height:8px;border-radius:999px;background:var(--t-muted)}
.pulse-row.ok>span:first-child{background:#2EC9A0}.pulse-row.warn>span:first-child{background:#E8A83A}.pulse-row.info>span:first-child{background:#7BA7FF}
.pulse-row p{margin:0;color:var(--t-ink)}.pulse-row small{color:var(--t-muted)}
.pulse-link{color:var(--t-brand-deep);text-decoration:none;font-size:.78rem;font-weight:800;white-space:nowrap}
.pulse-link:hover{text-decoration:underline}
.rounds-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rounds-strip div{padding:12px;border:1px solid #243244;border-radius:8px;background:#101821}
.rounds-strip span{display:block;color:#8B9BB0;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.rounds-strip strong{display:block;margin-top:5px;color:#F8FBFF;font-variant-numeric:tabular-nums}
.platform-actions summary{cursor:pointer;color:#F8FBFF;font-weight:760}
.platform-actions p{color:#8B9BB0}
.console-workbench .workspace-menu summary{background:#101821;color:#E7EEF6;border:1px solid #243244}
@media(max-width:768px){
  .console-workbench{padding:72px 16px 16px}
  .console-sidebar{position:fixed;inset:0 auto 0 0;width:220px;height:auto;flex-direction:column;align-items:stretch;gap:18px;overflow:auto;
    transform:translateX(-100%);transition:transform .18s ease}
  html.console-nav-open .console-sidebar{transform:translateX(0)}
  .console-brand{min-width:0}
  .console-brand small,.console-sidebar-footer{display:block}
  .console-nav{display:grid;gap:4px;min-width:0}
  .console-nav a{min-width:0}
  .console-nav a.active::before{display:grid}
  .console-nav-resizer{display:none}
  .console-nav-toggle{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #243041;border-radius:8px;
    background:#101821;color:#E7EEF6;font:inherit;font-weight:700}
  .console-nav-scrim{position:fixed;z-index:68;inset:0;border:0;background:rgba(0,0,0,.48)}
  html.console-nav-open .console-nav-scrim{display:block}
  .console-globalbar{top:0;left:0;height:56px;padding:8px 16px;gap:8px}
  .console-search{min-width:0}
  .console-global-actions>button{display:none}
  .console-global-actions{gap:6px}
  .console-review-indicator{padding:6px 8px;gap:6px}
  .console-review-indicator em{display:none}
  .console-form-grid{grid-template-columns:1fr}
  .console-review-indicator em{display:inline;white-space:nowrap}
  .console-operator-menu summary b{display:none}
  .console-operator-menu summary{width:40px;padding:6px;justify-content:center}
  .console-workbench-top,.circle-ops-summary{grid-template-columns:1fr}
  .console-kpi-row,.triage-board,.rounds-strip{grid-template-columns:1fr 1fr}
  .pulse-row{grid-template-columns:8px minmax(0,1fr) auto}
  .pulse-link{grid-column:2 / -1;justify-self:start}
  .console-roster-head{display:none}
  .console-roster-row{grid-template-columns:1fr;gap:8px}
}
@media(max-width:560px){.console-kpi-row,.triage-board,.rounds-strip{grid-template-columns:1fr}}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr);background:#0B0F17;color:#ECEFF3}
.admin-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:16px;padding:20px 14px;
  border-right:1px solid rgba(255,255,255,.08);background:#111827}
.admin-brand{display:flex;align-items:center;gap:10px;color:#F7F8FA;text-decoration:none;padding:4px 8px 12px}
.brand-mark{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#F7F8FA;color:#111318;font-weight:800}
.admin-nav,.admin-sidebar-section{display:grid;gap:6px}
.admin-nav a,.admin-sidebar-section a,.admin-sidebar-bottom a,.admin-sidebar-bottom button{display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-height:38px;padding:8px 10px;border-radius:12px;color:#AAB4C3;text-decoration:none;background:transparent;border:0;
  font:inherit;font-size:.94rem;font-weight:620;text-align:left;cursor:pointer}
.admin-nav a:hover,.admin-sidebar-section a:hover,.admin-sidebar-bottom a:hover,.admin-sidebar-bottom button:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-nav a.active{background:#232B38;color:#fff}
.admin-nav b{min-width:22px;padding:2px 7px;border-radius:999px;background:#2E3747;color:#E6EBF3;font-size:.72rem;text-align:center}
.admin-sidebar-section{border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.admin-sidebar-section p{margin:0 0 2px 11px;color:#737F90;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.admin-sidebar-bottom{margin-top:auto;display:grid;gap:4px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.admin-sidebar-bottom form{margin:0}
.admin-main{min-width:0;background:#F4F6F8;color:#101828}
.admin-commandbar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,560px) auto;
  gap:18px;align-items:center;padding:17px 30px;border-bottom:1px solid rgba(18,24,32,.08);
  background:rgba(244,246,248,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.admin-commandbar h1{margin:0;font-size:1.4rem;font-weight:760;letter-spacing:0;color:#101828}
.admin-commandbar .eyebrow{color:#7B8492}
.admin-search{display:flex;align-items:center;gap:9px;min-height:46px;padding:0 15px;border:1px solid #D9E1EC;border-radius:999px;background:#fff;color:#8A929E;
  box-shadow:0 10px 28px -26px rgba(15,23,42,.5)}
.admin-search input{width:100%;border:0;outline:0;background:transparent;font:inherit;color:#1E232B}
.admin-command-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.admin-command-actions .system-light{text-decoration:none}
.admin-profile-menu{position:relative}
.admin-profile-menu summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;border:1px solid #D9E1EC;
  border-radius:999px;background:#fff;padding:5px 10px 5px 5px;font-weight:700;color:#101828}
.admin-profile-menu summary::-webkit-details-marker{display:none}
.profile-avatar{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:#111827;color:#fff;font-size:.72rem;font-weight:800}
.profile-panel{position:absolute;right:0;top:calc(100% + 8px);width:210px;display:grid;gap:4px;padding:8px;border:1px solid #DDE1E7;
  border-radius:14px;background:#fff;box-shadow:0 18px 40px -24px rgba(16,24,40,.45)}
.profile-panel a,.profile-panel button{display:block;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:#1E232B;
  text-align:left;text-decoration:none;font:inherit;font-weight:600;cursor:pointer}
.profile-panel a:hover,.profile-panel button:hover{background:#F2F4F7}
.profile-panel form{margin:0}
.admin-canvas{max-width:1120px;margin:0 auto;padding:24px 30px 36px}
.admin-shell .card{box-shadow:0 20px 50px -42px rgba(15,23,42,.45);border-color:#E1E7EF}
.admin-shell .section-head h3{font-size:1.01rem;font-weight:760;color:#101828}
.admin-shell .section-head p{font-size:.86rem;color:#667085}
.app-hero{background:
  linear-gradient(135deg, rgba(176,82,26,.12), rgba(255,255,255,.88) 42%, rgba(46,125,91,.08));
  border-color:rgba(58,42,30,.14);box-shadow:var(--shadow-lg)}
.app-hero h2{font-size:1.55rem}
.app-hero p{margin:0}
.app-hero .hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.metric{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px;min-width:0}
.metric strong{display:block;font-family:var(--sans);font-size:1.45rem;line-height:1.05;font-weight:700}
.metric span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.ops-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ops-action{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:inherit;text-decoration:none;background:linear-gradient(180deg,#fff,#FEFCFA)}
.ops-action:hover{border-color:rgba(176,82,26,.38);box-shadow:var(--shadow)}
.ops-action strong{display:block}
.ops-action span{color:var(--muted);font-size:.88rem}
.ops-action .arrow{color:var(--brand-ink);font-weight:700}
.ops-action.priority{background:var(--brand-soft);border-color:rgba(176,82,26,.28)}
.topbar-signout{width:auto;padding:6px 10px;margin:0}
.admin-overview-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin:0 0 12px;padding:18px 20px;border:1px solid rgba(58,42,30,.13);
  border-radius:var(--radius);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(251,244,237,.72) 54%,rgba(238,247,242,.74));
  box-shadow:var(--shadow)}
.admin-overview-hero h2{margin:2px 0 4px;font-size:1.55rem;font-weight:650;letter-spacing:0}
.admin-overview-hero p{margin:0;color:var(--muted);font-size:.98rem}
.admin-state-stack{display:flex;flex-direction:column;align-items:flex-end;gap:7px;white-space:nowrap}
.system-light{display:inline-flex;align-items:center;gap:7px;color:#2B624B;font-weight:650;font-size:.88rem}
.system-light>span{width:8px;height:8px;border-radius:999px;background:var(--t-confirmed);box-shadow:0 0 0 4px rgba(46,125,91,.12)}
.system-light.warn{color:var(--brand-ink)}
.system-light.warn>span{background:var(--brand-ink);box-shadow:0 0 0 4px rgba(176,82,26,.13)}
.quiet-role{color:#8A7F73;font-weight:650;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.admin-pulse-grid{display:grid;grid-template-columns:minmax(112px,.7fr) minmax(112px,.7fr) minmax(230px,1.45fr);
  gap:12px;margin:0 0 16px}
.pulse-count,.triage-pulse{border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.9);
  padding:13px 14px;min-width:0}
.pulse-count strong,.triage-pulse strong{display:block;font-family:var(--sans);font-size:1.62rem;line-height:1.02;font-weight:760;color:#101828}
.pulse-count span,.triage-pulse span{display:block;color:#667085;font-size:.83rem;margin-top:4px}
.triage-pulse{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;color:inherit;
  border-color:#E8D8CC;background:linear-gradient(135deg,#fff,rgba(255,247,237,.86));box-shadow:0 20px 50px -42px rgba(15,23,42,.45)}
.triage-pulse:hover{border-color:rgba(176,82,26,.45);transform:translateY(-1px)}
.triage-pulse .triage-label{margin:0 0 6px;color:var(--brand-ink);font-weight:750;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem}
.triage-pulse .arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#fff;color:var(--brand-ink);
  border:1px solid rgba(176,82,26,.18);font-weight:800}
.admin-queue,.admin-toolbox{padding:18px 22px}
.admin-workspaces,.admin-circle-table-card{padding:18px 22px}
.queue-list{display:grid;gap:0}
.queue-item,.all-clear{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:13px;
  padding:13px 0;border-top:1px solid #EEF2F6;color:inherit;text-decoration:none}
.queue-item:first-child{border-top:0}
.queue-item:hover .queue-action{background:var(--brand-soft);color:var(--brand-ink)}
.queue-dot{width:8px;height:8px;border-radius:999px;background:#C9C0B7;box-shadow:0 0 0 4px rgba(201,192,183,.14)}
.queue-dot.warn{background:var(--brand-ink);box-shadow:0 0 0 4px rgba(176,82,26,.13)}
.queue-dot.ok{background:var(--t-confirmed);box-shadow:0 0 0 4px rgba(46,125,91,.12)}
.queue-copy strong,.all-clear strong{display:block;font-size:.98rem;font-weight:650}
.queue-copy span,.all-clear span{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.queue-action{justify-self:end;border:1px solid var(--line);border-radius:999px;padding:6px 10px;
  color:var(--muted);font-weight:700;font-size:.78rem;background:#fff}
.all-clear{grid-template-columns:10px 1fr;padding-top:14px}
.toolbox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.toolbox-tile{display:grid;gap:2px;width:100%;min-height:70px;padding:12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:linear-gradient(180deg,#fff,#FEFCFA);color:inherit;text-align:left;text-decoration:none}
.toolbox-tile:hover{border-color:rgba(176,82,26,.34);box-shadow:var(--shadow);transform:translateY(-1px)}
.toolbox-tile span{color:#8A7F73;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.toolbox-tile strong{font-size:.96rem;font-weight:650}
button.toolbox-tile{font:inherit;cursor:pointer}
.workspace-grid{display:grid;grid-template-columns:1fr 1fr .85fr;gap:10px}
.workspace-card{display:grid;align-content:start;gap:7px;min-height:104px;padding:14px;border:1px solid #E1E7EF;
  border-radius:14px;background:#fff;color:inherit;text-decoration:none}
.workspace-card:hover{border-color:#CAD5E3;box-shadow:0 18px 40px -32px rgba(15,23,42,.5);transform:translateY(-1px)}
.workspace-card strong{font-size:1rem;font-weight:720;line-height:1.25;color:#101828}
.workspace-card>span:last-child{color:#667085;font-size:.84rem}
.workspace-cta{background:linear-gradient(135deg,#fff,rgba(251,226,208,.66));border-color:rgba(176,82,26,.22)}
.status-line{display:inline-flex;align-items:center;gap:7px;color:#7E746A;font-size:.82rem;font-weight:700}
.status-dot{width:8px;height:8px;border-radius:999px;background:#C9C0B7;box-shadow:0 0 0 4px rgba(201,192,183,.13);flex:0 0 auto}
.status-dot.live{background:var(--t-confirmed);box-shadow:0 0 0 4px rgba(46,125,91,.12)}
.status-dot.draft{background:#C68A1C;box-shadow:0 0 0 4px rgba(198,138,28,.13)}
.status-dot.warn{background:var(--brand-ink);box-shadow:0 0 0 4px rgba(176,82,26,.12)}
.status-dot.stuck{background:#B91C1C;box-shadow:0 0 0 4px rgba(185,28,28,.12)}
.admin-circle-table{display:grid;border:1px solid #E1E7EF;border-radius:14px;overflow:hidden;background:#fff}
.circle-table-head,.circle-table-row{display:grid;grid-template-columns:minmax(190px,1.8fr) .55fr 1.15fr .9fr 34px;
  gap:12px;align-items:center}
.circle-table-head{padding:10px 14px;background:#F8FAFC;color:#8A94A3;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--line)}
.circle-table-row{padding:13px 14px;color:inherit;text-decoration:none;border-top:1px solid #EEF2F6}
.circle-table-row:first-of-type{border-top:0}
.circle-table-row:hover{background:#F8FAFC}
.circle-table-row:hover .view-arrow{opacity:1;transform:translateX(0)}
.circle-table-name strong{display:block;font-size:.95rem;font-weight:720;color:#101828}
.circle-table-name small{display:block;color:#667085;font-size:.8rem;margin-top:2px}
.view-arrow{justify-self:end;color:var(--brand-ink);font-weight:800;opacity:.42;transform:translateX(-2px);transition:.16s ease}
.system-footer{display:flex;align-items:center;justify-content:center;gap:8px;color:#8A7F73;font-size:.83rem;margin:16px 0 4px}
.admin-shell .admin-pulse-grid{grid-template-columns:repeat(2,minmax(140px,.7fr)) minmax(300px,1.5fr);gap:12px}
.admin-shell .pulse-count,.admin-shell .triage-pulse{border-color:#E1E7EF;border-radius:18px;background:#fff;padding:17px}
.admin-shell .triage-pulse{background:linear-gradient(135deg,#fff,#FFF7ED);border-color:#F0D8C7}
.admin-shell .admin-queue,.admin-shell .admin-workspaces,.admin-shell .admin-circle-table-card{border-radius:20px;padding:20px 22px}
.admin-shell .workspace-card,.admin-shell .admin-circle-table{border-color:#E1E7EF;border-radius:16px}
.admin-shell .workspace-card{min-height:110px}
.admin-shell .system-footer{color:#667085}
.admin-list-disclosure{padding:0;margin-top:12px}
.admin-list-disclosure summary{padding:13px 16px}
.admin-list-disclosure .record-list,.admin-list-disclosure p.muted{padding:0 16px 14px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.section-head h2,.section-head h3{margin:0}
.section-head p{margin:2px 0 0;color:var(--muted)}
.record-list{display:grid;gap:0}
.record-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-top:1px solid var(--line);color:inherit;text-decoration:none}
.record-row:first-child{border-top:0}
.record-row:hover strong{color:var(--brand-ink)}
.record-title strong{display:block}
.record-title span,.record-title p{display:block;color:var(--muted);font-size:.9rem;margin:2px 0 0}
.record-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.table-actions{white-space:nowrap}
.circle-op-list{display:grid;gap:10px}
.circle-op-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px}
.circle-op-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.circle-op-main strong{display:block;font-size:1rem}
.circle-op-main span:not(.pill){display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
.circle-op-status{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.circle-op-money{display:grid;grid-template-columns:1.2fr 1fr repeat(3,.65fr);gap:1px;overflow:hidden;
  border:1px solid #F0F0F2;border-radius:12px;background:#F0F0F2;margin-top:12px}
.circle-op-money div{background:#FEFCFA;padding:10px;min-width:0}
.circle-op-money span{display:block;color:#8A8F98;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.circle-op-money strong{display:block;margin-top:2px;color:#1c1c1e;font-size:.95rem;font-weight:700;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums}
.circle-op-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}
.circle-op-actions .btn{width:auto;margin:0;padding:8px 12px;border-radius:999px;box-shadow:none}
.circle-op-empty{margin:10px 0 0}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--brand-ink);font-weight:700;text-decoration:none}
.backlink:hover{text-decoration:underline}
.access-list{display:grid;gap:0}
.access-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(130px,.6fr) minmax(160px,1fr) auto;
  gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.access-row:first-child{border-top:0}
.access-person{display:flex;align-items:center;gap:10px;min-width:0}
.access-person strong,.access-role strong{display:block}
.access-person span:not(.member-avatar),.access-role span{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.access-capabilities,.access-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.access-actions{justify-content:flex-end}
.access-actions form{margin:0}
.access-actions .btn{width:auto;margin:0;padding:7px 11px}
.access-create form{display:grid;gap:8px}
.data-actions{display:grid;grid-template-columns:1fr;gap:10px}
.danger-card{border-color:rgba(176,24,47,.22);background:linear-gradient(180deg,#fff,#FFF8F8)}
.danger-card .btn{background:var(--bad);box-shadow:none}

/* Minimal member experience */
.member-shell{display:grid;gap:14px}
.member-intro{padding:8px 0 4px}
.member-intro h2,.member-intro h1{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;font-size:2rem;line-height:1.1;margin:0;font-weight:700}
.member-intro p{margin:8px 0 0;color:var(--muted);max-width:34rem}
.member-intro .hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.next-action{background:var(--card);border:1px solid rgba(176,82,26,.24);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.next-action h3{font-family:var(--sans);font-size:1.25rem;margin:0 0 4px;font-weight:600}
.next-action p{margin:0;color:var(--muted)}
.next-action .btn{margin-top:14px}
.action-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.minimal-action{display:block;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:inherit;text-decoration:none;background:#fff}
.minimal-action:hover{border-color:rgba(176,82,26,.34);box-shadow:var(--shadow)}
.minimal-action strong{display:block}
.minimal-action span{display:block;color:var(--muted);font-size:.9rem;margin-top:3px}
.minimal-list{display:grid;gap:8px}
.minimal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:inherit;text-decoration:none}
.minimal-row:hover{border-color:rgba(176,82,26,.34);box-shadow:var(--shadow)}
.minimal-row strong{display:block}
.minimal-row span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
.member-circle-row{align-items:flex-start}
.member-circle-main{min-width:0}
.member-circle-main small{display:block;color:var(--t-muted);font-size:.82rem;margin-top:4px;overflow-wrap:anywhere}
.member-circle-state{display:flex!important;align-items:flex-end;flex-direction:column;gap:5px;text-align:right;flex:0 0 auto}
.member-circle-state small{color:var(--muted);font-size:.78rem;white-space:nowrap}
.trust-note,.compact-disclosure{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;background:#fff;
  color:var(--muted);font-size:.92rem;overflow:hidden}
.trust-note summary,.compact-disclosure summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  min-height:44px;padding:10px 14px;color:var(--ink);font-weight:650}
.trust-note summary::-webkit-details-marker,.compact-disclosure summary::-webkit-details-marker{display:none}
.trust-note summary::after,.compact-disclosure summary::after{content:"+";color:#9A9186;font-weight:700}
.trust-note[open] summary::after,.compact-disclosure[open] summary::after{content:"-"}
.trust-note[open]{padding-bottom:12px}
.trust-note[open] summary{margin-bottom:0}
.trust-note[open]::after{content:"";display:block}
.trust-note{line-height:1.45}
.trust-note:not([open]){color:var(--ink)}
.trust-note[open]{color:var(--muted);padding-left:14px;padding-right:14px}
.trust-note[open] summary{margin-left:-14px;margin-right:-14px}
.compact-disclosure .action-pair{padding:0 12px 12px}
.setup-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.setup-segment{height:7px;border-radius:999px;background:#E7DDD2}
.setup-segment.done{background:var(--ok)}
.member-wizard{display:grid;gap:16px}
.wizard-step{padding:0 0 16px;border-bottom:1px solid var(--line)}
.wizard-step:last-of-type{border-bottom:0;padding-bottom:0}
.wizard-step h3{font-family:var(--sans);font-size:1.08rem;margin:0 0 8px;font-weight:600}
.conversational-setup{padding:0;background:transparent;border:0}
.conversational-setup .member-wizard{gap:12px}
.chat-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start}
.chat-step.final{margin-top:4px}
.chat-avatar{width:34px;height:34px;border-radius:999px;background:var(--ios-blue);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.86rem;box-shadow:0 6px 14px rgba(20,126,251,.18)}
.chat-bubble{border:1px solid var(--line);border-radius:18px 18px 18px 6px;background:#fff;padding:13px 14px;
  box-shadow:var(--shadow)}
.chat-bubble span{display:block;margin-bottom:4px;color:var(--ios-blue);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.chat-bubble h3{font-family:var(--sans);font-size:1.05rem;line-height:1.25;margin:0;font-weight:600}
.chat-bubble p{margin:5px 0 0;color:var(--muted);font-size:.92rem}
.answer-panel{margin-left:44px;border:1px solid rgba(20,126,251,.14);border-radius:16px 16px 6px 16px;background:#F8FBFF;
  padding:14px;display:grid;gap:10px}
.answer-panel .choice-card{background:#fff}
.answer-panel .choice-card:hover{border-color:rgba(20,126,251,.28)}
.answer-panel .choice-card:has(input:checked){border-color:rgba(20,126,251,.55);background:#fff}
.answer-panel .choice-card input{accent-color:var(--ios-blue)}
.choice-card strong{font-size:1rem}
.member-members{display:grid;gap:8px}
/* `display:flex` and `justify-content` were dead here: a later unscoped
   `.member-chip-row{display:grid}` at equal specificity wins, measured on the
   built page as a three-column grid. The padding is the live half. */
.member-chip-row{align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.member-chip-row:last-child{border-bottom:0}
.circle-scope{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 2px}
.circle-scope strong{display:block;font-size:.95rem}
.circle-scope span{display:block;color:var(--muted);font-size:.84rem}
.circle-focus{background:linear-gradient(135deg,#fff,rgba(246,225,210,.56));border:1px solid rgba(58,42,30,.14);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.circle-focus h2{font-family:var(--sans);font-size:1.8rem;line-height:1.1;margin:0;font-weight:700}
.circle-focus p{margin:8px 0 0;color:var(--muted)}
.circle-focus .hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.setup-nudge{background:#fff;border:1px solid rgba(176,82,26,.18);border-radius:var(--radius);
  padding:0;box-shadow:none;overflow:hidden}
.setup-nudge>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:54px;padding:14px 16px;color:var(--ink);font-weight:700}
.setup-nudge>summary::-webkit-details-marker{display:none}
.setup-nudge>summary::after{content:"+";color:var(--t-accent);font-weight:800}
.setup-nudge[open]>summary::after{content:"-"}
.setup-nudge>summary small{color:var(--brand-ink);font-size:.82rem;font-weight:700}
.setup-nudge[open]{padding-bottom:16px;background:#FFF7F1}
.setup-nudge[open]>*:not(summary){margin-left:16px;margin-right:16px}
.setup-nudge h3{font-family:var(--sans);font-size:1.2rem;margin:0 0 4px;font-weight:600}
.setup-nudge p{margin:0;color:var(--muted)}
.setup-nudge .setup-bar{margin:12px 0 10px}
.setup-count{display:inline-block;margin-top:8px;color:var(--brand-ink);font-size:.86rem;font-weight:600}
.round-start-form{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px auto;gap:10px;align-items:end}
.round-start-form label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.round-start-form select,.round-start-form input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:#fff;font:inherit;color:var(--ink)}
.round-start-form p{margin:6px 0 0;color:var(--muted);font-size:.84rem}
.round-start-form .btn{margin:0;width:auto;border-radius:999px;padding:11px 18px;background:var(--ios-blue);box-shadow:none}
.receiver-order-list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  padding-top:4px}
.receiver-order-list>label{grid-column:1 / -1}
.order-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center}
.order-row span{width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:.82rem}
.order-row select{padding:8px 10px}
.round-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow)}
.round-panel h2{font-family:var(--sans);font-size:1.35rem;margin:0;font-weight:700}
.round-panel p{margin:6px 0 0;color:var(--muted)}
.round-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.round-bucket{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:#fff}
.round-bucket strong{display:block;font-family:var(--sans);font-size:1.08rem;font-weight:600}
.round-bucket span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.progress-track{height:8px;background:#E7DDD2;border-radius:999px;overflow:hidden;margin:12px 0}
.progress-fill{height:100%;background:var(--ok);border-radius:999px}
.timeline-list{display:grid;gap:8px;margin-top:12px}
.timeline-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff}
.timeline-dot{width:24px;height:24px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:0 0 auto}
.timeline-item.ok .timeline-dot{background:#E7F4EE;color:var(--ok)}
.timeline-item.warn .timeline-dot{background:#FBF2DC;color:var(--warn)}
.timeline-item.info .timeline-dot{background:var(--ios-blue-soft);color:var(--ios-blue)}
.payment-sequence{display:grid;gap:10px;margin-top:12px}
.sequence-step{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:#fff}
.sequence-step strong{display:block}
.sequence-step p{margin:4px 0 0;color:var(--muted)}
.payment-setup-intro .backlink{margin-bottom:12px}
.payment-current{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:14px;
  /* Both sides were shrinkable, so a long pill — "Save reusable receiving
     details" — took its width out of the sentence, leaving the text 173px and
     a heading that broke across two lines mid-phrase. The words get the room
     and the control keeps its size; if they cannot both fit, the control
     drops to its own line rather than squeezing. */
  flex-wrap:wrap}
.payment-current > :first-child{flex:1 1 240px;min-width:0}
.payment-current > :not(:first-child){flex:0 0 auto}
.payment-current strong{display:block;font-size:1rem}
.payment-current p{margin:3px 0 0;color:var(--muted);font-size:.9rem}
.payment-current-kicker{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;
  font-weight:700;color:var(--muted);margin-bottom:4px}
.payment-setup-shell{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px;
  box-shadow:var(--shadow)}
.payment-setup-form{display:grid;gap:16px}
.payment-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.payment-section-head h3{font-family:var(--sans);font-size:1.08rem;margin:0;font-weight:650}
.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.provider-card{display:grid;gap:3px;margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.provider-card input{position:absolute;opacity:0;pointer-events:none}
.provider-card span{font-weight:700;color:var(--ink)}
.provider-card small{color:var(--muted);font-size:.83rem;line-height:1.35}
.provider-card:has(input:checked){border-color:#D6E6FF;background:#F8FBFF;box-shadow:inset 0 0 0 1px rgba(20,126,251,.16)}
.payment-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}
.payment-detail-grid label{margin-top:0}
.payment-detail-grid p{margin:6px 0 0;color:var(--muted);font-size:.84rem}
.payment-preview{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;
  border:1px solid #D6E6FF;border-radius:14px;background:#F8FBFF}
.payment-preview strong,.payment-preview h3{display:block;margin:0;font-size:1rem;font-weight:700}
.payment-preview p{margin:3px 0 0;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.payment-result-card{padding:14px;border:1px solid rgba(154,106,0,.22);border-radius:var(--radius);
  background:#FFFCF4;margin-top:14px}
.payment-result-card h3{font-size:1rem;margin:8px 0 4px}
.result-preview{margin-top:10px;align-items:flex-start;flex-direction:column}
.result-preview .pay-fields{width:100%}
.circle-round{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.circle-round-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.circle-round-head h3{font-family:var(--sans);font-size:1.16rem;margin:0;font-weight:600}
.circle-round-head p{margin:3px 0 0;color:var(--muted)}
.round-progress-text{font-size:.86rem;color:var(--muted);white-space:nowrap}
.roster-grid{display:grid;gap:6px;margin-top:12px}
.roster-entry{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.roster-entry.you{border-left:4px solid var(--brand-strong);background:#FEFCFA}
.roster-entry strong{display:block}
.roster-entry small{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.status-dot{width:10px;height:10px;border-radius:999px;background:#B8AEA3;box-shadow:0 0 0 3px rgba(184,174,163,.16)}
.status-dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(46,125,91,.14)}
.status-dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(154,106,0,.14)}
.status-dot.receiving{background:#2C6FA3;box-shadow:0 0 0 3px rgba(44,111,163,.14)}
.status-dot.pending{background:#B8AEA3}
.personal-action-card{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;background:#FEFCFA;margin-top:12px}
.personal-action-card{border-color:rgba(176,82,26,.22)}
.personal-action-card .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;color:var(--muted);margin-bottom:4px}
.pay-card{display:grid;gap:12px;border:1px solid rgba(46,125,91,.22);border-radius:var(--radius-sm);
  padding:14px;background:#F8FCFA;margin-top:12px}
.pay-card h3{font-family:var(--sans);font-size:1.1rem;margin:0;font-weight:600}
.pay-card p{margin:4px 0 0;color:var(--muted)}
.payment-wait-card{border-color:rgba(154,106,0,.22);background:#FFFCF4;grid-template-columns:minmax(0,1fr) auto;
  align-items:center}
.pay-fields{display:grid;gap:8px}
.pay-fields div{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff}
.pay-fields span{color:var(--muted);font-size:.86rem}
.pay-fields strong{font-family:var(--mono);font-size:.92rem;overflow-wrap:anywhere;text-align:right}

/* Admin command center */
.command-center{display:grid;gap:14px}
.cockpit-shell{max-width:600px;margin:0 auto;background:#fff;border:1px solid rgba(28,28,30,.06);
  box-shadow:0 18px 60px rgba(28,28,30,.08);gap:0}
.cockpit-shell .circle-workspace-bar{min-height:58px;padding:0 20px;background:#fff;border:0;border-bottom:1px solid #F0F0F2;
  border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.cockpit-shell .workspace-back{width:28px;height:28px}
.cockpit-shell .workspace-title strong{font-size:1rem}
.cockpit-shell .workspace-round-badge{padding:0;background:transparent;color:var(--t-muted);font-size:.88rem;font-weight:500}
.cockpit-shell .workspace-actions{gap:12px}
.cockpit-shell .pulse-icon{font-size:1.2rem}
.circle-workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:72px;padding:12px 18px;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.72);border-radius:999px;
  box-shadow:0 2px 20px rgba(58,42,30,.06)}
.workspace-back{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  color:var(--ios-blue);text-decoration:none;border:1px solid transparent;font-weight:600}
.workspace-back:hover{border-color:rgba(20,126,251,.16);background:var(--ios-blue-soft)}
.workspace-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.workspace-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.08rem;font-weight:700}
.workspace-title-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1}
.workspace-title-stack strong{max-width:100%}
.identity-local-pill{
  display:inline-flex;align-items:center;max-width:100%;min-height:22px;padding:2px 8px;
  border:1px solid rgba(42,165,106,.24);border-radius:999px;background:rgba(42,165,106,.08);
  color:var(--t-brand-deep);font-size:12px;line-height:16px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.workspace-round-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:999px;
  background:#E7F4EE;color:var(--ok);font-size:.7rem;font-weight:600;white-space:nowrap}
.workspace-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.workspace-actions>a:not(.btn){color:var(--ios-blue);font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:6px 8px;border-radius:999px}
.workspace-actions>a:not(.btn):hover{background:var(--ios-blue-soft);text-decoration:none}
.workspace-new{width:auto;margin:0;padding:8px 14px 8px 10px;white-space:nowrap;border:1px solid rgba(20,126,251,.18);
  border-radius:999px;background:var(--ios-blue);color:#fff;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 4px 12px rgba(20,126,251,.24), inset 0 1px 0 rgba(255,255,255,.24);
  cursor:pointer;text-decoration:none;font-size:.86rem;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
.workspace-new span{width:18px;height:18px;border-radius:999px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-weight:700;line-height:1}
.workspace-new:hover{transform:scale(1.03);box-shadow:0 6px 16px rgba(20,126,251,.3), inset 0 1px 0 rgba(255,255,255,.24)}
.workspace-new:active{transform:scale(.94)}
.workspace-menu{position:relative;flex:0 0 auto}
.workspace-menu summary{list-style:none;width:40px;height:40px;border:1px solid transparent;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;color:var(--t-ink);font-size:1.4rem;line-height:1;background:transparent}
.workspace-menu summary::-webkit-details-marker{display:none}
.workspace-menu[open] summary{background:#F4F6F8;border-color:#E3E7ED}
.workspace-menu-panel{position:absolute;right:0;top:50px;width:min(240px,calc(100vw - 32px));z-index:110;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.78);border-radius:18px;box-shadow:0 16px 44px rgba(58,42,30,.16);
  padding:8px;display:grid;gap:2px}
.workspace-menu-panel span{display:block;padding:10px 10px 4px;color:var(--t-muted);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.workspace-menu-panel a,.workspace-menu-panel button{min-height:44px;border:0;background:transparent;border-radius:12px;
  color:var(--t-ink);text-decoration:none;font:inherit;font-size:.94rem;font-weight:600;text-align:left;padding:11px 12px;cursor:pointer}
.workspace-menu-panel a:hover,.workspace-menu-panel button:hover{background:#F4F8FF;color:var(--ios-blue)}
.workspace-menu-panel label{display:grid;gap:6px;padding:8px 10px;color:#6D6258;font-size:.76rem;font-weight:700}
.workspace-menu-panel select{min-height:38px;border:1px solid #E1E4E8;border-radius:10px;background:#fff;
  color:var(--t-ink);font:inherit;font-size:.9rem;padding:7px 9px}
.workspace-menu-panel .checkbox-line{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0}
.workspace-menu-panel .checkbox-line input{width:16px;height:16px}
.inline-member-menu summary{width:auto;height:34px;border-color:#E3E7ED;border-radius:999px;
  padding:0 12px;font-size:.82rem;font-weight:700;color:#B84E12;background:#F9E7DC}
.inline-member-menu[open] summary{background:#F4F6F8;color:var(--t-ink)}
.settings-kicker{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:750;color:var(--t-muted)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;border:1px solid #EEF0F3;border-radius:14px;
  overflow:hidden;background:#EEF0F3}
.settings-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.settings-actions a{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid #E3E7ED;border-radius:999px;
  color:var(--ios-blue);background:#fff;text-decoration:none;font-size:.82rem;font-weight:650}
.settings-actions a:hover{background:#F4F8FF;border-color:#D6E6FF}
.settings-hub{max-width:760px;margin:0 auto;padding:16px 0 36px}
.console-workbench .settings-hub{max-width:1180px;padding:0}
.settings-hero{margin:0 0 16px;padding:26px 28px;border:1px solid #E1E7EF;border-radius:26px;background:rgba(255,255,255,.9);
  box-shadow:0 28px 80px -58px rgba(15,23,42,.45)}
.settings-hero h2{margin:0 0 8px;color:#101828;font-size:2rem;line-height:1.05;font-weight:780}
.settings-hero p:last-child{max-width:52ch;margin:0;color:#667085}
.settings-hub>.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;border-radius:0;background:transparent;overflow:visible}
.settings-card{display:grid;align-content:start;gap:8px;min-height:156px;padding:18px;border:1px solid #E1E7EF;border-radius:20px;
  background:#fff;color:inherit;text-decoration:none;box-shadow:0 20px 50px -42px rgba(15,23,42,.45)}
.console-workbench .settings-card{border-color:#243244;background:#141C26;box-shadow:none}
.settings-card:hover{border-color:#CAD5E3;transform:translateY(-1px)}
.settings-card strong{font-size:1.08rem;color:#101828}
.console-workbench .settings-card strong{color:#F8FBFF}
.settings-card p{margin:0;color:#667085;line-height:1.45}
.console-workbench .settings-card p{color:#8B9BB0}
.settings-card .pill{justify-self:start;margin-top:auto}
.settings-note{margin-top:12px;padding:16px 18px;border:1px solid #E1E7EF;border-radius:20px;background:#fff;color:#667085}
.settings-note strong{display:block;color:#101828;margin-bottom:4px}
.console-workbench .settings-note strong{color:#F8FBFF}
.settings-note p{margin:0}
@media(max-width:640px){.settings-hub>.settings-grid{grid-template-columns:1fr}.settings-hero{border-radius:20px;padding:22px}}
.circle-sheet{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent}
.circle-sheet::backdrop{background:rgba(58,42,30,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.circle-sheet-panel{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);
  padding:18px 16px 22px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.75);
  border-radius:22px 22px 0 0;box-shadow:0 -18px 60px -28px rgba(58,42,30,.55);
  animation:sheet-rise .42s cubic-bezier(.2,1.35,.28,1);margin:0}
@keyframes sheet-rise{0%{transform:translateX(-50%) translateY(105%) scale(.98)}70%{transform:translateX(-50%) translateY(-10px) scale(1)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
.sheet-grabber{display:block;width:42px;height:5px;border-radius:999px;background:#D6D0C9;margin:0 auto 14px}
.sheet-head{padding-right:36px}
.sheet-head h3{font-family:var(--sans);font-size:1.25rem;margin:0 0 8px;font-weight:700}
.sheet-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:999px;border:0;
  background:#EFEAE5;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer}
.sheet-create{transition:transform .14s ease,opacity .14s ease}
.sheet-create:disabled{cursor:not-allowed;opacity:.75}
.sheet-create-pressed{animation:sheet-button-pop .32s ease}
@keyframes sheet-button-pop{0%{transform:scale(1)}45%{transform:scale(.96)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .circle-sheet-panel,.sheet-create-pressed{animation:none}
}
.command-context{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px;background:#fff;border:1px solid rgba(58,42,30,.14);border-radius:var(--radius);
  box-shadow:var(--shadow-lg)}
.command-context h2{font-family:var(--sans);font-size:1.8rem;line-height:1.08;margin:0;font-weight:700}
.command-context .hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.context-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:8px}
.context-line strong{font-family:var(--sans);font-size:1.38rem;font-weight:700}
.context-line span{color:var(--muted);font-size:.92rem}
.money-cockpit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;
  padding:34px 20px 24px;background:#fff;border:1px solid rgba(58,42,30,.10);border-radius:0;
  box-shadow:none;border-top:0;border-left:0;border-right:0}
.cockpit-shell .money-cockpit{padding:36px 20px 26px;border-bottom:1px solid #F0F0F2}
.money-primary{min-height:0;border-radius:0;padding:0;background:transparent;border:0;display:block}
.money-primary h2{font-family:var(--sans);font-size:2.45rem;line-height:1;margin:0;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--t-ink);white-space:nowrap}
.cockpit-shell .money-primary h2{font-size:2.25rem;letter-spacing:0}
.money-primary p{margin:8px 0 0;color:var(--muted);font-weight:500}
.money-primary .pill{align-self:flex-start;margin-top:12px}
.money-rail{display:grid;gap:2px;text-align:right;min-width:130px}
.money-rail div{padding:0;border:0;border-radius:0;background:transparent}
.money-rail span{display:block;color:var(--muted);font-size:.86rem;font-weight:600;text-transform:none;letter-spacing:0}
.money-rail strong{display:block;margin:0;color:var(--ios-blue);font-size:.94rem;font-weight:600;overflow-wrap:anywhere}
.cockpit-shell .money-rail strong{font-size:.95rem}
.money-movement-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 20px 2px;
  border:1px solid #F0F0F2;border-radius:16px;overflow:hidden;background:#fff}
.movement-item{padding:11px 12px;border-left:1px solid #F0F0F2;min-width:0}
.movement-item:first-child{border-left:0}
.movement-item span{display:block;color:var(--t-muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.movement-item strong{display:block;margin-top:2px;color:var(--t-ink);font-size:1.28rem;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums}
.movement-item small{display:block;margin-top:5px;color:var(--muted);font-size:.75rem;line-height:1.25}
.movement-item.ok strong{color:var(--ok)}
.movement-item.warn strong{color:var(--warn)}
.movement-item.info strong{color:var(--ios-blue)}
.receiver-setup-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 20px 2px;
  padding:13px 14px;border:1px solid rgba(154,106,0,.22);border-radius:16px;background:#FFFCF4}
.receiver-setup-banner>div{display:flex;align-items:flex-start;gap:10px;min-width:0}
.receiver-setup-banner strong{display:block;font-size:.98rem;font-weight:650;color:var(--t-ink)}
.receiver-setup-banner p{margin:2px 0 0;color:var(--muted);font-size:.88rem;line-height:1.4}
.receiver-setup-banner .btn{width:auto;margin:0;border-radius:999px;background:var(--ios-blue);box-shadow:none;padding:9px 14px;
  white-space:nowrap}
.receiver-setup-banner.for-you{border-color:#D6E6FF;background:var(--t-ink)}
.payment-review-card{margin:14px 20px 2px;padding:14px;border:1px solid #D6E6FF;border-radius:16px;background:#F8FBFF}
.payment-review-card .section-head{align-items:flex-start;margin-bottom:12px}
.payment-review-card .payment-preview{background:#fff}
.payment-review-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.payment-review-actions .btn{width:auto;margin:0;border-radius:999px;padding:9px 14px;box-shadow:none}
.payment-review-actions .request-update-link{color:var(--muted);border-color:var(--line)}
.receiver-destination-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr) auto;gap:12px;
  align-items:center;margin:14px 20px 2px;padding:14px;border:1px solid #E3E7ED;border-radius:16px;background:#F8F9FB}
.receiver-destination-card h3{font-family:var(--sans);font-size:1rem;margin:0;font-weight:700}
.receiver-destination-card p{margin:3px 0 0;color:var(--muted);font-size:.88rem;line-height:1.35}
.receiver-destination-card .compact-pay{margin:0}
.receiver-destination-card .btn{width:auto;margin:0;border-radius:999px;padding:9px 14px;box-shadow:none}
.pulse-drawer{position:relative;flex:0 0 auto}
.pulse-drawer summary{list-style:none;position:relative;width:40px;height:40px;border:1px solid transparent;
  border-radius:999px;background:transparent;display:grid;place-items:center;cursor:pointer}
.pulse-drawer summary::-webkit-details-marker{display:none}
.pulse-drawer[open] summary{background:rgba(20,126,251,.08)}
.pulse-icon{font-size:1.25rem;line-height:1;filter:drop-shadow(0 2px 3px rgba(58,42,30,.12))}
.pulse-badge{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--bad);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center}
.pulse-badge::after{content:"";position:absolute;inset:-6px;border:1px solid rgba(176,24,47,.45);border-radius:999px;
  animation:pulse-ring 1.8s ease-out infinite}
@keyframes pulse-ring{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.4)}}
.pulse-panel{position:absolute;left:50%;top:50px;transform:translateX(-50%);
  width:min(320px,calc(100vw - 40px));z-index:100;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.72);border-radius:20px;box-shadow:0 12px 40px rgba(58,42,30,.14);padding:14px}
.pulse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pulse-head strong{display:inline-flex;align-items:center;gap:7px;font-size:.95rem}
.pulse-head small{color:var(--t-muted);font-size:.74rem;font-weight:600}
.pulse-live-dot{width:8px;height:8px;border-radius:999px;background:var(--bad);box-shadow:0 0 0 4px rgba(176,24,47,.1)}
.pulse-feed{display:grid;gap:8px;margin-top:10px}
.pulse-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.pulse-summary div{border:1px solid #F0F0F2;border-radius:10px;background:#fff;padding:8px}
.pulse-summary span{display:block;color:var(--t-muted);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pulse-summary strong{display:block;color:var(--t-ink);font-size:1rem;font-variant-numeric:tabular-nums}
.pulse-item{display:grid;grid-template-columns:14px 1fr;gap:9px;align-items:start;padding:8px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#FEFCFA}
.pulse-item p{margin:0}
.pulse-item small{display:block;color:var(--muted);font-size:.8rem;margin-top:1px}
.pulse-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 11px;border:1px solid #F0F0F2;border-radius:12px;background:#fff}
.pulse-line p{margin:0;color:var(--t-ink);font-size:.9rem;line-height:1.35}
.pulse-line small{grid-column:1 / -1;color:var(--t-muted);font-size:.76rem;margin-top:-5px}
.pulse-line.attention{border-color:#F1D7B7;background:#FFFCF4}
.pulse-line.attention p{color:var(--warn);font-weight:650}
.pulse-line.done{border-color:#D8EFE5;background:#F8FCFA}
.pulse-line.done p{color:var(--ok);font-weight:650}
.pulse-line.ok p{color:var(--ok)}
.pulse-line.warn p{color:var(--warn)}
.pulse-line.info p{color:var(--t-brand-deep)}
.pulse-action{border:0;border-radius:999px;background:var(--ios-blue);color:#fff;font-weight:700;padding:8px 12px;
  min-height:36px;white-space:nowrap;cursor:pointer}
.pulse-line form{margin:0}
.admin-duty-card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:#F8F9FB;border:1px solid rgba(58,42,30,.10);
  border-radius:18px;box-shadow:none}
.cockpit-shell .admin-duty-card,.cockpit-shell .personal-action-card{margin:16px 20px 18px;padding:14px 20px;
  border-radius:16px;background:#F8F9FB;border:1px solid #E3E7ED;box-shadow:none}
.cockpit-shell .payment-workspace{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#fff}
.action-card{border-left:0;background:#F8F9FB}
.admin-duty-card h3{font-family:var(--sans);font-size:1.05rem;margin:0 0 3px;font-weight:600}
.cockpit-shell .admin-duty-card h3,.cockpit-shell .personal-action-card strong{font-family:var(--sans);font-size:1rem}
.cockpit-shell .admin-duty-card p,.cockpit-shell .personal-action-card p,.cockpit-shell .personal-action-card .label{display:none}
.cockpit-shell .admin-duty-card .btn,.cockpit-shell .personal-action-card .btn{border-radius:999px;background:var(--ios-blue);box-shadow:none;padding:9px 18px}
.cockpit-shell .admin-duty-card .btn.ghost,.cockpit-shell .personal-action-card .btn.ghost{background:#fff;color:var(--ios-blue);border-color:#D6E6FF}
.admin-duty-card p{margin:0;color:var(--muted)}
.admin-duty-card form{margin:0;min-width:170px}
.admin-duty-card .btn{margin:0}
.duty-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.duty-actions .btn{width:auto;margin:0;white-space:nowrap}
.duty-actions form{margin:0}
.compact-pay{margin-top:12px;max-width:420px}
.command-roster .roster-entry{grid-template-columns:18px minmax(0,1fr) auto}
.command-roster{box-shadow:none;border-radius:0;border:0}
.command-roster.card{padding:0 20px}
.ledger-head{display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 20px 8px;color:#8A8F98;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.command-roster .ledger-head{padding-left:0;padding-right:0}
.money-roster{gap:8px}
.cockpit-shell .roster-grid{gap:0;padding:0 20px}
.command-roster .roster-grid{padding:0}
.payment-row{border-radius:0;background:#fff;border-left:0;border-right:0;border-top:1px solid #F0F0F2;
  border-bottom:0;box-shadow:none;transition:background .15s ease;grid-template-columns:40px minmax(0,1fr) auto;
  padding:14px 0}
.payment-row:hover{border-color:rgba(58,42,30,.08);background:#FAFAFC;transform:none}
.payment-row.you{border-left:0;background:#F8F9FB;border-radius:10px;padding-left:10px;padding-right:10px}
.payment-row.recipient{background:#F8FBFF;box-shadow:inset 4px 0 0 var(--ios-blue)}
.payment-row.recipient strong::after{content:" receiving";color:var(--ios-blue);font-size:.78rem;font-weight:700;margin-left:6px}
.payment-row strong{font-size:1rem}
.payment-row small{font-variant-numeric:tabular-nums}
.payment-row .money-note{color:var(--t-muted);font-size:.78rem}
.member-avatar{width:40px;height:40px;border-radius:999px;background:#E9ECEF;color:#334155;display:grid;place-items:center;
  font-weight:700;font-size:.86rem;text-transform:uppercase}
.member-avatar.you{background:var(--ios-blue);color:#fff}
.roster-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.money-roster .roster-actions{justify-self:end}
.roster-actions form{margin:0}
.roster-actions .btn{width:auto;margin:0;padding:7px 11px}
.roster-phone-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;
  border:1px solid #BFE7CB;border-radius:999px;background:#F5FFF8;color:#167A3A;font-size:.86rem;font-weight:700;
  text-decoration:none;white-space:nowrap;letter-spacing:0}
.roster-phone-link:hover{background:#E9FAEF;text-decoration:none}
.roster-phone-missing{color:#A0A5AE;font-size:.86rem;font-weight:600;white-space:nowrap}
.command-finalize #round-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.command-finalize .btn{margin-top:0}
.command-finalize{box-shadow:none}
.cockpit-hidden{display:none!important}
.change-disclosure{margin:16px 20px 34px;border-top:1px solid #F0F0F2;padding-top:14px}
.command-roster .change-disclosure{margin-left:0;margin-right:0}
.change-disclosure summary{cursor:pointer;color:#8A8F98;font-weight:600;font-size:.85rem;list-style:none}
.change-disclosure summary::before{content:"▼ ";font-weight:700}
.admin-actions-disclosure{margin:0 20px 32px}
.admin-actions-disclosure summary{cursor:pointer;color:#8A8F98;font-weight:600;font-size:.85rem;list-style:none}
.admin-actions-disclosure summary::before{content:"▸ ";font-weight:700}
.admin-actions-disclosure[open] summary::before{content:"▼ "}
.admin-actions-disclosure .command-finalize{margin-top:12px}
.share-recommend{margin:14px 20px 0;padding:0;border-top:1px solid var(--line)}
.share-recommend summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  min-height:46px;color:var(--ink);font-weight:650}
.share-recommend summary::-webkit-details-marker{display:none}
.share-recommend summary::after{content:"+";color:#9A9186;font-weight:800}
.share-recommend[open] summary::after{content:"-"}
.share-recommend-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:16px}
.share-recommend strong{display:block;font-size:.94rem;margin-bottom:4px}
.share-recommend p{margin:0 0 10px;color:var(--muted);font-size:.88rem;line-height:1.45}
.share-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.share-actions .btn{width:auto;margin:0;border-radius:999px;padding:8px 14px;background:#fff;color:var(--ios-blue);
  border-color:#D6E6FF;box-shadow:none}
.share-copy{width:100%;min-height:52px;margin-top:10px;resize:none;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--muted);font-size:.84rem;line-height:1.35;background:#fff}
@media(max-width:760px){
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .circle-workspace-bar{align-items:center;flex-wrap:nowrap;border-radius:0;min-height:58px;padding:8px 12px;
    position:sticky;top:0;z-index:30}
  .access-row{grid-template-columns:1fr}
  .access-actions{justify-content:flex-start}
  .workspace-title strong{font-size:1rem}
  .workspace-title{order:initial;flex:1 1 auto;min-width:0}
  .workspace-actions{order:initial;width:auto;justify-content:flex-end;gap:4px}
  .workspace-back,.pulse-drawer summary,.workspace-menu summary{width:44px;height:44px}
  .workspace-new{display:none}
  .money-cockpit{grid-template-columns:1fr auto;border-radius:0;padding:28px 16px 20px}
  .money-primary{min-height:0}
  .money-primary h2{font-size:2.15rem}
  .money-rail{grid-template-columns:1fr;text-align:right}
  .round-start-form{grid-template-columns:1fr}
  .round-start-form .btn{width:100%}
  .command-context,.admin-duty-card{flex-direction:column}
  .pulse-panel{left:auto;right:0;transform:none}
  .workspace-menu-panel{right:0}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-actions{padding-left:0;padding-right:0}
  .admin-duty-card form,.admin-duty-card .btn,.duty-actions,.duty-actions .btn{width:100%}
  .duty-actions{justify-content:stretch}
  .money-movement-strip{grid-template-columns:repeat(2,1fr);margin-left:16px;margin-right:16px}
  .movement-item:nth-child(odd){border-left:0}
  .movement-item:nth-child(n+3){border-top:1px solid #F0F0F2}
  .receiver-setup-banner{align-items:stretch;flex-direction:column;margin-left:16px;margin-right:16px}
  .receiver-setup-banner .btn{width:100%}
  .payment-review-card{margin-left:16px;margin-right:16px}
  .payment-review-actions,.payment-review-actions .btn{width:100%}
  .receiver-destination-card{grid-template-columns:1fr;margin-left:16px;margin-right:16px}
  .receiver-destination-card .btn{width:100%}
  .command-roster .roster-entry{grid-template-columns:18px 1fr}
  .cockpit-shell .command-roster .roster-entry,.cockpit-shell .roster-entry{grid-template-columns:40px minmax(0,1fr)}
  .roster-actions{grid-column:2;justify-content:flex-start}
  .command-finalize #round-actions{grid-template-columns:1fr}
  .share-recommend-panel{grid-template-columns:1fr}
  .share-actions .btn{width:100%}
}

/* Buttons — primary uses the AA-safe action fill */
.btn{display:inline-block;width:100%;text-align:center;border:0;border-radius:var(--radius-sm);
  padding:14px 16px;font-size:1rem;font-weight:600;letter-spacing:.01em;cursor:pointer;margin-top:8px;
  color:#fff;text-decoration:none;
  /* The brand action, 2026-10-12: the deep green that carries white at
     5.3:1, flat, as every other primary action is now. It was the burnt
     orange of the brown generation, which made the base button the one
     place the brand was not. */
  background:var(--t-brand-deep);
  box-shadow:0 1px 2px rgba(60,64,67,.3)}
.btn:hover{filter:brightness(1.06)}
.btn.secondary{background:var(--brand-soft);color:var(--brand-ink)}
.btn.ghost{background:transparent;color:var(--brand-ink);border:1px solid var(--line)}
.btn.sheet-create{background:var(--ios-blue);box-shadow:0 8px 20px -12px rgba(20,126,251,.8)}
.btn.sheet-create:disabled{background:#D6D0C9;color:#fff;box-shadow:none}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap}
.pill.ok{background:#E7F4EE;color:var(--ok)}
.pill.warn{background:#FBF2DC;color:var(--warn)}
.pill.bad{background:#F7E3E3;color:var(--bad)}
.pill.info{background:var(--brand-soft);color:var(--brand-ink)}

.notice{border:1px solid var(--line);background:var(--brand-soft);border-radius:var(--radius-sm);
  padding:12px;margin:0 0 14px;color:var(--brand-ink)}
.notice ul{margin:6px 0 0;padding-left:18px}
.notice li{margin:2px 0}

.chama-prompt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(180deg,#fff,var(--brand-soft));border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin:0 0 14px;box-shadow:var(--shadow)}
.chama-prompt h3{margin:0 0 3px;font-size:1rem}
.chama-prompt p{margin:0;color:var(--muted)}
.chama-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink)}
.chama-link{width:auto;margin-top:0;white-space:nowrap}
@media(max-width:520px){.chama-prompt{align-items:stretch;flex-direction:column}.chama-link{width:100%}}

label{display:block;font-weight:600;margin:10px 0 4px}
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=file],textarea,select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:1rem;background:#fff;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#9a9186}
.flow-form label:first-child{margin-top:0}
.field-grid{display:grid;gap:12px}
.field-grid.two{grid-template-columns:1fr 112px}
.choice-set{border:0;margin:14px 0 0;padding:0;display:grid;gap:8px}
.choice-set legend{font-weight:700;margin:0 0 6px;padding:0}
.choice-card{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:linear-gradient(180deg,#fff,#FEFCFA);cursor:pointer}
.choice-card:hover{border-color:rgba(176,82,26,.38)}
.choice-card:has(input:checked){border-color:var(--brand-strong);background:var(--brand-soft)}
.choice-card input{margin-top:4px;accent-color:var(--brand-strong)}
.choice-card strong{display:block}
.choice-card small{display:block;color:var(--muted);line-height:1.35;margin-top:2px}
.form-note{margin:10px 0 0;color:var(--muted);font-size:.9rem}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);font-size:.95rem;font-variant-numeric:tabular-nums}
.empty{text-align:center;padding:28px 12px;color:var(--muted)}
.empty .big{font-size:1.1rem;font-weight:700;margin:0 0 6px;line-height:1.35;color:var(--ink)}
.err{color:var(--bad);font-weight:600;margin:8px 0}
.count{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:0}

/* Public marketing surface — same brand, a touch wider than the app column. */
.public-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px var(--pad);background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-hi);box-shadow:0 1px 0 rgba(58,42,30,.05);
  position:sticky;top:0;z-index:20}
.public-topbar .brand{text-decoration:none}
.public-nav{display:flex;gap:16px;flex-wrap:wrap}
.public-nav a{color:var(--brand-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.public-nav a:hover{text-decoration:underline}
.public-main{max-width:720px;margin:0 auto;padding:24px var(--pad)}
.public-main h1{font-size:1.9rem;line-height:1.15;margin:0 0 12px}
.public-main h2{font-family:var(--serif);font-size:1.3rem;margin:24px 0 8px}
.public-main p{color:var(--ink);max-width:62ch}
.public-footer{max-width:1040px;margin:0 auto;padding:36px var(--pad) 48px;border-top:1px solid var(--line)}
.public-footer nav{margin-top:8px}
.public-footer nav a{color:var(--brand-ink);text-decoration:none;font-weight:600}

/* Header actions (Sign in + Start) */
.public-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-signin{color:var(--brand-ink);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.nav-signin:hover{text-decoration:underline}
.btn.nav-cta{width:auto;margin-top:0;padding:9px 16px;font-size:.92rem}

/* Footer columns */
.foot-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,1fr));gap:24px}
.foot-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.foot-col h4{margin:0 0 2px;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.foot-col a{color:var(--brand-ink);text-decoration:none;font-weight:600;font-size:.92rem}
.foot-col a.btn{color:#fff}
.foot-col a:hover{text-decoration:underline}
.foot-brand .brand{font-size:1.15rem;display:inline-block}
.foot-brand p{margin:8px 0 12px;font-size:.9rem;max-width:30ch}
.foot-legal{margin:28px 0 0;font-size:.82rem;max-width:74ch}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* --- Marketing / landing layer (elevated public pages; brand-token based) --- */
.mkt{max-width:1040px;margin:0 auto;padding:8px var(--pad) 40px}
.mkt-hero{text-align:center;padding:40px 8px 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:28px;align-items:center;text-align:left}
.hero-copy .mkt-lead{margin:0;max-width:48rem}
.hero-copy .mkt-actions{justify-content:flex-start}
.hero-proof{margin:14px 0 0;color:var(--muted);font-weight:700}
.mkt-hero h1{font-family:var(--serif);font-size:2.5rem;line-height:1.08;margin:.6rem 0;letter-spacing:0}
.mkt-lead{font-size:1.14rem;line-height:1.7;color:var(--muted);max-width:44rem;margin:0 auto}
.mkt-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.mkt-actions .btn{width:auto}
.mkt-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;border:var(--hair);border-radius:var(--radius);
  background:var(--line);box-shadow:var(--shadow);margin:28px 0 8px}
.mkt-strip div{background:rgba(255,255,255,.86);padding:16px}
.mkt-strip strong{display:block;font-family:var(--serif);font-size:1.08rem}
.mkt-strip span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
.mkt-section{margin-top:46px}
.mkt-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--muted)}
.mkt-section h2{font-family:var(--serif);font-size:1.7rem;margin:.3rem 0 .2rem;line-height:1.15}
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:18px}
.mkt-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.split-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:28px;align-items:start}
.trust-spine{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.trust-spine div{background:var(--card);border:var(--hair);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.trust-spine .num{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--navy);
  color:#fff;font-family:var(--mono);font-weight:800;margin-bottom:12px}
.trust-spine strong{display:block;font-size:1rem}
.trust-spine p{color:var(--muted);margin:6px 0 0}
.product-grid .mkt-card{text-decoration:none;color:inherit;display:block}
.mini-kicker{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:800;color:var(--brand-ink);
  margin-bottom:7px}
.feature-card{min-height:190px}
.product-shot,.assistant-shot{background:linear-gradient(180deg,#fff,#FEFCFA);border:1px solid rgba(58,42,30,.14);
  border-radius:var(--radius-lg);padding:18px;box-shadow:0 26px 60px -34px rgba(58,42,30,.55), inset 0 1px 0 rgba(255,255,255,.9)}
.product-shot{position:relative}
.product-shot::before{content:"";position:absolute;inset:10px 10px auto auto;width:72px;height:72px;border-radius:999px;
  background:var(--brand-soft);opacity:.65;z-index:0}
.product-shot>*{position:relative;z-index:1}
.shot-top,.shot-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:10px 0}
.shot-top{padding-top:0}
.shot-top span,.shot-row span{color:var(--muted)}
.shot-top strong,.shot-row strong{font-weight:800;color:var(--ink)}
.shot-meter{height:12px;background:#EFE8E1;border-radius:999px;overflow:hidden;margin:16px 0}
.shot-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--brand-strong));border-radius:999px}
.shot-note{margin-top:14px;padding:12px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.small-shot{max-width:360px}
.assistant-shot{display:grid;gap:12px}
.chat-line{border-radius:14px;padding:13px 15px;line-height:1.45}
.chat-line.user{justify-self:end;background:var(--brand-strong);color:#fff;max-width:82%}
.chat-line.bot{justify-self:start;background:#fff;border:var(--hair);color:var(--ink);max-width:92%;box-shadow:var(--shadow)}
.assistant-boundary{padding:11px 13px;border-radius:var(--radius-sm);background:#E7F4EE;color:var(--ok);font-weight:800}
.elevated-start{background:var(--card);border:var(--hair);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow-lg)}
.start-examples{max-width:720px;margin:16px auto 0;justify-content:center}
/* Force a single row of four (home product cards); collapse responsively */
.mkt-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mkt-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mkt-grid.four{grid-template-columns:1fr}}
/* Pricing cards — CTA lives INSIDE each card, pinned to the bottom so tiers align */
.price-card{display:flex;flex-direction:column;text-align:left}
.price-card .tier{font-weight:700;font-size:1.05rem}
.price-card .amt{font-family:var(--serif);font-size:1.9rem;line-height:1.05;margin:.3rem 0 .1rem}
.price-card .amt span{font-size:.85rem;color:var(--muted);font-family:var(--sans);font-weight:600}
.price-card .blurb{color:var(--muted);margin:.3rem 0 16px;font-size:.92rem}
.price-card .btn{margin-top:auto;width:100%}
.price-card.featured{border:1.5px solid var(--brand-strong);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px -18px rgba(58,42,30,.42)}
.price-tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;background:var(--brand-strong);border-radius:5px;padding:3px 8px;margin-bottom:8px}

/* Conversational /start — input + chat bubbles + intent chips */
.start-form{max-width:640px;margin:10px auto 0;display:flex;gap:10px}
.start-form input{flex:1}
.start-form .btn{width:auto;margin-top:0;white-space:nowrap}
.chat{max-width:640px;margin:20px auto 0;display:flex;flex-direction:column;gap:12px}
.bubble{padding:14px 16px;border-radius:14px;max-width:88%;line-height:1.5}
.bubble.you{align-self:flex-end;background:var(--brand-strong);color:#fff;border-bottom-right-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.bubble.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);border-bottom-left-radius:4px}
.bubble.bot .btn{width:auto;margin-top:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--brand-soft);color:var(--brand-ink);font-weight:600;font-size:.88rem;text-decoration:none}
.chip:hover{filter:brightness(.98)}
@media(max-width:560px){.start-form{flex-direction:column}.start-form .btn{width:100%}}
.mkt-card{background:var(--card);border:var(--hair);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow)}
.mkt-card h3{font-size:1.05rem;margin:.5rem 0 .3rem}
.mkt-card p{color:var(--muted);margin:0}
.mkt-icon{width:44px;height:44px;border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(255,255,255,.7), var(--brand-soft));color:var(--brand-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -3px rgba(58,42,30,.28);
  display:flex;align-items:center;justify-content:center}
.mkt-icon svg{width:22px;height:22px}
.mkt-steps{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.mkt-steps.compact{margin-top:0}
.mkt-step{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:var(--hair);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.mkt-step .num{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--navy);
  color:#fff;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center}
.mkt-step h3{margin:.2rem 0 .2rem;font-size:1.02rem}
.mkt-step p{margin:0;color:var(--muted)}
.mkt-quote{background:var(--brand-soft);border:var(--hair);border-radius:var(--radius-lg);padding:28px;margin-top:18px}
.mkt-quote p{font-family:var(--serif);font-size:1.25rem;line-height:1.5;color:var(--ink);margin:0 0 12px}
.mkt-quote .who{font-weight:700}
.mkt-quote .who span{display:block;font-weight:400;color:var(--muted);font-size:.9rem}
.mkt-cta{text-align:center;border:var(--hair);border-radius:var(--radius-lg);
  padding:36px 20px;margin-top:46px;box-shadow:var(--shadow-lg);
  background:
    linear-gradient(0deg, rgba(58,42,30,.035) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(58,42,30,.035) 1px, transparent 1px) 0 0/24px 24px,
    var(--paper)}
.mkt-cta h2{font-family:var(--serif);font-size:1.7rem;margin:.2rem 0}
@media(max-width:640px){.mkt-hero h1{font-size:2rem}}
@media(max-width:900px){
  .hero-grid,.split-section{grid-template-columns:1fr;text-align:left}
  .mkt-strip,.trust-spine{grid-template-columns:repeat(2,1fr)}
  .mkt-grid.two-up{grid-template-columns:1fr}
}
@media(max-width:560px){
  .mkt-strip,.trust-spine{grid-template-columns:1fr}
  .hero-copy .mkt-actions{justify-content:stretch}
  .hero-copy .mkt-actions .btn{width:100%}
}

/* Shared loading affordance (HTMX toggles .htmx-indicator; opt in per action). */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline-block}
.tanda-pulse{width:16px;height:16px;border-radius:50%;background:var(--brand);
  display:inline-block;vertical-align:middle;animation:tanda-pulse 1s ease-in-out infinite}
@keyframes tanda-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tanda-pulse{animation:none;opacity:.6}}

/* ============================ Mobile refinements ============================ */
/* (A) Responsive data tables — long strings break; tables scroll instead of
   pushing the whole page sideways. No per-template wrappers needed. */
th,td{overflow-wrap:anywhere}
@media(max-width:680px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* (B) CSS-only disclosure menu for the public header — hidden on desktop */
.nav-menu{display:none}
.nav-menu summary{list-style:none;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--brand-ink);
  background:var(--brand-soft);border:1px solid var(--line);border-radius:8px;padding:9px 13px;min-height:40px;
  display:flex;align-items:center}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu-panel{position:absolute;top:100%;left:12px;right:12px;margin-top:8px;z-index:30;
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:8px}
.nav-menu-panel a,
.nav-menu-panel .theme-toggle{padding:12px;border-radius:8px;color:var(--brand-ink);text-decoration:none;font-weight:600;
  min-height:44px;display:flex;align-items:center}
.nav-menu-panel .theme-toggle{
  width:100%;
  border:0;
  background:transparent;
  font-size:inherit;
}
.nav-menu-panel a:hover,
.nav-menu-panel a[aria-current="page"],
.nav-menu-panel .theme-toggle:hover{background:var(--brand-soft)}

@media(max-width:760px){
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:relative;height:auto;gap:12px;padding:14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .admin-brand{padding:0 4px}
  .admin-nav{display:flex;overflow-x:auto;padding-bottom:2px}
  .admin-nav a{white-space:nowrap;min-width:max-content}
  .admin-sidebar-section,.admin-sidebar-bottom{display:none}
  .admin-commandbar{position:relative;grid-template-columns:1fr;gap:12px;padding:16px}
  .admin-command-actions{justify-content:space-between}
  .admin-canvas{padding:16px}
  .admin-shell .admin-pulse-grid{grid-template-columns:1fr 1fr}
  .admin-shell .triage-pulse{grid-column:1 / -1}
  .public-topbar{justify-content:flex-start}
  .public-nav{display:none}
  .nav-signin{display:none}          /* folds into the menu */
  .nav-menu{display:block}
  /* (D) cheaper header on low-end devices: drop the blur, keep a solid translucent */
  .public-topbar,.topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94)}
  /* (D) stop the aurora animating on phones (battery); keep a soft static wash */
  body::before{animation:none;opacity:.7}
  /* (C) larger footer tap targets */
  .foot-col a{padding:8px 0;min-height:40px;display:flex;align-items:center}
}
@media(max-width:560px){
  .page-head{align-items:stretch;flex-direction:column}
  .head-action{width:100%}
  .metric-grid,.ops-grid{grid-template-columns:1fr}
  .action-pair{grid-template-columns:1fr}
  .round-grid{grid-template-columns:1fr}
  .circle-round-head{flex-direction:column}
  .round-progress-text{white-space:normal}
  .roster-entry{grid-template-columns:18px 1fr;align-items:flex-start}
  .roster-entry .pill{justify-self:start;grid-column:2}
  .pay-fields div{display:block}
  .pay-fields strong{display:block;text-align:left;margin-top:2px}
  .member-intro h2,.member-intro h1{font-size:1.7rem}
  .app-hero .spread,.section-head,.record-row{align-items:flex-start;flex-direction:column}
  .record-actions{justify-content:flex-start}
  .circle-op-main{flex-direction:column}
  .circle-op-status,.circle-op-actions{justify-content:flex-start}
  .circle-op-money{grid-template-columns:1fr 1fr}
  .circle-op-money div:first-child{grid-column:1 / -1}
  .member-circle-row{flex-direction:column}
  .member-circle-state{align-items:flex-start;text-align:left}
  .admin-overview-hero{align-items:flex-start;flex-direction:column}
  .admin-state-stack{align-items:flex-start}
  .admin-pulse-grid{grid-template-columns:1fr 1fr}
  .triage-pulse{grid-column:1 / -1}
  .workspace-grid{grid-template-columns:1fr}
  .toolbox-grid{grid-template-columns:1fr 1fr}
  .circle-table-head{display:none}
  .admin-circle-table{border:0;background:transparent;gap:8px}
  .circle-table-row{grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:#fff}
  .circle-table-row>span:nth-child(2),.circle-table-row>span:nth-child(4){color:var(--muted);font-size:.84rem}
  .circle-table-row .status-line{grid-column:1 / -1}
  .queue-item{grid-template-columns:10px 1fr}
  .queue-action{grid-column:2;justify-self:start}
  .field-grid.two{grid-template-columns:1fr}
  .provider-grid,.payment-detail-grid{grid-template-columns:1fr}
  .payment-current,.payment-preview{align-items:flex-start;flex-direction:column}
  .circle-row{align-items:flex-start}
  .row-meta{flex-direction:column;align-items:flex-end;gap:6px}
  .inline-fields{grid-template-columns:1fr}
  .inline-fields .btn{width:100%}
  .settings-grid{grid-template-columns:1fr}
  .settings-actions a{flex:1 1 calc(50% - 8px);justify-content:center}
}

/* Member login-to-circle journey lock */

body:has(.member-shell),
body:has(.member-auth){background:var(--t-bg);color:var(--t-ink)}
body:has(.member-shell)::before,
body:has(.member-auth)::before{display:none}
body:has(.member-shell) .topbar{
  background:rgba(11,16,22,.86);border-bottom:1px solid #1E2A36;box-shadow:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body:has(.member-shell) .brand{color:var(--t-ink)}
body:has(.member-shell) .foot{color:#6F8198}
.wrap:has(.member-shell){max-width:430px;min-height:calc(100vh - 100px);padding:20px;
  padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.wrap:has(.member-auth){padding:20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.member-auth{width:min(430px,100%)}
.member-auth-panel{border-radius:16px;background:rgba(20,28,38,.82);border-color:var(--t-line);padding:28px 20px}
.member-auth-mark{width:32px;height:32px;border-radius:10px}
.member-auth h2,.member-intro h2,.setup-add-head h2,.member-intro h1,.setup-add-head h1{font-size:24px;line-height:32px;font-weight:650;letter-spacing:0}
.member-auth p,.member-intro p,.field-hint,.setup-add-screen .muted{color:var(--t-muted);font-size:13px;line-height:20px}
.member-auth-form{gap:14px}
.member-auth-form label,.member-wizard label,.setup-add-form label{
  color:var(--t-muted);font-size:13px;line-height:20px;font-weight:600;text-transform:none;letter-spacing:0}
.member-auth input[type=text],.member-auth input[type=email],.member-auth input[type=tel],.member-auth input[type=password],
.member-wizard input,.member-wizard select,.member-wizard textarea,.setup-add-form input{
  height:48px;min-height:48px;border-radius:16px;background:#FFFFFF;border:1px solid var(--t-line);color:var(--t-ink);
  font-size:16px;line-height:24px}
.member-wizard textarea{height:auto;min-height:86px;padding-top:12px}
.member-auth input[readonly],.setup-add-form input[readonly]{color:var(--t-muted);background:var(--t-inset)}
.member-auth input:focus,.member-wizard input:focus,.member-wizard select:focus,.member-wizard textarea:focus,.setup-add-form input:focus{
  border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.2)}
/* Geometry only. This carried `background:var(--t-brand);color:#fff` -- white
   on the fill-only green, 3.14:1, the misuse that token's own comment forbids.
   It was already dead: an identical selector further down paints these navy at
   14.13:1, measured on the built page. Dead and wrong is worse than either, so
   it goes: delete the navy rule some day and this would have silently restored
   a failing primary button rather than an obviously missing one. */
.member-primary,.member-auth .btn.member-primary,.setup-add-primary{
  min-height:48px;border-radius:16px;box-shadow:none;font-size:16px;line-height:24px;font-weight:500}
.member-primary:hover,.member-auth .btn.member-primary:hover,.setup-add-primary:hover{background:var(--t-green-bright)}
.member-primary.is-incomplete{opacity:.4}
.member-primary:disabled,.setup-add-primary:disabled{opacity:.4;cursor:not-allowed}
.field-error{margin:12px 0 0!important;color:#E25C5C!important;background:transparent!important;border:0!important;
  padding:0!important;font-size:13px!important;line-height:20px!important}
.field-hint{display:block;margin:6px 0 0}
.member-auth-provider-reserve{height:16px}
.member-auth-footer{margin-top:20px!important}

/* Circle login alignment pass */
.member-auth{
  width:min(420px,100%);
}
.member-auth-panel{
  padding:24px;
}
.member-auth-brand{
  justify-content:flex-start;
  margin-bottom:16px;
}
.member-auth-panel > h2{
  margin:0;
  text-align:left;
}
.member-auth-panel > h2 + p{
  margin:8px 0 0;
  text-align:left;
}
.member-auth-panel > .field-error{
  margin:16px 0 0;
  color:#E25C5C!important;
  text-align:left;
}
.member-auth-form{
  gap:16px;
  margin-top:24px;
}
.member-auth-form label{
  margin:0 0 8px;
}
.member-auth input[type=text],
.member-auth input[type=email],
.member-auth input[type=tel],
.member-auth input[type=password]{
  border-radius:14px;
}
.member-auth input:focus{
  border-color:var(--t-brand);
  box-shadow:inset 0 0 0 1px var(--t-brand),0 0 0 3px rgba(42,165,106,.16);
}
.member-password-row input{
  padding-right:68px!important;
}
.member-password-toggle{
  right:12px;
  height:24px;
  line-height:20px;
}
.member-auth .auth-row{
  margin-top:-8px;
  text-align:left;
}
.member-auth .auth-row a{
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.member-auth .btn.member-primary{
  margin-top:0;
  border-radius:14px;
}
.member-auth .btn.member-primary.is-incomplete{
  opacity:1;
  background:rgba(42,165,106,.42);
  color:rgba(255,255,255,.86);
}
.member-auth-provider-reserve{
  height:12px;
}
.member-auth-note{
  margin-top:0!important;
  text-align:left;
}
.member-auth-note span{
  display:inline;
}
.member-auth .auth-alt{
  margin-top:8px;
  text-align:left;
}
.member-auth-footer{
  margin-top:16px!important;
  text-align:left;
}
.member-shell{gap:16px;color:var(--t-ink)}
.member-intro{padding:14px 0 4px}
.member-intro .eyebrow{color:var(--t-muted)}
.member-list-panel,.member-empty,.member-form-card,.setup-add-screen{background:var(--t-bg);border:0;padding:0}
.member-list-panel .section-head{margin-bottom:10px}
.member-list-panel h3{color:var(--t-ink);font-size:16px;line-height:24px}
.member-circle-row,.minimal-row.member-circle-row{
  min-height:64px;padding:16px;border-radius:12px;background:#FFFFFF;border:1px solid var(--t-line);color:var(--t-ink)}
.member-circle-row:hover{border-color:var(--t-brand);box-shadow:none}
.member-circle-main strong{font-size:16px;line-height:24px;font-weight:500;color:var(--t-ink)}
.minimal-row .member-circle-main span,.member-circle-main small{color:var(--t-muted);font-size:13px;line-height:20px}
.member-circle-chevron{align-self:center;color:var(--t-brand-deep)!important;font-size:24px!important;line-height:24px!important;margin:0!important}
.member-bottom-action{margin-top:14px;background:transparent!important;color:var(--t-brand)!important;border-color:var(--t-line)!important}
.member-empty{display:grid;gap:12px;min-height:calc(100vh - 220px);align-content:center}
.member-empty .big{color:var(--t-ink);font-size:24px;line-height:32px;font-weight:650;margin:0}
.member-text-link{color:var(--t-brand-deep);text-align:center;font-size:14px;line-height:20px;text-decoration:none}
.member-shell .compact-disclosure{
  border:1px solid var(--t-line);
  border-radius:12px;
  padding:0;
  background:#FFFFFF;
  box-shadow:none;
}
.member-shell .compact-disclosure summary{
  min-height:44px;
  padding:12px 14px;
  color:var(--t-ink);
  font-size:14px;
  line-height:20px;
  font-weight:600;
}
.member-shell .compact-disclosure summary::after{
  color:var(--t-brand-deep);
}
.member-shell .action-pair{
  grid-template-columns:1fr;
  gap:8px;
}
.member-shell .compact-disclosure .action-pair{
  padding:0 12px 12px;
}
.member-shell .minimal-action{
  padding:12px;
  border-color:var(--t-line);
  border-radius:10px;
  background:var(--t-bg);
  color:var(--t-ink);
  box-shadow:none;
}
.member-shell .minimal-action:hover{
  border-color:var(--t-brand);
  box-shadow:none;
}
.member-shell .minimal-action span{
  color:var(--t-muted);
}
.member-shell .pill{
  border:1px solid var(--t-line);
  background:var(--t-inset);
  color:var(--t-muted);
}
.member-shell .pill.ok{
  border-color:rgba(42,165,106,.34);
  background:rgba(42,165,106,.14);
  color:var(--t-brand-deep);
}
/* Text in the attention colour. It was #F0CE8A, a dark-theme amber, on a
   near-white tint: about 1.4:1, so "Waiting", "Invited" and "Needs approval"
   were close to unreadable wherever this pill appeared. 4.76:1 now. */
.member-shell .pill.warn{
  border-color:rgba(218,174,83,.34);
  background:rgba(218,174,83,.12);
  color:var(--t-accent);
}
.member-shell .pill.info{
  border-color:var(--t-line);
  background:var(--t-inset);
  color:var(--t-muted);
}
.member-form-shell{padding-bottom:48px}
.wizard-progress{margin:0 0 8px!important;color:var(--t-muted)!important;font-size:11px!important;line-height:16px!important;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.member-wizard{gap:18px}
.wizard-cluster{display:grid;gap:10px;margin:0;padding:0 0 18px;border:0;border-bottom:1px solid #1E2A36}
.wizard-cluster legend{padding:0 0 2px;color:var(--t-ink);font-size:16px;line-height:24px;font-weight:600}
.segmented-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.segmented-field.small{grid-template-columns:repeat(2,minmax(0,1fr))}
.segmented-field.stack{grid-template-columns:1fr}
.segmented-field label{margin:0}
.segmented-field input{position:absolute;opacity:0;pointer-events:none}
.segmented-field span{min-height:44px;display:grid;place-items:center;padding:8px 10px;border-radius:14px;border:1px solid var(--t-line);
  background:#FFFFFF;color:var(--t-muted);text-align:center;font-size:13px;line-height:18px;font-weight:600}
.segmented-field input:checked + span{border-color:var(--t-brand);color:var(--t-ink);background:rgba(42,165,106,.10)}
.segmented-field label.is-disabled{opacity:.45;cursor:not-allowed}
.segmented-field label.is-disabled span{cursor:not-allowed}
.wizard-submit{margin-top:16px}
.topbar-back{width:40px!important;height:40px;padding:0!important;display:grid!important;place-items:center;margin:0!important;
  border-radius:999px!important;color:var(--t-green-soft)!important;border-color:#243041!important;background:#141C26!important}
.cockpit-shell{max-width:430px;background:var(--t-bg);border:0;box-shadow:none}
.cockpit-shell .circle-workspace-bar{background:var(--t-bg);border-bottom:1px solid #1E2A36;padding:8px 0}
.cockpit-shell .workspace-title strong{color:var(--t-ink)}
.cockpit-shell .workspace-back,.cockpit-shell .workspace-menu summary,.cockpit-shell .pulse-drawer summary{
  color:var(--t-brand);background:#FFFFFF;border-color:var(--t-line)}
.circle-focus,.circle-round,.personal-action-card,.payment-current,.pay-card,.share-recommend,.change-disclosure{
  background:#FFFFFF;border-color:var(--t-line);color:var(--t-ink)}
.circle-focus h2,.personal-action-card strong,.payment-current strong,.pay-card h3{color:var(--t-ink)}
.circle-focus p,.payment-current p,.pay-card p,.personal-action-card p{color:var(--t-muted)}
.money-cockpit,.cockpit-shell .money-cockpit{display:block;padding:16px;border:1px solid var(--t-line);border-radius:16px;background:#FFFFFF}
.round-kicker{display:block;margin-bottom:4px;color:var(--t-muted);font-size:11px;line-height:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em}
.money-primary h2,.cockpit-shell .money-primary h2{color:var(--t-ink);font-size:24px;line-height:32px;white-space:normal}
.money-primary p{color:var(--t-muted);font-size:13px;line-height:20px}
.money-rail{margin-top:12px;text-align:left}
.money-rail strong{color:var(--t-brand-deep)}
.setup-add-screen{display:grid;gap:16px;padding-bottom:94px}
.setup-add-head h2,.setup-add-head h1{margin:0;color:var(--t-ink)}
.setup-share-panel{display:grid;gap:14px;padding:16px 0;border-top:1px solid #1E2A36;border-bottom:1px solid #1E2A36}
.setup-share-panel h3,.setup-add-form h3{margin:0;color:var(--t-ink);font-size:18px;line-height:26px;font-weight:520}
.setup-share-actions{display:flex;gap:8px;flex-wrap:wrap}
.setup-share-actions .btn,.setup-share-actions button{min-height:40px;border-radius:8px;padding:9px 13px;font:inherit;font-size:13px;font-weight:650;text-decoration:none}
.setup-share-actions button{border:1px solid var(--t-line);background:#FFFFFF;color:var(--t-brand-deep);cursor:pointer}
.setup-add-form{display:grid;gap:10px}
/* The dialog's refusal, directly under the number it is usually about. The
   base .field-error rule sets its own margin with !important; this only adds
   nothing it would fight. */
.invite-someone-error{font-weight:600}
.invite-picked{color:var(--t-brand-deep)}
.create-circle-flow{max-width:520px;margin-inline:auto}
.create-circle-flow .member-intro{margin-bottom:18px}
.flow-step{margin:0 0 8px;color:var(--t-brand-deep);font-size:12px;line-height:18px;font-weight:650;text-transform:uppercase;letter-spacing:.08em}
.create-circle-flow .member-form-card{background:#FFFFFF;border:1px solid var(--t-line);border-radius:12px;padding:18px}
.create-circle-flow .wizard-cluster{gap:10px;margin:0;padding:0;border:0}
.create-circle-flow .wizard-cluster legend{margin:0 0 2px;color:var(--t-muted);font-size:12px;line-height:18px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.create-circle-flow .member-wizard{gap:16px}
.create-circle-flow input,.create-circle-flow select{min-height:48px;border-radius:8px;border:1px solid var(--t-line);background:var(--t-bg);color:var(--t-ink)}
.create-circle-flow input:focus,.create-circle-flow select:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.create-circle-flow .wizard-submit{width:100%;min-height:48px;margin:0}
.organizer-context{margin:0 0 14px}
.organizer-context button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;align-items:center;text-align:left;min-height:48px;padding:10px 12px;border-radius:16px;border:1px solid var(--t-line);background:#FFFFFF;color:var(--t-ink);cursor:pointer}
.organizer-context span,.organizer-context small{color:var(--t-muted);font-size:12px;line-height:18px;font-style:normal}
.organizer-context strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:540}
.organizer-context em{border:1px solid rgba(42,165,106,.35);border-radius:999px;padding:2px 7px;color:var(--t-brand-deep);font-size:12px;line-height:16px;font-style:normal}
.setup-founder-summary{display:grid;gap:3px;margin-top:6px;padding:12px;border:1px solid rgba(42,165,106,.24);border-radius:14px;background:rgba(42,165,106,.08);color:var(--t-ink)}
.setup-founder-summary span{font-weight:650}
.setup-founder-summary small{color:var(--t-muted);font-size:13px;line-height:20px}
.compact-pills{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.compact-pills label span{min-height:48px;align-items:center;justify-content:center;text-align:center;padding:9px 10px}
.compact-pills input:checked+span{border-color:var(--t-brand);background:rgba(42,165,106,.12);box-shadow:0 0 0 1px rgba(42,165,106,.18)}
.compact-pills.small{grid-template-columns:1fr 1fr}
.amount-country-row{display:grid;grid-template-columns:1fr minmax(138px,.7fr);gap:8px}
/* Shared picker: country, dial code, title. Green selected row, never OS blue. */
.country-combo,.pill-select{position:relative}
.create-circle-flow select.is-enhanced,
.member-form-shell select.is-enhanced{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none}
.create-circle-flow .pill-select-trigger,
.member-form-shell .pill-select-trigger{width:100%;min-height:48px;padding:10px 12px;border-radius:14px;border:1px solid var(--t-line);background:var(--t-bg);color:var(--t-ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.create-circle-flow .pill-select-trigger:focus-visible,
.member-form-shell .pill-select-trigger:focus-visible{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18)}
.create-circle-flow [aria-expanded="true"].pill-select-trigger,
.member-form-shell [aria-expanded="true"].pill-select-trigger{border-color:var(--t-brand)}
.pill-select-panel{position:absolute;z-index:30;top:calc(100% + 6px);right:0;left:0;min-width:240px;padding:8px;border:1px solid var(--t-line);border-radius:14px;background:#FFFFFF;box-shadow:0 18px 40px rgba(26,26,26,.10)}
.create-circle-flow .pill-select-search,
.member-form-shell .pill-select-search{width:100%;min-height:40px}
.pill-select-list{max-height:236px;margin:0;padding:0;overflow-y:auto;list-style:none}
.pill-select-search + .pill-select-list{margin-top:8px}
.create-circle-flow .pill-select-list button{display:block;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:999px;background:transparent;color:var(--t-ink);font:inherit;text-align:left;cursor:pointer}
.create-circle-flow .pill-select-list button:hover,.create-circle-flow .pill-select-list button:focus-visible{outline:0;background:rgba(42,165,106,.12)}
.create-circle-flow .pill-select-list button[aria-selected="true"]{background:rgba(42,165,106,.16);box-shadow:inset 0 0 0 1px rgba(42,165,106,.38);color:var(--t-brand)}
/* Phone: dial code and national number are two controls, one number. */
.phone-e164{display:grid;grid-template-columns:minmax(104px,.42fr) 1fr;gap:8px}
.phone-e164 .pill-select-panel{right:auto;min-width:260px}
/* Type / Order / Pot sub-categories and their fixed microcopy. */
.create-circle-flow .micro-note{margin:2px 0 0;color:var(--t-muted);font-size:13px;line-height:20px}
.create-circle-flow .sub-category{display:grid;gap:8px;margin-top:4px}
.create-circle-flow .sub-label{color:var(--t-muted);font-size:12px;line-height:18px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}
/* base.html already prints the custody line; one per page on the create flow. */
body:has(.create-circle-flow) .foot{display:none}
.title-custom{display:grid;gap:6px}
.create-circle-flow .title-custom .field-hint{margin:0}
.settings-drawer{border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);padding:2px 0}
.settings-drawer summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--t-ink);cursor:pointer}
.settings-drawer summary small{color:var(--t-muted);font-size:12px;line-height:18px;text-align:right}
.drawer-fields{padding:8px 0 12px!important}
.create-footer{margin:16px 0 0;color:var(--t-muted);font-size:12px;line-height:18px;text-align:center}
@media(max-width:560px){
  .amount-country-row{grid-template-columns:1fr}
  .compact-pills{grid-template-columns:1fr}
  .organizer-context button{grid-template-columns:1fr auto}
  .organizer-context span,.organizer-context small{grid-column:1 / -1}
}
/* Durable settings, not part of establishing the sequence: tertiary, and
   closed. */
.setup-reveal > summary{
  color:var(--t-muted);font-size:13px;font-weight:600;
}
.setup-reveal > summary:hover{color:var(--t-ink)}

/* --- Agree: one work card ------------------------------------------------- */
/* The step that is literally a form now looks like one. Same tokens as every
   other card on the flow -- a container, not a new object. */
.setup-work-card{
  background:var(--t-card);border:1px solid var(--t-line);border-radius:16px;
  padding:18px;margin:0 0 12px;
}
.setup-work-card .settings-amount-row,
.setup-work-card .settings-schedule-row{margin-bottom:16px}

/* The product's own label device, borrowed from the METHOD caption on Order:
   uppercase, small, tracked, muted. A caption on the control beneath it rather
   than a heading competing with the step title. */
.setup-micro{
  display:block;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t-muted);margin:0 0 6px;
}

/* Inside the card the dates lose the panel they had when they floated on the
   page's own ground. */
.setup-work-card .setup-schedule-preview{
  border:0;border-top:1px solid var(--t-line);border-radius:0;
  background:none;padding:14px 0 0;margin-top:4px;
}
.setup-work-card .setup-schedule-preview strong{margin-bottom:4px}

.setup-more-options{border-top:1px solid var(--t-line);padding-top:12px;margin-top:12px}
.setup-more-body{padding-top:10px}

/* --- Preview: one checklist, not six mini-cards --------------------------- */
/* Each row was its own rounded white card inside the page's own card, which is
   the "card inside a card inside a card" this flow kept producing. One surface,
   divided. */
.setup-checklist{
  display:grid;margin:0 0 16px;
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);
  overflow:hidden;
}
.setup-check-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-top:1px solid var(--t-line);
  font-size:14px;line-height:20px;
}
.setup-check-row:first-child{border-top:0}
.setup-check-row > span:first-child{color:var(--t-muted)}
.setup-check-row > strong{margin-left:auto;color:var(--t-ink);font-weight:650;text-align:right}
/* The one row holding the launch up. Marked on the row itself, because the
   checklist is where somebody is already looking. */
.setup-check-row.is-unresolved > strong{color:var(--t-accent)}
.setup-check-fix{
  display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;
  border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);
  color:var(--t-brand-deep);font-size:12.5px;font-weight:650;text-decoration:none;
  white-space:nowrap;
}
.setup-check-fix:hover{border-color:var(--t-brand-deep)}
.setup-check-fix:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

/* --- Gather: the free allowance, said before the roster it qualifies ------- */
/* Quiet on purpose. It is context an organizer reads once before inviting a
   sixth person, not a warning and not a gate -- nothing here stops anybody
   being invited, so it must not carry the weight of something that does. */
.setup-allowance-line{margin:0 0 8px;font-size:12.5px;line-height:18px;
  color:var(--t-muted);font-weight:600}

/* --- Gather: the roster, headed by what it adds up to --------------------- */
.setup-roster-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 8px}
.setup-roster-head h3{margin:0;font-size:15px;line-height:22px;font-weight:650;color:var(--t-ink)}
.setup-roster-counts{margin:0;font-size:12.5px;line-height:18px;color:var(--t-muted);font-weight:600}

/* A count beside a heading. Neutral on purpose: it states how many, and the
   loud colours are spent on things that need doing. Shared by Gather's roster
   and Invites' "Waiting to be sent". */
.count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--t-inset);color:var(--t-ink);border:1px solid var(--t-line);
  font-size:12px;line-height:1;font-weight:650;font-variant-numeric:tabular-nums;
}

/* The roster folds to its head: title, count bubble, roster line. */
.setup-roster-panel > summary{list-style:none;cursor:pointer;align-items:center}
.setup-roster-panel > summary::-webkit-details-marker{display:none}
.setup-roster-title{display:inline-flex;align-items:center;gap:8px}
.setup-roster-panel > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;
  border-right:2px solid var(--t-muted);border-bottom:2px solid var(--t-muted);
  transform:rotate(-135deg);transition:transform .15s ease;
}
.setup-roster-panel:not([open]) > summary::after{transform:rotate(45deg)}
.setup-roster-panel > summary:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:8px}

/* Expansion, not pagination. Rendering fourteen rows made Gather 3,797px --
   5.9 screens -- of which the roster was 1,441. The step asks "have I brought
   the people together", and the counts above answer that without the rows. */
.roster-expand{
  display:inline-flex;align-items:center;min-height:36px;margin:8px 0 0;padding:6px 0;
  border:0;background:none;font:inherit;font-size:13px;font-weight:650;
  color:var(--t-brand-deep);cursor:pointer;
}
.roster-expand:hover{text-decoration:underline;text-underline-offset:3px}
.roster-expand:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:6px}

/* --- The expected size: a row, not a panel -------------------------------- */
/* It was 445px on the main flow: heading, counts, progress bar, question, a
   paragraph saying the question was optional, and a paragraph explaining
   Free-tier billing. The counts moved above the roster where they are read. */
.people-target{margin:0 0 16px}
.people-target > summary{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--t-line);border-radius:12px;
  background:var(--t-card);cursor:pointer;list-style:none;
  font-size:13px;line-height:20px;
}
.people-target > summary::-webkit-details-marker{display:none}
.people-target > summary:hover{border-color:var(--t-muted)}
.people-target > summary:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.people-target-key{color:var(--t-muted);font-weight:600}
.people-target-value{color:var(--t-ink);font-weight:650}
.people-target-edit{margin-left:auto;color:var(--t-brand-deep);font-weight:650}
.people-target-form{display:grid;gap:6px;padding:12px 12px 0}
.people-target-form label{font-size:13px;font-weight:650;color:var(--t-ink)}
.people-target-hint,.people-target-billing{margin:0;font-size:12px;line-height:18px}
.people-target-controls{display:flex;gap:8px;align-items:center;margin-top:4px}
.people-target-controls input{width:110px;padding:9px 11px;border:1px solid var(--t-line);
  border-radius:10px;font:inherit;font-size:13px;background:var(--t-card);color:var(--t-ink)}

.setup-roster{display:grid;gap:8px}
.setup-roster-row{min-height:56px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid #1E2A36}
.setup-roster-row strong{display:block;color:var(--t-ink);font-size:16px;line-height:24px;font-weight:500}
.setup-roster-row small{display:block;color:var(--t-muted);font-size:13px;line-height:20px}
.setup-roster-row form{margin:0;grid-column:2 / -1;justify-self:end}
.setup-roster-row button{min-height:34px;border-radius:999px;border:1px solid var(--t-line);background:#FFFFFF;color:var(--t-brand-deep);
  font:inherit;font-size:13px;cursor:pointer}
/* .setup-people-tabs is gone with the markup it styled (4038e80, when the
   People workspace stopped being rendered twice). What survived it set
   --t-ink on #141C26 -- 1.01:1, text the same colour as its own panel. */
.invite-handoff{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--t-line);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
}
.invite-handoff a:not(.member-primary),
.invite-handoff button:not(.member-primary){
  min-height:38px;
  border:1px solid var(--t-line);
  border-radius:999px;
  background:#FFFFFF;
  color:var(--t-brand-deep);
  padding:6px 12px;
  text-decoration:none;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  box-shadow:none;
}
.invite-handoff-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.invite-handoff-actions .member-primary{background:var(--t-brand-deep);color:#FFFFFF;border-color:var(--t-brand-deep)}
.pending-lead{display:flex;align-items:center;gap:9px}
@media(max-width:560px){
  .invite-handoff-actions{grid-template-columns:1fr}
}
.setup-start-form{margin:4px 0 0}
.setup-start-form .setup-add-primary,
.setup-add-screen>.setup-add-primary:last-of-type{width:100%;margin-top:0}
.sticky-hint{text-align:center}
@media(max-width:520px){
  .member-auth-note span{
    display:block;
  }
  .member-auth .btn.member-primary,.member-primary[data-auth-primary]{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:8}
  .setup-start-form,
  .setup-add-screen>.setup-add-primary:last-of-type{position:fixed;left:max(20px,env(safe-area-inset-left));
    right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:30;max-width:390px;margin:0 auto}
  .setup-start-form .setup-add-primary{width:100%}
  .sticky-hint{position:fixed;left:20px;right:20px;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 54px);z-index:30}
}

body:has(.console-login) .console-input-wrap input{
  min-height:auto;
  border:0;
  background:transparent;
  color:var(--t-ink);
  box-shadow:none;
}

/* Auth geometry lock: console, member login, signup, and recovery share one card. */
body:has(.console-login),
body:has(.member-auth){
  background:var(--t-bg);
  color:var(--t-ink);
}
.wrap:has(.console-login),
.wrap:has(.member-auth){
  max-width:none;
  min-height:100vh;
  display:grid;
  place-items:center;
  margin:0;
  padding:20px;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  background:var(--t-bg);
}
.wrap:has(.console-login)::after{
  display:none;
}
.console-login,
.member-auth{
  width:min(400px,100%);
  transform:translateY(-10px);
  font-family:var(--t-font-body);
}
.console-login-panel,
.member-auth-panel{
  padding:24px;
  border:1px solid var(--t-line);
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 24px 70px -48px #000;
}
.console-login-head{
  margin-bottom:24px;
  text-align:left;
}
.console-login-brand,
.member-auth-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
}
.console-login-head h2,
.member-auth-panel > h2{
  margin:0;
  color:var(--t-ink);
  font-size:24px;
  line-height:32px;
  font-weight:650;
  letter-spacing:0;
  text-align:left;
}
.console-login-head p,
.member-auth-panel > h2 + p{
  margin:8px 0 0;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
  text-align:left;
}
.member-auth-panel > h2 + p + .member-auth-form,
.member-auth-panel > h2 + p + .err + .member-auth-form,
.member-auth-panel > h2 + p + .field-error + .member-auth-form{
  margin-top:24px;
}
.console-login-form,
.member-auth-form{
  display:grid;
  gap:16px;
}
.member-auth-form{
  margin-top:0;
}
.console-login-form label,
.member-auth-form label{
  display:block;
  margin:0 0 8px;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
}
.console-input-wrap,
.member-auth input[type=text],
.member-auth input[type=email],
.member-auth input[type=tel],
.member-auth input[type=password]{
  width:100%;
  height:48px;
  min-height:48px;
  border:1px solid var(--t-line);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--t-ink);
  font-size:16px;
  line-height:24px;
}
.console-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.console-input-wrap input{
  height:auto;
  min-height:auto;
  min-width:0;
  flex:1;
  border:0;
  background:transparent;
  padding:0;
  color:var(--t-ink);
  font-size:16px;
  line-height:24px;
  box-shadow:none;
}
.member-auth input[type=text],
.member-auth input[type=email],
.member-auth input[type=tel],
.member-auth input[type=password]{
  padding:0 12px;
}
.console-input-wrap input::placeholder,
.member-auth input::placeholder{
  color:#5C6B7A;
}
.console-input-wrap:focus-within,
.member-auth input:focus{
  outline:0;
  border-color:var(--t-brand);
  box-shadow:inset 0 0 0 1px var(--t-brand),0 0 0 3px rgba(42,165,106,.16);
}
.member-password-row{
  position:relative;
}
.member-password-row input{
  padding-right:68px!important;
}
.console-password-toggle,
.member-password-toggle{
  display:grid;
  place-items:center;
  min-width:44px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--t-brand-deep);
  font:inherit;
  font-size:12px;
  line-height:20px;
  font-weight:600;
  cursor:pointer;
}
.member-password-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
}
.console-password-toggle{
  position:static;
  transform:none;
  margin-left:auto;
}
.console-forgot-link,
.member-auth .auth-row a{
  color:var(--t-muted);
  text-decoration:none;
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.console-forgot-link{
  margin-top:-8px;
}
.member-auth .auth-row{
  margin-top:-8px;
  text-align:left;
}
.console-forgot-link:hover,
.member-auth .auth-row a:hover{
  color:#B8C5D6;
  text-decoration:none;
}
.console-login-form .btn,
.member-auth .btn.member-primary{
  width:100%;
  height:48px;
  min-height:48px;
  margin-top:8px;
  border-radius:12px;
  background:var(--t-brand);
  /* Dark ink, because --t-brand is 3.14:1 against white and says so in
     tokens.css: "fill only -- never text". The same button is given #07110D
     two hundred lines above; this rule overrode it, so the sign-in button on
     both the console and the member auth screens rendered white on green and
     failed AA. 6.11:1 now, and it is one rule rather than a second opinion. */
  color:#07110D;
  box-shadow:none;
  font-size:16px;
  line-height:24px;
  font-weight:500;
}
.member-auth .btn.member-primary.is-incomplete{
  opacity:1;
  background:rgba(42,165,106,.42);
  color:rgba(255,255,255,.86);
}
.console-remember{
  display:flex!important;
  align-items:flex-start;
  gap:8px;
  margin:0!important;
  color:var(--t-ink)!important;
  font-size:13px!important;
  line-height:20px!important;
  font-weight:400!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.console-remember input{
  width:18px;
  height:18px;
  margin-top:1px;
  accent-color:var(--t-brand);
}
.console-remember strong{
  display:block;
  color:var(--t-ink);
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.console-remember small{
  display:block;
  color:#8B9BB0;
  font-size:12px;
  line-height:16px;
}
.console-recovery-state{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border:1px solid rgba(42,165,106,.22);
  border-radius:12px;
  background:rgba(42,165,106,.08);
  color:var(--t-ink);
}
.console-recovery-state strong{
  font-size:15px;
  line-height:22px;
  font-weight:650;
}
.console-recovery-state span{
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
}
.console-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  margin-top:16px;
  border:1px solid var(--t-line);
  border-radius:12px;
  background:#FFFFFF;
  color:var(--t-ink);
  box-shadow:none;
  font-size:16px;
  line-height:24px;
  font-weight:500;
  text-decoration:none;
}
.console-secondary:hover{
  border-color:var(--t-brand);
  color:var(--t-ink);
  text-decoration:none;
}
.member-auth-provider-reserve{
  height:0;
}
.auth-divider{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  margin:18px 0 0;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
}
.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  background:var(--t-line);
}
.auth-divider span{
  display:block;
}
.member-provider-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:48px;
  margin-top:12px;
  border:1px solid #D8DEE5;
  border-radius:12px;
  background:#FFFFFF;
  color:var(--t-ink)!important;
  text-decoration:none;
  font-size:16px;
  line-height:24px;
  font-weight:540;
  box-shadow:0 1px 2px rgba(17,24,32,.04);
}
.member-provider-button .google-mark{
  width:20px;
  height:20px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.member-provider-button .google-mark svg{
  width:20px;
  height:20px;
  display:block;
}
.member-provider-button:hover,
.member-provider-button:focus-visible{
  border-color:#AEB8C4;
  background:#FFFFFF;
  color:var(--t-ink)!important;
  text-decoration:none;
  box-shadow:0 0 0 3px rgba(42,165,106,.14);
  outline:0;
}
.member-auth-note,
.member-auth .auth-alt,
.field-hint,
.console-login-footer,
.member-auth-footer{
  text-align:left;
  color:var(--t-muted)!important;
}
.member-auth-note{
  margin-top:0!important;
  font-size:13px!important;
  line-height:20px!important;
}
.member-auth .auth-alt{
  margin-top:8px;
  font-size:13px;
  line-height:20px;
}
.member-auth .auth-alt a{
  color:var(--t-brand-deep);
}
.console-login-footer,
.member-auth-footer{
  margin:16px 0 0!important;
  font-size:12px!important;
  line-height:16px!important;
}
.member-auth-helper{
  display:grid;
  gap:2px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(139,155,176,.18);
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
}
.member-auth-helper span:first-child{
  color:var(--t-ink);
  font-weight:500;
}
.member-auth-helper a{
  color:var(--t-brand-deep);
  font-weight:500;
}
.member-auth .err,
.member-auth-panel > .field-error{
  margin:16px 0 0;
  color:#FFC9C9!important;
  background:rgba(226,92,92,.12);
  border:1px solid rgba(226,92,92,.24);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px!important;
  line-height:20px!important;
  text-align:left;
}
@media(max-width:520px){
  .console-login,
  .member-auth{
    transform:none;
  }
  .member-auth-note span{
    display:inline;
  }
}
@media(max-height:760px){
  .console-login,
  .member-auth{
    transform:none;
  }
  .wrap:has(.console-login),
  .wrap:has(.member-auth){
    place-items:start center;
  }
}

/* Brand/navigation alignment pass: public pages and member auth should feel like one Tanda. */
.public-topbar{
  padding:12px max(var(--pad),calc((100vw - 1040px)/2 + var(--pad)));
  gap:18px;
  flex-wrap:nowrap;
}
.public-nav{
  gap:4px;
  margin-left:8px;
}
.public-nav a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.9rem;
}
.public-nav a:hover,
.public-nav a[aria-current="page"]{
  background:var(--brand-soft);
  color:var(--brand-ink);
  text-decoration:none;
}
.public-actions{
  gap:10px;
}
.nav-install-trigger,
.nav-install-menu{
  min-height:38px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:8px;
  background:rgba(244,241,234,.025);
  color:var(--mute);
  font:inherit;
  font-size:13px;
  line-height:20px;
  font-weight:620;
  cursor:pointer;
}
.nav-install-trigger{
  padding:8px 12px;
}
.nav-install-trigger:hover,
.nav-install-trigger:focus-visible,
.nav-install-menu:hover,
.nav-install-menu:focus-visible{
  color:var(--paper);
  border-color:rgba(42,165,106,.58);
  outline:0;
}
.nav-install-mobile{
  display:none;
  margin-left:auto;
}
.nav-install-menu{
  width:100%;
  padding:12px;
  text-align:left;
}
.nav-install-hint{
  margin:2px 0;
  padding:12px;
  color:var(--mute);
  font-size:13px;
  line-height:19px;
}
.nav-signin{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
}
.nav-signin:hover{
  background:rgba(58,42,30,.05);
  text-decoration:none;
}
.btn.nav-cta{
  min-height:38px;
  border-radius:var(--radius-sm);
  padding:8px 14px;
}
.signin-grid{
  grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);
}
.signin-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}
.signin-card.primary-door{
  border-color:rgba(42,165,106,.3);
  box-shadow:var(--shadow-lg);
}
.signin-card:hover{
  border-color:rgba(42,165,106,.38);
  text-decoration:none;
}
.member-auth-back{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  margin:0 0 10px;
  color:var(--t-brand-deep)!important;
  font-size:13px;
  line-height:20px;
  font-weight:600;
  text-decoration:none;
}
.member-auth-back::before{
  content:"";
  width:14px;
  height:14px;
  margin-right:6px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M15.5 19.5 8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M15.5 19.5 8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.member-auth-back:hover{
  color:var(--t-green-hover)!important;
  text-decoration:none!important;
}
body:has(.member-auth){
  background:var(--t-bg);
}
.wrap:has(.member-auth){
  background:linear-gradient(180deg,var(--t-bg) 0%,#111A24 100%);
}
.member-auth-panel{
  background:#FFFFFF;
  /* Same leftover as the later generation: white-on-white at 6% alpha. This
     one is overridden downstream, but it is left correct rather than wrong
     so the next person to delete a duplicate does not resurrect the bug. */
  border-color:var(--line);
}
.console-input-wrap{
  background:#FFFFFF;
  border-color:var(--t-line);
}
.member-auth input[type=text],
.member-auth input[type=email],
.member-auth input[type=tel],
.member-auth input[type=password]{
  background:#FFFFFF;
  border-color:var(--t-line);
  color:var(--t-ink);
}
.member-auth input:focus,
.console-input-wrap:focus-within{
  border-color:var(--t-green-bright);
  box-shadow:inset 0 0 0 1px var(--t-green-bright),0 0 0 3px rgba(42,165,106,.2);
}
.member-auth .btn.member-primary,
.console-login-form .btn,
.member-primary{
  background:var(--t-brand);
}
.member-auth .btn.member-primary:hover,
.console-login-form .btn:hover,
.member-primary:hover{
  background:var(--t-green-bright);
}
.member-provider-button{
  background:var(--t-bg);
  border-color:rgba(255,255,255,.06);
}
.member-provider-button:hover{
  border-color:var(--t-green-bright);
}
.member-auth a,
.member-auth .auth-alt a,
.member-password-toggle,
.console-password-toggle{
  color:var(--t-green-soft);
}
.member-auth .btn.member-primary.is-incomplete{
  background:var(--t-line);
  color:rgba(248,251,255,.45);
}
body:has(.member-shell) .topbar{
  background:rgba(11,16,22,.9);
  border-bottom-color:rgba(255,255,255,.06);
}
/* Left to the palette block below, which carries the green wash. Re-declaring
   the shorthand here would reset it to a flat colour. */
body:has(.member-shell){
  color:var(--t-ink);
}
.member-circle-row:hover,
.member-shell .minimal-action:hover,
.cockpit-shell .workspace-back,
.cockpit-shell .workspace-menu summary,
.cockpit-shell .pulse-drawer summary{
  border-color:var(--t-brand);
}
.member-circle-chevron,
.topbar-back,
.cockpit-shell .workspace-back,
.cockpit-shell .workspace-menu summary,
.cockpit-shell .pulse-drawer summary,
.member-text-link,
.invite-handoff a:not(.member-primary),
.invite-handoff button:not(.member-primary){
  color:var(--t-brand-deep)!important;
}
.member-shell .pill.ok{
  border-color:rgba(42,165,106,.34);
  background:rgba(42,165,106,.16);
  color:var(--t-green-hover);
}
@media(max-width:900px){
  .signin-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .public-topbar{
    flex-wrap:wrap;
  }
  .public-actions{
    margin-left:auto;
  }
}

/* Public marketing v2: one Tanda brand, night canvas, scarce green. */
body.brand-night{
  --night:#0B1016;
  --card:#141C26;
  --green:var(--t-brand);
  --paper:#F4F1EA;
  --mute:#8B9BB0;
  --danger:#E25C5C;
  margin:0;
  background:var(--night);
  color:var(--paper);
  overflow-x:clip;
  font-family:var(--t-font-body);
  font-size:16px;
  line-height:24px;
}
body.public{
  scroll-padding-top:calc(var(--t-topbar-h) + var(--space-4));
}
body.public [id]{
  scroll-margin-top:calc(var(--t-topbar-h) + var(--space-4));
}
body.brand-night::before{
  display:none;
}
body.brand-night .public-topbar{
  height:64px;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  background:rgba(11,16,22,.9);
  border-bottom:1px solid rgba(244,241,234,.08);
}
body.brand-night .public-lockup img{
  width:120px;
  height:auto;
}
body.public .public-lockup .brand-on-dark{display:block}
body.public .public-lockup .brand-on-light{display:none}
html[data-public-theme="light"] body.public .brand-on-dark{display:none}
html[data-public-theme="light"] body.public .brand-on-light{display:block}
body.brand-night .public-nav{
  margin:0 auto;
  gap:18px;
}
body.brand-night .public-nav a,
body.brand-night .nav-signin{
  color:var(--mute);
  border-radius:0;
  background:transparent;
  padding:20px 0 18px;
  min-height:0;
  border-bottom:2px solid transparent;
}
body.brand-night .public-nav a:hover,
body.brand-night .public-nav a[aria-current="page"],
body.brand-night .nav-signin:hover{
  color:var(--paper);
  background:transparent;
  border-bottom-color:var(--green);
}
.theme-toggle{
  min-height:38px;
  padding:7px 11px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  background:rgba(244,241,234,.025);
  color:var(--mute);
  font:inherit;
  font-size:13px;
  line-height:20px;
  font-weight:460;
  cursor:pointer;
}
.theme-toggle .icon{
  width:18px;
  height:18px;
}
.theme-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.theme-icon-light{
  display:none;
}
html[data-public-theme="light"] .theme-icon-dark{
  display:none;
}
html[data-public-theme="light"] .theme-icon-light{
  display:inline-flex;
}
.nav-theme-utility{
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  justify-content:center;
  flex:0 0 auto;
}
.theme-toggle:hover,
.theme-toggle:focus-visible{
  color:var(--paper);
  border-color:rgba(42,165,106,.58);
  outline:0;
}
.nav-theme-toggle{
  width:100%;
  gap:10px;
  justify-content:flex-start;
  text-align:left;
}
body.brand-night .btn,
body.brand-night .btn.nav-cta{
  min-height:40px;
  border:0;
  border-radius:8px;
  background:var(--green);
  color:#07110D;
  box-shadow:none;
  font-weight:700;
}
body.brand-night .btn:hover{
  background:var(--t-green-bright);
  text-decoration:none;
}
body.brand-night .text-link{
  color:var(--paper);
  font-weight:700;
  text-decoration:none;
}
body.brand-night .text-link:hover{
  color:var(--green);
}
body.brand-night .mkt{
  max-width:none;
  padding:0;
}
body.brand-night .mkt-hero,
body.brand-night .mkt-section,
body.brand-night .mkt-cta,
body.brand-night .start-examples,
body.brand-night .chat{
  width:min(1120px,calc(100% - 48px));
  margin-inline:auto;
}
body.brand-night .mkt-hero{
  padding:var(--space-8) 0 var(--space-7);
  text-align:left;
}
body.brand-night .home-hero{
  min-height:0;
  display:grid;
  align-items:center;
  position:relative;
  overflow:hidden;
}
body.brand-night .home-hero::before{
  content:"";
  position:absolute;
  inset:8% -8% auto;
  height:320px;
  background:linear-gradient(120deg,transparent,rgba(42,165,106,.08),transparent);
  transform:skewY(-5deg);
  pointer-events:none;
}
body.brand-night .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:64px;
  align-items:center;
  position:relative;
}
body.brand-night .hero-copy,
body.brand-night .market-picker,
body.brand-night .round-mock{
  min-width:0;
  max-width:100%;
}
body.brand-night .mkt-kicker,
body.brand-night .mkt-eyebrow,
body.brand-night .mini-kicker{
  color:var(--mute);
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:750;
}
body.brand-night h1,
body.brand-night .mkt-hero h1{
  margin:12px 0 16px;
  color:var(--paper);
  font-family:var(--t-font-body);
  font-size:40px;
  line-height:48px;
  font-weight:650;
}
body.brand-night h1 span{
  display:block;
}
body.brand-night h2{
  color:var(--paper);
  font-size:24px;
  line-height:32px;
  font-weight:560;
}
body.brand-night .mkt-lead,
body.brand-night .muted,
body.brand-night .micro{
  color:var(--mute);
}
body.brand-night .micro{
  margin:8px 0 0;
  font-size:13px;
  line-height:20px;
}
body.brand-night .mkt-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-top:24px;
}
.hero-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
  color:#B8C5D6;
  font-size:13px;
  line-height:20px;
}
.hero-trust-row span{
  padding:5px 9px;
  border:1px solid rgba(244,241,234,.09);
  border-radius:999px;
  background:rgba(244,241,234,.025);
}
.early-bird-inline{
  width:min(560px,100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 0;
  padding:12px 14px;
  border:1px solid rgba(42,165,106,.18);
  border-radius:8px;
  background:rgba(42,165,106,.055);
}
.early-bird-inline div{
  display:grid;
  gap:2px;
}
.early-bird-inline span{
  color:var(--mute);
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:560;
}
.early-bird-inline strong{
  color:var(--paper);
  font-size:14px;
  line-height:20px;
  font-weight:460;
}
.early-bird-inline .text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  min-height:36px;
  padding:7px 12px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:14px;
  line-height:20px;
  font-weight:650;
  text-decoration:none;
}
.early-bird-inline .text-link::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
}
.early-bird-inline .text-link:hover,
.early-bird-inline .text-link:focus-visible{
  text-decoration:none;
}
.early-bird-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid rgba(42,165,106,.16);
  border-radius:8px;
  padding:24px;
  background:rgba(42,165,106,.045);
}
.early-bird-callout .mkt-actions{
  flex:0 0 auto;
  margin-top:0;
}
.early-bird-hero{
  border-bottom:1px solid rgba(244,241,234,.06);
}
body.brand-night .early-bird-hero{
  min-height:calc(84vh - 64px);
  display:grid;
  align-items:center;
}
body.brand-night .early-bird-hero .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
}
.early-bird-pass{
  width:min(640px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:28px 0 0;
  overflow:hidden;
  border:1px solid rgba(244,241,234,.1);
  border-radius:8px;
  background:rgba(244,241,234,.1);
}
.early-bird-pass div{
  min-height:94px;
  padding:16px;
  background:rgba(20,28,38,.72);
}
.early-bird-pass span,
.early-bird-ticket span{
  display:block;
  color:var(--mute);
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:650;
}
.early-bird-pass strong{
  display:block;
  margin-top:10px;
  color:var(--paper);
  font-size:20px;
  line-height:28px;
  font-weight:560;
}
.early-bird-preview{
  position:relative;
  display:grid;
  gap:14px;
  align-self:stretch;
  align-content:center;
}
.early-bird-proof{
  width:min(360px,100%);
  justify-self:end;
  padding:16px;
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:rgba(244,241,234,.035);
}
.early-bird-proof span{
  display:block;
  color:var(--green);
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:560;
}
.early-bird-proof p{
  margin:8px 0 0;
  color:#B8C5D6;
  font-size:15px;
  line-height:24px;
  font-weight:360;
}
.early-bird-ticket{
  position:relative;
  z-index:2;
  width:min(280px,82%);
  margin:0 0 -34px -18px;
  padding:16px;
  border:1px solid rgba(42,165,106,.2);
  border-radius:8px;
  background:rgba(42,165,106,.08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.early-bird-ticket strong{
  display:block;
  margin-top:8px;
  color:var(--paper);
  font-size:19px;
  line-height:27px;
  font-weight:620;
}
.early-bird-ticket p{
  margin:4px 0 0;
  color:var(--mute);
  font-size:13px;
  line-height:20px;
}
body.brand-night .early-bird-mock{
  width:min(360px,100%);
  justify-self:end;
  border-color:rgba(244,241,234,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}
html[data-public-theme="light"] body.brand-night{
  --night:#F7F5F2;
  --card:#FFFFFF;
  --paper:#0B1016;
  --mute:#5D6876;
  background:#F7F5F2;
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .public-topbar{
  background:rgba(247,245,242,.9);
  border-bottom-color:rgba(11,16,22,.08);
}
html[data-public-theme="light"] body.brand-night .public-nav a,
html[data-public-theme="light"] body.brand-night .nav-signin{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .public-nav a:hover,
html[data-public-theme="light"] body.brand-night .public-nav a[aria-current="page"],
html[data-public-theme="light"] body.brand-night .nav-signin:hover{
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .theme-toggle{
  border-color:rgba(11,16,22,.12);
  background:rgba(255,255,255,.62);
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .theme-toggle:hover,
html[data-public-theme="light"] body.brand-night .theme-toggle:focus-visible{
  color:#0B1016;
  border-color:rgba(42,165,106,.58);
}
html[data-public-theme="light"] body.brand-night .text-link{
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .text-link:hover{
  color:var(--t-green-hover);
}
html[data-public-theme="light"] body.brand-night .home-hero::before{
  background:linear-gradient(120deg,transparent,rgba(42,165,106,.09),transparent);
}
html[data-public-theme="light"] body.brand-night .mkt-lead,
html[data-public-theme="light"] body.brand-night .muted,
html[data-public-theme="light"] body.brand-night .micro,
html[data-public-theme="light"] body.brand-night .section-note,
html[data-public-theme="light"] body.brand-night .text-link.section-note{
  color:var(--color-text-secondary);
}
html[data-public-theme="light"] body.brand-night .mkt-kicker,
html[data-public-theme="light"] body.brand-night .mkt-eyebrow,
html[data-public-theme="light"] body.brand-night .mini-kicker{
  color:#6B7582;
}
html[data-public-theme="light"] body.brand-night .hero-trust-row{
  color:#4F5B68;
}
html[data-public-theme="light"] body.brand-night .hero-trust-row span,
html[data-public-theme="light"] body.brand-night .early-bird-inline,
html[data-public-theme="light"] body.brand-night .market-picker > span,
html[data-public-theme="light"] body.brand-night .market-picker button{
  border-color:rgba(11,16,22,.1);
  background:rgba(255,255,255,.58);
}
html[data-public-theme="light"] body.brand-night .early-bird-inline,
html[data-public-theme="light"] body.brand-night .early-bird-callout{
  border-color:rgba(42,165,106,.18);
  background:rgba(42,165,106,.08);
}
html[data-public-theme="light"] body.brand-night .early-bird-pass{
  border-color:#E2DED8;
  background:#E2DED8;
}
html[data-public-theme="light"] body.brand-night .early-bird-pass div,
html[data-public-theme="light"] body.brand-night .early-bird-ticket,
html[data-public-theme="light"] body.brand-night .early-bird-proof{
  background:rgba(255,255,255,.74);
}
html[data-public-theme="light"] body.brand-night .early-bird-ticket{
  border-color:#DDE7DD;
}
html[data-public-theme="light"] body.brand-night .early-bird-proof{
  border-color:rgba(11,16,22,.08);
}
html[data-public-theme="light"] body.brand-night .early-bird-proof p{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .early-bird-inline strong,
html[data-public-theme="light"] body.brand-night .early-bird-ticket strong{
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .market-picker button[aria-selected="true"]{
  border-color:rgba(42,165,106,.62);
  background:rgba(42,165,106,.09);
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .identity-headline span + span{
  color:#364251;
}
html[data-public-theme="light"] body.brand-night .round-mock,
html[data-public-theme="light"] body.brand-night .mkt-card,
html[data-public-theme="light"] body.brand-night .trust-spine > div,
html[data-public-theme="light"] body.brand-night .round-loop > div,
html[data-public-theme="light"] body.brand-night .single-price-card,
html[data-public-theme="light"] body.brand-night .start-panel,
html[data-public-theme="light"] body.brand-night .mkt-cta{
  border-color:rgba(11,16,22,.08);
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 48px rgba(26,46,53,.08);
}
html[data-public-theme="light"] body.brand-night .mkt-card h2,
html[data-public-theme="light"] body.brand-night .mkt-card h3,
html[data-public-theme="light"] body.brand-night .trust-spine strong,
html[data-public-theme="light"] body.brand-night .round-loop strong,
html[data-public-theme="light"] body.brand-night .single-price-card h2,
html[data-public-theme="light"] body.brand-night .start-panel h2{
  color:var(--color-text);
}
html[data-public-theme="light"] body.brand-night .mkt-card p,
html[data-public-theme="light"] body.brand-night .trust-spine p,
html[data-public-theme="light"] body.brand-night .round-loop p,
html[data-public-theme="light"] body.brand-night .single-price-card p,
html[data-public-theme="light"] body.brand-night .start-panel p{
  color:var(--color-text-secondary);
}
html[data-public-theme="light"] body.brand-night .round-mock button,
html[data-public-theme="light"] body.brand-night input,
html[data-public-theme="light"] body.brand-night textarea,
html[data-public-theme="light"] body.brand-night select{
  border-color:rgba(11,16,22,.11);
  background:#FFFFFF;
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .round-mock .mock-primary{
  background:rgba(42,165,106,.95);
  color:#07110D;
}
html[data-public-theme="light"] body.brand-night .single-price-card .price-band{
  border-color:rgba(11,16,22,.08);
  background:rgba(247,245,242,.8);
}
html[data-public-theme="light"] body.brand-night .single-price-card .price-band + .price-band,
html[data-public-theme="light"] body.brand-night .price-lockup{
  border-color:rgba(42,165,106,.18);
  background:rgba(42,165,106,.08);
}
html[data-public-theme="light"] body.brand-night .single-price-card .paid-plan-option.is-featured{
  border-color:rgba(42,165,106,.28);
  background:rgba(42,165,106,.11);
}
html[data-public-theme="light"] body.brand-night .price-lockup span{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .price-lockup strong,
html[data-public-theme="light"] body.brand-night .home-beats strong{
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .faq-list details,
html[data-public-theme="light"] body.brand-night .rule-grid div,
html[data-public-theme="light"] body.brand-night .trust-spine > div,
html[data-public-theme="light"] body.brand-night .round-loop > div{
  border-top-color:rgba(11,16,22,.08);
}
html[data-public-theme="light"] body.brand-night .public-footer{
  border-top-color:rgba(11,16,22,.08);
}
.market-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:20px 0 4px;
  color:var(--mute);
  font-size:13px;
  line-height:20px;
}
.market-picker > span{
  padding:6px 10px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  color:var(--paper);
}
.market-picker button{
  padding:6px 10px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  background:transparent;
  color:var(--mute);
  cursor:pointer;
}
.market-picker button[aria-selected="true"]{
  border-color:var(--green);
  color:var(--paper);
}
.identity-headline span{
  display:block;
}
.identity-headline span:first-child{
  color:var(--paper);
}
.identity-headline span + span{
  color:#C9D3DE;
}
.identity-picker{
  align-items:flex-start;
}
.identity-picker > span{
  flex-basis:100%;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--mute);
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:650;
}
.identity-picker button{
  background:rgba(244,241,234,.025);
}
.market-picker-select{
  gap:10px;
  margin-top:18px;
}
.market-picker-select .market-picker-label{
  padding:0;
  border:0;
  color:var(--mute);
}
.market-select-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  background:rgba(20,28,38,.68);
  color:var(--paper);
}
.market-select-flag{
  min-width:24px;
  color:var(--paper);
  font-size:13px;
  line-height:20px;
  text-align:center;
}
.market-select-wrap select{
  width:190px;
  min-height:36px;
  border:0;
  background:transparent;
  color:var(--paper);
  font:inherit;
  outline:0;
  cursor:pointer;
}
.market-select-wrap select option{
  color:#0B1016;
}
.market-select-wrap:focus-within{
  border-color:rgba(42,165,106,.76);
  box-shadow:0 0 0 3px rgba(42,165,106,.13);
}
.round-mock{
  width:260px;
  min-height:500px;
  border-radius:28px;
  background:var(--card);
  border:1px solid rgba(244,241,234,.08);
  padding:16px;
  box-shadow:0 20px 64px rgba(0,0,0,.34);
}
.small-mock{
  min-height:420px;
  margin-left:auto;
}
.phone-status{
  display:flex;
  justify-content:flex-end;
  gap:5px;
  height:24px;
}
.phone-status span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--mute);
}
.mock-card-title{
  margin-top:22px;
  color:var(--paper);
  font-weight:620;
}
.round-mock p{
  margin:4px 0 28px;
  color:var(--mute);
}
.round-mock p.mock-helper{
  margin:8px 0 0;
  color:#9EADBF;
  font-size:12px;
  line-height:18px;
}
.receiver{
  display:grid;
  gap:8px;
  margin:20px 0;
  color:var(--mute);
}
.receiver strong{
  color:var(--paper);
  font-size:28px;
  line-height:36px;
}
.round-mock button{
  width:100%;
  min-height:48px;
  margin-top:12px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:8px;
  background:#0F1720;
  color:var(--paper);
  font-weight:700;
}
.round-mock .mock-primary{
  background:var(--green);
  color:#07110D;
}
.compact-mock{
  min-height:430px;
  align-self:center;
}
.compact-mock .mock-card-title{
  margin-top:16px;
}
.compact-mock .receiver{
  margin:20px 0;
}
body.brand-night .mkt-strip{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  background:var(--card);
  border-block:1px solid rgba(244,241,234,.08);
  padding:22px max(24px,calc((100vw - 1120px)/2));
}
body.brand-night .mkt-strip div{
  min-width:0;
}
body.brand-night .mkt-strip strong{
  color:var(--paper);
}
body.brand-night .mkt-strip span{
  display:block;
  color:var(--mute);
  font-size:13px;
  line-height:20px;
}
body.brand-night .mkt-section{
  padding:var(--space-8) 0;
}
body.brand-night .mkt-cta{
  margin-top:var(--space-7);
  margin-bottom:var(--space-7);
  padding:var(--space-6) var(--space-5);
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:#141C26;
  color:var(--paper);
  text-align:center;
  box-shadow:none;
}
body.brand-night .mkt-cta h2{
  margin:0;
  color:var(--paper);
  font-family:var(--t-font-body);
  font-size:24px;
  line-height:32px;
}
body.brand-night .mkt-cta .mkt-actions{
  justify-content:center;
}
body.brand-night .mkt-card{
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:var(--card);
  color:var(--paper);
  box-shadow:none;
  padding:18px;
}
body.brand-night .mkt-card h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:26px;
  font-weight:560;
}
body.brand-night .mkt-card p{
  margin:0;
}
body.brand-night .mkt-card p{
  color:var(--mute);
}
body.brand-night .mkt-grid{
  gap:14px;
}
body.brand-night .mkt-grid.two-up{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.brand-night .mkt-grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.brand-night .mkt-grid.four{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body.brand-night .trust-spine{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
body.brand-night .trust-spine.home-beats{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.brand-night .trust-spine > div,
.round-loop > div{
  border-top:1px solid rgba(244,241,234,.12);
  padding-top:16px;
}
body.brand-night .num,
.round-loop span{
  display:block;
  color:var(--green);
  font-weight:800;
  margin-bottom:12px;
}
.section-note{
  margin-top:18px;
}
.round-loop{
  display:grid;
  gap:18px;
}
.round-loop p{
  max-width:760px;
  margin:0;
  color:var(--paper);
  font-size:20px;
  line-height:30px;
}
.how-flow{
  display:grid;
  grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.how-flow .round-loop{
  gap:12px;
}
.how-flow .round-loop > div{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:12px 0;
}
.how-flow .round-loop span{
  margin:0;
}
.how-flow .round-loop p{
  font-size:17px;
  line-height:26px;
}
.how-flow .round-loop p strong{
  display:block;
  color:var(--paper);
  margin-bottom:2px;
}
.how-cards{
  display:grid;
  grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
}
.how-detail{
  gap:14px;
}
.how-detail .mkt-card{
  min-height:0;
}
.how-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.how-detail-grid .mkt-card h2{
  margin:0 0 8px;
  font-size:20px;
  line-height:28px;
}
.how-detail-grid .mkt-card p + p{
  margin-top:8px;
}
.faq-section{
  max-width:760px;
}
.faq-list details{
  border-top:1px solid rgba(244,241,234,.12);
  padding:18px 0;
}
.faq-list summary{
  color:var(--paper);
  cursor:pointer;
  font-weight:750;
}
.faq-list p,
.safety-list p{
  color:var(--mute);
}
.safety-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 48px;
}
.price-table{
  display:grid;
  border:1px solid rgba(244,241,234,.1);
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
}
.price-row{
  display:grid;
  grid-template-columns:1.1fr 1fr .7fr 1.1fr;
  gap:16px;
  padding:12px 16px;
  border-top:1px solid rgba(244,241,234,.08);
  color:var(--mute);
}
.price-row:first-child{
  border-top:0;
}
.price-row span:first-child,
.price-head span{
  color:var(--paper);
  font-weight:750;
}
.price-row.is-active{
  background:rgba(42,165,106,.1);
}
.pricing-decision{
  padding-top:18px!important;
}
.pricing-hero{
  min-height:auto!important;
  padding-top:88px!important;
  padding-bottom:34px!important;
}
.pricing-hero .mkt-lead,
.pricing-hero .micro{
  max-width:760px;
}
.pricing-hero .plan-path-grid{
  margin-top:28px;
}
.pricing-section-head{
  max-width:760px;
  margin:0 auto 20px;
  text-align:center;
}
.pricing-section-head h2{
  margin:0;
  color:var(--paper);
  font-size:clamp(28px,3.2vw,38px);
  line-height:1.16;
  font-weight:560;
  letter-spacing:0;
}
.plan-path-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.plan-path-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px;
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:rgba(20,28,38,.66);
}
.plan-path-card.is-featured{
  border-color:rgba(190,121,58,.44);
  border-top:3px solid #BE793A;
  background:linear-gradient(180deg,rgba(190,121,58,.12),rgba(20,28,38,.76));
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.plan-path-card h2{
  margin:0;
  color:var(--paper);
  font-size:22px;
  line-height:30px;
  font-weight:500;
}
.plan-path-card > strong{
  color:var(--paper);
  font-size:clamp(30px,4vw,42px);
  line-height:48px;
  font-weight:560;
}
.plan-path-card p{
  margin:0;
  color:var(--mute);
  font-size:15px;
  line-height:24px;
}
.plan-path-card .plan-trust-line{
  margin-top:auto;
  color:var(--paper);
  font-size:13px;
  line-height:20px;
  font-weight:650;
}
.plan-path-card .btn{
  width:100%;
  justify-content:center;
}
.plan-path-card .text-link{
  align-self:center;
  margin-top:0;
}
.program-badge{
  align-self:flex-start;
  margin:0;
  padding:5px 9px;
  border:1px solid rgba(190,121,58,.28);
  border-radius:999px;
  background:rgba(190,121,58,.13);
  color:#F1BE86!important;
  font-size:11px!important;
  line-height:16px!important;
  font-weight:760!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pricing-plain-note{
  margin-top:18px!important;
}
.single-price-card{
  width:min(540px,100%);
  margin:0 auto;
  display:grid;
  gap:14px;
  padding:20px;
  border:1px solid rgba(244,241,234,.1);
  border-radius:8px;
  background:#141C26;
  text-align:center;
}
.single-price-card .price-band{
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:#0F1720;
}
.single-price-card .price-band + .price-band{
  background:rgba(42,165,106,.08);
  border-color:rgba(42,165,106,.2);
}
.paid-plan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.paid-interval-choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:2px 0 0;
}
.paid-interval-choice input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.paid-interval-choice label{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:8px;
  color:var(--mute);
  font-size:13px;
  line-height:18px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.paid-interval-choice input:focus-visible + label{
  outline:2px solid var(--green);
  outline-offset:2px;
}
.paid-interval-choice input:checked + label{
  border-color:rgba(42,165,106,.55);
  background:rgba(42,165,106,.12);
  color:var(--paper);
}
.paid-price{
  grid-column:1 / -1;
  display:none;
  min-height:74px;
  align-content:center;
  gap:3px;
  padding:12px 14px;
  border:1px solid rgba(244,241,234,.06);
  border-radius:8px;
  background:rgba(15,23,32,.56);
}
#paid-monthly:checked ~ .paid-price-monthly,
#paid-annual:checked ~ .paid-price-annual{
  display:grid;
}
.paid-price strong{
  color:var(--paper);
  font-size:clamp(30px,4vw,40px);
  line-height:44px;
  font-weight:620;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.paid-price span,
.paid-price small{
  color:var(--mute);
  font-size:13px;
  line-height:18px;
}
.plan-path-card .paid-cta{
  display:none!important;
}
.plan-path-card:has(#paid-monthly:checked) .paid-cta-monthly,
.plan-path-card:has(#paid-annual:checked) .paid-cta-annual{
  display:inline-flex!important;
}
.single-price-card .paid-plan-option{
  align-content:start;
}
.single-price-card .paid-plan-option.is-featured{
  border-color:rgba(42,165,106,.3);
  background:rgba(42,165,106,.1);
}
.single-price-card strong{
  color:var(--paper);
  font-size:clamp(26px,4vw,34px);
  line-height:42px;
  font-weight:780;
  overflow-wrap:anywhere;
}
.single-price-card .price-label{
  color:var(--mute);
  font-size:13px;
  line-height:20px;
  font-weight:750;
}
.single-price-card p{
  max-width:440px;
  margin:0 auto;
  color:var(--mute);
  font-size:13px;
  line-height:20px;
}
.single-price-card .large-circle-note{
  color:var(--paper);
}
.single-price-card .large-circle-note a{
  color:var(--t-green-soft);
  font-weight:750;
  text-decoration:none;
}
.single-price-card .large-circle-note a:hover{
  color:var(--green);
  text-decoration:none;
}
.single-price-card .btn{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  background:var(--green);
  color:#07110D;
}
.pricing-boundary-strip{
  margin:18px auto 0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:18px 20px;
  border:1px solid rgba(244,241,234,.1);
  border-radius:8px;
  background:rgba(20,28,38,.68);
}
.pricing-boundary-strip h2,
.pricing-boundary-strip p{
  margin:0;
}
.pricing-boundary-strip h2{
  color:var(--paper);
  font-size:18px;
  line-height:26px;
  font-weight:560;
}
.pricing-boundary-strip p{
  margin-top:4px;
  color:var(--mute);
  font-size:14px;
  line-height:22px;
}
.pricing-boundary-strip .large-circle-note{
  margin-top:0;
  color:var(--paper);
  text-align:right;
  white-space:nowrap;
}
.pricing-boundary-strip .large-circle-note a{
  color:var(--t-green-soft);
  font-weight:750;
  text-decoration:none;
}
.boundary-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(42,165,106,.22);
  border-radius:999px;
  background:rgba(42,165,106,.08);
}
.boundary-icon span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--green);
}
.pricing-rules{
  width:min(1040px,calc(100% - 48px))!important;
  padding-top:44px!important;
}
.rule-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(136px,1fr));
  gap:16px;
}
.rule-grid div{
  border-top:1px solid rgba(244,241,234,.12);
  padding-top:14px;
}
.rule-grid span{
  display:block;
  color:var(--green);
  font-size:18px;
  line-height:26px;
  font-weight:560;
  margin-bottom:10px;
}
.rule-grid p{
  margin:0;
  color:var(--paper);
  font-size:14px;
  line-height:22px;
  max-width:24ch;
}
.pricing-why{
  align-items:center;
}
.plain-list{
  margin:16px 0 0;
  padding-left:20px;
  color:var(--mute);
}
.start-panel{
  max-width:680px;
  margin:0 auto;
  padding:20px;
  border:1px solid rgba(244,241,234,.08);
  border-radius:8px;
  background:var(--card);
}
.start-form{
  display:grid;
  gap:14px;
}
.start-form label{
  color:var(--paper);
  font-weight:750;
}
.start-form input,
.start-form select,
body.brand-night textarea,
body.brand-night select{
  width:100%;
  border:1px solid rgba(244,241,234,.14);
  border-radius:8px;
  background:#0F1720;
  color:var(--paper);
  min-height:48px;
  padding:0 14px;
}
.legal-line{
  margin:4px 0 0;
  color:var(--mute);
  font-size:13px;
  line-height:20px;
}
.legal-line.center{
  text-align:center;
}
.legal-line a,
body.brand-night a{
  color:inherit;
}
.legal-page{
  width:min(820px,calc(100% - 48px));
  margin:0 auto;
  padding:80px 0;
}
.legal-page h1{
  color:var(--paper);
  font-size:40px;
  line-height:48px;
}
.legal-page h2{
  margin-top:32px;
}
.legal-page p,
.legal-page li{
  color:var(--mute);
}
body.brand-night .public-footer{
  background:#080D12;
  border-top:1px solid rgba(244,241,234,.08);
  padding:48px max(24px,calc((100vw - 1120px)/2)) 24px;
}
body.brand-night .foot-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:32px;
}
body.brand-night .foot-col h4{
  color:var(--paper);
  font-size:13px;
  line-height:20px;
}
body.brand-night .foot-col a,
body.brand-night .foot-col p,
body.brand-night .foot-legal{
  color:var(--mute);
}
body.brand-night .foot-muted-link{
  font-size:13px;
}
body:has(.member-auth){
  background:var(--t-bg);
}
.wrap:has(.member-auth){
  background:var(--t-bg);
}
.member-auth-panel{
  background:#FFFFFF;
  /* Was rgba(244,241,234,.08) — a near-white border at 8% alpha, left over
     from when this panel was dark glass. On the white background it became
     invisible, so the card had no edge and leaned entirely on its shadow.
     The locked line token gives it one. */
  border-color:var(--line);
  border-radius:8px;
}
.signin-card{
  min-height:132px;
}
.signin-grid{
  align-items:stretch;
}
.signin-grid .mkt-card{
  justify-content:flex-start;
}
.member-auth-back,
.member-auth a,
.member-auth .auth-alt a,
.member-password-toggle,
.console-password-toggle{
  color:var(--t-muted)!important;
}
.console-input-wrap{
  background:#FFFFFF;
  border-color:var(--t-line);
}
.member-auth input[type=text],
.member-auth input[type=email],
.member-auth input[type=tel],
.member-auth input[type=password]{
  background:#FFFFFF;
  border-color:var(--t-line);
  color:var(--t-ink);
}
.member-auth input:focus,
.console-input-wrap:focus-within{
  border-color:var(--t-brand);
  box-shadow:0 0 0 3px rgba(42,165,106,.18);
}
.member-auth .btn.member-primary,
.console-login-form .btn,
.member-primary{
  background:var(--t-brand);
}
.member-auth .btn.member-primary:hover,
.console-login-form .btn:hover,
.member-primary:hover{
  background:var(--t-green-bright);
}
@media(max-width:900px){
  body.brand-night .hero-grid,
  body.brand-night .mkt-grid.two-up,
  body.brand-night .mkt-grid.three,
  body.brand-night .mkt-grid.four,
  body.brand-night .trust-spine,
  body.brand-night .trust-spine.home-beats,
  .how-flow,
  .how-cards,
  .how-detail-grid,
  .safety-list,
  body.brand-night .foot-grid{
    grid-template-columns:1fr;
  }
  .round-mock{
    margin:0 auto;
  }
  body.brand-night .mkt-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .price-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .rule-grid{
    grid-template-columns:1fr;
  }
  .single-price-card strong{
    font-size:32px;
    line-height:40px;
  }
  .paid-plan-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  body.brand-night .public-topbar{
    height:auto;
    min-height:64px;
  }
  body.brand-night .public-nav,
  body.brand-night .public-actions{
    display:none;
  }
  body.brand-night .nav-menu{
    display:block;
    margin-left:auto;
  }
  body.brand-night .nav-install-mobile:not([hidden]){
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.brand-night .mkt-hero,
  body.brand-night .mkt-section,
  body.brand-night .mkt-cta,
  body.brand-night .start-examples,
  body.brand-night .chat{
    width:calc(100% - 32px);
    max-width:1120px;
  }
  body.brand-night h1,
  body.brand-night .mkt-hero h1,
  .legal-page h1{
    font-size:28px;
    line-height:36px;
    max-width:100%;
    overflow-wrap:break-word;
  }
  body.brand-night .mkt-hero,
  body.brand-night .mkt-section,
  .legal-page{
    padding-block:48px;
  }
  .hero-trust-row{
    gap:8px;
  }
  body.brand-night .early-bird-inline,
  body.brand-night .early-bird-callout{
    align-items:flex-start;
    flex-direction:column;
  }
  body.brand-night .early-bird-callout .mkt-actions{
    width:100%;
  }
  .market-picker-select,
  .market-select-wrap{
    width:100%;
  }
  .market-select-wrap select{
    width:100%;
  }
  .single-price-card,
  .single-price-card p{
    max-width:100%;
  }
  body.brand-night .pricing-hero h1,
  body.brand-night .pricing-hero .mkt-lead,
  body.brand-night .start-hero h1,
  body.brand-night .start-hero .mkt-lead{
    max-width:320px;
  }
  body.brand-night .pricing-hero .mkt-lead,
  body.brand-night .start-hero .mkt-lead{
    margin-left:0;
    margin-right:0;
  }
  .single-price-card p{
    max-width:280px;
  }
  .single-price-card .price-band strong{
    max-width:280px;
    justify-self:center;
  }
  .single-price-card strong{
    font-size:24px;
    line-height:32px;
  }
  .start-panel,
  .start-form,
  .chat{
    max-width:100%;
  }
  .chips .chip{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .chips{
    display:grid;
    grid-template-columns:1fr;
  }
}

/* Public minimalist refinement: lighter type, quieter surfaces, same content. */
body.brand-night{
  font-weight:400;
  letter-spacing:0;
}
body.brand-night .public-topbar{
  border-bottom-color:rgba(244,241,234,.055);
  background:rgba(11,16,22,.82);
}
body.brand-night .public-nav a,
body.brand-night .nav-signin{
  color:#9AA8BA;
  font-weight:450;
}
body.brand-night .public-nav a:hover,
body.brand-night .public-nav a[aria-current="page"],
body.brand-night .nav-signin:hover{
  border-bottom-color:rgba(42,165,106,.65);
}
body.brand-night .btn,
body.brand-night .btn.nav-cta{
  min-height:38px;
  padding:8px 14px;
  font-weight:620;
}
body.brand-night h1,
body.brand-night .mkt-hero h1{
  font-weight:620;
}
body.brand-night h2{
  font-weight:560;
}
body.brand-night .mkt-lead{
  max-width:680px;
  font-weight:380;
}
body.brand-night .mkt-kicker,
body.brand-night .mkt-eyebrow,
body.brand-night .mini-kicker{
  color:#7F8FA4;
  font-weight:620;
}
body.brand-night .mkt-hero{
  padding-top:var(--space-7);
  padding-bottom:var(--space-6);
}
body.brand-night .mkt-section{
  padding-top:var(--space-7);
  padding-bottom:var(--space-7);
}
.market-picker{
  gap:6px;
  margin-top:18px;
}
.market-picker > span,
.market-picker button{
  padding:5px 9px;
  border-color:rgba(244,241,234,.095);
  background:rgba(244,241,234,.015);
  font-weight:450;
}
.market-picker button[aria-selected="true"]{
  border-color:rgba(42,165,106,.58);
  background:rgba(42,165,106,.07);
}
body.brand-night .mkt-card,
.single-price-card,
.start-panel,
body.brand-night .mkt-cta{
  border-color:rgba(244,241,234,.065);
  background:rgba(20,28,38,.72);
}
body.brand-night .mkt-card{
  padding:16px;
}
body.brand-night .mkt-card h3{
  font-weight:560;
}
.single-price-card{
  box-shadow:none;
}
.single-price-card .price-band{
  border-color:rgba(244,241,234,.055);
  background:rgba(15,23,32,.72);
}
.single-price-card .price-band + .price-band{
  border-color:rgba(42,165,106,.15);
  background:rgba(42,165,106,.055);
}
.single-price-card strong{
  font-weight:620;
}
.single-price-card .price-label,
.rule-grid span,
body.brand-night .num,
.round-loop span{
  font-weight:620;
}
.round-mock{
  border-color:rgba(244,241,234,.06);
  background:rgba(20,28,38,.74);
  box-shadow:0 18px 54px rgba(0,0,0,.26);
}
.mock-card-title,
.round-mock button,
.how-flow .round-loop p strong,
.faq-list summary{
  font-weight:560;
}
.receiver strong{
  font-weight:600;
}
.round-mock button{
  border-color:rgba(244,241,234,.08);
}
.round-mock .mock-primary{
  background:rgba(42,165,106,.95);
}
body.brand-night .trust-spine > div,
.round-loop > div,
.rule-grid div,
.faq-list details{
  border-top-color:rgba(244,241,234,.075);
}
.rule-grid p{
  font-weight:400;
}
.start-form label{
  font-weight:560;
}
.start-form input,
.start-form select,
body.brand-night textarea,
body.brand-night select{
  border-color:rgba(244,241,234,.095);
  background:rgba(15,23,32,.76);
  font-weight:400;
}
body.brand-night .public-footer{
  border-top-color:rgba(244,241,234,.055);
}
body.brand-night .home-beats > div{
  padding:16px 18px;
  background:rgba(20,28,38,.64);
}
body.brand-night .home-beats strong{
  color:#F4F1EA;
  font-size:18px;
  line-height:28px;
  font-weight:460;
}
body.brand-night .home-beats .num{
  width:auto;
  height:auto;
  display:block;
  place-items:initial;
  margin:0 0 14px;
  background:transparent;
  color:rgba(42,165,106,.86);
  font-family:var(--sans);
  font-size:13px;
  line-height:20px;
  font-weight:520;
}
body.brand-night .mkt-section > h2{
  font-weight:500;
}
body.brand-night .section-note,
body.brand-night .text-link.section-note{
  display:inline-flex;
  margin-top:18px;
  color:#B8C5D6;
  font-size:15px;
  line-height:24px;
  font-weight:460;
}
body.brand-night .price-teaser{
  display:grid;
  gap:12px;
  align-items:start;
  max-width:820px;
}
body.brand-night .price-lockup{
  width:min(420px,100%);
  padding:16px 18px;
  border:1px solid rgba(42,165,106,.18);
  border-radius:8px;
  background:rgba(42,165,106,.055);
}
body.brand-night .price-lockup span{
  display:block;
  margin-bottom:4px;
  color:#7F8FA4;
  font-size:11px;
  line-height:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:520;
}
body.brand-night .price-lockup strong{
  display:block;
  color:var(--paper);
  font-size:24px;
  line-height:32px;
}
body.brand-night .price-lockup small{
  display:block;
  margin-top:2px;
  color:#7F8FA4;
  font-size:13px;
  line-height:18px;
}
html[data-public-theme="light"] body.brand-night .pricing-section-head h2,
html[data-public-theme="light"] body.brand-night .pricing-boundary-strip h2{
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .plan-path-card,
html[data-public-theme="light"] body.brand-night .pricing-boundary-strip{
  border-color:#DFD8CE;
  background:#FFFFFF;
}
html[data-public-theme="light"] body.brand-night .plan-path-card.is-featured{
  border-color:rgba(190,121,58,.36);
  border-top-color:#BE793A;
  background:linear-gradient(180deg,#FFF7ED,#FFFFFF);
  box-shadow:0 18px 42px rgba(41,31,22,.08);
}
html[data-public-theme="light"] body.brand-night .program-badge{
  border-color:rgba(190,121,58,.32);
  background:#F8E4D1;
  color:#8A4B1E!important;
}
html[data-public-theme="light"] body.brand-night .plan-path-card h2,
html[data-public-theme="light"] body.brand-night .plan-path-card > strong,
html[data-public-theme="light"] body.brand-night .paid-price strong,
html[data-public-theme="light"] body.brand-night .plan-path-card .plan-trust-line,
html[data-public-theme="light"] body.brand-night .pricing-boundary-strip .large-circle-note{
  color:#111820;
}
html[data-public-theme="light"] body.brand-night .plan-path-card p,
html[data-public-theme="light"] body.brand-night .paid-price span,
html[data-public-theme="light"] body.brand-night .paid-price small,
html[data-public-theme="light"] body.brand-night .pricing-boundary-strip p{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .paid-interval-choice label{
  border-color:#DFD8CE;
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .paid-interval-choice input:checked + label{
  border-color:rgba(42,165,106,.42);
  background:#E7F4EE;
  color:#0B1016;
}
html[data-public-theme="light"] body.brand-night .paid-price{
  border-color:#E6DED5;
  background:#F7F5F1;
}
html[data-public-theme="light"] body.brand-night .pricing-boundary-strip .large-circle-note a{
  color:#16784A;
}

/* Public UX lens: tighter rhythm, quieter repeated cards, clearer placements. */
body.brand-night .home-hero{
  min-height:0;
}
body.brand-night .hero-grid{
  gap:48px;
}
body.brand-night .mkt-section{
  padding-top:var(--space-7);
  padding-bottom:var(--space-7);
}
body.brand-night .mkt-section + .mkt-section{
  margin-top:0;
}
body.brand-night .story-grid{
  margin-top:22px;
}
body.brand-night .story-grid .mkt-card{
  min-height:170px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
body.brand-night .story-grid .mkt-card h3,
body.brand-night .story-grid .mkt-card p{
  margin:0;
}
body.brand-night .home-steps-section{
  padding-top:48px;
}
body.brand-night .early-bird-inline,
body.brand-night .price-lockup,
body.brand-night .early-bird-callout,
body.brand-night .early-bird-proof{
  box-shadow:none;
}
body.brand-night .early-bird-inline{
  border-color:rgba(190,121,58,.32);
  background:rgba(190,121,58,.08);
}
body.brand-night .early-bird-inline span,
body.brand-night .early-bird-inline .text-link{
  color:#D69A62;
}
body.brand-night .early-bird-inline .text-link{
  background:rgba(214,154,98,.08);
  border-color:rgba(214,154,98,.52);
}
body.brand-night .early-bird-inline .text-link:hover,
body.brand-night .early-bird-inline .text-link:focus-visible{
  background:rgba(214,154,98,.14);
  border-color:#D69A62;
  color:#F2C99C;
}
html[data-public-theme="light"] body.brand-night .early-bird-inline .text-link{
  background:#FFFFFF;
  border-color:rgba(42,165,106,.42);
  color:#0F6E47;
}
html[data-public-theme="light"] body.brand-night .early-bird-inline .text-link:hover,
html[data-public-theme="light"] body.brand-night .early-bird-inline .text-link:focus-visible{
  background:rgba(42,165,106,.1);
  border-color:rgba(42,165,106,.7);
  color:#0B5F3C;
}
body.brand-night .early-bird-callout h2,
body.brand-night .early-bird-callout p{
  max-width:660px;
}
body.brand-night .pricing-rules{
  padding-top:32px!important;
}
body.brand-night .mkt-cta{
  margin-top:var(--space-6);
}
html[data-public-theme="light"] body.brand-night .public-footer{
  background:#F0ECE6;
}
html[data-public-theme="light"] body.brand-night .story-grid .mkt-card,
html[data-public-theme="light"] body.brand-night .home-beats > div,
html[data-public-theme="light"] body.brand-night .plan-path-card{
  background:rgba(255,255,255,.72);
}
@media(max-width:900px){
  body.brand-night .home-hero{
    min-height:auto;
  }
  body.brand-night .early-bird-hero{
    min-height:auto;
  }
  body.brand-night .hero-grid{
    gap:32px;
  }
  body.brand-night .story-grid .mkt-card{
    min-height:0;
  }
  .plan-path-grid{
    grid-template-columns:1fr;
  }
  .plan-path-card.is-featured{
    order:-1;
  }
  .pricing-boundary-strip{
    grid-template-columns:1fr;
    align-items:start;
  }
  .pricing-boundary-strip .large-circle-note{
    text-align:left;
    white-space:normal;
  }
}
@media(max-width:760px){
  body.brand-night .mkt-section{
    padding-top:var(--space-6);
    padding-bottom:var(--space-6);
  }
  body.brand-night .hero-grid{
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
  }
  body.brand-night .market-picker > span,
  body.brand-night .market-picker button{
    max-width:100%;
    white-space:normal;
  }
  body.brand-night .early-bird-inline,
  body.brand-night .early-bird-callout{
    padding:14px;
  }
  .early-bird-pass{
    grid-template-columns:1fr;
  }
  .early-bird-pass div{
    min-height:0;
  }
  .early-bird-ticket{
    width:auto;
    margin:0;
  }
  body.brand-night .early-bird-mock{
    justify-self:stretch;
  }
  .early-bird-proof{
    justify-self:stretch;
  }
  body.brand-night .mkt-actions .btn,
  body.brand-night .early-bird-callout .mkt-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Public type unification: keep the lighter voice across every marketing page. */
body.brand-night .public-lockup,
body.brand-night .public-nav a,
body.brand-night .nav-signin,
body.brand-night .nav-menu summary,
body.brand-night .nav-menu-panel a,
body.brand-night .foot-col a,
body.brand-night .text-link,
body.brand-night .mkt-actions a{
  font-weight:460;
}
body.brand-night .btn,
body.brand-night .btn.nav-cta,
body.brand-night .mkt-actions .btn,
body.brand-night .foot-col a.btn{
  font-weight:560;
}
body.brand-night .mkt-card h2,
body.brand-night .mkt-card h3,
body.brand-night .mkt-card strong,
body.brand-night .plan-path-card h2,
body.brand-night .trust-spine strong,
body.brand-night .how-flow .round-loop p strong,
body.brand-night .how-detail-grid .mkt-card h2,
body.brand-night .faq-list summary,
body.brand-night .start-form label{
  font-weight:460;
}
body.brand-night .mkt-card p,
body.brand-night .plan-path-card p,
body.brand-night .faq-list p,
body.brand-night .safety-list p,
body.brand-night .plain-list,
body.brand-night .legal-line,
body.brand-night .foot-col p,
body.brand-night .foot-legal,
body.brand-night .micro{
  font-weight:360;
}
body.brand-night .mkt-kicker,
body.brand-night .mkt-eyebrow,
body.brand-night .mini-kicker,
body.brand-night .plan-path-card > strong,
body.brand-night .price-label,
body.brand-night .rule-grid span,
body.brand-night .round-loop span,
body.brand-night .num{
  font-weight:520;
}
body.brand-night .round-loop p{
  font-weight:380;
}
body.brand-night .single-price-card strong,
body.brand-night .price-teaser strong,
body.brand-night .receiver strong{
  font-weight:560;
}
body.brand-night .single-price-card .large-circle-note a{
  font-weight:520;
}
body.brand-night .mkt-card,
body.brand-night .plan-path-card,
body.brand-night .trust-spine > div,
body.brand-night .round-loop > div,
body.brand-night .single-price-card,
body.brand-night .start-panel,
body.brand-night .mkt-cta{
  border-color:rgba(244,241,234,.055);
}
body.brand-night .trust-spine > div,
body.brand-night .mkt-card{
  background:rgba(20,28,38,.62);
}
body.brand-night .faq-list details,
body.brand-night .rule-grid div{
  border-top-color:rgba(244,241,234,.06);
}
body.brand-night .support-form-card{
  max-width:560px;
  margin:0 auto;
}
body.brand-night .support-hero{
  max-width:760px;
}
body.brand-night .support-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding-top:24px;
  padding-bottom:24px;
}
body.brand-night .support-guide-card{
  min-height:178px;
  display:grid;
  align-content:start;
  gap:10px;
}
body.brand-night .support-guide-card span{
  color:rgba(42,165,106,.86);
  font-size:13px;
  line-height:20px;
  font-weight:520;
}
body.brand-night .support-guide-card h2,
body.brand-night .support-guide-card p{
  margin:0;
}
body.brand-night .support-guide-card h2{
  font-size:22px;
  line-height:30px;
  font-weight:460;
}
body.brand-night .support-guide-card .mkt-lead{
  color:#8B9BB0;
  font-size:15px;
  line-height:24px;
}
body.brand-night .support-form-card form{
  display:grid;
  gap:12px;
}
body.brand-night .support-form-card label{
  margin:0;
  color:#F4F1EA;
  font-size:15px;
  line-height:22px;
  font-weight:460;
}
body.brand-night .support-form-card input,
body.brand-night .support-form-card select,
body.brand-night .support-form-card textarea{
  width:100%;
  border:1px solid rgba(244,241,234,.095);
  border-radius:8px;
  background:rgba(15,23,32,.76);
  color:#F4F1EA;
  font:inherit;
  font-weight:380;
  box-shadow:none;
}
body.brand-night .support-form-card select{
  min-height:48px;
  padding:0 14px;
}
body.brand-night .support-form-card input{
  min-height:48px;
  padding:0 14px;
}
body.brand-night .support-form-card textarea{
  min-height:94px;
  padding:12px 14px;
  resize:vertical;
}
body.brand-night .support-form-card input:focus,
body.brand-night .support-form-card select:focus,
body.brand-night .support-form-card textarea:focus,
body.brand-night .support-form-card input:focus-visible,
body.brand-night .support-form-card select:focus-visible,
body.brand-night .support-form-card textarea:focus-visible{
  outline:0;
  border-color:rgba(42,165,106,.82);
  box-shadow:0 0 0 3px rgba(42,165,106,.18);
}
body.brand-night .support-form-card textarea::placeholder{
  color:#7F8FA4;
}
body.brand-night .support-form-card input::placeholder{
  color:#7F8FA4;
}
body.brand-night .support-optional,
body.brand-night .support-form-note{
  color:#8B9BB0;
  font-size:12px;
  line-height:18px;
}
body.brand-night .support-form-note{
  margin:0;
}
body.brand-night .support-form-card .btn{
  width:100%;
  margin-top:6px;
}
html[data-public-theme="light"] body.brand-night .support-form-card label{
  color:#111820;
  font-weight:650;
}
html[data-public-theme="light"] body.brand-night .support-form-card input,
html[data-public-theme="light"] body.brand-night .support-form-card select,
html[data-public-theme="light"] body.brand-night .support-form-card textarea{
  border-color:#CBD5E1;
  background:#FFFFFF;
  color:#111820;
}
html[data-public-theme="light"] body.brand-night .support-form-card textarea::placeholder{
  color:#6B7582;
}
html[data-public-theme="light"] body.brand-night .support-form-card input::placeholder,
html[data-public-theme="light"] body.brand-night .support-form-note,
html[data-public-theme="light"] body.brand-night .support-optional{
  color:#6B7582;
}
body.brand-night .support-sent-panel{
  display:grid;
  gap:10px;
}
body.brand-night .support-sent-panel h2,
body.brand-night .support-sent-panel p{
  margin:0;
}
body.brand-night .support-sent-panel h2{
  font-weight:460;
}
body.brand-night .support-sent-panel p{
  color:#8B9BB0;
  font-weight:360;
}
body.brand-night .support-sent-panel .mkt-actions{
  margin-top:8px;
}
body.brand-night .support-sent-panel .btn{
  width:auto;
  margin:0;
}
body.brand-night .support-success{
  width:max-content;
  max-width:100%;
  margin:0 0 16px;
  padding:7px 12px;
  border:1px solid rgba(42,165,106,.22);
  border-radius:999px;
  background:rgba(42,165,106,.1);
  color:#BFEBD7;
  font-size:13px;
  line-height:20px;
  font-weight:380;
}
body.brand-night .support-links-section{
  max-width:560px;
  padding-top:24px;
}
body.brand-night .support-link-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-top:10px;
}
body.brand-night .support-links-section .micro{
  margin-top:14px;
}
body.brand-night .compact-public-hero{
  max-width:760px;
}
body.brand-night .compact-public-section{
  padding-top:24px;
}
body.brand-night .narrow-public-card{
  max-width:620px;
  margin:0 auto;
}
body.brand-night .narrow-public-card h2,
body.brand-night .narrow-public-card p{
  margin-top:0;
}
body.brand-night .legal-page{
  max-width:760px;
  padding-block:64px;
}
body.brand-night .legal-page h1{
  margin-bottom:14px;
}
body.brand-night .legal-page h2{
  margin-top:32px;
  color:#F4F1EA;
  font-size:20px;
  line-height:28px;
  font-weight:460;
}
body.brand-night .legal-page p,
body.brand-night .legal-page li{
  color:#8B9BB0;
  font-size:15px;
  line-height:25px;
  font-weight:360;
}
body.brand-night .legal-page ul{
  padding-left:20px;
}
body.brand-night .mkt-steps{
  display:grid;
  gap:12px;
  margin-top:18px;
}
body.brand-night .mkt-step{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:14px 0;
  border-top:1px solid rgba(244,241,234,.06);
  background:transparent;
}
body.brand-night .mkt-step:first-child{
  border-top:0;
}
body.brand-night .mkt-step .num{
  width:auto;
  height:auto;
  display:block;
  border-radius:0;
  background:transparent;
  color:rgba(42,165,106,.86);
  font-family:var(--sans);
  font-size:13px;
  line-height:22px;
  font-weight:520;
}
body.brand-night .mkt-step h3{
  margin:0 0 2px;
  color:#F4F1EA;
  font-size:17px;
  line-height:26px;
  font-weight:460;
}
body.brand-night .mkt-step p{
  margin:0;
  color:#8B9BB0;
  font-size:15px;
  line-height:24px;
  font-weight:360;
}
body.brand-night .product-shot,
body.brand-night .assistant-shot{
  border:1px solid rgba(244,241,234,.06);
  border-radius:8px;
  background:rgba(20,28,38,.62);
  color:#F4F1EA;
  box-shadow:none;
}
body.brand-night .product-shot::before{
  display:none;
}
body.brand-night .shot-top,
body.brand-night .shot-row{
  border-bottom-color:rgba(244,241,234,.06);
}
body.brand-night .shot-top span,
body.brand-night .shot-row span{
  color:#8B9BB0;
}
body.brand-night .shot-top strong,
body.brand-night .shot-row strong{
  color:#F4F1EA;
  font-weight:460;
}
body.brand-night .shot-meter{
  background:rgba(244,241,234,.08);
}
body.brand-night .shot-meter span{
  background:var(--t-brand);
}
body.brand-night .shot-note,
body.brand-night .assistant-boundary{
  border:1px solid rgba(42,165,106,.14);
  border-radius:8px;
  background:rgba(42,165,106,.08);
  color:#BFEBD7;
  font-weight:380;
}
body.brand-night .assistant-shot{
  display:grid;
  gap:12px;
}
body.brand-night .chat-line{
  border-radius:8px;
  font-weight:380;
}
body.brand-night .chat-line.user{
  background:rgba(42,165,106,.9);
  color:#07110D;
}
body.brand-night .chat-line.bot{
  border:1px solid rgba(244,241,234,.06);
  background:rgba(15,23,32,.78);
  color:#F4F1EA;
  box-shadow:none;
}
body.brand-night .mkt-icon{
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(42,165,106,.08);
  color:var(--t-green-soft);
}
body.brand-night .mkt-icon svg{
  width:18px;
  height:18px;
}
body.brand-night .mkt-quote{
  border:1px solid rgba(244,241,234,.06);
  border-radius:8px;
  background:rgba(20,28,38,.62);
  padding:22px;
}
body.brand-night .mkt-quote p{
  color:#F4F1EA;
  font-family:var(--sans);
  font-size:18px;
  line-height:30px;
  font-weight:380;
}
body.brand-night .mkt-quote .who{
  color:#F4F1EA;
  font-weight:460;
}
body.brand-night .mkt-quote .who span{
  color:#8B9BB0;
  font-weight:360;
}
body.brand-night .mkt-cta-note{
  max-width:40rem;
  margin:.4rem auto 0;
  color:#8B9BB0;
  font-size:15px;
  line-height:24px;
  font-weight:360;
}
.shot-meter .shot-meter-80{
  width:80%;
}
.flush-copy{
  margin:0;
}
.inline-learn-link{
  display:inline-block;
  margin:10px 0 0 2px;
}
body:has(.member-wizard) .member-form-shell{
  max-width:760px;
  margin:0 auto;
}
body:has(.member-wizard) .member-intro{
  padding-top:8px;
}
body:has(.member-wizard) .member-intro h2,body:has(.member-wizard) .member-intro h1{
  font-weight:560;
}
body:has(.member-wizard) .member-form-card{
  max-width:none;
}
body:has(.member-wizard) .member-wizard{
  gap:0;
}
body:has(.member-wizard) [hidden]{
  display:none!important;
}
body:has(.member-wizard) .setup-cluster{
  gap:8px;
  padding:22px 0;
}
body:has(.member-wizard) .setup-cluster:first-of-type{
  padding-top:0;
}
body:has(.member-wizard) .setup-cluster legend{
  margin-bottom:6px;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
  font-weight:560;
}
body:has(.member-wizard) .setup-cluster > label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
body:has(.member-wizard) .setup-cluster h3{
  margin:0;
  color:var(--t-ink);
  font-size:18px;
  line-height:26px;
  font-weight:520;
}
body:has(.member-wizard) .setup-cluster .field-hint{
  margin:0 0 6px;
  font-weight:360;
}
body:has(.member-wizard) .segmented-field{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body:has(.member-wizard) .segmented-field.stack{
  grid-template-columns:1fr;
}
body:has(.member-wizard) .segmented-field span{
  min-height:0;
  display:grid;
  place-items:initial;
  gap:2px;
  padding:13px 14px;
  text-align:left;
  font-weight:400;
}
body:has(.member-wizard) .segmented-field strong{
  color:var(--t-ink);
  font-size:15px;
  line-height:22px;
  font-weight:520;
}
body:has(.member-wizard) .segmented-field small{
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
  font-weight:360;
}
body:has(.member-wizard) .segmented-field input:checked + span small{
  color:#BFEBD7;
}
body:has(.member-wizard) .pot-mode-panel{
  margin-top:8px;
}
body:has(.member-wizard) .suggested-defaults{
  display:grid;
  gap:8px;
}
body:has(.member-wizard) .wizard-submit{
  margin-top:22px;
}
@media(max-width:620px){
  body:has(.member-wizard) .segmented-field{
    grid-template-columns:1fr;
  }
}
body.brand-night .start-hero{
  max-width:760px;
  padding-bottom:18px;
}
body.brand-night .start-intent-section{
  padding-top:10px;
}
body.brand-night .start-intent-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.65fr);
  gap:18px;
  align-items:stretch;
}
body.brand-night .start-primary-panel,
body.brand-night .start-side-panel{
  border:1px solid rgba(244,241,234,.055);
  border-radius:8px;
  background:rgba(20,28,38,.62);
  color:#F4F1EA;
}
body.brand-night .start-primary-panel{
  max-width:none;
  margin:0;
  padding:22px;
}
body.brand-night .start-side-panel{
  display:grid;
  align-content:start;
  gap:12px;
  padding:22px;
}
html[data-public-theme="light"] body.brand-night .start-side-panel{
  background:#F3E9DF;
  border-color:rgba(58,42,30,.12);
  color:#121820;
  box-shadow:0 18px 48px rgba(26,46,53,.08);
}
body.brand-night .start-primary-panel h2{
  margin:8px 0 4px;
  color:#F4F1EA;
  font-size:24px;
  line-height:32px;
  font-weight:460;
}
html[data-public-theme="light"] body.brand-night .start-primary-panel h2{
  color:#121820;
}
body.brand-night .start-primary-panel .micro{
  margin:0;
}
html[data-public-theme="light"] body.brand-night .start-primary-panel .micro{
  color:#5D6876;
}
body.brand-night .start-primary-panel .start-form{
  margin-top:18px;
}
body.brand-night .start-primary-panel .elevated-start{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.brand-night .start-primary-panel .start-form label{
  font-size:13px;
  line-height:20px;
  font-weight:460;
}
body.brand-night .start-primary-panel .start-form input{
  min-height:54px;
  font-size:16px;
  line-height:24px;
}
body.brand-night .start-primary-panel .start-form .btn{
  min-height:46px;
}
body.brand-night .start-example-label{
  margin:18px 0 0;
  color:#8B9BB0;
  font-size:13px;
  line-height:20px;
  font-weight:460;
}
body.brand-night .start-examples{
  width:auto;
  max-width:none;
  justify-content:flex-start;
  margin:8px 0 0;
}
body.brand-night .start-examples .chip{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border-color:rgba(42,165,106,.22);
  background:rgba(42,165,106,.10);
  color:#BFEBD7;
}
html[data-public-theme="light"] body.brand-night .start-example-label,
html[data-public-theme="light"] body.brand-night .start-move p{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .start-examples .chip{
  border-color:rgba(42,165,106,.26);
  background:#E7F4EE;
  color:#0F6A42;
}
body.brand-night .start-move{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  padding-top:12px;
  border-top:1px solid rgba(244,241,234,.06);
}
body.brand-night .start-move span{
  color:rgba(42,165,106,.86);
  font-size:13px;
  line-height:22px;
  font-weight:520;
}
body.brand-night .start-move p{
  margin:0;
  color:#8B9BB0;
  font-size:15px;
  line-height:24px;
  font-weight:360;
}
body.brand-night .start-price-note{
  margin:4px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(42,165,106,.14);
  color:#BFEBD7;
  font-size:13px;
  line-height:20px;
  font-weight:360;
}
html[data-public-theme="light"] body.brand-night .start-price-note{
  color:#265D45;
}
body.brand-night .start-member-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:68px;
  padding:14px 18px;
  border:1px solid rgba(244,241,234,.07);
  border-radius:8px;
  background:rgba(20,28,38,.62);
  color:#F4F1EA;
  text-decoration:none;
  box-shadow:var(--shadow);
}
body.brand-night .start-member-strip span{
  color:#8B9BB0;
  font-size:14px;
}
body.brand-night .start-member-strip strong{
  color:var(--t-brand-deep);
  font-size:16px;
  font-weight:560;
}
html[data-public-theme="light"] body.brand-night .start-member-strip{
  border-color:rgba(11,16,22,.08);
  background:#FFFFFF;
  color:#121820;
  box-shadow:0 12px 32px rgba(26,46,53,.07);
}
html[data-public-theme="light"] body.brand-night .start-member-strip span{
  color:#5D6876;
}
body.brand-night .chat{
  max-width:760px;
  margin-top:0;
}
@media(max-width:760px){
  body.brand-night .start-intent-grid{
    grid-template-columns:1fr;
  }
  body.brand-night .support-guide-grid{
    grid-template-columns:1fr;
  }
  body.brand-night .support-guide-card{
    min-height:0;
  }
}

/* ── The live round: what is left of the pot block, and split allocation ──
   The totals, the two progress bars and their repeated counts are gone: they
   printed the same two numbers six times over, and the Confirmed bar was
   painted in a colour this product had ruled out. What remains says who the
   round is still waiting on, by name. */
.pot-section,.split-section{
  margin:0 0 16px;padding:16px 18px;border-radius:16px;
  background:#FFFFFF;border:1px solid var(--t-line);
}
.split-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px;line-height:20px;font-weight:600}
.split-header .split-total{color:var(--t-ink)}
.split-header .split-remaining{color:var(--t-muted);font-weight:400}
.split-progress{height:4px;margin-bottom:10px;border-radius:4px;background:var(--t-line);overflow:hidden}
.split-progress .split-progress-fill{height:100%;border-radius:4px;background:var(--t-brand);transition:width .3s ease}
.split-alloc-lines{display:flex;flex-direction:column}
.split-alloc-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--t-line);font-size:14px;line-height:20px}
.split-alloc-line:last-child{border-bottom:0}
.split-alloc-line .split-person{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t-ink);font-weight:500}
.split-alloc-line .split-amount{color:var(--t-muted)}
.split-alloc-line .split-share{min-width:44px;text-align:right;color:var(--t-brand-deep);font-weight:600}
@media(prefers-reduced-motion:reduce){
.split-progress .split-progress-fill{transition:none}
}
@media(max-width:480px){
  .pot-section,.split-section{padding:14px 16px}
}

/* ── Product surfaces are green ──
   The base .btn is a burnt-orange gradient and --brand is the marketing
   accent. Neither belongs on a member screen, so scope the locked green
   here rather than repainting the whole site. */
/* Geometry only, for the same reason as .member-primary above: the fill and
   the white text were 3.14:1 on --t-brand, and already dead -- the identical
   selector further down paints these navy at 14.13:1, measured. The colour
   decision lives in one place now instead of two that disagree. */
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled){
  background-image:none;
  border-radius:16px;
  min-height:48px;
  box-shadow:none;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover{
  background:var(--t-green-bright);
  filter:none;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn.sheet-create{
  background:var(--t-brand);
  box-shadow:none;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn:disabled,
:is(.member-shell,.member-auth,.member-form-shell) .btn[aria-disabled="true"],
:is(.member-shell,.member-auth,.member-form-shell) .btn.is-incomplete{
  background:var(--t-line);
  color:#A0A0A0;
  box-shadow:none;
  cursor:not-allowed;
  opacity:1;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn.ghost,
:is(.member-shell,.member-auth,.member-form-shell) .btn.secondary{
  background:transparent;
  color:var(--t-brand-deep);
  border:1px solid var(--t-line);
}
.pulse-label{
  font-size:13px;
  line-height:20px;
  font-weight:600;
  letter-spacing:.01em;
  color:inherit;
  white-space:nowrap;
}

/* ⋯ is circle settings. Dark tokens, green hover, no blue. */
.cockpit-shell .workspace-menu-panel{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(26,26,26,.10);
}
.cockpit-shell .workspace-menu-panel a,
.cockpit-shell .workspace-menu-panel button{
  color:var(--t-ink);
  border-radius:12px;
}
.cockpit-shell .workspace-menu-panel a:hover,
.cockpit-shell .workspace-menu-panel button:hover,
.cockpit-shell .workspace-menu-panel a:focus-visible,
.cockpit-shell .workspace-menu-panel button:focus-visible{
  outline:0;
  background:rgba(42,165,106,.12);
  color:var(--t-brand-deep);
}
.cockpit-shell .workspace-menu-panel .menu-danger{color:#C0392B}
.cockpit-shell .workspace-menu-panel .menu-danger:hover{background:rgba(226,140,140,.12);color:#E05C4A}
.cockpit-shell .workspace-menu-panel form{margin:4px 0 0;border-top:1px solid var(--t-line);padding-top:4px}

/* Round strips and banners on dark. No white cards, no blue numerals. */
.cockpit-shell .money-movement-strip{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
}
.cockpit-shell .movement-item{border-left:1px solid var(--t-line)}
.cockpit-shell .movement-item:first-child{border-left:0}
.cockpit-shell .movement-item span{color:var(--t-muted)}
.cockpit-shell .movement-item strong{color:var(--t-ink)}
.cockpit-shell .movement-item small{color:var(--t-muted)}
.cockpit-shell .movement-item.ok strong{color:var(--t-brand)}
.cockpit-shell .movement-item.warn strong{color:#E8B84B}
.cockpit-shell .movement-item.info strong{color:var(--ink)}
.cockpit-shell .receiver-setup-banner{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
  color:var(--t-ink);
}
.cockpit-shell .receiver-setup-banner p{color:var(--t-muted)}
.cockpit-shell .receiver-setup-banner .btn{width:auto;margin-top:0}

/* The Updates trigger is a chip beside ⋯, not a squeezed icon slot. */
.cockpit-shell .workspace-actions{display:flex;align-items:center;gap:8px}
.cockpit-shell .pulse-drawer>summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  white-space:nowrap;
}
.cockpit-shell .pulse-drawer>summary .pulse-badge{position:static;transform:none}

/* One top bar, one round line, then the members get the room. */
.cockpit-shell .round-line{
  margin:0 20px 16px;
  padding:0;
  background:transparent;
  border:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cockpit-shell .round-line h2{
  margin:0;
  color:var(--t-ink);
  font-size:22px;
  line-height:30px;
  font-weight:600;
  letter-spacing:-.01em;
}
.cockpit-shell .round-line p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  color:var(--t-muted);
  font-size:14px;
  line-height:20px;
}
@media(max-width:560px){
  .cockpit-shell .round-line{margin:0 16px 14px}
  .cockpit-shell .round-line h2{font-size:20px;line-height:28px}
}

/* Missing or required: one line that deep-links into Settings. */
.cockpit-shell .round-warning{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 20px 16px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--t-muted);
  font-size:14px;
  line-height:20px;
}
.cockpit-shell .round-warning .status-dot{flex:0 0 auto}
.cockpit-shell .round-warning a{
  color:var(--t-brand-deep);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(143,221,189,.4);
}
.cockpit-shell .round-warning a:hover,
.cockpit-shell .round-warning a:focus-visible{outline:0;color:var(--t-green-hover);border-bottom-color:var(--t-green-hover)}
@media(max-width:560px){.cockpit-shell .round-warning{margin:0 16px 14px}}

/* The round container is a surface, not a white card. */
.cockpit-shell .circle-round{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
}
.cockpit-shell .payment-current{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
  color:var(--t-ink);
}
.cockpit-shell .payment-current p{color:var(--t-muted)}
.cockpit-shell .payment-current-kicker{color:var(--t-muted)}

/* Roster rows, pulse lines and share block on dark. */
.cockpit-shell .roster-entry,
.cockpit-shell .pulse-line,
.cockpit-shell .share-copy{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
  color:var(--t-ink);
}
.cockpit-shell .roster-entry p,
.cockpit-shell .roster-entry small,
.cockpit-shell .pulse-line p,
.cockpit-shell .pulse-line small,
.cockpit-shell .share-copy{color:var(--t-muted)}
.cockpit-shell .roster-entry strong{color:var(--t-ink)}
.cockpit-shell .pulse-line.attention{border-color:rgba(232,184,75,.34)}
.cockpit-shell .pulse-line.done,
.cockpit-shell .pulse-line.ok{border-color:rgba(42,165,106,.34)}
.cockpit-shell .pulse-panel{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(26,26,26,.10);
}
.cockpit-shell .pulse-head strong{color:var(--t-ink)}
.cockpit-shell .pulse-head small{color:var(--t-muted)}
.cockpit-shell .pulse-action{color:var(--t-brand);background:transparent;border:1px solid rgba(143,221,189,.4);border-radius:999px}
.cockpit-shell .round-warning small{flex:1 0 100%;color:#A0A0A0;font-size:12px;line-height:18px}

/* ── Member surfaces: warm light ──
   Ground #F5F2EF · cards #FFFFFF · borders #EDEAE6 · text #1A1A1A ·
   muted #6E6E6E · accent green #2AA56A · primary CTAs navy #1A2E35. */
/* The same green as the landing hero, made even.

   The hero uses `linear-gradient(120deg,transparent,rgba(42,165,106,.09),transparent)`
   -- brand green at 9% -- as a diagonal band, which leaves a visible edge. A page
   that scrolls wants a field, not a band: same colour, same weight, anchored to
   the top and fading into the ground.

   It has to live *here*. Three rules set this surface, and the two earlier ones
   were overwritten by this block -- `background:` is a shorthand, so re-declaring
   it resets the image to none. The first attempt put the wash above and it
   vanished without erroring.

   `.wrap` goes transparent so the body's field shows through; painting `--t-bg`
   on a 840px column over a tinted page would draw a pale stripe down the middle.

   Not `background-attachment:fixed`: the device floor is budget Android, where a
   fixed background repaints every scroll frame. Sized in pixels, it costs
   nothing and looks identical at rest.

   Cards keep their job. The wash tops out at 10% of a mid-green over a warm
   off-white, so a #FFFFFF panel gains separation from the ground rather than
   losing it -- measured after: body text on card 17.4:1, muted 5.62:1. */
body:has(.member-shell),
body:has(.member-auth){
  background:
    radial-gradient(150% 620px at 50% -60px,
      rgba(42,165,106,.10) 0%,
      rgba(42,165,106,.055) 34%,
      rgba(42,165,106,.018) 62%,
      rgba(42,165,106,0) 100%) no-repeat,
    var(--t-bg);
  color:var(--t-ink);
}
.wrap:has(.member-shell),
.wrap:has(.member-auth){
  background:transparent;
  color:var(--t-ink);
}
body:has(.member-shell) .topbar,
body:has(.member-auth) .topbar{
  background:rgba(245,242,239,.92);
  border-bottom-color:var(--t-line);
}
:is(.member-shell,.member-auth) .member-auth-panel,
:is(.member-shell,.member-auth) .card,
:is(.member-shell,.member-auth) .member-form-card{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  border-radius:20px;
  color:var(--t-ink);
}
:is(.member-shell,.member-auth) input,
:is(.member-shell,.member-auth) select,
:is(.member-shell,.member-auth) textarea{
  background:#FFFFFF;
  border:1px solid var(--t-line);
  color:var(--t-ink);
}
:is(.member-shell,.member-auth) input::placeholder{color:var(--t-muted)}
:is(.member-shell,.member-auth) input:focus,
:is(.member-shell,.member-auth) select:focus,
:is(.member-shell,.member-auth) textarea:focus{
  outline:0;
  border-color:var(--t-brand);
  box-shadow:0 0 0 3px rgba(42,165,106,.14);
}
/* Primary actions are navy; green stays the accent. */
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
:is(.member-shell,.member-auth,.member-form-shell) .btn.sheet-create,
.member-primary,.member-auth .btn.member-primary,.setup-add-primary{
  background:var(--t-navy);
  background-image:none;
  color:#FFFFFF;
  box-shadow:none;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover,
.member-primary:hover,.member-auth .btn.member-primary:hover,.setup-add-primary:hover{
  background:#24404A;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn:disabled,
:is(.member-shell,.member-auth,.member-form-shell) .btn.is-incomplete,
:is(.member-shell,.member-auth) .member-primary.is-incomplete,
.member-auth .btn.member-primary.is-incomplete{
  background:var(--t-line);
  color:#A0A0A0;
  box-shadow:none;
  opacity:1;
}
:is(.member-shell,.member-auth,.member-form-shell) .btn.ghost,
:is(.member-shell,.member-auth,.member-form-shell) .btn.secondary{
  background:#FFFFFF;
  color:var(--t-navy);
  border:1px solid var(--t-line);
}
:is(.member-shell,.member-auth) a{color:var(--t-brand-deep)}
:is(.member-shell,.member-auth) .muted,
:is(.member-shell,.member-auth) small{color:var(--t-muted)}
/* Selected pill: green frame and tint, dark label. Never white on light. */
body:has(.member-wizard) .segmented-field input:checked + span,
.compact-pills input:checked + span{
  color:var(--t-ink);
  background:rgba(42,165,106,.10);
  border-color:var(--t-brand);
}
body:has(.member-wizard) .segmented-field input:checked + span strong,
.compact-pills input:checked + span strong{color:var(--t-ink)}
body:has(.member-wizard) .segmented-field input:checked + span small,
.compact-pills input:checked + span small{color:var(--t-green-hover)}

/* Member list: avatar, search, pagination. */
.member-chip-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
/* Move, Swap, Transfer and Remove are grouped behind Manage so a member row
   keeps one scanning rhythm even when the organizer has every permission. */
#member-list .member-chip-row{grid-template-columns:auto minmax(0,1fr) auto}
#member-list .roster-actions{grid-column:auto;justify-self:end;justify-content:flex-end;padding-left:0}
@media(max-width:430px){
  #member-list .member-chip-row{grid-template-columns:auto minmax(0,1fr)}
  #member-list .roster-actions{grid-column:1 / -1;justify-content:flex-start}
}
.member-avatar{
  display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
  background:rgba(42,165,106,.10);color:var(--t-green-hover);
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
.member-you{color:var(--t-muted);font-weight:400;font-size:12px}
.member-search-label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.member-search{width:100%;min-height:44px;margin:0 0 12px;border-radius:14px}
/* The one-line note under a filtered list. It had been sharing a class
   with a full-viewport empty state, which is why it arrived 100vh tall. */
.member-search-empty{margin:12px 0 0;color:var(--t-muted);font-size:14px;text-align:center}
.member-pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--t-line);
}
.member-pager span{color:var(--t-muted);font-size:13px;font-variant-numeric:tabular-nums}
.member-pager .btn{width:auto;min-width:104px;margin-top:0}
.member-manage{position:relative}
.member-manage > summary{list-style:none;cursor:pointer}
.member-manage > summary::-webkit-details-marker{display:none}
.member-manage-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:32;
  width:min(220px,calc(100vw - 32px));display:grid;gap:6px;padding:8px;
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);
  box-shadow:0 18px 48px rgba(11,16,22,.18);
}
.member-manage-menu .btn,.member-manage-menu button{width:100%;justify-content:flex-start;margin:0}
.member-manage-menu form{margin:0}
@media(max-width:430px){
  .member-manage-menu{left:0;right:auto}
}
.member-pager .btn:disabled{opacity:.45;cursor:not-allowed}

/* ⋯ badges: red is critical, amber is waiting, nothing means nothing to do. */
.cockpit-shell .workspace-menu-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menu-badge{
  min-width:20px;
  padding:1px 7px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  font-weight:600;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.menu-badge.critical{background:#C0392B;color:#FFFFFF}
.menu-badge.warn{background:#E8A83A;color:var(--t-ink)}
/* Pot tracker states: thin when calm{height:2px}
@media(prefers-reduced-motion:reduce){
}

/* Split allocation on Setup. */
.split-setup{
  margin:16px 0;padding:16px 18px;
  background:#FFFFFF;border:1px solid var(--t-line);border-radius:20px;
}
.split-setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.split-setup-head h3{margin:2px 0 0;color:var(--t-ink);font-size:17px;line-height:24px;font-weight:600}
.split-setup-lines{display:flex;flex-direction:column;gap:8px}
.split-setup-line{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px;align-items:center}
.split-setup-line label{color:var(--t-ink);font-size:14px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.split-setup-line input{min-height:44px;border-radius:14px;text-align:right;font-variant-numeric:tabular-nums}
.split-setup-status{margin:12px 0 0;color:var(--t-muted);font-size:13px;line-height:20px}
.split-setup-status.done{color:var(--t-green-hover);font-weight:600}
.split-setup-status.over{color:#C0392B;font-weight:600}
.split-setup .btn{margin-top:12px}
@media(max-width:480px){.split-setup-line{grid-template-columns:1fr}}

/* Profile. */
.profile-shell{display:flex;flex-direction:column;gap:14px}
.profile-shell .member-intro{
  padding:2px 2px 0;
}
.profile-shell .member-intro h2,.profile-shell .member-intro h1{
  font-size:28px;
  line-height:36px;
  font-weight:560;
}
.profile-shell .member-intro p{
  max-width:30rem;
  font-size:14px;
  line-height:22px;
}
.profile-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.profile-header strong{display:block;color:var(--t-ink);font-size:17px;line-height:24px;font-weight:600}
.profile-header p{margin:2px 0 0;font-size:13px;line-height:20px}
.member-avatar.large{width:56px;height:56px;font-size:18px;flex:0 0 auto}
.profile-links{display:flex;flex-direction:column;gap:0}
.profile-links .settings-kicker{margin:16px 0 4px}
.profile-links .settings-kicker:first-child{margin-top:0}
.profile-email-note{margin:0;font-size:13px;line-height:20px}
.profile-link{
  display:block;min-height:46px;padding:12px 0;
  border-bottom:1px solid var(--t-line);
  color:var(--t-ink);text-decoration:none;font-size:15px;line-height:22px;
}
.profile-link:hover,.profile-link:focus-visible{outline:0;color:var(--t-green-hover)}
.profile-links form{margin-top:12px}
.topbar-profile-form{margin:0}
.topbar-profile{width:auto!important;margin:0!important;padding:6px 12px!important;min-height:36px}

/* Top bar: name and due on line one, the circle at a glance on line two. */
.cockpit-shell .workspace-due{color:var(--t-muted);font-size:13px;line-height:20px;white-space:nowrap}
.cockpit-shell .workspace-due .label{color:#A0A0A0}
.workspace-stats{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  margin:0 20px 16px;color:var(--t-muted);font-size:13px;line-height:20px;
  font-variant-numeric:tabular-nums;
}
.workspace-stat-group{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 var(--space-1);
  min-width:min(100%, 260px);
}
.workspace-stats b{color:var(--t-ink);font-weight:600}
.workspace-stats b.accent{color:var(--t-green-hover)}
.cockpit-shell .round-line.receiver h2{color:var(--t-green-hover)}
@media(max-width:560px){.workspace-stats{margin:0 16px 14px;gap:2px 12px}}

.round-next-action-card,.setup-complete-notice,.next-round-plan-card,.next-round-member-card,.next-wave-member-card,.next-wave-leave-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 20px 16px;padding:16px 18px;border:1px solid rgba(42,165,106,.28);
  border-radius:16px;background:rgba(42,165,106,.08);
}
.next-round-plan-card{
  border-color:rgba(176,82,26,.28);
  background:rgba(176,82,26,.06);
}
.next-round-member-card{
  border-color:rgba(44,111,163,.22);
  background:rgba(44,111,163,.055);
}
.next-wave-member-card,.next-wave-leave-card{
  align-items:flex-start;
  border-color:rgba(44,111,163,.24);
  background:rgba(44,111,163,.06);
}
.round-next-action-card strong,.setup-complete-notice strong,.next-round-plan-card strong,.next-round-member-card strong,.next-wave-member-card strong,.next-wave-leave-card strong{
  display:block;color:var(--t-ink);font-size:16px;line-height:22px;font-weight:650;
}
.round-next-action-card p,.setup-complete-notice p,.next-round-plan-card p,.next-round-member-card p,.next-wave-member-card p,.next-wave-leave-card p{
  margin:4px 0 0;color:var(--t-muted);font-size:14px;line-height:20px;max-width:56ch;
}
.next-round-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;
  margin:10px 0 0;max-width:780px;
}
.next-round-facts div{
  min-width:0;padding:10px 12px;border:1px solid rgba(44,111,163,.16);
  border-radius:12px;background:rgba(255,255,255,.55);
}
.next-round-facts dt{
  margin:0 0 3px;color:var(--t-muted);font-size:11px;line-height:14px;
  font-weight:750;text-transform:uppercase;letter-spacing:.08em;
}
.next-round-facts dd{
  margin:0;color:var(--t-ink);font-size:14px;line-height:19px;font-weight:600;
}
.next-wave-answer{
  color:var(--t-ink)!important;
}
.round-next-action-card .btn,.setup-complete-notice .btn,.next-round-plan-card .btn,.next-round-member-card .btn{
  width:auto;margin:0;flex:0 0 auto;min-height:42px;
}
.next-wave-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:min(100%, 520px);
}
.next-wave-options .btn{
  align-items:flex-start;
  flex-direction:column;
  gap:2px;
  min-height:64px;
  text-align:left;
}
.next-wave-options .btn small{
  color:var(--t-muted);
  font-size:12px;
  line-height:16px;
}
@media(max-width:560px){
  .round-next-action-card,.setup-complete-notice,.next-round-plan-card,.next-round-member-card,.next-wave-member-card,.next-wave-leave-card{
    margin:0 16px 14px;align-items:stretch;flex-direction:column;
  }
  .round-next-action-card .btn,.setup-complete-notice .btn,.next-round-plan-card .btn,.next-round-member-card .btn{
    width:100%;justify-content:center;
  }
  .next-round-facts{
    grid-template-columns:1fr;
  }
  .next-wave-options{
    grid-template-columns:1fr;
    min-width:0;
  }
}

.next-wave-panel{
  border:1px solid var(--t-line);
  border-radius:16px;
  background:var(--t-surface);
  box-shadow:var(--shadow-soft);
  padding:18px;
  margin:0 0 16px;
}
.next-wave-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.next-wave-summary span{
  min-height:52px;
  border:1px solid var(--t-line);
  border-radius:12px;
  padding:9px 10px;
  color:var(--t-muted);
  font-size:13px;
  line-height:18px;
}
.next-wave-summary b{
  display:block;
  color:var(--t-ink);
  font-size:18px;
  line-height:22px;
}
.next-wave-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.next-wave-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  border-top:1px solid var(--t-line);
  padding-top:10px;
}
.next-wave-row small{
  display:block;
  color:var(--t-muted);
  line-height:18px;
}
.next-wave-billing-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(176,82,26,.22);
  border-radius:14px;
  background:rgba(176,82,26,.055);
}
.next-wave-billing-note strong{
  display:block;
  color:var(--t-ink);
  font-size:14px;
  line-height:18px;
}
.next-wave-billing-note p{
  margin:3px 0 0;
  color:var(--t-muted);
  font-size:13px;
  line-height:18px;
}
.next-wave-billing-note .btn{
  flex:0 0 auto;
  width:auto;
}
.admin-role-guide{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 16px;
}
.admin-role-guide div{
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--t-line);
  border-radius:14px;
  background:var(--t-subtle);
}
.admin-role-guide strong{
  display:block;
  color:var(--t-ink);
  font-size:14px;
  line-height:18px;
}
.admin-role-guide p{
  margin:4px 0 0;
  color:var(--t-muted);
  font-size:13px;
  line-height:18px;
}
@media(max-width:720px){
  .next-wave-panel{
    padding:14px;
  }
  .next-wave-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .next-wave-billing-note{
    align-items:stretch;
    flex-direction:column;
  }
  .next-wave-billing-note .btn{
    width:100%;
    justify-content:center;
  }
  .admin-role-guide{
    grid-template-columns:1fr;
  }
}

/* Circle settings page. */
.circle-settings-shell{display:flex;flex-direction:column;gap:16px}
.circle-settings-shell .settings-section{
  padding:0;
  overflow:hidden;
}
.circle-settings-shell .settings-section > summary{
  min-height:64px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none;
}
.circle-settings-shell .settings-section > summary::-webkit-details-marker{display:none}
.circle-settings-shell .settings-section > summary::after{
  content:"";
  width:9px;
  height:9px;
  border-right:2px solid var(--t-muted);
  border-bottom:2px solid var(--t-muted);
  transform:rotate(45deg);
  transition:transform var(--t-d2) var(--t-settle);
}
.circle-settings-shell .settings-section[open] > summary::after{transform:rotate(225deg)}
.circle-settings-shell .settings-section > summary span{
  min-width:0;
  display:grid;
  gap:3px;
}
.circle-settings-shell .settings-section > summary strong{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--t-ink);
  font-size:16px;
  line-height:22px;
}
.circle-settings-shell .settings-section > summary small{
  color:var(--t-muted);
  font-size:13px;
  line-height:18px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.circle-settings-shell .settings-section > fieldset,
.circle-settings-shell .settings-section > .btn{
  margin:0 16px 16px;
}
.settings-nested-section{
  border:1px solid var(--t-line);
  border-radius:12px;
  padding:0;
}
.settings-nested-section > summary{
  min-height:44px;
  padding:10px 12px;
  cursor:pointer;
  color:var(--t-ink);
  font-size:14px;
  font-weight:600;
}
.settings-nested-section[open]{
  padding-bottom:12px;
}
.settings-nested-section[open] > :not(summary){
  margin-left:12px;
  margin-right:12px;
}
.local-name-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.local-name-suggestions button{
  min-height:44px;
  border:1px solid var(--t-line);
  border-radius:999px;
  background:var(--t-bg);
  color:var(--t-ink);
  padding:8px 12px;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.local-name-suggestions button:focus-visible,
.settings-section > summary:focus-visible,
.settings-nested-section > summary:focus-visible{
  outline:2px solid var(--t-brand-deep);
  outline-offset:2px;
}
.settings-amount-row,
.settings-schedule-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(124px,.6fr);
  gap:12px;
  align-items:end;
}
.settings-amount-row > div,
.settings-schedule-row > div{
  min-width:0;
}
.settings-amount-row output,
.settings-number-row span{
  min-height:48px;
  display:grid;
  place-items:center;
  padding:0 12px;
  border:1px solid var(--t-line);
  border-radius:12px;
  background:var(--t-bg);
  color:var(--t-ink);
  font-weight:700;
}
.settings-number-row{
  display:grid;
  grid-template-columns:minmax(88px,132px) auto;
  gap:10px;
  align-items:center;
}
.setup-schedule-preview,
.timezone-choice{
  border:1px solid var(--t-line);
  border-radius:12px;
  background:var(--t-bg);
  padding:12px;
}
.setup-schedule-preview strong{
  display:block;
  margin-bottom:6px;
  color:var(--t-ink);
  font-size:13px;
  line-height:18px;
}
/* Three dates on one line, separated rather than numbered: the list is
   already in order and the heading already says how many. */
.setup-schedule-preview ol{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:0 6px;
  color:var(--t-muted);font-size:13px;line-height:19px;
}
.setup-schedule-preview ol li + li::before{content:"·";margin-right:6px;color:var(--t-line)}

/* Leaving without saving is not a peer of the action that saves. */
.setup-later-quiet{
  display:inline-flex;align-items:center;min-height:36px;
  color:var(--t-muted);font-size:13px;font-weight:600;text-decoration:none;
}
.setup-later-quiet:hover{color:var(--t-ink);text-decoration:underline;text-underline-offset:3px}
.setup-later-quiet:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:6px}
.timezone-choice p{
  margin:0 0 10px;
  color:var(--t-muted);
  font-size:13px;
  line-height:19px;
}
.timezone-choice > div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.timezone-choice .btn{
  width:auto;
  margin:0;
  min-height:44px;
}
.settings-review-bar{
  position:sticky;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:20;
  padding:0 0 env(safe-area-inset-bottom);
}
.settings-review-bar .btn{
  box-shadow:0 14px 32px rgba(6,12,20,.26);
}
.settings-review-list{
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  list-style:none;
}
.settings-review-list li{
  display:grid;
  gap:3px;
  padding:10px 0;
  border-bottom:1px solid var(--t-line);
}
.settings-review-list li:last-child{border-bottom:0}
.settings-review-list strong{
  color:var(--t-ink);
  font-size:13px;
  line-height:18px;
}
.settings-review-list span{
  color:var(--t-muted);
  font-size:13px;
  line-height:19px;
}
.settings-readout{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:10px 0;border-bottom:1px solid var(--t-line);
}
.settings-readout:last-of-type{border-bottom:0}
.settings-readout span{color:var(--t-muted);font-size:14px;line-height:20px}
.settings-readout strong{color:var(--t-ink);font-size:15px;line-height:22px;font-weight:600}
.settings-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:8px 0;border-bottom:1px solid var(--t-line);
}
.settings-toggle:last-child{border-bottom:0}
.circle-settings-shell .settings-toggle label{margin:0;color:var(--t-ink);font-size:15px;line-height:22px}
.circle-settings-shell .settings-toggle input[type=checkbox]{
  width:22px;height:22px;min-height:0;flex:0 0 auto;accent-color:var(--t-brand);
}
.danger-zone .btn{width:auto}

/* The danger zone reads as dangerous.

   It carried exactly one rule — the width of its buttons — so archiving a
   circle sat in a card visually identical to the one where you change its
   name. The tint is deliberately faint: this section is not an error, and a
   settings page that shouts at an organizer every time they open it teaches
   them to stop reading it. What it has to do is not look like Identity. */
/* Scoped to the shell, because the shell already claims these.
   `.circle-settings-shell .member-form-card` sets the white ground and the
   line border at two classes, and `.circle-settings-shell .wizard-cluster
   legend` sets the muted heading. A bare `.danger-zone` is one class and
   loses to both — it sat in the stylesheet reading correctly and changed
   nothing on the page. Specificity, not order: moving it later would not have
   helped either. */
.circle-settings-shell .member-form-card.archive-section{
  border-color:var(--t-line);
  background:var(--t-bg);
}

/* How full the free tier is. Thin, because it is context for the number
   above it and not the headline — and green until it is spent, then the
   accent, which is the colour this palette uses for a consequence rather
   than an error. Passing ten is not a fault. */
.tier-meter{height:6px;border-radius:999px;background:var(--t-line);
  overflow:hidden;margin:2px 0 8px}
.tier-meter span{display:block;height:100%;border-radius:inherit;
  background:var(--t-brand-deep);transition:width var(--t-d3) var(--t-settle)}
.tier-meter.is-full span{background:var(--t-accent)}
.tier-meter-note{margin-top:0}
@media(prefers-reduced-motion:reduce){
  .tier-meter span{transition:none}
}

/* The billing banner. Two tones only: the accent while there is still time,
   danger once there is not. The accent is the palette's word for a
   consequence rather than an error, which is exactly what a trial running down
   is — nothing has gone wrong yet.

   Scoped to nothing, because it appears on the workspace and on the billing
   page and must read the same on both. Nothing else sets these classes, so
   one class is enough weight — unlike .danger-zone, which lost to the shell. */
.billing-banner{border-radius:12px;padding:14px 16px;margin:0 0 14px;
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--t-accent);background:rgba(176,82,26,.05)}
.billing-banner.is-danger{border-color:var(--t-danger);background:rgba(185,28,28,.05)}
.billing-banner-head{display:flex;align-items:flex-start;gap:10px}
.billing-banner-icon{color:var(--t-accent);flex:0 0 auto;line-height:1;font-size:18px}
.billing-banner.is-danger .billing-banner-icon{color:var(--t-danger)}
.billing-banner-said{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.billing-banner-said strong{font-size:14px;line-height:20px;color:var(--t-ink)}
.billing-banner.is-danger .billing-banner-said strong{color:var(--t-danger)}
.billing-banner-said p{margin:0;font-size:13px;line-height:19px;color:var(--t-ink);
  max-width:62ch}
.billing-banner-close{flex:0 0 auto;border:0;background:transparent;cursor:pointer;
  color:var(--t-muted);padding:2px;line-height:1;border-radius:6px}
.billing-banner-close:hover{color:var(--t-ink)}
.billing-banner-close:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
/* Fills as the window closes. An emptying bar reads as progress toward
   something good, and this is the opposite of that. */
.billing-banner-meter{height:5px;border-radius:999px;background:rgba(0,0,0,.07);
  overflow:hidden}
.billing-banner-meter span{display:block;height:100%;border-radius:inherit;
  background:var(--t-accent);transition:width var(--t-d3) var(--t-settle)}
.billing-banner.is-danger .billing-banner-meter span{background:var(--t-danger)}
.billing-banner-actions{display:flex;flex-wrap:wrap;gap:8px}
.billing-banner-actions .btn{width:auto;margin:0}
@media(pointer:coarse){
  .billing-banner-actions .btn{min-height:44px}
  .billing-banner-close{min-width:44px;min-height:44px;display:grid;place-items:center}
}
@media(prefers-reduced-motion:reduce){
  .billing-banner-meter span{transition:none}
  .circle-settings-shell .settings-section > summary::after{transition:none}
}

/* Cancelling asks first. Rendered by the server on ?confirm=cancel rather than
   thrown up by script, so it works with no JS and the back button undoes it. */
.billing-confirm{border:1px solid var(--t-danger);border-radius:12px;
  background:rgba(185,28,28,.035);padding:16px 18px;display:flex;
  flex-direction:column;gap:10px}
.billing-confirm h3{margin:0;color:var(--t-danger);font-size:15px;line-height:22px}
.billing-confirm ul{margin:0;padding-left:18px;display:flex;flex-direction:column;
  gap:6px;color:var(--t-ink);font-size:13px;line-height:19px}
.billing-confirm li::marker{color:var(--t-muted)}
.billing-confirm-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.billing-confirm-actions form{margin:0}
.billing-confirm-actions .btn{width:auto;margin:0}
@media(pointer:coarse){
  .billing-confirm-actions .btn{min-height:44px}
}
.circle-settings-shell .danger-zone .wizard-cluster legend{color:var(--t-danger)}
.circle-settings-shell .danger-zone .menu-danger{color:var(--t-danger);
  border-color:rgba(185,28,28,.42);background:transparent}
.circle-settings-shell .danger-zone .menu-danger:hover{
  background:rgba(185,28,28,.07);border-color:var(--t-danger)}

/* A back control is the whole target, so its icon is sized for a thumb at
   arm's length rather than to match a 14px label. */
.topbar-back .icon,.workspace-back .icon{width:1.35em;height:1.35em;vertical-align:0}
.member-circle-chevron .icon{vertical-align:0}
/* A section legend's icon is structure, not decoration: it takes the colour of
   the heading it leads rather than carrying one of its own. */
.wizard-cluster legend .icon{vertical-align:-.16em}

/* My Circles cards. .minimal-row span sets display:block, so these need
   the same weight to lay out as rows. */
/* flex-start, not space-between: with a dot and a name, space-between
   pushes the name to the far edge of the row. There was a second rule
   further down saying exactly that, spelled `.circle-card-top` -- one
   class to this one's two, so it lost and every circle name stayed
   pinned right under a comment describing the fix. One rule now, because
   two rules disagreeing about one selector is the whole defect. */
.minimal-row .circle-card-top{display:flex;align-items:center;
  justify-content:flex-start;gap:10px;min-width:0;margin-bottom:4px}
.minimal-row .circle-card-top strong{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minimal-row .circle-card-top .pill{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;width:auto}
.minimal-row .circle-card-facts{
  display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;
  color:var(--t-muted);font-size:13px;line-height:20px;
}
.minimal-row .circle-card-facts span{display:inline;margin:0}
.member-shell .member-circle-row small{color:var(--t-muted);font-size:13px;line-height:20px}
/* The button floats over the list, so the list needs room beneath it. */

/* Done card, countdown, receiving order sheet. */
.done-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin:12px 0 0;padding:14px 16px;
  border:1px solid rgba(42,165,106,.3);border-radius:16px;background:rgba(42,165,106,.07);
}
.done-card strong{color:var(--t-ink);font-size:15px;line-height:22px}
.done-card p{margin:0;color:var(--t-muted);font-size:14px;line-height:20px}
.done-card .btn{width:auto;margin-top:6px}
.done-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.done-card-actions .btn{min-height:40px;margin:0;padding:8px 12px}
/* --- What happens after a finished round ---------------------------------- */
/* Same shape as the completion callout it follows: this is the next step in
   the same conversation, not a different kind of thing. Green where a round
   may start, quiet where the rotation is spent, attention where something
   stops it. */
.next-round-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0;
  padding:14px 16px;
  border:1px solid rgba(42,165,106,.28);
  border-radius:14px;
  background:rgba(42,165,106,.07);
  flex-wrap:wrap;
}
.next-round-callout.is-done{border-color:var(--t-line);background:var(--t-bg)}
.next-round-callout.is-blocked{border-color:var(--t-accent)}
.next-round-callout strong{display:block;font-size:15px;line-height:21px;color:var(--t-ink)}
.next-round-callout p{margin:3px 0 0;color:var(--t-muted);font-size:14px;line-height:20px}
.next-round-callout .btn{width:auto;min-height:40px;margin:0;padding:8px 14px}
.next-round-callout form{margin:0}

/* Handing out the pot, and finishing the circle.
   ----------------------------------------------------------------------
   These shipped as class names with no rules behind them, which renders as
   an unstyled document dropped into a designed page: a bare bullet list of
   people and amounts where every neighbouring section is a card. Nothing in
   a template parse or a service test can see that, and it took opening the
   page in a browser to find -- the same lesson the stylesheet-derived
   findings taught in pass C.

   Built from the tokens rather than from literals, and shaped like
   .next-round-callout, which is the section immediately above it. */

.pot-shares,
.pot-closing{
  margin:14px 0;
  padding:16px;
  border:1px solid var(--t-line);
  border-radius:16px;
  background:var(--t-card);
}
.pot-shares-head strong,
.pot-closing > div > strong{display:block;font-size:15px;line-height:21px;color:var(--t-ink)}
.pot-shares-head p,
.pot-closing > div > p{margin:3px 0 0;color:var(--t-muted);font-size:14px;line-height:20px}

.pot-share-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.pot-share{
  display:grid;
  gap:6px;
  padding:12px 14px;
  border:1px solid var(--t-line);
  border-radius:14px;
  background:var(--t-inset);
}
/* A share whose recipient says it has not arrived is the one thing here
   that needs attention, and attention is the accent's only job. */
.pot-share.is-needs_review{border-color:var(--t-accent)}

.pot-share-who{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pot-share-who strong{font-size:15px;line-height:21px;color:var(--t-ink)}
.pot-share-amount{font-size:15px;font-weight:650;color:var(--t-ink);font-variant-numeric:tabular-nums}
/* What was agreed, beside what went. Quiet, because the amount that moved
   is the one being reported. */
.pot-share-variance,
.closing-record-variance-line{font-size:13px;color:var(--t-muted);font-variant-numeric:tabular-nums}

.pot-share-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;line-height:19px;color:var(--t-muted)}
.pot-share-note{display:block;width:100%;font-size:13px;color:var(--t-muted);font-style:italic}

.pot-share-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pot-share-actions form{display:flex;gap:8px;flex-wrap:wrap;margin:0;align-items:center}
.pot-share-actions .btn{width:auto;min-height:40px;margin:0;padding:8px 14px}
.pot-share-actions input[type=text],
.pot-share-actions input:not([type]),
.pot-share-actions input[inputmode=decimal]{
  min-width:0;flex:1 1 8ch;padding:8px 10px;
  border:1px solid var(--t-line);border-radius:10px;
  font:inherit;font-size:13.5px;background:var(--t-card);color:var(--t-ink);
}
.pot-share-attest{flex:1 1 100%}
.pot-share-attest summary{
  cursor:pointer;list-style:none;font-size:13.5px;color:var(--t-muted);
  padding:6px 0;
}
.pot-share-attest summary::-webkit-details-marker{display:none}
.pot-share-attest p{margin:6px 0 8px;font-size:13px;line-height:19px;color:var(--t-muted)}
.pot-share-attest label{display:block;font-size:13px;color:var(--t-ink);margin-bottom:4px}
.pot-share-attest input{
  width:100%;padding:8px 10px;margin-bottom:8px;
  border:1px solid var(--t-line);border-radius:10px;
  font:inherit;font-size:13.5px;background:var(--t-card);color:var(--t-ink);
}

/* The closing. Figures first, then whatever has to be explained. */
.pot-closing-figures,
.closing-record-figures{margin:12px 0 0;display:grid;gap:6px}
.pot-closing-figures > div,
.closing-record-figures > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pot-closing-figures dt,
.closing-record-figures dt{margin:0;font-size:13.5px;color:var(--t-muted)}
.pot-closing-figures dd,
.closing-record-figures dd{margin:0;font-size:15px;font-weight:650;color:var(--t-ink);font-variant-numeric:tabular-nums}

.pot-closing-variance,
.closing-record-variance{
  margin:12px 0 0;padding:10px 12px;list-style:none;
  border:1px solid var(--t-accent);border-radius:12px;
  font-size:13.5px;line-height:19px;color:var(--t-ink);
}
.pot-closing-variance li,
.closing-record-variance li{margin:0}

.pot-closing-unresolved{
  margin:12px 0 0;padding:10px 12px;
  border:1px solid var(--t-accent);border-radius:12px;
}
.pot-closing-unresolved strong{display:block;font-size:14px;color:var(--t-ink)}
.pot-closing-unresolved ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:20px;color:var(--t-muted)}

.pot-closing form{margin:14px 0 0;display:grid;gap:8px}
.pot-closing label{font-size:13.5px;color:var(--t-ink)}
.pot-closing input[type=text],
.pot-closing input:not([type]){
  width:100%;padding:9px 11px;
  border:1px solid var(--t-line);border-radius:10px;
  font:inherit;font-size:14px;background:var(--t-card);color:var(--t-ink);
}
.pot-closing-ack{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:19px;color:var(--t-ink)}
.pot-closing-ack input{margin-top:2px;flex:0 0 auto;width:auto}
.pot-closing .btn{width:auto;min-height:44px;margin:0}

/* The permanent record. Read far more often than it is written to, and by
   people who were not the organizer, so it is a page rather than a panel. */
.closing-record{max-width:640px}
.closing-record h1{margin:0 0 4px;font-size:22px;line-height:28px;color:var(--t-ink)}
.closing-record h2{margin:22px 0 8px;font-size:15px;line-height:21px;color:var(--t-ink)}
.closing-record-lede{margin:0;color:var(--t-muted);font-size:14px;line-height:20px}
.closing-record-open{margin:12px 0 0;color:var(--t-muted)}
.closing-record-note{
  margin:12px 0 0;padding:10px 14px;
  border-left:3px solid var(--t-line);
  color:var(--t-ink);font-size:14px;line-height:20px;font-style:italic;
}
.closing-record-unresolved{margin:12px 0 0;font-size:13.5px;line-height:20px;color:var(--t-ink)}
.closing-record-shares{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.closing-record-shares li{
  display:grid;gap:4px;
  padding:12px 14px;
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);
}
.closing-record-shares strong{font-size:15px;line-height:21px;color:var(--t-ink)}
.closing-record-shares > li > span:nth-of-type(1){font-variant-numeric:tabular-nums;color:var(--t-ink)}
/* Who ended this share, and on whose behalf. Never hidden and never
   abbreviated to a tick: the sentence is the record. */
.closing-record-provenance{font-size:13.5px;line-height:19px;color:var(--t-muted)}

.round-review-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0;
  padding:14px 16px;
  border:1px solid rgba(42,165,106,.28);
  border-radius:14px;
  background:rgba(42,165,106,.07);
}
.round-review-callout strong{display:block;font-size:15px;line-height:21px;color:var(--t-ink)}
.round-review-callout p{margin:3px 0 0;color:var(--t-muted);font-size:14px;line-height:20px}
.round-review-callout .btn{width:auto;min-height:40px;margin:0;padding:8px 14px}
.review-sheet{
  display:grid;
  gap:16px;
  margin:28px auto;
  padding:22px;
  border:1px solid var(--t-border);
  border-radius:20px;
  background:var(--t-card);
  box-shadow:0 18px 44px rgba(11,16,22,.08);
}
.review-sheet h1{margin:0;font-size:28px;line-height:34px;letter-spacing:0}
.review-sheet .btn{margin:0}
.completion-checklist{display:grid;gap:10px}
.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--t-border);
  border-radius:12px;
  background:rgba(255,255,255,.5);
}
.check-row p{margin:0;color:var(--t-ink);font-size:14px;line-height:20px}
.check-row.done span{color:var(--t-green)}
.check-row.open span{color:var(--t-muted)}
.unresolved-list{display:grid;gap:8px}
.unresolved-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(226,92,92,.28);
  border-radius:12px;
  background:rgba(226,92,92,.06);
}
.unresolved-list strong{font-size:14px;line-height:20px}
.trust-note{margin:0;color:var(--t-muted);font-size:13px;line-height:20px}
.share-preview{
  white-space:pre-wrap;
  margin:0;
  padding:14px;
  border:1px solid var(--t-border);
  border-radius:14px;
  background:rgba(11,16,22,.04);
  color:var(--t-ink);
  font:500 14px/22px Inter,system-ui,sans-serif;
}
@media(max-width:560px){
  .done-card-actions{width:100%}
  .done-card-actions .btn{flex:1 1 140px;justify-content:center}
  .round-review-callout,
  .next-round-callout{align-items:flex-start;flex-direction:column}
  .round-review-callout .btn{width:100%;justify-content:center}
  .review-sheet{min-height:calc(100vh - 56px);margin:0 -2px;border-radius:18px 18px 0 0}
}
.workspace-stats [data-countdown]{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t-ink)}
.workspace-stats [data-countdown].overdue{color:#C0392B;font-weight:600}
/* Scheduled, not wrong. A dated task earns a calm blue, not the amber the
   warn dot uses for something that is actually blocking a round. */
.status-dot.upcoming{background:#2C6FA3;box-shadow:0 0 0 3px rgba(44,111,163,.14)}

/* The seat somebody is being offered, stated before there is anything to
   press. Firm rather than decorative: this is the paragraph that has to be
   read, and the debt inside it is the sentence somebody would most regret
   not having seen. */
.seat-offer{
  margin:0 0 16px;padding:14px 16px;
  border:1px solid var(--t-brand-deep);border-radius:14px;background:rgba(42,165,106,.07);
}
.seat-offer strong{display:block;color:var(--t-ink);font-size:15px;line-height:22px}
.seat-offer p{margin:4px 0 0;color:#4A554D;font-size:13.5px;line-height:20px}
.seat-offer .muted{color:var(--t-muted);font-size:12.5px;line-height:18px}
.seat-offer-owes{color:var(--t-accent) !important;font-weight:600}
.seat-offer.withdrawn{border-color:#D8D2CB;background:var(--t-bg)}
.join-request-meta{display:block;margin-top:4px;color:var(--t-muted);font-size:12px;line-height:1.4}
.join-request-message-preview{display:grid;gap:4px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--t-line);border-radius:12px;background:rgba(11,16,22,.42);max-width:360px}
.join-request-message-preview span{color:var(--t-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.join-request-message-preview p{margin:0;color:var(--ink);font-size:13px;line-height:1.45}
.join-request-confirm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin:0 0 8px;color:var(--ink);font-size:13px;line-height:1.35;max-width:360px}
.join-request-confirm input{margin-top:2px}
.join-request-confirm small{display:block;margin-top:2px;color:var(--t-muted);font-weight:400}

/* An empty seat, shown rather than skipped. Quieter than a member row — it
   is a place, not a person — but present, because a gap in the numbering
   reads as a bug and this is somebody's decision. */
.open-seats{display:flex;flex-direction:column;gap:8px}
.open-seat{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 14px;border:1px dashed #D8D2CB;border-radius:14px;background:var(--t-inset);
}
.open-seat-num{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px dashed #D8D2CB;color:#A0A0A0;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}
.open-seat strong{display:block;color:var(--t-ink);font-size:14px;line-height:20px}
.open-seat p{margin:0;font-size:13px;line-height:19px}

/* Swaps in flight, shown to the whole circle: two members trading seats
   changes the order everybody else receives in. */
.swap-queue{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.swap-line{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-inset);
}
.swap-line strong{display:block;color:var(--t-ink);font-size:14px;line-height:20px;font-weight:600}
.swap-line p{margin:2px 0 0;font-size:13px;line-height:19px}
.swap-answer{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){.swap-line{grid-template-columns:1fr}}

/* Before and after, side by side. Two lists are harder to misread than a
   sentence about a date is to skim, which is the whole reason they are drawn. */
.seat-diff{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
@media(max-width:520px){.seat-diff{grid-template-columns:1fr}}
.seat-col{border:1px solid var(--t-line);border-radius:14px;padding:12px}
.seat-col-head{
  margin:0 0 8px;color:var(--t-muted);font-size:11px;line-height:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.seat-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.seat-row{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  padding:7px 9px;border-radius:9px;font-size:13.5px;line-height:19px;color:var(--t-ink);
}
.seat-row .n{color:#A0A0A0;font-size:12px;font-variant-numeric:tabular-nums;min-width:1.2em}
.seat-row.vacant{color:#A0A0A0;border:1px dashed #E4DFD9}
.seat-row.moved{background:rgba(42,165,106,.1);font-weight:600}

/* Where a member could go. Links rather than a select: each one previews, so
   pressing it shows what it would do instead of committing to it. */
.seat-choices{display:flex;flex-wrap:wrap;gap:8px}
.seat-choice{
  padding:8px 14px;border:1px solid var(--t-line);border-radius:999px;
  color:var(--t-ink);font-size:13.5px;line-height:19px;text-decoration:none;
}
.seat-choice:hover{border-color:#D8D2CB;background:var(--t-inset)}
.seat-choice.on{border-color:var(--t-brand-deep);background:rgba(42,165,106,.09);font-weight:600}
.seat-choice:focus-visible{outline:2px solid var(--t-green-hover);outline-offset:2px}
.seat-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}

/* What a tool would do, before it does it. The last line is the consequence
   an organizer is least likely to have thought of. */
.move-reach{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.move-reach li{
  padding:12px 14px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-inset);
  color:var(--t-ink);font-size:14px;line-height:20px;
}
.move-reach li.warn{border-color:rgba(176,82,26,.35);background:rgba(176,82,26,.06);color:var(--t-accent)}
.move-consent{
  margin:0 0 16px;padding:12px 14px;
  border-left:3px solid var(--t-brand-deep);border-radius:0 10px 10px 0;background:var(--t-bg);
  color:#4A554D;font-size:13.5px;line-height:20px;
}

/* An ask sitting on the member's own screen. Both answers styled as answers:
   an ask with one obvious button is not an ask. */
.seat-offer-inbox{
  max-width:520px;margin:12px auto 0;padding:16px 18px;
  border:1px solid var(--t-brand-deep);border-radius:16px;background:rgba(42,165,106,.07);
}
.seat-offer-inbox strong{display:block;color:var(--t-ink);font-size:16px;line-height:23px}
.seat-offer-inbox p{margin:6px 0 0;color:#4A554D;font-size:14px;line-height:20px}
.seat-offer-inbox .muted{color:var(--t-muted);font-size:12.5px;line-height:18px}
.seat-offer-answer{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.seat-offer-answer .btn{margin:0}

/* Removing somebody mid-rotation: three decisions, and only the ones that
   apply are on screen. The reach line under each option is the honest half of
   the contract, so it is styled as content rather than as fine print. */
.succession-where{margin:2px 0 0;color:var(--t-muted);font-size:13.5px;line-height:20px}
/* The consequence that happens either way, stated before anything is asked.
   Amber because somebody's payout date moves; not red, because nothing has
   gone wrong. */
.succession-shift{
  margin:0 0 20px;padding:12px 14px;
  border:1px solid rgba(176,82,26,.35);border-radius:12px;
  background:rgba(176,82,26,.06);
  color:var(--t-accent);font-size:14px;line-height:20px;
}
.succession-q{border:0;margin:0 0 22px;padding:0}
.succession-q legend{
  padding:0;margin:0 0 4px;
  color:var(--t-ink);font-size:15px;line-height:22px;font-weight:600;
}
.succession-hint{margin:0 0 12px;color:var(--t-muted);font-size:13px;line-height:19px}
.succession-opt{
  display:grid;grid-template-columns:auto 1fr;gap:3px 11px;
  padding:12px 14px;margin-bottom:8px;
  border:1px solid var(--t-line);border-radius:12px;cursor:pointer;
}
.succession-opt:hover{border-color:#D8D2CB;background:var(--t-inset)}
.succession-opt:has(input:checked){border-color:var(--t-brand-deep);background:rgba(42,165,106,.07)}
.succession-opt:has(input:focus-visible){outline:2px solid var(--t-green-hover);outline-offset:2px}
.succession-opt input{margin:4px 0 0;accent-color:var(--t-brand-deep);width:16px;height:16px}
.succession-opt .t{font-size:14.5px;line-height:21px;font-weight:500;color:var(--t-ink)}
.succession-opt .reach{
  grid-column:2;margin:0;color:#4A554D;font-size:13px;line-height:19px;
}
/* The consequence an organizer would most regret not having read. Amber, the
   colour this product already uses for "this is going to affect somebody",
   never red — nothing here is an error. */
.succession-opt .reach.warn{color:var(--t-accent)}
.succession-default{
  margin-left:7px;padding:1px 5px;border:1px solid #D8D2CB;border-radius:4px;
  color:var(--t-muted);font-size:10px;line-height:15px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
}
.succession-settled{
  margin:0;padding:12px 14px;border:1px solid var(--t-line);border-radius:12px;
  background:var(--t-bg);color:#4A554D;font-size:14px;line-height:20px;
}
.succession-nocustody{
  display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;
  color:var(--t-muted);font-size:12.5px;line-height:18px;
}
.succession-reason select{
  width:100%;padding:10px 12px;border:1px solid var(--t-line);border-radius:12px;
  background:#FFFFFF;color:var(--t-ink);font:inherit;font-size:14px;
}
.succession-foot{
  display:flex;gap:10px;justify-content:flex-end;align-items:center;
  padding-top:16px;border-top:1px solid var(--t-line);
}
.btn.danger{background:var(--t-accent);border-color:var(--t-accent);color:#FFFFFF}
.btn.danger:hover{filter:brightness(.93)}

/* ── The sidebar shell ──────────────────────────────────────────────────
   Above 900px the list of circles is furniture rather than a destination:
   always there, switching circles without losing your place, carrying you at
   its foot. Below 900px it is display:none — not a drawer, not a second
   template. One shell, so a phone gets exactly the app it has today and there
   is nothing that can drift out of step with this. */
.app-shell{display:block}
.app-shell > .wrap{width:100%;max-width:var(--t-canvas-max);margin:0 auto}
.app-shell > .foot{max-width:var(--t-canvas-max);margin:0 auto;text-align:center}
/* 430px was the phone width the workspace was designed at, before there was a
   canvas. It was overridden only inside the old desktop media query, so
   retiring that query put the workspace back in a column narrower than the
   space it has — 190px of empty canvas beside it and every card wrapping as
   though it were on a phone. The wrap already caps at --t-canvas-max, so the
   cockpit does not need a width of its own at any size. */
.app-shell .cockpit-shell{max-width:none}

/* The topbar is back at every width. It used to be hidden above 900px because
   the column held everything it did — the wordmark, the profile, the way back
   — and two "Tanda"s on one screen is one too many. With the circles behind a
   drawer there is no column, and the bar is the only place the control that
   opens it can live. */
.drawer-open{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border:0;background:transparent;color:var(--t-ink);cursor:pointer;
  border-radius:999px;font-size:20px;
}
.drawer-open:hover{background:rgba(0,0,0,.05)}
/* The bar spreads its children, so the brand takes the slack and keeps
   the opener pinned to the left edge beside it. */
.topbar .brand{margin-right:auto}
.drawer-open:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

/* The scrim. Dim rather than dark: the canvas behind is still the thing being
   navigated, and blacking it out makes the drawer feel like a page change
   when it is meant to feel like a layer. */
.drawer-scrim{
  position:fixed;inset:0;z-index:59;background:rgba(26,46,53,.28);
  opacity:0;pointer-events:none;transition:opacity var(--t-d2) var(--t-settle);
}
.drawer-scrim.is-open{opacity:1;pointer-events:auto}

/* One drawer, one behaviour, every width. It was a 240px grid track above
   900px and nothing at all below, which meant a phone could not reach the
   list of circles without leaving the page it was on. */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:60;width:var(--t-sidebar-width);max-width:86vw;
  display:flex;flex-direction:column;gap:12px;
  padding:18px 12px;background:var(--t-card);
  border-right:1px solid var(--t-line);
  transform:translateX(-100%);
  transition:transform var(--t-d3) var(--t-spring);
}
.sidebar.is-open{transform:translateX(0);box-shadow:10px 0 32px rgba(26,46,53,.13)}
/* Closed, it is gone from the accessibility tree as well as from the eye — a
   translated panel is still read aloud otherwise. inert is set by the script
   so a page with no JavaScript still has a reachable list of circles. */
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
  .drawer-scrim{transition:none}
}

.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px}
.sidebar-brand{font-size:15px;font-weight:650;letter-spacing:0;color:var(--t-ink)}
.sidebar-new{
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;
  padding:8px 12px;border:1px solid var(--t-line);border-radius:10px;
  background:#FFFFFF;color:var(--t-ink);box-shadow:0 1px 0 rgba(26,46,53,.04);
  font-size:13px;font-weight:620;text-decoration:none;white-space:nowrap;
}
.sidebar-new:hover{border-color:#D6DDD4;background:#FDFCFB;color:var(--t-brand-deep)}
.sidebar-new:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

.sidebar-label{
  margin:4px 8px 0;font-family:var(--t-label);font-size:var(--t-label-size);
  font-weight:var(--t-label-weight);letter-spacing:var(--t-label-tracking);
  text-transform:uppercase;color:var(--t-muted);
}
/* The list is the scroller, not the whole panel. With overflow on the
   aside, forty circles pushed the wordmark and the profile off the top and
   bottom of their own drawer — the two things that are meant to stay put. */
.sidebar-list{display:flex;flex-direction:column;gap:2px;padding:0 2px 4px;
  overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
.sidebar-item{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;
  align-items:center;min-height:48px;padding:8px 9px;border:1px solid transparent;
  border-radius:9px;text-decoration:none;
}
.sidebar-item:hover{background:rgba(255,255,255,.7);border-color:rgba(26,46,53,.06)}
.sidebar-item.is-open{background:#FFFFFF;border-color:var(--t-line);box-shadow:0 8px 22px rgba(26,46,53,.06)}
.sidebar-item.is-open::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:999px;
  background:var(--t-brand);
}
.sidebar-item:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

/* The dot means this one needs you — not that you owe money. Filled only for
   the three states that are waiting on this person; a ring otherwise, so the
   quiet circles still line up and the eye can count them. */
.sidebar-dot{
  width:7px;height:7px;border-radius:50%;
  border:1.5px solid var(--t-line);background:transparent;
}
.sidebar-dot.needs{background:var(--t-brand);border-color:var(--t-brand)}

.sidebar-text{min-width:0}
.sidebar-name{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;
  display:block;font-size:13.5px;line-height:19px;font-weight:560;color:var(--t-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sidebar-state{display:block;font-size:11.5px;line-height:16px;color:var(--t-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-badge{
  font-size:10.5px;line-height:15px;font-weight:560;color:#6F756F;
  border:1px solid rgba(26,46,53,.08);border-radius:999px;padding:1px 7px;background:rgba(255,255,255,.48);
  margin-top:2px;white-space:nowrap;
}
.sidebar-empty{
  margin:0 2px;padding:12px 10px;border:1px dashed var(--t-line);border-radius:10px;
  background:rgba(255,255,255,.4);color:var(--t-muted);font-size:12.5px;line-height:18px;
}

.sidebar-foot{margin-top:auto;padding-top:10px;border-top:1px solid rgba(26,46,53,.08)}
/* The whole row is the link. A name with a small word beside it gives the eye
   two things to aim at for one destination. */
.sidebar-profile{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;
  min-height:46px;padding:8px 10px;border:1px solid transparent;border-radius:10px;text-decoration:none;
}
/* The lift lives on the base rule. It was a second .sidebar-face{transition:
   transform} further down, which the photograph also matches — same
   specificity, later in the file — so it replaced the photograph's own
   transition:opacity and the fade never ran. The stylesheet read correctly and
   the picture snapped in. */
.sidebar-face{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(42,165,106,.12);color:var(--t-brand-deep);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  transition:transform 150ms var(--t-settle);
}
.sidebar-profile-text{min-width:0}
/* The tint is the initials' background, kept here so the row does not flash an
   empty hole while the picture loads: the placeholder reads as intended rather
   than as missing. Fainter under a photograph than under letters, because it
   is about to be covered.

   No spinner. At 28px on a cached image it would appear and vanish inside a
   frame, which is more noticeable than the thing it was explaining. */
.sidebar-face-photo{
  object-fit:cover;background:rgba(42,165,106,.06);padding:0;
  /* Both, in one declaration — naming only opacity here would drop the lift
     the base rule just set. */
  opacity:0;transition:opacity 300ms ease,transform 150ms var(--t-settle);
}
.sidebar-face-photo.is-loaded{opacity:1}
/* The whole row is the link, so the face lifts when the row is hovered rather
   than only when the cursor is on the face itself. */
.sidebar-profile:hover .sidebar-face{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .sidebar-face{transition:none}
  .sidebar-profile:hover .sidebar-face{transform:none}
  .sidebar-face-photo{transition:none}
}
.sidebar-profile:hover{background:rgba(255,255,255,.72);border-color:rgba(26,46,53,.06)}
.sidebar-profile:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.sidebar-you{display:block;font-size:12.5px;font-weight:600;color:var(--t-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-profile-hint{display:block;font-size:11.5px;line-height:16px;color:var(--t-muted)}

/* The three things a circle is. Links, not buttons: each one is a page with
   its own url, so the browser's back button, a bookmark and a shared link all
   behave the way a person already expects. */
/* Demoted against the People pills below it.

   Two rows of capsules asked the same question with the same voice: one answers
   "which part of the circle am I in", the other "which People view am I looking
   at". They are different questions and the second is the one being worked, so
   this row is smaller, quieter and unfilled -- a segmented control rather than a
   set of buttons. Same routes, same active state, same `aria-current`. */
.circle-tabs{
  display:flex;gap:2px;max-width:420px;margin:10px auto 0;padding:2px;
  border:1px solid var(--t-line);border-radius:999px;background:var(--t-inset);
}
.circle-tabs a{
  flex:1;padding:6px 10px;border-radius:999px;
  color:var(--t-muted);font-size:12px;line-height:18px;font-weight:600;
  text-align:center;text-decoration:none;
}
.circle-tabs a:hover{color:var(--t-ink)}
/* aria-current carries the state, so the styling has nothing of its own to
   get out of step with — the tab that looks selected is the one a screen
   reader announces as the current page, always. */
.circle-tabs a[aria-current="page"]{background:#FFFFFF;color:var(--t-ink);border:1px solid var(--t-line);padding:5px 9px}
.circle-tabs a:focus-visible{outline:2px solid var(--t-green-hover);outline-offset:2px}
.people-subtabs,.request-state-tabs{display:flex;gap:8px;align-items:center;overflow-x:auto;margin:0 0 14px;
  padding:0 2px 2px;scrollbar-width:none}
.people-subtabs::-webkit-scrollbar,.request-state-tabs::-webkit-scrollbar{display:none}
.people-subtabs a,.request-state-tabs a,.request-state-tabs button{display:inline-flex;align-items:center;
  justify-content:center;min-height:40px;padding:9px 16px;
  border:1px solid var(--t-line);border-radius:999px;color:var(--t-muted);text-decoration:none;
  font-size:13.5px;font-weight:650;white-space:nowrap;background:var(--t-card);cursor:pointer}
.people-subtabs a[aria-current="page"],.request-state-tabs a[aria-current="page"],.request-state-tabs button[aria-selected="true"]{
  background:var(--t-navy);color:#FFFFFF;border-color:var(--t-navy)}
.people-subtabs a:focus-visible,.request-state-tabs a:focus-visible,.request-state-tabs button:focus-visible{outline:2px solid var(--t-green-hover);outline-offset:2px}
.people-shell{scroll-padding-top:148px}
.people-panel{scroll-margin-top:148px}
.admin-succession-warning{
  display:grid;gap:2px;margin:0 0 12px;padding:10px 12px;
  border:1px solid rgba(245,158,11,.30);border-radius:12px;
  background:rgba(245,158,11,.08);
}
.admin-succession-warning strong{color:var(--t-ink);font-size:14px;line-height:20px}
.admin-succession-warning p{margin:0}
/* One panel at a time, at every width.
   This was `repeat(4, minmax(190px, 1fr))` with `overflow-x:auto`, which on the
   real page put four 190px columns inside a 546px container: a request card 168
   wide by 297 tall, with the member's name broken over three lines. The tabs
   above it were already a tablist; the columns were the same data rendered a
   second, worse way. */
.request-board{display:block;padding-bottom:0}
.request-column.is-hidden{display:none}
/* No panel chrome. The min-width, the border and the dark fill were a column's
   costume: they made one lane legible beside three others. With one panel there
   are no others, and the fill was the only dark surface on an otherwise light
   page. It read as disabled. (It passed contrast at 4.97:1 -- this is
   coherence, not accessibility.) */
.request-column{
  display:grid;align-content:start;gap:8px;min-width:0;padding:0;border:0;
  border-radius:0;background:transparent;
}
.request-column-head{display:none}
.request-column-head--legacy{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 2px}
.request-column-head strong{color:var(--t-ink);font-size:13px;line-height:20px}
.request-column-head span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--t-muted);font-size:12px;font-weight:700}
.request-empty{margin:4px 2px 2px;font-size:13px}
.join-request-list{display:grid;gap:10px}
/* A row on the page's own surface, like every other list here — and three
   columns, so the decision sits beside the person it is about.
   Two columns put the actions on their own line under the avatar, which is the
   thing the row pattern exists to prevent: an organizer scanning a list should
   read a name and reach its button on the same line. */
/* One card, and the decision lives inside it.

   The actions were in a third column, which trapped the decline panel in that
   cell -- it opened *beside* the person rather than beneath them, and read as a
   second thing on the screen. They sit on their own full-width strip now, so
   expanding pushes the card down instead of sideways. Same on every width, so
   there is one layout to reason about rather than two. */
.join-request-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;
  align-items:start;
  min-height:64px;padding:12px;border:1px solid var(--t-line);border-radius:14px;
  background:var(--t-card);
}
.join-request-row .join-request-decide,
.join-request-row .join-request-review{grid-column:1 / -1}
.join-request-decide{display:grid;gap:10px}
/* `width:100%` is load-bearing: as a grid item this shrank to its content, so
   `justify-content:flex-end` had nothing to push against and the buttons sat
   left under the avatar. */
.decide-default{display:flex;width:100%;gap:8px;justify-content:flex-end;
  align-items:center;flex-wrap:wrap}
.decide-default form{margin:0}
.join-request-main{min-width:0}
.join-request-main strong{display:block;color:var(--t-ink);font-size:14px;line-height:20px;font-weight:700}
.join-request-main p{margin:2px 0 0}
.join-request-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.join-request-review{grid-column:1 / -1;position:relative;justify-self:start}
.join-request-review > summary{list-style:none;cursor:pointer}
.join-request-review > summary::-webkit-details-marker{display:none}
.join-request-review[open] > summary{background:rgba(42,165,106,.10)}
.join-request-review-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:35;
  width:min(360px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 112px));
  overflow:auto;display:grid;gap:10px;padding:14px;border:1px solid var(--t-line);
  border-radius:16px;background:var(--t-card);box-shadow:0 24px 64px rgba(11,16,22,.18);
}
.join-request-review-panel .sheet-grabber{display:none}
.join-request-close{
  justify-self:end;min-height:32px;padding:0;border:0;background:transparent;color:var(--t-muted);
  font-size:13px;font-weight:700;cursor:pointer;
}
.join-request-close:focus-visible{outline:2px solid var(--t-green-hover);outline-offset:2px;border-radius:8px}
.join-request-sheet-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.join-request-sheet-head .eyebrow{margin:0}
.join-request-review-panel h3{margin:0}
.join-request-review-panel form{display:grid;gap:8px;margin:0}
.join-request-review-panel details summary{min-height:40px;color:var(--t-brand-deep);font-weight:700;cursor:pointer}
.duplicate-warning{display:grid;gap:4px;padding:10px 12px;border:1px solid rgba(245,158,11,.30);border-radius:12px;background:rgba(245,158,11,.08)}
.duplicate-warning strong{color:var(--t-ink)}
.invite-preview-details,.invite-disclosure-details{display:grid;gap:8px;margin-top:10px}
.invite-preview-details > summary,.invite-disclosure-details > summary{
  min-height:40px;color:var(--t-brand-deep);font-weight:700;cursor:pointer;
}
.invite-public-rows{display:grid;gap:8px;margin-top:8px}
.invite-public-rows .detail-row{
  display:grid;grid-template-columns:minmax(88px,.5fr) minmax(0,1fr);gap:10px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--t-line);
}
.invite-public-rows .detail-row:last-child{border-bottom:0}
.invite-public-rows .detail-row span:first-child{color:var(--t-muted);font-size:12px;line-height:18px;font-weight:700}
.invite-url-label{color:var(--t-muted);font-size:13px;line-height:20px;font-weight:700}
@media(max-width:560px){
  .people-shell{scroll-padding-top:164px}
  .people-panel{scroll-margin-top:164px}
  /* The board is single-panel at every width now, and the column's chrome is
     gone everywhere, so the overrides that used to live only here are stated
     once, above. */
  .join-request-row{grid-template-columns:auto minmax(0,1fr)}
  .join-request-review{grid-column:2;justify-self:start}
  .join-request-review[open]::before{
    content:"";position:fixed;inset:0;z-index:34;background:rgba(11,16,22,.56);
  }
  .join-request-review-panel{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;
    z-index:35;width:auto;max-height:min(76dvh,620px);padding:16px;
    border-radius:18px 18px 16px 16px;box-shadow:0 -18px 64px rgba(0,0,0,.36);
  }
  .join-request-review-panel .sheet-grabber{display:block;width:40px;height:4px;border-radius:999px;background:rgba(139,155,176,.48);justify-self:center}
  .join-request-close{position:absolute;right:16px;top:14px}
  .join-request-sheet-head{padding-right:48px}
}
.seat-note{
  max-width:520px;margin:12px auto 0;padding:0 4px;
  color:#A0A0A0;font-size:12px;line-height:18px;
}

/* The member list is the receiving order now, so the sheet that used to hold
   it is gone — with its overlay, scroll lock, drag handle and close button.
   These two are what was inside it that the list does not already say. */
/* A disputed sender's answer, folded shut. It sits on the row the claim was
   made against, and stays closed because it concerns one member on a list
   where everyone else's row is a single line. */
.spine-dispute{grid-column:1 / -1;margin-top:6px}
.spine-dispute summary{
  color:var(--t-green-hover);font-size:13px;line-height:20px;font-weight:600;cursor:pointer;
  list-style:none;
}
.spine-dispute summary::-webkit-details-marker{display:none}
.spine-dispute summary:focus-visible{outline:2px solid var(--t-green-hover);outline-offset:2px;border-radius:6px}
.spine-dispute form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.spine-dispute label{display:flex;flex-direction:column;gap:4px;color:var(--t-muted);font-size:12px;line-height:18px}
.spine-dispute input{
  padding:10px 12px;border:1px solid var(--t-line);border-radius:12px;
  background:#FFFFFF;color:var(--t-ink);font:inherit;font-size:14px;line-height:20px;
}
.spine-dispute input:focus-visible{outline:0;border-color:var(--t-green-hover);box-shadow:0 0 0 3px rgba(31,131,83,.14)}

.rotation-note{
  max-width:520px;margin:6px auto 0;padding:0 4px;
  color:#A0A0A0;font-size:12px;line-height:18px;
}
/* Leaves the app, so it reads as secondary: a quiet row below the list, not
   a button competing with the order it is attached to. */
.rotation-calendar{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;
  max-width:520px;margin:10px auto 0;padding:12px;
  border:1px solid var(--t-line);border-radius:16px;
  color:var(--t-ink);font-size:14px;line-height:20px;text-decoration:none;
}
.rotation-calendar span[aria-hidden]{grid-row:1 / span 2;font-size:18px}
.rotation-calendar small{color:var(--t-muted);font-size:12px;line-height:18px}
.rotation-calendar:hover,.rotation-calendar:focus-visible{outline:0;border-color:#D8D2CB;background:var(--t-inset)}

/* Wordmark per ground: the dark-ground mark is near-white and vanishes on
   the light member surfaces. */
.brand-on-light{display:none}
body:has(.member-shell) .brand-on-dark,
body:has(.member-auth) .brand-on-dark{display:none}
body:has(.member-shell) .brand-on-light,
body:has(.member-auth) .brand-on-light{display:block}

/* The topbar sits outside .member-shell, so it needs its own scope. */
body:has(.member-shell) .topbar .btn,
body:has(.member-auth) .topbar .btn{
  background:transparent;
  background-image:none;
  color:var(--t-navy);
  border:1px solid var(--t-line);
  box-shadow:none;
}
body:has(.member-shell) .topbar .btn:hover,
body:has(.member-auth) .topbar .btn:hover{
  background:#FFFFFF;
  border-color:var(--t-brand);
  color:var(--t-green-hover);
  filter:none;
}

/* Pickers are fields, so they match the inputs beside them. */
.create-circle-flow .pill-select-trigger,
.member-form-shell .pill-select-trigger{background:#FFFFFF}

/* Pills in a row share a height even when one label wraps. */
.create-circle-flow .compact-pills{align-items:stretch}
.create-circle-flow .compact-pills label{display:flex}
.create-circle-flow .compact-pills label span{width:100%;justify-content:center}

/* The back control is a quiet affordance on a light ground. */
body:has(.member-shell) .topbar-back,
body:has(.member-auth) .topbar-back{
  background:#FFFFFF!important;
  background-image:none!important;
  border:1px solid var(--t-line)!important;
  color:var(--t-navy)!important;
  box-shadow:none!important;
}
body:has(.member-shell) .topbar-back:hover,
body:has(.member-auth) .topbar-back:hover{border-color:var(--t-brand)!important;color:var(--t-green-hover)!important}
/* Sub-category rows size to their options rather than a fixed two. */
.create-circle-flow .sub-category .compact-pills.small{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
/* display:flex on the overlay beats the [hidden] attribute, which left the
   sheet on screen from page load with nothing able to dismiss it. */

/* The create flow's card padding was scoped to itself; the newer shells need
   the same treatment or their fieldsets sit flush to the edge. */
.circle-settings-shell .member-form-card,
.profile-shell .member-form-card{
  padding:20px;
  border-radius:16px;
  background:#FFFFFF;
  border:1px solid var(--t-line);
}
.circle-settings-shell .wizard-cluster,
.profile-shell .wizard-cluster{margin:0;padding:0;border:0;display:grid;gap:10px}
.circle-settings-shell .wizard-cluster legend,
.profile-shell .wizard-cluster legend{
  margin:0 0 6px;padding:0;
  color:var(--t-muted);font-size:12px;line-height:18px;font-weight:560;
  text-transform:uppercase;letter-spacing:.06em;
}
.circle-settings-shell label,
.profile-shell label{color:var(--t-ink);font-size:14px;line-height:20px;font-weight:500}
.circle-settings-shell form{display:flex;flex-direction:column;gap:16px}
.circle-settings-shell .settings-readout strong{white-space:nowrap}

@media(max-width:430px){
  /* The status pill and a long name cannot share a row on a narrow phone. */
  .member-pager{gap:8px}
  .member-pager .btn{min-width:0;flex:1}
}
/* The circle card keeps its chevron beside the content on a phone; the
   column stack was for the older card that had a right-hand status column. */
@media(max-width:560px){
  .minimal-row.member-circle-row{flex-direction:row;align-items:center}
  .member-circle-row .member-circle-chevron{align-self:center;flex:0 0 auto}
}

/* Grid items default to min-width:auto, so a wide top bar pushes the whole
   workspace past the viewport instead of truncating. */
.cockpit-shell > *{min-width:0}
.cockpit-shell .circle-workspace-bar{min-width:0}
.cockpit-shell .workspace-title{min-width:0;display:flex;align-items:baseline;gap:8px;flex:1 1 auto}
.cockpit-shell .workspace-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cockpit-shell .workspace-actions{flex:0 0 auto}
@media(max-width:430px){
  .cockpit-shell .workspace-due{display:none}
  .workspace-stats{margin-inline:12px}
  .cockpit-shell .round-line,.cockpit-shell .round-warning{margin-inline:12px}
}

/* Pulse: three lines of what moved and who is still to send. */
.pulse-lines{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pulse-lines li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;line-height:20px;color:var(--t-muted)}
.pulse-lines li b{color:var(--t-ink);font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pulse-lines li.waiting span{color:var(--t-muted)}
.pulse-lines .done{color:var(--t-green-hover);font-weight:600}
.cockpit-shell .workspace-menu-panel .menu-new{color:var(--t-green-hover);font-weight:600}

/* Confirm chips and payer actions: the round is operable from the strip. */
.confirm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.confirm-chip{
  display:flex;align-items:center;gap:2px;
  padding:4px 4px 4px 12px;border:1px solid var(--t-line);border-radius:999px;background:#FFFFFF;
}
.confirm-chip .chip-name{
  max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t-ink);font-size:13px;line-height:20px;font-weight:500;
}
.confirm-chip form{margin:0}
.confirm-chip button{
  min-width:32px;min-height:32px;padding:0;border:0;border-radius:999px;
  background:transparent;font-size:14px;line-height:1;cursor:pointer;
}
.confirm-chip .chip-yes:hover,.confirm-chip .chip-yes:focus-visible{outline:0;background:rgba(42,165,106,.14)}
.confirm-chip .chip-no:hover,.confirm-chip .chip-no:focus-visible{outline:0;background:rgba(192,57,43,.12)}
.chip-more{align-self:center;color:var(--t-green-hover);font-size:13px;font-weight:600;text-decoration:none}
.chip-more:hover{text-decoration:underline}
.strip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.strip-actions form{margin:0}
.cockpit-shell .strip-actions .btn{width:auto;margin:0;min-height:44px;padding:0 16px}
@media(max-width:430px){
  .strip-actions{flex-direction:column;align-items:stretch}
  .cockpit-shell .strip-actions .btn{width:100%}
}

/* Sticky leaf: the tab on the settings drawer. */
.cockpit-shell .workspace-menu-panel{overflow:visible}
.sticky-leaf{
  position:absolute;top:-11px;left:14px;
  padding:2px 10px;border:1px solid #FDE68A;border-radius:8px;
  background:#FEF9C3;color:#854D0E;
  font-size:11px;line-height:16px;font-weight:600;white-space:nowrap;
  transform:rotate(-2deg);
}

/* Bottom navigation: Home, New and Profile. New is the raised middle action. */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;
  gap:8px;padding:8px 20px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--t-line);
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:48px;color:var(--t-muted);text-decoration:none;font-size:11px;line-height:16px;
}
.bottom-nav-item span{font-size:18px;line-height:1}
.bottom-nav-item.is-active{color:var(--t-green-hover);font-weight:600}
.bottom-nav-item:hover,.bottom-nav-item:focus-visible{outline:0;color:var(--t-navy)}
.bottom-nav-new{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:60px;height:60px;margin-top:-16px;border-radius:999px;
  background:var(--t-navy);color:#FFFFFF;text-decoration:none;
  font-size:10px;line-height:14px;font-weight:600;
  box-shadow:0 10px 22px -10px rgba(26,46,53,.7);
}
.bottom-nav-new span{font-size:22px;line-height:1}
.bottom-nav-new:hover,.bottom-nav-new:focus-visible{outline:0;background:#24404A;text-decoration:none}
/* Room for the bar so it never covers the last row. */
body:has(.bottom-nav) .wrap{padding-bottom:104px}
/* Above 900px the sidebar already is Home, New and Profile, so the bar was
   the same three destinations a second time — fixed over the content, with
   the canvas reserving 104px at the bottom for it. It belongs to the width
   that has no sidebar. */
@media(min-width:900px){
  body.has-drawer .bottom-nav{display:none}
  body.has-drawer:has(.bottom-nav) .wrap{padding-bottom:0}
}
.profile-header{position:relative}
.cockpit-shell .workspace-menu-panel .menu-plan{color:var(--t-muted);font-size:12px;font-weight:500}

/* An empty circle list should sit in the middle of the screen, not float
   below a header with a screen of nothing under it. */
.member-shell .member-empty.action-empty{min-height:48vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.strip-waiting{margin:8px 0 0;color:var(--t-muted);font-size:13px;line-height:20px}
.strip-details{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;
  color:var(--t-ink);font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}
.strip-details b{color:var(--t-muted);font-weight:600}
.strip-actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.pending-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pending-actions form{margin:0}
.seat-note{margin:10px 0 0;padding:10px 12px;border-radius:14px;background:var(--t-inset);
  border:1px solid var(--t-line);color:var(--t-ink);font-size:13px;line-height:20px}
.seat-count{margin:10px 0 0;color:var(--t-ink);font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}
.seat-count .muted{color:var(--t-muted)}

/* --- Circle formation stepper ------------------------------------------
   The rail, the blockers and the footer for /setup/{people,ready,review}.
   Namespaced .setup-* so it can live in this stylesheet without a second
   asset to keep in sync. */
.setup-shell{padding-bottom:24px}
/* The footer stays in the flow. It used to stick to the viewport bottom; on
   the people step that placed Continue over the invitation card, which made
   navigation compete with the main task: bring people in. */
.setup-step-body{padding-bottom:24px}
/* The circle head and the rail are one object on setup.

   Measured on the built page before this: the step title began 417px down, of
   which the header was 325 -- a floating rounded island for the circle name,
   then a rail, then three more lines of meta, each in its own voice. The step
   itself started below the fold on a 639px viewport.

   Joined: the bar loses its island treatment and the rail sits under it on the
   same surface, so the whole thing reads as one header rather than four
   stacked announcements. */
.setup-shell .circle-workspace-bar{
  min-height:0;padding:12px 18px 10px;
  border-radius:16px 16px 0 0;border-bottom:0;
  background:var(--t-card);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* One line, not a stack: "Perf Draft 8bf2aa2c · Chama" is one fact about one
   circle, and stacking the label under the name cost 25px of header on every
   step for no added meaning. */
.setup-shell .workspace-title-stack{
  flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;
}
/* No bottom margin: .member-shell is a grid with a 16px gap, so a margin here
   is added to it rather than absorbed by it -- 28px of separation where 16 was
   intended. */
.setup-shell .setup-rail{
  margin:0;padding:0 18px 10px;
  border-radius:0 0 16px 16px;
  background:var(--t-card);
  border:1px solid rgba(255,255,255,.72);border-top:0;
}
.setup-rail{margin:12px 0 18px}
.setup-rail-track{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
/* Progress is not consequence. `--t-brand` is documented fill-only at 3.14:1,
   and a 4px bar carrying no text is exactly that use. */
.setup-rail-fill{display:block;height:100%;background:var(--t-brand);
  transition:width 240ms ease}
.setup-rail-steps{display:flex;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.setup-rail-step{flex:1}
.setup-rail-mobile{display:none}
.setup-rail-mobile{position:relative}
.setup-rail-mobile summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px;list-style:none;cursor:pointer}
.setup-rail-mobile summary::-webkit-details-marker{display:none}
.setup-rail-step a,.setup-rail-step>span{display:flex;align-items:center;gap:8px;padding:8px 6px;
  border-radius:10px;text-decoration:none;color:var(--muted);
  transition:background 160ms ease,color 160ms ease}
.setup-rail-step a:hover{background:#E7F4EE}
.setup-rail-step a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.setup-rail-step.current>span{color:var(--ink);font-weight:600}
.setup-rail-dot{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;
  border-radius:50%;border:1px solid var(--line);font-size:12px;line-height:1}
/* The done dot carries white text, so it cannot take --t-brand: that token is
   3.14:1 and documented never-text. --t-brand-deep is 5.31:1 on white. */
.setup-rail-step.done .setup-rail-dot{background:var(--t-brand-deep);color:#fff;
  border-color:var(--t-brand-deep)}
/* Current is filled, not outlined: an outline beside a filled check read as
   the lesser of the two, on the one step the reader is actually on. Upcoming
   is muted, so the three states never share a treatment. */
.setup-rail-step .setup-rail-dot{color:var(--t-muted);font-weight:600}
.setup-rail-step.current .setup-rail-dot{background:var(--t-brand-deep);color:#fff;
  border-color:var(--t-brand-deep)}
/* The section this page is actually about, named once and at the level the
   pills below belong to. Not a page title: the circle head above it is the
   page's title, and repeating "People" there made a three-level hierarchy out
   of a two-level one. */
.people-section-title{
  margin:16px 0 8px;padding:0 2px;
  font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em;
  color:var(--t-ink);
}
@media(max-width:560px){
  /* Compact rather than another title bar. */
  .people-section-title{margin:12px 0 6px;font-size:18px;line-height:24px}
}

/* The way back to setup sits with the navigation it belongs to, rather than
   floating in the gap between the tabs and the first card. */
.people-setup-return{margin:-6px 0 14px;padding:0 2px;font-size:13px}
.people-setup-return a{color:var(--t-brand-deep);font-weight:650;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--t-line)}

/* --- Status chips --------------------------------------------------------- */
/* Smaller and quieter than `.pill`, which is a state the page is asserting;
   these are states you scan past. Same tints so the product keeps one colour
   language -- amber waiting, green done, grey neutral -- at two thirds the
   size, with the icon carrying the meaning for anyone who reads shape before
   they read colour. */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;
  font-size:11.5px;line-height:16px;font-weight:600;white-space:nowrap;
}
.chip svg{width:12px;height:12px;flex:none}
/* Not the .pill foregrounds. Measured on the built page, those give 4.25:1
   (warn), 4.42:1 (ok) and 3.10:1 (muted) -- already marginal at .pill size, and
   a chip is 11.5px, too small to claim the large-text allowance. These are the
   same hues carried far enough down to pass AA: 7.23:1, 4.69:1 and 6.18:1.
   Same finding as S11, one size smaller. */
.chip-wait{background:#FBF2DC;color:#6B4A00}
.chip-sent{background:#E7F4EE;color:var(--t-brand-deep)}
.chip-quiet{background:var(--t-bg);color:#5A5A5A}
.chip-when{background:var(--t-bg);color:#5A5A5A}

/* --- The compact row-action pill ------------------------------------------ */
/* Smaller than the capsules below on purpose. Those are decisions the page is
   asking for -- Approve, Manage, Send invite. These sit *inside* a line of text
   ("Not set / Send reminder", "Only one admin / Add backup admin") and have to
   read as the end of the sentence they finish, so they take the same shape at
   less weight rather than introducing a second shape. */
.pill-action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--t-line);background:var(--t-card);
  color:var(--t-ink);font-size:12.5px;font-weight:600;line-height:18px;
  text-decoration:none;white-space:nowrap;
}
.pill-action:hover{border-color:var(--t-muted);background:var(--t-bg);text-decoration:none}
.pill-action:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

/* --- Back to setup, as a pill --------------------------------------------- */
/* It floated above the card as bare text belonging to nothing. The capsule
   attaches it to the navigation it is part of. The chevron comes from the icon
   set -- a typed arrow here is what the glyph ratchet exists to catch. */
.setup-return-pill{
  display:inline-flex;align-items:center;gap:4px;
  min-height:32px;padding:5px 14px 5px 10px;border-radius:999px;
  border:1px solid var(--t-line);background:var(--t-card);
  color:var(--t-brand-deep);font-size:13px;font-weight:650;text-decoration:none;
}
.setup-return-pill svg{width:15px;height:15px}
.setup-return-pill:hover{border-color:var(--t-brand-deep);text-decoration:none}
.setup-return-pill:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}

/* --- Invites: revoking is quieter than copying ---------------------------- */
/* Copy link is what people came for; revoking is the rarer, heavier act and
   should not stand at the same weight beside it. Borderless and muted until it
   is hovered, and only then does it admit to being destructive. */
.people-shell .invite-row .btn.ghost.invite-revoke-quiet,
.setup-shell .invite-row .btn.ghost.invite-revoke-quiet{
  border-color:transparent;background:none;color:var(--t-muted);font-weight:600;
}
.people-shell .invite-row .btn.ghost.invite-revoke-quiet:hover,
.setup-shell .invite-row .btn.ghost.invite-revoke-quiet:hover{
  color:var(--t-danger);border-color:transparent;background:none;
}

/* --- Invites: what people see, a control inside the card ------------------ */
/* At 700 weight in brand green it competed with the card's own actions; it is
   a setting about the link, read occasionally, so it takes the quieter weight
   it had when it sat outside the card. */
.circle-invite-card .invite-disclosure-details > summary{
  color:var(--t-muted);font-weight:600;font-size:13px;
}
.circle-invite-card .invite-disclosure-details > summary:hover{color:var(--t-ink)}

/* --- Invites: a list that folds to its count ------------------------------ */
.invite-group{margin:16px 0 0}
.invite-group > summary{
  display:flex;align-items:center;gap:8px;min-height:40px;
  list-style:none;cursor:pointer;
}
.invite-group > summary::-webkit-details-marker{display:none}
.invite-group > summary h3{margin:0}
.invite-group > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;
  border-right:2px solid var(--t-muted);border-bottom:2px solid var(--t-muted);
  transform:rotate(45deg);transition:transform .15s ease;
}
.invite-group[open] > summary::after{transform:rotate(-135deg)}
.invite-group > summary:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:8px}

/* --- Capsule row actions -------------------------------------------------- */
/* Geometry and density borrowed, brand not: rounded capsule, thin border, no
   shadow, a concise label, and a target tall enough to hit on a phone. Tanda's
   own tokens throughout -- navy for the act, the page's line colour for the
   outline, and the accent reserved for consequence.

   Scoped to row-level controls on purpose. `.btn` is full-width with a gradient
   and an inset shadow because it is the shape of a page's main action; a list of
   people does not want eight of those stacked down it. What follows changes only
   the buttons that sit *on a row beside the person or thing they act on*.

   Deliberately not included: `.circle-invite-primary` ("Share on WhatsApp"). It
   is the structural action of its card, it is not attached to a row, and it
   should keep its weight. It is a sibling of `.circle-invite-secondary` rather
   than inside it, so the selectors below step around it by construction. */
/* The `:not()` chain is not decoration. A member-shell rule above already
   claims every filled `.btn` --
   `:is(.member-shell,.member-auth,.member-form-shell)
    .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled)`
   -- and it carries 16px corners and a 48px minimum at specificity 0,7,0.
   Written plainly, this rule would be 0,3,0 and would lose silently: the fill
   would land and the geometry would not, which is exactly what happened on the
   first attempt. Repeating the guard makes this 0,7,0 and later, so it wins on
   the cascade's own terms instead of on `!important`. */
.people-shell .join-request-decide .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
.people-shell .invite-row .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
.setup-shell .invite-row .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
.receiving-order .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled){
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin-top:0;min-height:40px;padding:10px 18px;
  border-radius:999px;font-size:13.5px;font-weight:650;letter-spacing:0;
  background:var(--t-navy);background-image:none;color:#FFFFFF;
  border:1px solid var(--t-navy);box-shadow:none;white-space:nowrap;
}
.people-shell .join-request-decide .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover,
.people-shell .invite-row .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover,
.setup-shell .invite-row .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover,
.receiving-order .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled):hover{
  background:#22404A;filter:none;
}

/* The outlined ones need no such chain: the rule above excludes `.ghost`, so
   nothing is competing for them. */
.people-shell .table-actions,
.setup-shell .table-actions,
.circle-invite-secondary .btn.ghost,
.people-shell .invite-row .btn.ghost,
.setup-shell .invite-row .btn.ghost,
.receiving-order .btn.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;margin-top:0;min-height:40px;padding:10px 18px;
  border-radius:999px;font-size:13.5px;font-weight:650;letter-spacing:0;
  background-image:none;box-shadow:none;white-space:nowrap;
}

/* Row capsules on an invite list are a size down: the row is compact, and a
   40px control made every row as tall as its button. Same selectors as the
   geometry rule above and later, so it wins without a new specificity chain;
   34px keeps a comfortable touch target. */
.people-shell .invite-row .btn.ghost,
.setup-shell .invite-row .btn.ghost{min-height:34px;padding:6px 14px;font-size:13px}

/* Outlined: the alternatives beside it. */
.circle-invite-secondary .btn.ghost,
.people-shell .invite-row .btn.ghost,
.setup-shell .invite-row .btn.ghost,
.people-shell .table-actions,
.setup-shell .table-actions,
.receiving-order .btn.ghost{
  background:var(--t-card);color:var(--t-ink);border:1px solid var(--t-line);
}
/* Share on WhatsApp keeps its weight: it is the structural action of its card,
   not a control attached to a row. Stated as a rule rather than left to
   selector luck, because it sits one class away from the outlined set. */
.circle-invite-primary{width:100%;border-radius:16px}
.circle-invite-secondary .btn.ghost:hover,
.people-shell .table-actions:hover,
.setup-shell .table-actions:hover{border-color:var(--t-brand-deep);color:var(--t-brand-deep)}

/* The row's actions hug its right edge, and stay on the line with the person
   they act on until the viewport genuinely cannot hold both. */
.people-shell .invite-row form,
.setup-shell .invite-row form{justify-self:end}
@media(max-width:380px){
  .invite-row{grid-template-columns:minmax(0,1fr)}
  .invite-row form,.invite-row .invite-row-actions{justify-self:start}
}

/* Quiet by intent, not by accident: declining, turning a link off and revoking
   are text first. They are reachable, they are not invitations. */
.invite-revoke>summary{min-height:40px;display:inline-flex;align-items:center}

/* --- People workspace: width, and the calmer request row ------------------ */
/* The member area is capped at 560px, which is right for a form and wrong for a
   list somebody works through. Measured on the built page: the whole working
   area sat in a ~546px column in the middle of a desktop canvas. Mobile is
   unchanged -- this only lifts the ceiling where there is room. */
.wrap:has(.people-shell){max-width:840px}

/* Approve and Decline on the row. A request with nothing to weigh is a yes or a
   no, and a disclosure in front of that was interface between the organizer and
   a decision already made. */
.join-request-decide{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.join-request-decide form{margin:0}
/* The same capsule as Approve, in the quiet register. */
.join-request-decline-inline>summary{list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--t-line);background:var(--t-card);
  font-size:13.5px;font-weight:650;color:var(--t-muted);white-space:nowrap}
.join-request-decline-inline>summary::-webkit-details-marker{display:none}
.join-request-decline-inline>summary::marker{content:""}
.join-request-decline-inline>summary:hover{color:var(--t-ink);border-color:var(--t-muted)}
.join-request-decline-inline>summary:focus-visible{outline:2px solid var(--t-brand-deep);
  outline-offset:2px}

/* --- Declining: two deliberate steps, in the same card -------------------- */
/* Written visible, hidden by the script. If the script never runs the organizer
   has an open decline form rather than a dead button. */
.decide-progressive .decline-confirm{display:none}
.decide-progressive.is-declining .decline-confirm{display:grid;gap:8px}
.decide-progressive.is-declining .decide-default{display:none}

/* Nothing at all: no tint, no accent, no box. The row is expanding, not
   becoming a different surface, and a decline is an ordinary administrative act
   that does not need a warning around it. */
.decline-confirm{padding:0;border:0;background:transparent}
.decline-q{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--t-ink)}

/* The reason is a third step. Most declines are about somebody the organizer
   does not recognise, and those want two taps, not three. */
/* Third in weight as well as in order. A 13px semibold underlined link standing
   at the same height as Decline made three actions read as three equals; the
   organizer's answer is Approve or Decline, and a reason is a way of declining
   rather than a third answer. Green, smaller, lighter, and no standing underline
   -- it earns one on hover, when it is being considered. The negative margin
   closes the group's 8px gap to 4px between these two, so Decline and
   "+ Reason" read as the pair they are. */
.decline-reason-toggle{
  margin-left:-4px;
  padding:4px 6px;border:0;background:none;font:inherit;
  font-size:12.5px;font-weight:500;color:var(--t-brand-deep);cursor:pointer;
  text-decoration:none;text-underline-offset:3px;
}
.decline-reason-toggle:hover{text-decoration:underline}
.decline-reason-toggle:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:6px}
.decline-reason{display:none;gap:4px}
.is-reasoning .decline-reason{display:grid}
/* The question and the field are alternatives, never both: "+ Reason" is
   already an answer to "decline this request?". */
.is-reasoning .decline-q{display:none}
.is-declining .decline-reason-toggle{display:none}
.decline-reason label{font-size:12px;color:var(--t-muted)}
.decline-reason input[type=text]{padding:10px 12px;border:1px solid var(--t-line);
  border-radius:10px;font:inherit;font-size:13px;background:var(--t-card);color:var(--t-ink)}

.decline-actions{display:flex;width:100%;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* On a narrow screen the pair stays together at the bottom of the card rather
   than being squeezed against the right edge. */
/* One action group, one line. Stretching these to full width stacked three
   actions down the card at 390px, which turns a two-choice decision into a
   list. Measured on the built page: at a 390px viewport the row's content box
   is 291px (the .wrap/.card/.row padding chain takes 99px of it) and the three
   actions are 243px, so the row holds with room to spare. `nowrap` keeps it
   that way and the pills give back a little padding instead of wrapping. Below
   360px it may wrap -- that is the viewport genuinely running out rather than a
   layout preference. The confirmation pair keeps its
   stretch: Cancel and Decline are a closed either/or and read well as halves. */
@media(max-width:420px){
  .decide-default{flex-wrap:nowrap}
  .decide-default .btn,.decide-default .pill-quiet{padding:10px 14px}
  .decline-actions{justify-content:stretch}
  .decline-actions>*{flex:1}
  .decline-actions .pill-quiet,.decline-actions .pill-destructive{width:100%}
}
@media(max-width:359px){
  .decide-default{flex-wrap:wrap}
}

/* Two pills, neither shouting. Destructive is an outline that fills on hover:
   declining is reversible for the person -- they may ask again -- so it does not
   earn the weight that turning a shared link off does. */
.pill-quiet,.pill-destructive{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:10px 18px;border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap;
  box-shadow:none;background-image:none;
}
.pill-quiet{border:1px solid var(--t-line);background:var(--t-card);color:var(--t-ink)}
.pill-quiet:hover{border-color:var(--t-muted)}
.pill-destructive{border:1px solid var(--t-danger);background:transparent;color:var(--t-danger)}
.pill-destructive:hover{background:var(--t-danger);color:#FFFFFF}
.pill-quiet:focus-visible,.pill-destructive:focus-visible{
  outline:2px solid var(--t-ink);outline-offset:2px}

/* One admin is a normal state for a new circle, so it is a line, not a banner. */
/* The copy told the organizer to do something and then left them to find it. */
.admin-succession-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;font-size:13px;line-height:19px;color:var(--t-muted)}
.admin-succession-note strong{color:var(--t-ink);font-weight:650}

/* Inviting one named person is its own act, below the card rather than inside
   its button row. */
.invite-someone-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;margin:10px 0 0;padding:13px 15px;border:1px solid var(--t-line);
  border-radius:12px;background:var(--t-card);font:inherit;text-align:left;cursor:pointer}
.invite-someone-cta:hover{border-color:var(--t-brand-deep)}
.invite-someone-cta:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.invite-someone-body{display:grid;gap:2px}
.invite-someone-body strong{font-size:14px;color:var(--t-ink)}
.invite-someone-body small{font-size:12px;color:var(--t-muted)}
/* Choose from contacts. Full width above the fields it fills, so it reads as
   a shortcut into the form rather than a third way to submit it. Hidden by
   default and revealed by the script only where the device has a picker. */
.invite-contact-pick{width:100%;justify-content:center;margin-bottom:4px}
.invite-someone-arrow{color:var(--t-muted);font-size:18px;line-height:1}

/* --- Rail: the badge, and the one line beneath ---------------------------- */
/* The rail answers "where am I" and "how many need me". It carries no blocker
   copy of its own: four steps on a 390px screen is about 97px each, which is
   not a place to put a sentence. */
.setup-rail-step{position:relative}
.setup-rail-badge{position:absolute;top:-4px;left:calc(50% + 4px);min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:var(--t-accent);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  border:2px solid var(--t-bg);box-sizing:content-box;z-index:2}


/* Attention, stated as attention. It says out loud that approving is not a
   gate, because a count next to a progress rail otherwise reads like one. */

.setup-rail-label{display:flex;flex-direction:column;gap:1px;font-size:14px;min-width:0}
.setup-rail-label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t-muted);font-size:11px;line-height:15px;font-weight:500}

/* The only thing on this step that stops the circle starting.

   Measured on the built page, it resolved to exactly what `.setup-review-row`
   resolves to -- rgb(255,255,255), rgba(58,42,30,.12), 0.8px, 12px radius --
   so on Preview the panel saying the circle cannot start looked like the four
   expandable rows beneath it, separated by a 9px dot.

   The accent rule is the same decision as the dot already inside it: pass C
   reserved --t-accent for attention, and a panel holding the circle up is
   attention. The tint carries it across the whole object so the distinction
   survives at a glance rather than at the width of one dot. */
.setup-blockers{list-style:none;margin:0 0 16px;padding:12px 14px;
  border:1px solid var(--t-line);border-left:3px solid var(--t-accent);
  border-radius:12px;background:var(--t-accent-tint)}
/* One token family in one component. This list item held two border colours
   and two text colours: the panel drew with --line/--paper/--ink (warm,
   translucent, brown) while its own child .setup-blocker-fix drew with
   --t-line/--t-brand-deep. */
.setup-blocker{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--t-ink);padding:2px 0}
.setup-blocker-text{flex:1;min-width:0}
.setup-blocker-fix{margin-left:auto;min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:5px 10px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);
  color:var(--t-brand-deep);text-decoration:none;font-size:12px;font-weight:650;white-space:nowrap}
.setup-blocker-fix:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.status-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;border-radius:999px;background:var(--t-muted)}
.status-dot.is-attention{background:var(--t-accent);box-shadow:0 0 0 4px rgba(176,82,26,.12)}
.setup-blockers-clear{margin:0 0 16px;font-size:14px;color:var(--muted)}

.setup-billing-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;
  background:var(--brand-soft);color:var(--ink);font-size:13px}

.setup-step-body{display:flex;flex-direction:column;gap:18px;
  animation:setup-step-in 160ms ease}
@keyframes setup-step-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.setup-cluster{border:1px solid var(--line);border-radius:14px;padding:16px;
  background:var(--paper);display:flex;flex-direction:column;gap:10px}
.setup-receiving-form{display:flex;flex-direction:column;gap:8px}
.setup-reveal summary{cursor:pointer;padding:10px 0;color:var(--brand-ink);font-size:14px}
.setup-reveal-body{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}

.setup-review-rows{display:flex;flex-direction:column;gap:8px}
.setup-review-row{border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.setup-review-row summary{display:flex;justify-content:space-between;gap:12px;
  padding:14px 16px;cursor:pointer}
.setup-review-row summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.setup-review-row>p,.setup-review-row>ul{margin:0;padding:0 16px 14px;font-size:14px}
.setup-review-row ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.setup-review-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.setup-review-edit,.setup-edit-link,.setup-back-link{
  color:var(--t-brand-deep);font-size:13px;font-weight:650;text-decoration:none;
}
.setup-review-edit{display:inline-flex;margin:0 16px 14px}
.setup-edit-link{align-self:flex-start}
.setup-back-link{
  align-self:flex-start;margin:0 0 2px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:max-content;
}
.setup-review-edit:hover,.setup-edit-link:hover,.setup-back-link:hover{color:var(--t-green-hover)}
.setup-review-edit:focus-visible,.setup-edit-link:focus-visible,.setup-back-link:focus-visible{
  outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:8px;
}

.setup-footer{position:static;display:flex;flex-direction:column;
  gap:8px;padding:8px 0 18px;background:var(--bg);box-shadow:none}
.setup-reassure{text-align:left;margin:0}
.setup-discovery-card{
  margin-top:12px;padding:10px 12px;border:1px solid var(--t-line);border-radius:14px;
  background:var(--t-inset);
}
.setup-discovery-card > summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
}
.setup-discovery-card > summary::-webkit-details-marker{display:none}
.setup-discovery-card > summary strong{display:block;color:var(--t-ink);font-size:14px;line-height:20px}
.setup-discovery-card > .muted{margin:8px 0}

.setup-resume{border:1px solid var(--line);border-radius:16px;padding:18px;
  background:var(--paper);display:flex;flex-direction:column;gap:12px}
.setup-resume-steps{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.setup-resume-step a{display:flex;align-items:center;gap:10px;padding:8px;
  border-radius:10px;text-decoration:none;color:var(--ink)}
.setup-resume-step a:hover{background:var(--brand-soft)}
.setup-resume-step a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.setup-resume-step small{margin-left:auto;text-align:right}

/* Scoped, not global: a blanket `* {transition:none !important}` also kills
   transitionend listeners elsewhere on the page. */
@media(prefers-reduced-motion:reduce){
  .setup-rail-fill,.setup-rail-step a,.setup-rail-step>span,.setup-resume-step a{transition:none}
  .setup-step-body{animation:none}
}
/* The four names survive the narrow viewport. They were hidden here and
   replaced by a disclosure summary, so the rail stopped answering "where am I"
   on the width where that question is hardest to answer any other way. */
@media(max-width:560px){
  .setup-rail-steps{gap:2px}
  .setup-rail-step a,.setup-rail-step>span{padding:6px 2px;gap:5px}
  .setup-rail-dot{width:18px;height:18px;flex:0 0 18px;font-size:10px}
  .setup-rail-label{font-size:11px;line-height:15px}
}
.setup-resume-approval{margin:0;padding:10px 12px;border-radius:10px;
  background:var(--brand-soft);color:var(--ink);font-size:13px}

/* --- Receiving picker: one method, the rest behind More ----------------- */
.receiving-picker{display:flex;flex-direction:column;gap:10px}
.receiving-method{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease}
.receiving-method:hover{background:var(--brand-soft)}
.receiving-method:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.receiving-method input[type=radio]{accent-color:var(--brand-strong);margin:0}
.receiving-method-name{font-weight:600;font-size:14px;color:var(--ink)}
.receiving-method small{margin-left:auto;text-align:right}
.receiving-method.is-primary{border-color:var(--brand-strong)}
.receiving-fields{display:flex;flex-direction:column;gap:6px;padding:4px 0 4px 12px;
  border-left:2px solid var(--line);margin-left:6px}
.receiving-fields[hidden]{display:none}
.receiving-more-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
@media(prefers-reduced-motion:reduce){.receiving-method{transition:none}}

/* --- Receiving nudge and the organizer's status list -------------------- */
.receiving-nudge{display:block;margin:10px 0;padding:10px 12px;border-radius:10px;
  background:var(--brand-soft);color:var(--ink);font-size:13px;text-decoration:none}
.receiving-nudge:hover{filter:brightness(.97)}
.receiving-nudge:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.receiving-status-list{display:flex;flex-direction:column;gap:6px}
.receiving-status-row{
  min-height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
}
.receiving-member{
  min-width:0;
  display:grid;
  gap:2px;
}
.receiving-member strong{
  color:var(--t-ink);
  font-size:14px;
  line-height:19px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.receiving-member small{
  color:var(--t-muted);
  font-size:12px;
  line-height:17px;
}
.receiving-status-row .muted{margin-left:auto}
.receiving-status-row .pill{margin-left:auto}
.receiving-status-row .muted+.pill{margin-left:0}

/* Receiving, on a roster row: the rail and whether it is set. Sits under the
   name rather than in .roster-actions, which already carries the membership
   status pill — two pills side by side read as one confused state. */
/* Tight to the name it belongs to: a long chama roster is read by scrolling. */
.receiving-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:2px 0 0;font-size:12px;line-height:18px}
.receiving-line .pill{padding:1px 8px;font-size:11px}
.receiving-line .muted{font-size:12px}
/* This was a 44px x 44px box, and it -- not row padding -- was setting the
   height of every roster row with an unset receiving detail: measured on the
   built page, the link was 44px, `.receiving-line` was 44px, the row was 148px.
   A permanent desktop cost for a touch target, paid on every row.

   It becomes the compact pill the rest of the workspace uses, and the finger
   gets its 44px back under `pointer:coarse`, where it is actually needed. */
.receiving-remind{text-decoration:none}
.receiving-remind:hover{text-decoration:none}
/* A full-width bordered box reads as a requirement bar -- fourteen outstanding
   tasks standing between the circle and going live. It is not one: only the
   person receiving first needs details before Round 1, and everybody else can
   add theirs before their own turn.

   Not a chip either, which was the first attempt: measured on the built page,
   `--t-bg` on `--t-card` is #F5F2EF on #FFFFFF, a 1.08:1 fill that a border has
   to rescue -- and a bordered box is what we are getting away from. So a quiet
   line. `is-done` keeps a chip, because it is the one state that has finished
   and #E7F4EE against white actually reads. */
.receiving-count{margin:0 0 10px;padding:0;border:0;background:none;
  color:var(--t-muted);font-size:12.5px;line-height:18px;font-weight:600}
.receiving-count.is-done{display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background:#E7F4EE;color:var(--t-confirmed)}

/* --- Avatars ------------------------------------------------------------ */
.avatar-image{object-fit:cover;background:var(--brand-soft)}
.member-avatar.large.avatar-image{width:64px;height:64px;border-radius:50%}
/* The avatar is the upload control — clicking it opens the picker. The input
   stays in the markup so a keyboard and a screen reader can still reach it,
   but it is not drawn: a raw "Choose File" button beside a picture of
   yourself is two controls doing one job, and it was the visible one. */
.avatar-upload{display:contents}
.avatar-upload input[type=file]{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.avatar-upload input[type=file]:focus-visible{
  position:static;width:auto;height:auto;margin:0;clip:auto;
  outline:2px solid var(--t-brand-deep);outline-offset:2px}
[data-avatar-status]{margin:0;text-align:center;color:var(--t-muted);
  font-size:12px;line-height:18px}

/* --- Waiting to be let in ------------------------------------------------ */
.pending-card{border:1px solid var(--line);border-radius:16px;padding:18px;
  background:var(--brand-soft);margin-bottom:14px}
.pending-lead{margin:0 0 6px;font-weight:600;color:var(--ink)}
.pending-checklist{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pending-check{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;font-size:14px}
.pending-check a{margin-left:auto;color:var(--brand-ink);font-weight:600}
.pending-check.done{color:var(--muted)}

/* --- Manage invites ----------------------------------------------------- */
.circle-invite-card{
  display:grid;gap:12px;margin:0 0 16px;padding:16px;
  border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);
}
.circle-invite-head h3{margin:0;font-size:20px;line-height:28px;font-weight:650}
.circle-invite-primary{width:100%;min-height:48px;margin:0}
.circle-invite-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.circle-invite-secondary .btn{min-height:44px;margin:0;padding:8px 10px;font-size:13px}
.circle-invite-count{margin:0;color:var(--t-muted);font-size:13px;line-height:19px}
.invite-message-preview{
  display:grid;gap:4px;padding:10px 12px;border:1px solid var(--t-line);
  border-radius:12px;background:var(--t-inset);
}
.invite-message-preview span{
  color:var(--t-muted);font-size:11px;line-height:16px;font-weight:650;
  text-transform:uppercase;letter-spacing:.08em;
}
.invite-message-preview p{
  margin:0;color:var(--t-ink);font-size:13px;line-height:20px;
  overflow-wrap:anywhere;white-space:pre-wrap;
}
.invite-disclosure{
  display:grid;gap:10px;margin:12px 0 0;padding:12px;
  border:1px solid var(--t-line);border-radius:12px;background:var(--t-inset);
}
.invite-disclosure strong{color:var(--t-ink);font-size:14px;line-height:20px}
.invite-disclosure label{
  display:flex;align-items:center;gap:10px;color:var(--t-ink);
  font-size:14px;line-height:20px;
}
.invite-disclosure input[type="checkbox"]{width:18px;height:18px;accent-color:var(--t-green)}
.invite-disclosure .btn{justify-self:start;margin:2px 0 0}
.invite-handoff{
  display:grid;gap:8px;margin:0 0 14px;padding:10px 12px;
  border:1px solid rgba(42,165,106,.22);border-radius:12px;
  background:#FFFFFF;
}
.invite-handoff strong{display:block;color:var(--t-ink)}
.invite-handoff p{margin:2px 0 0}
.invite-handoff-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.invite-handoff-actions .btn{margin:0;min-height:38px;box-shadow:none}
.invite-handoff-actions .member-primary{background:var(--t-brand-deep);color:#FFFFFF;border-color:var(--t-brand-deep)}
.invite-dialog{width:min(420px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));
  border:0;border-radius:16px;background:transparent;padding:0;color:var(--t-ink)}
.invite-dialog::backdrop{background:rgba(11,16,22,.56);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.invite-dialog-panel{position:relative;display:grid;gap:12px;margin:0;padding:22px;
  border:1px solid var(--t-line);border-radius:16px;background:var(--t-card);
  box-shadow:0 24px 80px -48px rgba(0,0,0,.55)}
.invite-dialog-panel h3{margin:0;font-size:22px;line-height:30px;font-weight:650}
.invite-dialog-close{position:absolute;right:10px;top:10px;width:44px;height:44px;
  display:grid;place-items:center;border:0;border-radius:999px;background:transparent;
  color:var(--t-muted);font:inherit;font-size:24px;line-height:1;cursor:pointer}
.invite-dialog-close:hover{background:var(--t-bg);color:var(--t-ink)}
.invite-dialog-close:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.invite-local-label{margin:0;color:var(--t-muted);font-size:13px;line-height:19px}
.invite-qr-code-large{width:min(260px,70vw);max-width:100%;justify-self:center;margin:2px auto}
.invite-dialog-actions{display:grid;gap:8px}
.invite-dialog-actions .btn{margin:0;min-height:44px}

/* Three actions, one row, because they are alternatives rather than a sequence
   -- stacked full-width they read as three steps to work through. Measured:
   ~280px of buttons in the ~358px the dialog has at a 390px viewport, so the
   row holds; `wrap` is the escape hatch rather than the plan. */
.invite-qr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.invite-qr-actions .btn{width:auto;min-height:40px;padding:10px 18px;
  border-radius:999px;font-size:13.5px;font-weight:650;
  background-image:none;box-shadow:none;white-space:nowrap}
.invite-qr-lede{margin:2px 0 0;text-align:center;
  color:var(--t-ink);font-size:14px;line-height:20px;font-weight:650}
.setup-start-dialog{width:min(440px,calc(100vw - 32px))}
.setup-start-confirm{gap:14px}
.setup-start-summary{display:grid;gap:8px;margin:2px 0 0;padding:0}
.setup-start-summary div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--t-line)}
.setup-start-summary div:last-child{border-bottom:0}
.setup-start-summary dt{color:var(--t-muted);font-size:13px;line-height:19px}
.setup-start-summary dd{margin:0;color:var(--t-ink);font-size:14px;line-height:20px;font-weight:650;text-align:right}
.setup-start-confirm .btn{margin:0}
.invite-block{border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:16px;background:var(--paper)}
.invite-block-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.invite-block-head .pill{margin-left:auto}
.invite-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.invite-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
/* Person on the left, their action on the right, and everything about them
   stacked beneath their name.
   `flex-wrap` let the button fall to its own line once a row grew a masked
   number and a status, which detached the action from the person it acts on.
   A two-column grid keeps them on one line and lets an organizer scan a list of
   names and buttons straight down. */
/* Compact: one line per person where the width allows. The name, masked number
   and state chip used to stack into three lines above a 40px button, so a
   list of six people was a screen and a half. */
.invite-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;
  align-items:center;padding:6px 8px 6px 12px;
  border:1px solid var(--line);border-radius:10px}
.invite-name{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.invite-row form{margin:0;justify-self:end}
/* Secondary actions sit under the primary one rather than beside it, so the
   quiet thing stays quiet. */
/* Side by side, not stacked: two short actions in a column made the row as
   tall as the person's three lines of detail for no reason. */
.invite-row .invite-row-actions{display:flex;flex-wrap:wrap;align-items:center;
  gap:8px;justify-content:flex-end}
.invite-row .invite-row-actions form{margin:0}
/* Chips sit with the person they describe, on the same line when it fits. */
.invite-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:0}
.invite-row .pill{justify-self:end}

/* --- The invite link, readable -------------------------------------------
   Shown rather than only copyable: an organizer pasting into WhatsApp should
   be able to see what they are sending. A wrong domain is invisible when the
   only way to read the link is to click a button. */
.invite-url{margin:2px 0 4px;font-family:var(--t-font-mono);
  font-size:12px;color:var(--muted);word-break:break-all;overflow-wrap:anywhere}
.invite-meta{margin:0;font-size:12px;color:var(--muted)}
.invite-name .invite-url{font-size:11px}
button.is-copied{background:var(--brand-soft);border-color:var(--brand-strong);
  color:var(--ink)}
@media(max-width:560px){
  .circle-invite-secondary{grid-template-columns:1fr}
  .invite-handoff-actions{grid-template-columns:1fr}
  .invite-dialog{width:100vw;max-height:100dvh;margin:auto 0 0;border-radius:18px 18px 0 0}
  .invite-dialog-panel{max-height:100dvh;overflow:auto;border-radius:18px 18px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .invite-qr-code-large{width:min(260px,78vw)}
}

/* --- Joining: what the invite says, and the two fields it asks for ------- */
/* Scoped to the panel on purpose. The circle name is the <p> immediately
   after the <h2>, so `.member-auth-panel > h2 + p` — the muted subtitle rule
   — outranked a bare `.invite-circle-name` and painted the one word that
   says WHICH circle you are joining in the same grey as the footer. On the
   page people reach from a WhatsApp forward, the name is the whole question
   being asked. Two classes beat one class and two elements. */
.member-auth-panel > .invite-circle-name{
  margin:2px 0 4px;font-size:20px;font-weight:700;color:var(--ink);
}
.invite-circle-name{margin:2px 0 4px;font-size:20px;font-weight:700;color:var(--ink)}
.invite-summary{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  margin:14px 0;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.invite-summary-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.invite-summary-row span{color:var(--muted)}
.invite-status.is-open{color:var(--green,var(--t-brand))}
.invite-status.is-full,.invite-status.is-archived{color:var(--muted)}
.phone-field{display:flex;flex-direction:column;gap:4px}
.phone-row{display:flex;gap:8px}
.phone-row select{flex:0 0 auto;max-width:44%}
.phone-row input{flex:1 1 auto;min-width:0}
.pending-password{display:flex;flex-direction:column;gap:8px;padding:14px;
  border:1px solid var(--line);border-radius:12px;margin:10px 0}
.pending-password h4{margin:0}

/* --- Who you are, where you can see it ---------------------------------- */
.account-identity{display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.account-identity strong{font-size:15px}
/* --- Tell someone about Tanda -------------------------------------------- */
/* One compact card, beside the list rather than under it. */
.recommend-tanda{display:flex;flex-direction:column;gap:12px;padding:18px;margin:0;
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-card)}
/* The body face, not the heading one: that is kept to names and titles
   (test_headings counts its uses), and a card's label is neither. */
.recommend-tanda h3{margin:0;display:flex;align-items:center;gap:8px;
  font-size:16px;line-height:24px;font-weight:700;color:var(--t-ink)}
.recommend-lede{margin:0;font-size:13px;line-height:20px;color:var(--t-muted)}
.recommend-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;padding:4px;
  border:0;border-radius:10px;background:var(--t-inset)}
.recommend-switch label{display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t-muted)}
.recommend-switch input:checked + label{background:var(--t-brand-deep);color:#fff}
.recommend-switch input:focus-visible + label{outline:2px solid var(--t-brand);outline-offset:2px}
/* Two radios choose one of two options. Listed by key because the pairing is
   between an input and a block elsewhere in the card, which only :has() can
   reach without a script. */
.recommend-tanda:has(#recommend-start_your_own:checked) [data-recommend-option="bring_your_group"],
.recommend-tanda:has(#recommend-bring_your_group:checked) [data-recommend-option="start_your_own"]{display:none}
.recommend-option{display:flex;flex-direction:column;gap:10px}
.recommend-actions{display:flex;flex-direction:column;gap:8px}
.recommend-actions .btn{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  width:100%;margin:0;min-height:44px}
.recommend-actions .social-glyph{color:#1FA855}
.recommend-preview summary{cursor:pointer;font-size:13px;color:var(--t-brand-deep);
  text-decoration:underline;text-underline-offset:3px}
.recommend-copy{margin:8px 0 0;font-size:12.5px;line-height:18px;color:var(--t-muted)}
.recommend-link-note{font-style:italic}
.recommend-note{margin:0;font-size:12px;line-height:18px;color:var(--t-muted)}

.account-signout{margin-top:10px}

/* --- Settings rows that open in place ----------------------------------- */
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.settings-row-label{font-weight:500;color:var(--ink)}
.settings-row-value{color:var(--muted);font-size:14px;text-align:right;word-break:break-all}
/* One expander control, in the hero and in the account rows alike. They were
   a 115x36 bordered button and a 69x17 line of green text doing the same job,
   and 69x17 is not a target a thumb can hit — this page is read on a phone. */
.profile-action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:6px 14px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--t-line);
  color:var(--t-brand-deep);font-weight:600;font-size:14px;font-family:inherit;
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.profile-action:hover{background:var(--t-bg);border-color:var(--t-muted);color:var(--t-ink)}
.profile-action:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
/* Open, this says "Cancel" and sits above a solid "Save changes". Muted, so
   the pair reads at a glance as one way on and one way back. */
.profile-action[aria-expanded="true"]{color:var(--t-muted)}
.profile-action[aria-expanded="true"]:hover{color:var(--t-ink)}
/* A finger needs more than an eye does, and only a finger should pay for it. */
@media(pointer:coarse){.profile-action{min-height:44px;padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.profile-action{transition:none}}
.profile-hero .profile-action-hero{margin-top:10px}
/* Opening springs — it is an entrance, and the token exists for exactly that.
   Closing settles instead: a spring closing would overshoot past zero, and
   max-height clamps there, so the bounce would be swallowed and read as the
   animation stopping short. */
.expansion-panel{max-height:0;overflow:hidden;
  transition:max-height 300ms var(--t-settle)}
.expansion-panel.is-open{transition:max-height 320ms var(--t-spring)}
.expansion-panel.is-open{max-height:420px}
.expansion-form{display:flex;flex-direction:column;gap:6px;padding:14px 0 18px}
.expansion-form input:focus{border-color:var(--t-brand-deep);
  box-shadow:0 0 0 3px rgba(20,123,73,.15);outline:none}
/* :user-valid and :user-invalid rather than :valid and :invalid — the plain
   ones match before anybody has typed, so an empty required field would be
   red on arrival and a form would open already telling somebody off. These
   wait until the field has actually been used. */
.expansion-form input:user-invalid{border-color:var(--t-danger)}
.expansion-form input:user-invalid:focus{box-shadow:0 0 0 3px rgba(185,28,28,.15)}
.expansion-form input:user-valid{border-color:var(--t-confirmed)}
.expansion-form input:user-valid:focus{box-shadow:0 0 0 3px rgba(46,125,91,.15)}
.field-check{display:block;margin:2px 0 0;font-size:12px;line-height:18px;min-height:18px}
.field-check.is-ok{color:var(--t-confirmed)}
.field-check.is-not{color:var(--t-danger)}
@media(prefers-reduced-motion:reduce){.expansion-panel{transition:none}}

/* --- Profile hero ---
   Named -hero- because a bare .profile-avatar already exists above as a
   30px dark circle from an earlier design. Two rules for one class name is
   how a change here silently reaches somewhere else. ------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 12px 22px;margin-bottom:2px;text-align:center;
  border-bottom:1px solid var(--t-line)}
.profile-hero-avatar{position:relative;width:80px;height:80px;padding:0;border:0;
  border-radius:50%;cursor:pointer;overflow:hidden;
  /* The fallback is a gradient rather than flat grey, so the state most
     people are in still looks chosen. Green, not the old orange: this circle
     and the one in the sidebar foot are the same person, and they were two
     different colours. */
  background:linear-gradient(140deg,var(--t-brand) 0%,var(--t-brand-deep) 100%)}
.profile-hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-initials{display:grid;place-items:center;width:100%;height:100%;
  color:var(--t-card);font-size:30px;font-weight:600;letter-spacing:.5px}
/* Visible at rest, not on hover. A touch screen has no hover, so on the phones
   this is used on the only hint that the picture could be changed was one that
   never appeared. It lifts on hover rather than arriving. */
.profile-avatar-pen{position:absolute;inset:auto 0 0 0;padding:3px 0;font-size:11px;
  background:rgba(26,26,26,.45);opacity:.85;transition:opacity 160ms ease}
.profile-hero-avatar:hover .profile-avatar-pen,
.profile-hero-avatar:focus-visible .profile-avatar-pen{opacity:1}
.profile-hero-avatar:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px}
.profile-name{margin:6px 0 0;font-size:22px;line-height:30px;font-weight:560;color:var(--t-ink)}
/* "Member since" is a quiet fact, not a warning. In the warm accent it read as
   the loudest thing on a page whose only real action is Edit. */
.profile-chip{display:inline-block;padding:3px 10px;border-radius:999px;
  border:1px solid var(--t-line);color:var(--t-muted);font-size:12px;font-weight:500}
.profile-contact{margin:0;color:var(--t-muted);font-size:14px;line-height:20px}
@media(prefers-reduced-motion:reduce){
  .profile-avatar-pen{transition:none}
}

/* --- The member list as the rotation (preview, ?spine=1) ------------------
   One rule in the mark column: it says what this member has done in the round
   that is open now. The rotation position is reference and stays quiet. */
.spine{margin:0 20px 16px;border:1px solid var(--line);border-radius:16px;
  background:var(--paper);overflow:hidden}
.spine-preview{
  margin:0;padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);background:rgba(58,42,30,.03);
}
.spine-list{list-style:none;margin:0;padding:4px 0}
.spine-row{
  display:grid;
  grid-template-columns:22px 18px minmax(0,1fr) auto;
  grid-template-areas:"pos mark name state" ". . rank rank";
  gap:2px 10px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line-soft, rgba(58,42,30,.06));
}
.spine-row:last-child{border-bottom:0}
.spine-row.is-you{background:rgba(176,82,26,.05);box-shadow:inset 3px 0 0 var(--brand)}
.spine-row.is-receiving{background:rgba(42,165,106,.06)}
.spine-pos{grid-area:pos;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.spine-mark{
  grid-area:mark;width:16px;height:16px;border-radius:999px;
  display:grid;place-items:center;
  /* Not var(--line): that token is a hairline divider, drawn to be barely
     visible. A mark that says whether somebody has sent has to be legible,
     so it takes its own weight. */
  border:2px solid rgba(58,42,30,.42);
  color:#FFFFFF;
}
.spine-mark svg{width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Green is earned: only a confirmed receipt fills the mark. */
.spine-mark.m-confirmed{background:var(--t-confirmed);border-color:var(--t-confirmed)}
/* A claim: an outline that is clearly drawn but clearly not filled. */
.spine-mark.m-sent{border-color:var(--t-sent);border-style:dashed;color:var(--t-sent)}
.spine-mark.m-receiving{border-color:var(--t-accent);background:rgba(176,82,26,.12);color:var(--t-accent)}
.spine-mark.m-disputed{border-color:var(--t-bad);background:rgba(179,38,30,.12);color:var(--t-bad)}
.spine-mark.m-nothing{border-color:rgba(58,42,30,.42);background:transparent}
.spine-defs{position:absolute;width:0;height:0;overflow:hidden}
.spine-name{grid-area:name;font-weight:600;font-size:14px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spine-state{grid-area:state;font-size:12px;color:var(--muted);text-align:right}
.spine-row.is-receiving .spine-state{color:#1F6B4A;font-weight:600}
.spine-rank{grid-area:rank;font-size:11px;color:var(--muted);opacity:.85}
.spine-note{margin:0;padding:10px 14px;font-size:11px;line-height:16px;
  color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:560px){.spine{margin:0 16px 14px}}

/* --- Actions on the row of the person they concern ----------------------- */
.spine-how{grid-column:1/-1;margin:6px 0 2px;padding:8px 11px;border:1px solid var(--brand);
  border-radius:11px;background:var(--bg);font-size:12px;line-height:1.5}
/* --bg, not --surface: there is no --surface token in any stylesheet, so
   this rule had no background at all. .spine-how is an inset inside .spine,
   which is --paper (white) — so the recessed one is --bg, the warm
   off-white already used for the page. No new token: a duplicate invented
   to satisfy one use is how a palette stops being a palette. */
.spine-how strong{display:block;color:var(--ink);font-size:12.5px}
.spine-how span{color:var(--muted);font-family:var(--t-font-mono);font-size:11px}
.spine-act-form{grid-column:1/-1;margin-top:7px}
/* When proof is required the action is a bare link rather than a form, so it
   had no grid placement of its own and was auto-placed into the 22px position
   column — "I sent it" set three letters wide, down the side of the row. */
.spine-row > .spine-act{grid-column:1/-1;margin-top:7px}
.spine-act-pair{grid-column:1/-1;margin-top:7px;display:flex;gap:7px}
.spine-act-pair form{flex:1}
.spine-act{display:block;width:100%;text-align:center;padding:9px 12px;border-radius:10px;
  border:0;min-height:40px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;
  text-decoration:none}
.spine-act.primary{background:var(--t-brand-deep);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(28,43,34,.16)}
.spine-act.primary:hover,.spine-act.primary:focus-visible{outline:0;background:#0F5F39}
.spine-act.quiet{background:transparent;color:var(--muted);border:1px solid var(--line)}
.spine-act.quiet:hover,.spine-act.quiet:focus-visible{outline:0;border-color:var(--muted);color:var(--ink)}

/* Deleting an account is a link to the page that asks, so it reads as
   serious without pretending the tap itself is the deletion. */
/* --t-danger, not --t-accent. The tokens draw that line themselves: accent is
   "consequence rather than error" — the seat-becomes-vacant warnings — and
   danger is "destructive actions only". Deleting an account is the second. */
.profile-link.is-danger{color:var(--t-danger)}

/* --- icons ---------------------------------------------------------------
   Strokes in currentColor rather than emoji. An emoji is a font glyph the
   operating system draws, so it carried its own colour and its own house
   style: the same row was a flat outline on one phone and a glossy 3D bubble
   on another, in hues nothing in the stylesheet could reach. These take the
   colour of the text beside them and the size of it, so one rule covers a
   muted hint, a green link and a white button. */
.icon{
  width:1em;height:1em;flex:0 0 auto;
  /* Sits on the text baseline instead of hanging below it. */
  vertical-align:-.14em;
}
/* Where an icon is the whole control, it needs to be readable at arm's
   length rather than matching a 14px label. */
.icon-lg{width:1.25em;height:1.25em}
.chip-yes .icon,.chip-no .icon{width:1.15em;height:1.15em;vertical-align:-.2em}
/* A leading icon is spaced by the gap of its row where there is one, and by
   this where the line is plain text. */
.icon-lead{margin-right:.42em}

/* --- profile: telling the kinds of thing apart -----------------------------
   Seven controls on this page were all 534px wide and all looked the same,
   while doing four different jobs: going to another page, handing over a file,
   committing a form, and ending the session. Width and weight now carry that
   difference, so the page can be read without trying each one. */
.profile-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.profile-link-mark{
  width:1.05em;height:1.05em;flex:0 0 auto;color:var(--t-muted);opacity:.7;
}
.profile-link:hover .profile-link-mark{opacity:1}
.profile-link.is-danger .profile-link-mark{color:inherit}

/* Sign out and Remove picture go nowhere, so they stop looking like the rows
   that do. Auto width, and not the widest thing in the card. */
.profile-signout{margin-top:14px;padding-top:14px;border-top:1px solid var(--t-line)}
/* Red, by the convention every phone already teaches: the way out of the
   account is the last row and it is red. Not --t-danger, which is reserved for
   things that destroy something — signing out is undone by signing in. */
.profile-signout-btn{color:var(--t-accent);border-color:var(--t-line)}
.profile-signout-btn:hover{background:rgba(176,82,26,.06);border-color:var(--t-accent)}
.profile-signout-btn,.avatar-remove-btn{
  width:auto!important;margin:0!important;padding:7px 14px!important;min-height:36px;
  display:inline-flex;align-items:center;gap:.42em;
}
.avatar-remove{display:flex;justify-content:center;margin-top:2px}
.avatar-remove-btn{color:var(--t-muted)}
.avatar-remove-btn:hover{color:var(--t-ink)}

/* Says which address signs you in. Deliberately not "Verified": nothing in
   this app verifies an email. */
.settings-chip{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:rgba(46,125,91,.10);color:var(--t-confirmed);
  font-size:11px;font-weight:600;letter-spacing:.01em;vertical-align:1px;
}

/* --- the top strip --------------------------------------------------------
   What this circle calls you, beside its name. Quiet: it is context, not a
   claim, and the controls that follow already differ by what you may do. */
.workspace-role{
  flex:0 0 auto;padding:2px 8px;border-radius:999px;
  background:var(--t-bg);color:var(--t-muted);
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
/* The calendar joined the bell and the gear. Same target, same shape, so the
   three read as one row of ways out of the list rather than one icon and two
   of something else. */
.workspace-icon-action{
  display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
  color:var(--t-brand-deep);background:var(--t-card);
  border:1px solid var(--t-line);text-decoration:none;
  transition:background 160ms ease,border-color 160ms ease;
}
.workspace-icon-action:hover{background:var(--t-bg);border-color:var(--t-muted)}
.workspace-icon-action:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
@media(pointer:coarse){.workspace-icon-action{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.workspace-icon-action{transition:none}}

/* The receiver's row when there is nothing to send to yet. Warm rather than
   red: nothing has gone wrong, somebody just has not finished setting up. */
.spine-how.is-missing{border-color:var(--t-accent);background:rgba(176,82,26,.04)}
.spine-how.is-missing strong{color:var(--t-accent)}

/* --- the bottom row -------------------------------------------------------
   Two named acts side by side at the foot of the canvas, rather than one fold
   called "Share" that you had to open to find out what was in it. */
.circle-bottom-row{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--t-line);
}
.share-one{flex:1 1 200px;min-width:0}
.share-one > summary{
  display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--t-card);border:1px solid var(--t-line);
  color:var(--t-brand-deep);font-size:14px;font-weight:600;list-style:none;
}
.share-one > summary::-webkit-details-marker{display:none}
.share-one > summary:hover{background:var(--t-bg);border-color:var(--t-muted)}
.share-one > summary:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.share-one-panel{display:flex;flex-direction:column;gap:8px;padding:12px 2px 0}
@media(pointer:coarse){.share-one > summary{min-height:44px}}

/* --- canvas motion --------------------------------------------------------

   Everything here is feedback on something that happened, never decoration on
   arrival. A list that animates every time it loads is a list that cries wolf:
   by the third round nobody reads the movement as meaning anything. */

/* 7 — the row answers the cursor. Small, because the whole row is not a
   button: only the controls inside it are. */
@media(hover:hover){
  .spine-row{transition:transform var(--t-d1) var(--t-settle),background var(--t-d1) ease}
  .spine-row:hover{transform:translateX(2px)}
}

/* 3, 4 — the mark reacts at the moment of the tap, before the round trip.
   The claim is registered locally the instant it is made; the server confirms
   it a moment later. Sent springs, confirmed springs and turns green, because
   green is earned and this is the moment it is earned. */
@keyframes spine-mark-commit{0%{transform:scale(1)}45%{transform:scale(1.2)}100%{transform:scale(1)}}
.spine-row.is-committing .spine-mark{
  animation:spine-mark-commit var(--t-d2) var(--t-spring);
}
.spine-row.is-confirming .spine-mark{
  animation:spine-mark-commit var(--t-d2) var(--t-spring);
  color:var(--t-confirmed);
}

/* 9 — the receiver's row opens rather than appearing. It is the one row that
   carries more than a line, and springing it says which row grew. */
.spine-how{
  transform-origin:top;
  animation:spine-how-open var(--t-d3) var(--t-spring);
}
@keyframes spine-how-open{
  from{opacity:0;transform:scaleY(.9) translateY(-4px)}
  to{opacity:1;transform:none}
}

/* 10 — a settled row recedes rather than switching off. It is still on the
   list, and still true; it is just no longer what you are looking for. */
.spine-row.is-settled .spine-name,
.spine-row.is-settled .spine-state{
  color:var(--t-muted);transition:color var(--t-d3) ease;
}

/* 5 — the nudge leaves rather than vanishing. */
.round-warning{transition:opacity var(--t-d3) var(--t-settle),
  max-height var(--t-d3) var(--t-settle),margin var(--t-d3) var(--t-settle)}
.round-warning.is-leaving{opacity:0;max-height:0;margin-block:0;overflow:hidden}

/* 8 — the bottom row answers the press. */
.share-one > summary{transition:background var(--t-d1) ease,border-color var(--t-d1) ease,transform var(--t-d1) var(--t-settle)}
.share-one > summary:active{transform:scale(.96)}

/* 2 — your row is marked on arrival and does not perform about it. The glow
   is a state, not an entrance: it is true every time this page loads, and a
   spring on every load would be the page congratulating itself for existing.
   The entrance below is used only when the state changes under you. */
.spine-row.is-you{animation:none}
@keyframes spine-turn-arrive{from{transform:scale(.99);box-shadow:none}to{transform:none}}
.spine-row.is-you.just-became-yours{animation:spine-turn-arrive var(--t-d3) var(--t-spring)}

@media(prefers-reduced-motion:reduce){
  .spine-row,.spine-how,.round-warning,.share-one > summary{transition:none;animation:none}
  .spine-row.is-committing .spine-mark,
  .spine-row.is-confirming .spine-mark,
  .spine-row.is-you.just-became-yours{animation:none}
  .spine-row:hover{transform:none}
  .share-one > summary:active{transform:none}
}

/* --- Pulse: the record, not a to-do list ----------------------------------
   Rows without borders — a record is a column of sentences, and a box round
   each one turns reading into scanning. The separators are the days. */
.pulse-day{
  margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-muted);
  padding-bottom:5px;border-bottom:1px solid var(--t-line);
}
.pulse-day:first-child{margin-top:0}
.pulse-item{
  display:grid;grid-template-columns:24px 16px minmax(0,1fr) auto;
  align-items:center;gap:9px;padding:7px 2px;
  transition:transform var(--t-d1) var(--t-settle);
}
@media(hover:hover){.pulse-item:hover{transform:translateY(-1px)}}
.pulse-face{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(42,165,106,.12);color:var(--t-brand-deep);
  font-size:10px;font-weight:700;
}
.pulse-mark{display:grid;place-items:center;width:16px;height:16px}
.pulse-text{margin:0;font-size:14px;line-height:20px;color:var(--t-ink);min-width:0}
.pulse-when{font-size:12px;color:var(--t-muted);white-space:nowrap}
/* The mark carries the kind; the sentence stays in the reading colour, so a
   feed of eight things is not eight colours. */
.pulse-item.tone-ok .pulse-mark{color:var(--t-confirmed)}
.pulse-item.tone-warn .pulse-mark{color:var(--t-sent)}
.pulse-item.tone-bad .pulse-mark{color:var(--t-bad)}
.pulse-item.tone-info .pulse-mark{color:var(--t-brand-deep)}
.pulse-item.tone-muted .pulse-mark{color:var(--t-muted)}
.pulse-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;text-align:center;color:var(--t-muted)}
.pulse-empty-mark{display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--t-bg);color:var(--t-muted);font-size:17px}
.pulse-empty strong{color:var(--t-ink);font-size:15px}
.pulse-empty p{margin:0;font-size:13px}
/* The panel arrives on the spring and leaves on the settle. */
.pulse-drawer[open] .pulse-panel{animation:pulse-open var(--t-d3) var(--t-spring)}
@keyframes pulse-open{
  from{opacity:0;transform:translateY(8px) scale(.99)}
  to{opacity:1;transform:none}
}
.pulse-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pulse-head a{font-size:12px;font-weight:600;color:var(--t-brand-deep)}
@media(prefers-reduced-motion:reduce){
  .pulse-item{transition:none}
  .pulse-item:hover{transform:none}
  .pulse-drawer[open] .pulse-panel{animation:none}
}

/* --- People: the roster reads as the rotation ------------------------------

   Role as a badge rather than a word in a muted line. Which of these people
   can change the circle is the first thing an organizer scans for, and it was
   set in the same grey as the seat number beside it. */
.role-badge{
  display:inline-block;padding:1px 7px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.01em;
  background:var(--t-bg);color:var(--t-muted);
}
.role-badge.role-organizer{background:rgba(20,123,73,.10);color:var(--t-brand-deep)}
.role-badge.role-coordinator{background:rgba(176,82,26,.10);color:var(--t-accent)}

/* A vacancy is a seat with nobody in it, drawn as one: dashed, because the
   place is real and the person is not. */
.member-chip-row.is-vacant{background:transparent;border:1px dashed var(--t-line)}
.member-avatar.is-vacant{
  background:transparent;border:1px dashed var(--t-line);
  color:var(--t-muted);font-variant-numeric:tabular-nums;
}
.vacant-name{color:var(--t-muted);font-style:italic;font-weight:600}

/* A finger needs more than an eye does, and only a finger pays for it. */
@media(pointer:coarse){
  .roster-actions .btn,.roster-actions button{min-height:44px;padding:10px 14px}
  /* The reminder is a link rather than a button, and a 12px link in a row of
     text is the hardest thing on this page to hit. Desktop no longer pays for
     it on every row -- see `.receiving-remind` above. */
  .receiving-remind{display:inline-flex;align-items:center;min-height:44px}
  .pill-action{min-height:44px;padding:4px 14px}
}

/* Rows arrive on the spring and leave on the settle: a seat being filled or a
   member moving is a change to somebody's turn, which is worth seeing happen. */
.member-chip-row{animation:roster-arrive var(--t-d2) var(--t-spring)}
@keyframes roster-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.member-chip-row.is-leaving{
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-d2) var(--t-settle),transform var(--t-d2) var(--t-settle);
}
@media(prefers-reduced-motion:reduce){
  .member-chip-row{animation:none}
  .member-chip-row.is-leaving{transition:none}
}

/* --- Receiving details: the one screen where somebody types their own
   payment details and cannot otherwise tell what the circle will see. ------ */
.receiving-preview{
  position:fixed;inset:0;z-index:60;display:grid;place-items:end center;
  background:rgba(26,26,26,.32);padding:0;
}
.receiving-preview-sheet{
  width:100%;max-width:var(--t-canvas-max);
  background:var(--t-card);border-radius:18px 18px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 50px -20px rgba(26,46,53,.45);
  animation:receiving-rise var(--t-d3) var(--t-spring);
}
@keyframes receiving-rise{
  from{opacity:0;transform:translateY(18px) scale(.99)}
  to{opacity:1;transform:none}
}
.receiving-preview.is-closing .receiving-preview-sheet{
  animation:receiving-settle var(--t-d3) var(--t-settle) forwards;
}
@keyframes receiving-settle{to{opacity:0;transform:translateY(18px)}}
.receiving-preview-sheet h2{margin:0 0 2px;font-size:20px}
.receiving-preview-sheet > .muted{margin:0 0 14px;font-size:14px}

/* The card reads as a record rather than a form: terms left, values right,
   the values in the mono face because they are things to be copied exactly. */
.receiving-preview-card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;
  margin:0;padding:14px;border:1px solid var(--t-line);border-radius:14px;
  background:var(--t-bg);
}
.receiving-preview-card dt{font-size:12px;color:var(--t-muted);white-space:nowrap}
.receiving-preview-card dd{
  margin:0;font-family:var(--t-font-mono);font-size:14px;color:var(--t-ink);
  word-break:break-word;
}
.receiving-trust{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:5px;
  font-size:13px;color:var(--t-muted);
}
.receiving-trust li{display:flex;align-items:center}
.receiving-preview-actions{
  display:flex;gap:10px;margin-top:16px;
}
.receiving-preview-actions .btn{flex:1;margin:0;min-height:44px}
.receiving-preview-open{min-height:44px}

@media(min-width:640px){
  .receiving-preview{place-items:center}
  .receiving-preview-sheet{border-radius:18px;padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  .receiving-preview-sheet{animation:none}
  .receiving-preview.is-closing .receiving-preview-sheet{animation:none;opacity:0}
}

/* Saved, and what was saved — arriving on the spring, because it is a
   confirmation and this is the moment it is earned. */
.receiving-saved{animation:receiving-saved-in var(--t-d2) var(--t-spring)}
@keyframes receiving-saved-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.receiving-saved h2{margin:0 0 2px;font-size:20px;color:var(--t-confirmed)}
.receiving-saved > .muted{margin:0 0 12px;font-size:14px}
.receiving-done{margin-top:14px;min-height:44px}
@media(prefers-reduced-motion:reduce){.receiving-saved{animation:none}}

/* The one thing to do on the receiver's row, when their method can carry it.
   Sized and placed like the row's other action so a sender does not have to
   work out which of two controls is the real one. */
.spine-send{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:8px;min-height:40px;padding:9px 14px;border-radius:10px;
  background:var(--t-brand-deep);color:#fff;border:0;cursor:pointer;
  font-size:14px;font-weight:600;font-family:inherit;text-decoration:none;
  transition:transform var(--t-d1) var(--t-settle),filter var(--t-d1) ease;
}
.spine-send:hover{filter:brightness(1.08)}
.spine-send:active{transform:scale(.97)}
.spine-send:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
@media(pointer:coarse){.spine-send{min-height:44px}}
@media(prefers-reduced-motion:reduce){.spine-send{transition:none}.spine-send:active{transform:none}}

/* The circle row's state line, which is the sidebar's line — same answer, same
   words. It replaced a pill that read "Running" on every row, so it earns its
   place only by saying something different per circle. Emphasised when the
   circle wants something, muted when it does not, because the whole point of
   the line is to be scanned. */
.circle-card-state{color:var(--t-muted)}
/* The payment badge on a circles-list row. Attention's own colour, at the
   size of the line it sits under -- a row says that something is wrong and
   where; the banner inside the circle is what explains it.

   Scoped through .member-circle-main because that container sets every
   `small` inside it to display:block. A bare .circle-card-billing rule loses
   on specificity and changes nothing: the dot lands on its own line above the
   words, which looks like a bullet rather than a status. */
.member-circle-main small.circle-card-billing{display:flex;align-items:center;gap:6px;color:var(--t-accent);font-weight:600}
.circle-card-state.needs{color:var(--t-brand-deep);font-weight:600}
.circle-card-top .sidebar-dot{flex:0 0 auto}

/* The account control in the bar. A disclosure rather than a link, because
   what somebody needs here is to read who they are and then leave -- and the
   second of those is a POST, which cannot be a nav item. Closed it is a name;
   open it is the name, the number and the way out.

   Anchored to the bar rather than the page so the panel opens under it at any
   width. `margin-left:auto` is what pushes it to the end of the bar. */
.topbar-account{position:relative;margin-left:auto}
.topbar-account > summary{
  display:inline-flex;align-items:center;gap:8px;
  max-width:46vw;padding:4px 10px 4px 4px;
  border-radius:999px;background:var(--t-inset);border:1px solid var(--t-line);
  color:var(--t-muted);font-size:12px;line-height:18px;font-weight:600;
  cursor:pointer;list-style:none;
}
.topbar-account > summary::-webkit-details-marker{display:none}
.topbar-account-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--t-green-soft);color:var(--t-brand-deep);
}
.topbar-account-badge .icon{width:15px;height:15px}
.topbar-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-account-mark{flex:0 0 auto;width:14px;height:14px}
.topbar-account[open] > summary{border-color:var(--t-brand)}
.topbar-account-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  display:flex;flex-direction:column;gap:2px;
  min-width:210px;padding:12px 14px;
  border:1px solid var(--t-line);border-radius:14px;
  background:var(--t-card);box-shadow:var(--shadow);
}
.topbar-account-panel strong{color:var(--t-ink);font-size:15px;line-height:22px}
.topbar-account-panel .muted{font-size:12px;line-height:18px}
.topbar-account-panel small{font-size:13px;line-height:20px}
.topbar-account-panel form{margin:8px 0 0}
.topbar-account-panel .btn{width:100%;min-height:40px;margin:0}
@media (max-width:560px){
  .topbar-account > summary{max-width:38vw}
  .topbar-account-name{display:none}
}

/* --- A circles list that reads as a list of circles ----------------------- *
   Every row carried the same six facts in the same grey at the same size, so
   finding one circle among five meant reading all five. These give each row a
   fixed anchor on the left and a state that is legible without being read.

   The glyph is decorative and aria-hidden: it repeats nothing and is the only
   thing here that could be mistaken for information. It tints to attention
   only when the row already says "Payment failed" in words underneath, so the
   colour is a second way to find that row, never the only way to know.

   Scoped through .member-circle-main where it touches a `small`, because that
   container sets every `small` inside it to display:block and a bare rule
   loses to it -- the same trap .circle-card-billing documents above. */
.member-circle-glyph{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--t-green-soft);color:var(--t-brand-deep);
  border:1px solid var(--t-line);
}
.member-circle-glyph .icon{width:20px;height:20px}
.member-circle-glyph.is-attention{
  background:var(--t-accent-tint);color:var(--t-accent);border-color:var(--t-accent-soft);
}
/* The row is a flex container already; the glyph sits beside the text block
   rather than above it, and the text block is what may shrink. */
.member-circle-row{gap:12px}
.member-circle-row .member-circle-main{flex:1 1 auto;min-width:0}

/* The state stops being a grey line under the facts and becomes the thing the
   eye lands on after the name. Still the rail's own words -- this restyles
   what that sentence looks like, never what it says. */
.member-shell .member-circle-main small.circle-card-state{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;padding:3px 10px;border-radius:999px;
  background:var(--t-inset);border:1px solid var(--t-line);
  color:var(--t-muted);font-size:12px;line-height:18px;font-weight:600;
}
.member-shell .member-circle-main small.circle-card-state.needs{
  background:var(--t-green-tint);border-color:var(--t-brand);color:var(--t-brand-deep);
}

/* Cards, not a ruled list: the gap is what separates them, so each row reads
   as one object with a name, its facts and its state. */
.member-list-panel .minimal-list{display:flex;flex-direction:column;gap:10px}
.member-list-panel .member-circle-row{padding:16px}

@media (max-width:560px){
  /* The row stacks on a narrow screen (see the rule near the top of this
     file), which would put a 44px glyph on a line of its own above the name.
     Smaller, and back beside the text. */
  .member-circle-row{flex-direction:row;flex-wrap:wrap}
  .member-circle-glyph{width:36px;height:36px}
  .member-circle-glyph .icon{width:18px;height:18px}
}

/* The claim, opening on the row it is about. It used to be an anchor to a card
   at the foot of the page, so the one action a sender takes began by leaving
   their own row and scrolling past everybody else's. */
.spine-claim{grid-column:1 / -1;margin-top:6px}
.spine-claim > summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center}
.spine-claim > summary::-webkit-details-marker{display:none}
.spine-claim[open] > summary{background:transparent;color:var(--t-brand-deep);
  border:1px solid var(--t-line)}
.spine-claim > form{display:flex;flex-direction:column;gap:8px;margin-top:8px;
  padding:12px;border:1px solid var(--t-line);border-radius:10px;
  background:var(--t-card)}
.spine-claim label{display:flex;flex-direction:column;gap:4px;
  font-size:12px;line-height:18px;color:var(--t-muted)}
.spine-claim input[type="text"]{min-height:40px}
.spine-claim .muted{font-size:12px;line-height:17px;margin:0}
/* The row is narrow and a file input is wide; on a phone the form takes the
   width rather than the leftover beside a name. */
@media(pointer:coarse){
  .spine-claim > summary{min-height:44px;width:100%}
  .spine-claim > form button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .spine-claim > form{transition:none}
}

/* One bar: ☰ · where you are · what you can do here. The workspace used to
   carry a second strip of its own directly beneath this, which meant every
   circle page shipped two — one saying where you were, and one saying only
   that the product exists. */
.topbar{min-height:56px;gap:8px}
.topbar-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;
  font-size:15px;line-height:22px;color:var(--t-ink)}
.topbar-title strong{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:650}
.topbar-title:empty{flex:1 1 auto}
/* The role, the due date and the setup badge came up with the name. They keep
   their own sizes: they are context for the title, not part of it. */
.topbar .workspace-role,.topbar .workspace-due,.topbar .workspace-round-badge{
  flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){
  /* A circle name and a role badge and a due date do not all fit beside three
     controls. The name is the one that has to survive. */
  .topbar .workspace-due,.topbar .workspace-round-badge{display:none}
}

/* The QR. Deliberately outside the palette: a code has to be dark on light to
   scan, and this app follows the reader's colour scheme — so the white ground
   is painted by the SVG itself and this only gives it room. Inverting it in
   dark mode would produce a picture of a QR that no camera reads. */
.invite-qr{margin:10px 0}
.invite-qr > summary{cursor:pointer;display:inline-flex;align-items:center;
  font-size:13px;color:var(--t-brand-deep);font-weight:600}
.invite-qr > summary::-webkit-details-marker{display:none}
.invite-qr-code{width:168px;max-width:60vw;aspect-ratio:1;margin:10px 0 6px;
  padding:8px;background:#FFFFFF;border:1px solid var(--t-line);border-radius:10px}
.invite-qr-code svg{display:block;width:100%;height:100%;
  /* Modules are squares. Smoothing them is what makes a code fail to scan on
     a screen somebody is holding at arm's length. */
  image-rendering:pixelated;shape-rendering:crispEdges}
@media(pointer:coarse){
  .invite-qr > summary{min-height:44px}
}

/* The token pages: what somebody sees before they are a user.

   Reached from a link in a chat by a person who may never have opened Tanda.
   No drawer, no bottom nav, no account chrome — there is nothing here to
   navigate to, and offering an account hub to somebody without an account is
   how the old Chama block sent link holders to a sign-in wall. */
.token-card{max-width:var(--t-canvas-max);margin:0 auto 14px;background:var(--t-card);
  border:1px solid var(--t-line);border-radius:16px;padding:24px 22px;
  display:flex;flex-direction:column;gap:10px}
.token-card.token-quiet{background:transparent;border-style:dashed}
.token-kicker{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--t-sent)}
.token-title{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;margin:0;font-size:24px;line-height:30px;font-weight:650;color:var(--t-ink)}
.token-sub{margin:0;color:var(--t-muted);font-size:14px;line-height:20px}
.token-note{margin:0;color:var(--t-ink);font-size:13px;line-height:19px}
.token-note.is-warn{color:var(--t-accent)}
.token-figure{margin:0;font-size:28px;line-height:34px;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--t-ink)}
.token-meter{height:6px;border-radius:999px;background:var(--t-line);overflow:hidden}
.token-meter span{display:block;height:100%;border-radius:inherit;
  background:var(--t-brand-deep);transition:width var(--t-d3) var(--t-settle)}
.token-steps{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
  font-size:13px;line-height:19px;color:var(--t-ink)}
.token-steps li::marker{color:var(--t-muted)}
.token-promise{max-width:var(--t-canvas-max);margin:0 auto;text-align:center;
  color:var(--t-muted);font-size:12px;line-height:18px}
@media(prefers-reduced-motion:reduce){
  .token-meter span{transition:none}
}

/* Status as a line rather than a chip, with its own icon. Not pulsing: a
   circle being open is not urgent, and an animation running forever on the
   first thing a stranger sees asks for attention it has no news to justify. */
.token-status{display:flex;align-items:center;gap:7px;margin:0;
  font-size:14px;line-height:20px;font-weight:600}
.token-status.is-ok{color:var(--t-confirmed)}
.token-status.is-warn{color:var(--t-accent)}
.token-status.is-muted{color:var(--t-muted)}
.token-status.is-info{color:var(--t-brand-deep)}
/* The facts about the circle, not about anybody in it. */
.token-facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;
  color:var(--t-muted);font-size:14px;line-height:20px;
  font-variant-numeric:tabular-nums}
.token-trust{display:flex;align-items:flex-start;gap:8px;margin:6px 0 0;
  padding:12px 14px;border-radius:10px;background:var(--t-bg);
  color:var(--t-ink);font-size:13px;line-height:19px}
.token-hint{max-width:var(--t-canvas-max);margin:0 auto 12px;
  display:flex;align-items:flex-start;gap:8px;
  color:var(--t-muted);font-size:12px;line-height:18px}
/* Arrives once, on the spring. Server-rendered, so there is nothing to
   shimmer for — the page is complete when it lands. */
.token-card{animation:token-in var(--t-d3) var(--t-spring)}
@keyframes token-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .token-card{animation:none}
}

/* The rounds, as a record somebody unfamiliar can read. Rows rather than
   cards: this is a list of facts in order, and giving each one a card makes a
   ten-round circle scroll like a feed. */
.round-log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.round-log-row{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--t-line)}
.round-log-row:last-child{border-bottom:0}
.round-log-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.round-log-head strong{font-size:14px;line-height:20px;color:var(--t-ink)}
.round-log-state{font-size:12px;line-height:18px;color:var(--t-muted)}
.round-log-state.is-open{color:var(--t-brand-deep);font-weight:600}
.round-log-facts{display:flex;flex-wrap:wrap;gap:4px 12px;
  font-size:13px;line-height:19px;color:var(--t-muted);
  font-variant-numeric:tabular-nums}
/* Called off, and still listed. A history with silent holes in it is the
   opposite of what this product is for — so it is dimmed, not removed. */
.round-log-row.is-cancelled{opacity:.6}
.round-log-row.is-cancelled .round-log-head strong{text-decoration:line-through}

/* The toast. It is the flash, drawn as a thing that arrives and leaves rather
   than a line that sits at the top of the page until the next navigation. */
.toast-region{position:fixed;left:50%;bottom:calc(104px + 12px);z-index:200;
  transform:translateX(-50%);width:100%;max-width:400px;padding:0 12px;
  pointer-events:none;display:flex;justify-content:center}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 14px;border-radius:10px;
  background:var(--t-card);color:var(--t-ink);
  border-left:4px solid var(--t-brand-deep);
  box-shadow:0 6px 24px rgba(26,46,53,.14);
  font-size:14px;line-height:20px;cursor:pointer;
  animation:toast-in var(--t-d3) var(--t-spring)}
.toast.is-warn{border-left-color:var(--t-accent)}
.toast-icon{flex:0 0 auto;color:var(--t-brand-deep);font-size:18px;line-height:1}
.toast.is-warn .toast-icon{color:var(--t-accent)}
.toast-message{flex:1;min-width:0}
.toast-close{flex:0 0 auto;border:0;background:transparent;cursor:pointer;
  color:var(--t-muted);padding:2px;line-height:1;border-radius:6px}
.toast-close:hover{color:var(--t-ink)}
.toast-close:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.toast.is-leaving{animation:toast-out var(--t-d3) var(--t-settle) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(14px) scale(.97)}}
/* Above 900px it comes in from the right, clear of the bar. The bottom nav is
   hidden at this width, so the thumb zone it was avoiding is not there. */
@media(min-width:900px){
  .toast-region{bottom:auto;top:72px;left:auto;right:16px;transform:none;
    max-width:360px;justify-content:flex-end}
  .toast{animation:toast-in-right var(--t-d3) var(--t-spring)}
  .toast.is-leaving{animation:toast-out-right var(--t-d3) var(--t-settle) forwards}
  @keyframes toast-in-right{from{opacity:0;transform:translateX(36px) scale(.97)}
    to{opacity:1;transform:none}}
  @keyframes toast-out-right{from{opacity:1;transform:none}
    to{opacity:0;transform:translateX(36px) scale(.97)}}
}
@media(pointer:coarse){
  .toast-close{min-width:44px;min-height:44px;display:grid;place-items:center}
}
@media(prefers-reduced-motion:reduce){
  .toast,.toast.is-leaving{animation:none}
  .toast.is-leaving{opacity:0}
}

/* Circle admins — who holds authority now, and who started the circle.

   Two lists that must not look alike. The admin rows are the people who can
   act; the history below is a record. Same card, different weight: history is
   quiet and carries no controls, so nothing there reads as a thing to press. */
.admin-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--t-line)}
.admin-row:last-child{border-bottom:0}
.admin-identity{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-identity strong{font-family:var(--t-font-heading);font-variant-numeric:lining-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-meta{font-size:var(--t-size-sm)}
/* A real target on a phone. */
.admin-action{flex:none;min-height:44px;display:inline-flex;align-items:center}
.admin-history{list-style:none;margin:10px 0 12px;padding:0;display:flex;
  flex-direction:column;gap:8px;font-size:var(--t-size-sm)}
.settings-jump{margin:0 0 14px;font-size:var(--t-size-sm)}

/* Stacked on a phone: the name and its status stay together, and the action
   goes full width underneath rather than squeezing the name into an ellipsis. */
@media(max-width:600px){
  .admin-row{flex-direction:column;align-items:stretch}
  .admin-action{width:100%;justify-content:center}
}

/* Toast tones. Each brings its own icon as well as its own colour, so the
   difference survives a monochrome screen and a colour-blind reader — and a
   refusal never reads as a success because somebody could not see green. */
.toast.is-success{border-left:3px solid var(--t-confirmed)}
.toast.is-success .toast-icon{color:var(--t-confirmed)}
.toast.is-warning{border-left:3px solid var(--t-accent)}
.toast.is-warning .toast-icon{color:var(--t-accent)}
.toast.is-danger{border-left:3px solid var(--t-danger)}
.toast.is-danger .toast-icon{color:var(--t-danger)}
.toast.is-neutral{border-left:3px solid var(--t-line)}
.toast.is-neutral .toast-icon{color:var(--t-muted)}

/* --- Allowance seats -------------------------------------------------------
   Five seats the free plan includes, then a count of everybody past them.
   Deliberately not a progress bar: an allowance already exceeded is not a
   quantity part-consumed, and a bar drawn past its own end is a wrong picture
   of a right number. */
.allowance-segments { margin: 0.5rem 0 0.75rem; }
.allowance-segments-dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.allowance-seat {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  /* Shape and fill, not hue: an open seat is a ring and a taken one is solid,
     so the count survives a monochrome screen and colour blindness alike. */
  box-sizing: border-box;
}
.allowance-seat.is-taken { background: var(--t-brand); border: 1px solid var(--t-brand); }
.allowance-seat.is-open { background: transparent; border: 1px solid var(--ink-60, #5b6472); }
.allowance-seat.is-over { background: var(--warn-bg, #fdf3e2); border: 1px solid var(--warn-line, #e4c893); }
.allowance-seat-overflow {
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  /* The overflow reads as the thing needing attention without shouting: the
     banner around it already carries the warning tone. */
  background: var(--warn-bg, #fdf3e2);
  color: var(--warn-ink, #7a5314);
  border: 1px solid var(--warn-line, #e4c893);
}
.allowance-segments-caption {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-60, #5b6472);
}
.billing-plan-choice { display: grid; gap: 10px; margin: 0 0 12px; }
.billing-plan-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: var(--t-card);
  cursor: pointer;
}
.billing-plan-option input { margin-top: 3px; accent-color: var(--t-brand); }
.billing-plan-option span { display: grid; gap: 2px; }
.billing-plan-option strong { font-size: 15px; line-height: 21px; font-weight: 650; }
.billing-plan-option small { color: var(--t-muted); font-size: 13px; line-height: 19px; }
.billing-plan-option em {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(42, 165, 106, .12);
  color: var(--t-brand-deep);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
}
.billing-plan-option:has(input:checked) {
  border-color: var(--t-brand);
  box-shadow: 0 0 0 1px rgba(42, 165, 106, .3);
}
.billing-plan-option.is-disabled { opacity: .52; cursor: not-allowed; }

/* The notice at the point of refusal. No dismiss control, so no close-button
   spacing to reserve. */
.plan-required-notice {
  border: 1px solid var(--warn-line, #e4c893);
  background: var(--warn-bg, #fdf3e2);
  border-radius: var(--radius-m, 10px);
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
}
.plan-required-notice p { margin: 0.35rem 0 0; }
.plan-required-actions { margin-top: 0.75rem; }

/* A short entrance so the banner does not simply appear mid-page. The member
   count itself never animates — a number that counts up reads as something
   happening now, and nothing is happening: it is a fact about the circle. */
@keyframes billing-banner-enter {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}
.billing-banner-enter {
  animation: billing-banner-enter 180ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .billing-banner-enter { animation: none; }
}

/* --- Plan transition ------------------------------------------------------
   Eligibility and a scheduled downgrade are information, not alarms: the
   organizer has done nothing wrong, and only the grown-again case carries a
   warning tone because only that one describes a restriction ahead. */
.plan-transition {
  border: 1px solid var(--line, #e3e6ea);
  border-radius: var(--radius-m, 10px);
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  background: var(--surface, #fff);
}
.plan-transition.is-warn {
  border-color: var(--warn-line, #e4c893);
  background: var(--warn-bg, #fdf3e2);
}
.plan-transition p { margin: 0.35rem 0 0; }
.plan-transition-actions { margin-top: 0.75rem; }
.plan-transition-actions form { display: inline; }

/* --- Circle identity local name ----------------------------------------- */
.optional-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.optional-label em{
  color:var(--t-muted);font-size:12px;line-height:16px;font-style:normal;font-weight:500;
}
.local-name-combo{position:relative}
.local-name-combo input[role="combobox"]{width:100%}
.local-name-options{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  max-height:min(240px,calc(100dvh - 220px));margin:0;padding:6px;
  list-style:none;overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--t-line);border-radius:14px;background:#FFFFFF;
  box-shadow:0 18px 40px rgba(26,46,53,.14);
}
.local-name-options button{
  width:100%;min-height:42px;padding:10px 12px;border:0;border-radius:10px;
  background:transparent;color:var(--t-ink);font:inherit;font-size:14px;line-height:20px;
  text-align:left;cursor:pointer;
}
.local-name-options button:hover,
.local-name-options button[aria-selected="true"]{background:rgba(42,165,106,.09);color:var(--t-brand-deep)}
.local-name-options button:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.local-name-selected{display:flex;align-items:center;gap:8px;min-height:28px;margin-top:8px}
.local-name-selected[hidden]{display:none}
.local-name-selected button{
  border:0;background:transparent;color:var(--t-muted);font:inherit;font-size:12px;
  line-height:16px;font-weight:600;cursor:pointer;
}
.local-name-selected button:hover{color:var(--t-ink)}
.local-name-selected button:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px;border-radius:6px}
.local-name-preview{margin-top:0}

.draft-setup-editor{
  display:grid;
  gap:10px;
}
.draft-setup-editor > h3{
  margin-bottom:0;
}
.setup-change-preview{
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(42,165,106,.28);
  border-radius:14px;
  background:rgba(42,165,106,.08);
}
.setup-change-preview strong{
  display:block;
  margin-bottom:6px;
  color:var(--t-ink);
}
.setup-change-preview p{
  margin:0 0 8px;
  color:var(--t-muted);
  font-size:13px;
  line-height:20px;
}
.setup-change-preview ol{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:18px;
  color:var(--t-ink);
  font-size:13px;
  line-height:20px;
}
@media(max-width:560px){
  .settings-amount-row,
  .settings-schedule-row{
    grid-template-columns:1fr;
  }
  .settings-amount-row output{
    justify-self:start;
    min-width:96px;
  }
  .local-name-options{position:fixed;left:16px;right:16px;top:auto;bottom:18px;max-height:min(280px,48dvh)}
}

/* --- Shared public footer + privacy choices ----------------------------- */
.pwa-install-card{
  max-width:1120px;
  margin:42px auto 0;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(244,241,234,.14);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:var(--paper);
  box-shadow:0 20px 48px rgba(0,0,0,.16);
}
.pwa-install-card[hidden]{display:none}
.pwa-install-card .mkt-eyebrow{margin:0 0 4px;color:var(--mint)}
.public-pwa-install-card h2{
  margin:0;
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.18;
  letter-spacing:0;
}
.member-pwa-install-card{
  width:min(560px,calc(100% - (var(--pad) * 2)));
  margin:8px auto 16px;
  border-color:var(--t-line);
  background:var(--t-card);
  color:var(--t-ink);
  box-shadow:var(--shadow-lg);
}
.member-pwa-install-card h2{
  margin:0;
  font-size:1rem;
  line-height:1.25;
  font-weight:700;
}
.member-pwa-install-card .mkt-eyebrow{color:var(--t-brand-deep)}
.member-pwa-install-card p:not(.mkt-eyebrow){color:var(--t-muted)}
.member-pwa-install-card .pwa-install-actions .text-button{color:var(--t-muted)}
.member-pwa-install-card .pwa-install-actions .text-button:hover{color:var(--t-ink)}
.pwa-update-card{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:var(--z-overlay);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  width:min(420px,calc(100vw - 32px));
  min-height:52px;
  padding:10px 12px 10px 14px;
  border:var(--border-default);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:0 20px 48px rgba(11,16,22,.16);
  transform:translateX(-50%);
}
.pwa-update-card[hidden]{display:none}
.pwa-update-card span{min-width:0;flex:1;font-size:var(--text-sm);line-height:var(--line-body)}
.pwa-update-card .text-button{
  min-height:44px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:var(--color-brand-active);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.pwa-update-card .text-button:hover{text-decoration:underline}
.pwa-update-card .text-button:focus-visible{
  outline:2px solid var(--color-brand);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.offline-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--space-5);
  background:var(--t-bg);
}
.offline-shell::before{display:none}
.offline-card{
  width:min(420px,100%);
  display:grid;
  gap:var(--space-3);
  padding:var(--space-5);
  border:var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
  box-shadow:var(--shadow-lg);
}
.offline-card h1{margin:var(--space-2) 0 0;font-size:var(--text-2xl);line-height:var(--line-heading)}
.offline-card p{margin:0;color:var(--color-text-secondary);font-size:var(--text-base);line-height:var(--line-body)}
.pwa-install-card p:not(.mkt-eyebrow){
  margin:4px 0 0;
  color:var(--mute);
  font-size:14px;
  line-height:20px;
}
.pwa-install-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pwa-install-actions .btn{
  width:auto;
  min-height:44px;
  margin:0;
  padding:10px 16px;
}
.pwa-install-actions .text-button{
  min-height:44px;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:var(--mute);
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.pwa-install-actions .text-button:hover{color:var(--paper)}
.pwa-install-actions .text-button:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:10px;
}
html[data-public-theme="light"] body.brand-night .pwa-install-card{
  background:#FFFFFF;
  border-color:#E8E2D9;
  color:#111820;
  box-shadow:0 20px 50px rgba(30,35,31,.08);
}
html[data-public-theme="light"] body.brand-night .pwa-install-card p:not(.mkt-eyebrow),
html[data-public-theme="light"] body.brand-night .pwa-install-actions .text-button{
  color:#5F6875;
}
html[data-public-theme="light"] body.brand-night .pwa-install-actions .text-button:hover{
  color:#111820;
}
.public-footer[data-public-footer]{
  max-width:none;
  margin:0;
  padding:32px max(18px,calc((100vw - 1120px)/2)) 22px;
  border-top:1px solid rgba(244,241,234,.08);
}
.public-footer .foot-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(132px,1fr));
  gap:24px;
  align-items:start;
}
.public-footer .foot-col{gap:8px}
.public-footer .foot-col nav{display:flex;flex-direction:column;gap:7px}
.public-footer .foot-col h4,
.public-footer .foot-disclosure summary{
  margin:0;
  color:var(--paper);
  font-size:12px;
  line-height:18px;
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.public-footer .foot-col a,
.public-footer .foot-col button{
  color:var(--mute);
  min-height:28px;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  font-size:14px;
  line-height:20px;
  font-weight:420;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.public-footer .foot-col a:hover,
.public-footer .foot-col button:hover{text-decoration:underline;color:var(--paper)}
.public-footer .foot-col a:focus-visible,
.public-footer .foot-col button:focus-visible,
.foot-social-row a:focus-visible,
.cookie-actions button:focus-visible,
.cookie-close:focus-visible{
  outline:2px solid var(--t-brand);
  outline-offset:3px;
}
.foot-brand p{margin:8px 0 4px;max-width:28ch;color:var(--mute)}
.foot-boundary{margin:8px 0 4px;max-width:28ch}
.foot-boundary p{margin:0;color:var(--mute)}
.money-boundary-inline p{margin:0}
.money-boundary-panel{
  padding:0;
  border:0;
}
.money-boundary-panel p{margin:0;color:var(--mute)}
.foot-email{display:inline-flex;width:max-content}
.foot-social{margin-top:16px}
.foot-social h4{margin-bottom:8px}
.foot-social-row{display:flex;flex-wrap:wrap;gap:6px}
.foot-social-row a,
.foot-social-row span{
  width:44px;
  min-width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--mute);
  border:1px solid rgba(244,241,234,.08);
  background:transparent;
}
.foot-social-row a:hover{color:var(--paper);text-decoration:none;background:rgba(255,255,255,.04)}
.foot-social .social-glyph{width:21px;height:21px}
.foot-social.is-placeholder{color:var(--mute)}
.foot-social.is-placeholder .foot-social-row span{opacity:.54}
.foot-social.is-placeholder p{margin:6px 0 0;font-size:13px;line-height:18px;color:var(--mute)}
.foot-mobile-disclosures{display:none}
.foot-legal-block{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 18px;
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid rgba(244,241,234,.08);
}
.public-footer .foot-legal{margin:0;color:var(--mute);font-size:13px;line-height:19px}
html[data-public-theme="light"] body.brand-night .public-footer[data-public-footer]{
  background:#F0ECE6;
  border-top-color:rgba(11,16,22,.08);
}
html[data-public-theme="light"] body.brand-night .public-footer .foot-col h4,
html[data-public-theme="light"] body.brand-night .public-footer .foot-disclosure summary{
  color:#111820;
}
html[data-public-theme="light"] body.brand-night .public-footer .foot-col a,
html[data-public-theme="light"] body.brand-night .public-footer .foot-col button,
html[data-public-theme="light"] body.brand-night .foot-brand p,
html[data-public-theme="light"] body.brand-night .foot-social.is-placeholder p,
html[data-public-theme="light"] body.brand-night .public-footer .foot-legal{
  color:#5D6876;
}
html[data-public-theme="light"] body.brand-night .public-footer .foot-col a:hover,
html[data-public-theme="light"] body.brand-night .public-footer .foot-col button:hover{
  color:#111820;
}
html[data-public-theme="light"] body.brand-night .legal-page h1,
html[data-public-theme="light"] body.brand-night .legal-page h2{
  color:#111820;
}
html[data-public-theme="light"] body.brand-night .legal-page p,
html[data-public-theme="light"] body.brand-night .legal-page li,
html[data-public-theme="light"] body.brand-night .legal-table td{
  color:#303946;
}
html[data-public-theme="light"] body.brand-night .legal-table th,
html[data-public-theme="light"] body.brand-night .legal-table td::before{
  color:#6B5C4B;
}
html[data-public-theme="light"] body.brand-night .foot-social-row a,
html[data-public-theme="light"] body.brand-night .foot-social-row span{
  border-color:rgba(11,16,22,.08);
  color:#5D6876;
}
.cookie-banner{
  position:fixed;
  z-index:var(--z-overlay);
  left:0;
  right:0;
  bottom:0;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-5);
  align-items:center;
  padding:14px max(18px,calc((100vw - 1120px) / 2)) calc(14px + env(safe-area-inset-bottom));
  border:0;
  border-top:var(--border-default);
  border-radius:0;
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:0 -16px 44px rgba(11,16,22,.12);
}
.cookie-banner > div,
.cookie-modal > div,
.cookie-setting-row > div,
.cookie-setting-row > span{min-width:0}
.cookie-banner h2,
.cookie-modal h2,
.cookie-modal h3{margin:0;color:var(--color-text)}
.cookie-banner h2{font-size:var(--text-base);line-height:var(--line-heading)}
.cookie-banner p,
.cookie-modal p{margin:var(--space-1) 0 0;color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--line-body)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.cookie-actions .btn,
.cookie-actions .text-button{
  width:auto;
  min-height:44px;
  margin:0;
  padding:10px 14px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  line-height:20px;
  font-weight:650;
}
.cookie-actions .cookie-necessary{
  border-color:var(--color-border);
  background:transparent;
  color:var(--color-text);
}
.cookie-actions .cookie-analytics{
  background:var(--color-brand);
  color:#07110D;
  border-color:var(--color-brand);
}
.cookie-actions .text-button{
  border:1px solid transparent;
  background:transparent;
  color:var(--color-brand-active);
  cursor:pointer;
}
.cookie-actions .text-button:hover{text-decoration:underline}
.cookie-modal-backdrop{
  position:fixed;
  z-index:var(--z-modal);
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(11,16,22,.48);
}
.cookie-modal{
  position:relative;
  width:min(520px,100%);
  max-height:min(680px,calc(100dvh - 36px));
  overflow:auto;
  padding:22px;
  border-radius:var(--radius-lg);
  border:var(--border-default);
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:0 24px 80px rgba(11,16,22,.24);
}
.cookie-close{
  position:absolute;
  top:10px;
  right:10px;
  min-width:44px;
  min-height:44px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--color-text-secondary);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.cookie-setting-row{
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-4);
  padding:14px;
  border:var(--border-default);
  border-radius:var(--radius-md);
  background:var(--color-page);
}
.cookie-setting-row h3{font-size:15px;line-height:21px}
.cookie-setting-row strong{white-space:nowrap;color:var(--color-text-secondary);font-size:13px;line-height:20px}
.cookie-toggle-row{align-items:center;cursor:pointer}
.cookie-toggle-row input{width:22px;height:22px;accent-color:var(--color-brand)}
.cookie-modal .cookie-actions{margin-top:var(--space-5)}
.legal-table-wrap{overflow-x:auto;margin:14px 0 4px}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.legal-table th,
.legal-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.legal-table th{color:var(--muted);font-size:12px;line-height:18px;text-transform:uppercase;letter-spacing:.08em}
.inline-cookie-settings{display:inline;padding:0;border:0;background:transparent;color:var(--brand-ink);font:inherit;font-weight:650;cursor:pointer}
.inline-cookie-settings:hover{text-decoration:underline}
.inline-cookie-settings:focus-visible{outline:2px solid var(--t-brand);outline-offset:3px;border-radius:4px}
@media(max-width:720px){
  /* clip, not hidden. `overflow-x:hidden` forces overflow-y to auto, which
     turns <body> into its own scroll container -- and a sticky header then
     sticks to the body instead of the screen, so on every phone the header
     scrolled away with the page. clip stops sideways scroll the same way
     without creating a scroll container. */
  html,
  body.public{overflow-x:clip}
  body.brand-night .legal-page,
  .legal-page{
    width:calc(100dvw - 32px)!important;
    max-width:none!important;
  }
  .public-footer[data-public-footer]{
    width:100dvw;
    max-width:100dvw;
    overflow:hidden;
    padding:24px 18px 18px;
  }
  .pwa-install-card{
    margin:28px 18px 0;
    align-items:flex-start;
    flex-direction:column;
  }
  .pwa-install-actions{
    width:100%;
    flex-wrap:wrap;
  }
  .pwa-install-actions .btn{
    flex:1 1 160px;
  }
  .pwa-install-actions .text-button{
    flex:1 1 120px;
    text-align:center;
  }
  .member-pwa-install-card{
    width:auto;
    margin:8px 16px 16px;
  }
  .public-footer .foot-grid{grid-template-columns:1fr;gap:14px}
  .public-footer .foot-links{display:none}
  .foot-mobile-disclosures{display:grid;gap:4px;margin-top:16px}
  .foot-disclosure{border-top:1px solid rgba(244,241,234,.08)}
  .foot-disclosure summary{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    list-style:none;
    cursor:pointer;
  }
  .foot-disclosure summary::-webkit-details-marker{display:none}
  .foot-disclosure summary::after{content:"+";font-size:18px;line-height:1;color:var(--mute)}
  .foot-disclosure[open] summary::after{content:"-"}
  .foot-disclosure nav{display:grid;gap:2px;padding:0 0 10px}
  .foot-disclosure a,
  .foot-disclosure button{
    min-height:44px;
    display:flex;
    align-items:center;
    color:var(--mute);
    border:0;
    background:transparent;
    font:inherit;
    text-align:left;
    text-decoration:none;
  }
  .foot-social{margin-top:12px}
  .foot-social-row{gap:2px}
  .foot-legal-block{margin-top:14px;padding-top:12px;overflow-wrap:anywhere}
  .cookie-banner{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:var(--space-2);
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    max-height:min(78dvh,420px);
    overflow:auto;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .cookie-banner h2{font-size:var(--text-lg);line-height:var(--line-heading)}
  .cookie-banner p{font-size:var(--text-sm);line-height:var(--line-body)}
  .cookie-actions{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
  .cookie-actions .btn,
  .cookie-actions .text-button{width:100%;justify-content:center}
  .cookie-modal-backdrop{align-items:end;padding:10px}
  .cookie-modal{
    width:100%;
    max-height:min(82dvh,720px);
    border-radius:18px 18px 12px 12px;
    padding:22px 16px 16px;
  }
  .cookie-setting-row{padding:12px}
  .legal-table-wrap{overflow:visible}
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table td{display:block;width:100%}
  .legal-table thead{display:none}
  .legal-table tr{
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .legal-table td{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:10px;
    padding:5px 0;
    border-bottom:0;
    overflow-wrap:anywhere;
  }
  .legal-table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:12px;
    line-height:18px;
    font-weight:650;
  }
}

@media(display-mode:standalone){
  .foot{display:none}
  .app-shell{padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}
  .member-pwa-install-card,
  .public-pwa-install-card,
  .nav-install-trigger,
  .nav-install-menu,
  .nav-install-hint{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .pwa-update-card{transition:none}
}

/* Logged-in Help & feedback. This is product feedback to Tanda, not circle
   governance, so it keeps the member shell but avoids circle cards/actions. */
.feedback-shell{gap:16px}
.feedback-choice-card,.feedback-list-card,.feedback-thread-card,.feedback-success-card{
  border:1px solid var(--t-line);border-radius:16px;background:#FFFFFF;color:var(--t-ink);overflow:hidden;
}
.feedback-choice-row{
  min-height:76px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--t-line);color:inherit;text-decoration:none;
}
.feedback-choice-row:last-child{border-bottom:0}
.feedback-choice-row:hover{background:rgba(42,165,106,.05)}
.feedback-choice-icon{
  width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgba(42,165,106,.1);
  color:var(--t-brand-deep);
}
.feedback-choice-row strong,.feedback-submission-row strong{display:block;color:var(--t-ink);font-size:16px;line-height:24px;font-weight:650}
.feedback-choice-row small,.feedback-submission-row small,.feedback-submission-row em{
  display:block;color:var(--t-muted);font-size:13px;line-height:20px;font-style:normal;
}
.feedback-choice-row b{color:var(--t-muted);font-weight:500}
.feedback-error,.feedback-offline{
  margin:0;padding:10px 12px;border-radius:12px;background:rgba(226,92,92,.1);color:#B92E2E;font-size:13px;line-height:20px;
}
.feedback-offline{background:rgba(232,168,58,.14);color:#805A13}
.feedback-form{
  display:grid;gap:16px;padding:16px;border:1px solid var(--t-line);border-radius:16px;background:#FFFFFF;
}
.feedback-chip-set{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.feedback-chip-set legend{width:100%;margin:0 0 2px;color:var(--t-ink);font-weight:650;font-size:14px;line-height:22px}
.feedback-chip-set label{margin:0}
.feedback-chip-set input{position:absolute;opacity:0;pointer-events:none}
.feedback-chip-set span{
  min-height:40px;display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--t-line);
  border-radius:999px;background:#FFFFFF;color:var(--t-ink);font-size:13px;line-height:20px;font-weight:600;
}
.feedback-chip-set span small{margin-left:4px;color:var(--t-muted);font-weight:500}
.feedback-chip-set input:checked + span{border-color:var(--t-brand);background:rgba(42,165,106,.1);color:var(--t-ink)}
.feedback-chip-set input:focus-visible + span{outline:2px solid var(--t-brand);outline-offset:2px}
.feedback-circle-set{display:grid;grid-template-columns:1fr;gap:8px}
.feedback-circle-set span{width:100%;justify-content:space-between;border-radius:12px}
.feedback-field{display:grid;gap:8px;margin:0;color:var(--t-ink);font-weight:650;font-size:14px;line-height:22px}
.feedback-field textarea{
  min-height:132px;width:100%;resize:vertical;border-radius:12px;background:#FFFFFF;border:1px solid var(--t-line);
  color:var(--t-ink);padding:12px 14px;font:inherit;font-weight:400;line-height:24px;
}
.feedback-field textarea:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.14)}
/* Neutral until a send fails (owner rule, 2026-09-30); .is-error turns it red. */
.feedback-field small{color:var(--t-muted);font-size:13px;line-height:20px;font-weight:500}
.feedback-field small.is-valid{color:var(--t-brand-deep)}
.feedback-check{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--t-ink);font-size:14px;line-height:22px}
.feedback-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--t-brand)}
.feedback-check span{display:grid;gap:2px}
.feedback-check small{color:var(--t-muted);font-size:13px;line-height:20px}
.feedback-submit{min-height:52px;margin-top:8px}
.feedback-filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.feedback-filter-row a{
  display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;border:1px solid var(--t-line);
  border-radius:999px;background:#FFFFFF;color:var(--t-muted);text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap;
}
.feedback-filter-row a.is-active{border-color:var(--t-brand);background:rgba(42,165,106,.1);color:var(--t-ink)}
.feedback-submission-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--t-line);color:inherit;text-decoration:none;
}
.feedback-submission-row:last-child{border-bottom:0}
.feedback-submission-row:hover{background:rgba(42,165,106,.05)}
.feedback-success-card{padding:24px;display:grid;gap:10px;text-align:left}
.feedback-success-card h2{margin:0;color:var(--t-ink);font-size:28px;line-height:34px}
.feedback-success-card p{margin:0;color:var(--t-muted)}
.feedback-success-actions{display:grid;gap:10px;margin-top:8px}
.feedback-thread-card{padding:16px;display:grid;gap:12px}
.feedback-thread-card h3{margin:0;color:var(--t-ink);font-size:16px;line-height:24px}
.feedback-message{padding:12px;border:1px solid var(--t-line);border-radius:12px;background:#F7F5F2}
.feedback-message.is-operator{border-color:rgba(42,165,106,.3);background:rgba(42,165,106,.08)}
.feedback-message span{display:block;color:var(--t-muted);font-size:12px;line-height:18px;font-weight:650}
.feedback-message p,.feedback-thread-card>p{margin:4px 0 0;color:var(--t-ink);font-size:14px;line-height:22px}
.feedback-withdraw-form .btn{margin-top:0}
@media(max-width:560px){
  .feedback-form{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .feedback-submit{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:8}
}

/* Console feedback inbox. Public replies and internal notes are visually
   different because they are different records. */
.feedback-console-table table{min-width:980px}
.feedback-detail-grid{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start;
}
.feedback-detail-main,.feedback-detail-side{margin:0;max-width:none}
.feedback-console-thread,.feedback-console-notes{display:grid;gap:10px;margin:12px 0}
.feedback-console-thread article,.feedback-console-notes article,.feedback-console-box{
  padding:12px;border:1px solid #243041;border-radius:8px;background:#101821;color:#E7EEF6;
}
.feedback-console-thread article.is-operator{border-color:rgba(42,165,106,.34);background:rgba(42,165,106,.08)}
.feedback-console-thread span,.feedback-console-notes span,.feedback-console-box span{
  display:block;margin-bottom:5px;color:#6F8198;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
}
.feedback-console-thread p,.feedback-console-notes p,.feedback-console-box p{margin:0;color:#D6E0EC;font-size:13px;line-height:20px}
.feedback-console-reply{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.feedback-console-reply h3,.feedback-detail-side h3,.feedback-console-notes h3{margin:0;color:#F8FBFF;font-size:16px;line-height:24px}
.feedback-console-reply form,.feedback-detail-side form{display:grid;gap:10px}
.feedback-console-segment{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feedback-console-segment input{position:absolute;opacity:0;pointer-events:none}
.feedback-console-segment span{
  min-height:38px;display:grid;place-items:center;border:1px solid #243041;border-radius:8px;background:#101821;color:#B8C5D6;font-weight:650;
}
.feedback-console-segment input:checked + span{border-color:var(--t-brand);background:rgba(42,165,106,.12);color:var(--t-green-soft)}
.feedback-internal-warning{margin:0;color:#F0BF67;font-size:12px;line-height:18px}
.feedback-console-reply label,.feedback-detail-side label{
  display:grid;gap:6px;color:#8B9BB0;font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
}
.feedback-console-reply textarea,.feedback-detail-side input,.feedback-detail-side select{
  width:100%;min-height:44px;border:1px solid #243041;border-radius:8px;background:#101821;color:#E7EEF6;padding:10px;font:inherit;font-size:13px;
}
.feedback-console-reply textarea{min-height:112px;resize:vertical}
.feedback-console-reply textarea:focus,.feedback-detail-side input:focus,.feedback-detail-side select:focus{
  outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.18);
}
.feedback-side-facts{display:grid;grid-template-columns:94px minmax(0,1fr);gap:8px 10px;margin:14px 0}
.feedback-side-facts dt{color:#6F8198;font-size:11px;line-height:18px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.feedback-side-facts dd{margin:0;color:#D6E0EC;font-size:13px;line-height:20px}
.feedback-technical-context{border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
.feedback-technical-context summary{color:var(--t-green-soft);cursor:pointer}
.feedback-technical-context p{margin:8px 0 0;color:#8B9BB0;font-size:12px;line-height:18px}
@media(max-width:900px){.feedback-detail-grid{grid-template-columns:1fr}.feedback-detail-side{order:-1}}

/* ===================== Menu trigger pressed state =========================
   Every menu and drawer trigger acknowledges a tap the same way. See
   docs/INTERACTION_PERFORMANCE_STANDARD.md: pressed feedback is budgeted at
   50ms, and it was the browser's default tap highlight doing all of that work
   — which is invisible on desktop and not ours anywhere.

   Only `transform` and `opacity`: both composite, neither triggers layout, so
   the pressed frame does not depend on the panel that is about to open.

   The tap highlight is deliberately left alone. This adds a branded cue on top
   of it rather than replacing a cue that already works on touch.

   Scoped to menu triggers by design. Settings sections and other disclosures
   are not menus and are not listed here — see the component categories in the
   standard. */
.workspace-menu > summary:active,
.pulse-drawer > summary:active,
.member-manage > summary:active,
.join-request-review > summary:active,
.topbar-account > summary:active,
.nav-menu > summary:active,
.billing-row-menu > summary:active,
.access-row-menu > summary:active,
.console-operator-menu > summary:active,
[data-drawer-open]:active{
  transform:scale(.96);
  opacity:.85;
}

@media(prefers-reduced-motion:reduce){
  /* The cue stays; the movement goes. Removing the feedback entirely would
     answer "I prefer less motion" with "you get no acknowledgement", which is
     not what was asked for. */
  .workspace-menu > summary:active,
  .pulse-drawer > summary:active,
  .member-manage > summary:active,
  .join-request-review > summary:active,
  .topbar-account > summary:active,
  .nav-menu > summary:active,
  .billing-row-menu > summary:active,
  .access-row-menu > summary:active,
  .console-operator-menu > summary:active,
  [data-drawer-open]:active{
    transform:none;
    opacity:.7;
  }

  /* An infinite scale+fade on the unread badge, running for as long as the
     page is open. It was the one animation in the stylesheet with no
     reduced-motion escape. The badge itself still shows the count. */
  .pulse-badge::after{animation:none}
}

/* --- Gather approvals (S3) ------------------------------------------------ */
/* People waiting to be let in, on the step that promises to let them in. Given
   its own object rather than the roster's row treatment: this is the one thing
   on the step with somebody on the other end of it, and S11 records that when
   every block on a page shares a treatment, nothing on it outranks anything. */
/* No accent rule. This card carried the same 3px --t-accent left border as the
   blockers panel, which made attention-orange mean two opposite things on one
   flow: "this stops the circle starting" on Order and Preview, and "somebody is
   waiting, and approving is not required to start" on Gather.

   The card does not need a colour to be found -- it has a heading that names a
   person and two buttons. Accent is left to the one object that genuinely gates
   the circle, which is the whole point of reserving it. */
.setup-approvals{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;
  padding:14px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-card)}
.setup-approvals-head h3{margin:0;font-size:17px;line-height:24px;font-weight:650;color:var(--t-ink)}
.setup-approvals-head p{margin:2px 0 0}
.setup-approval-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;
  align-items:start;padding:10px 0;border-top:1px solid var(--t-line)}
.setup-approval-main strong{display:block;color:var(--t-ink);font-size:16px;line-height:24px}
.setup-approval-main p{margin:2px 0 0;font-size:13px;line-height:19px}
.setup-approval-pills{display:flex;flex-wrap:wrap;gap:6px}
/* One action group, side by side -- the same shape the People request row
   uses, so the same decision looks the same in both places. Stacked, Approve
   and Decline read as two separate offers. */
.setup-approval-actions{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;justify-content:flex-end}
.setup-approval-actions .btn{margin:0;white-space:nowrap}
.setup-approval-confirm{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--t-ink);padding:4px 0}
.setup-approval-decline > summary{cursor:pointer;list-style:none}
.setup-approval-decline > summary::-webkit-details-marker{display:none}
.setup-approval-decline-panel{display:grid;gap:8px;padding:10px 0 2px}
.people-setup-return{margin:0 0 12px}
.people-setup-return a{color:var(--t-brand-deep);font-size:13px;font-weight:650;text-decoration:none}
.people-setup-return a:hover{text-decoration:underline}
.people-setup-return a:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:8px}
@media(max-width:560px){
  /* The actions drop under the name rather than squeezing beside it: two
     buttons and a 40px avatar do not fit a 390px row without the name
     wrapping to one word per line. */
  .setup-approval-row{grid-template-columns:40px minmax(0,1fr)}
  .setup-approval-actions{grid-column:2;flex-direction:row;flex-wrap:wrap}
}

/* --- Order step: what is already saved (pass A) --------------------------- */
/* A confirmation, not a warning: the details are set and this says so. Reuses
   the inset treatment rather than inventing a fourth panel style -- S11 records
   that when every block shares a treatment nothing outranks anything, and the
   answer to that is fewer styles used deliberately, not more. */
.receiving-current{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  margin:0 0 10px;padding:10px 12px;border-radius:10px;
  background:var(--brand-soft);color:var(--t-ink);font-size:13px;line-height:20px}
.receiving-current strong{font-weight:650}
.receiving-current a{color:var(--t-brand-deep);font-weight:650;text-decoration:none}
.receiving-current a:hover{text-decoration:underline}
.receiving-current a:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:3px;border-radius:8px}

/* --- Group link: stability, the off switch, and the three absences -------- */
/* The line is a property of the link, so it sits under the actions rather than
   competing with the heading. "Turn off link" is deliberately the quietest
   thing in the card: it is reachable, because the sentence above it promises
   the link can be turned off, and it is not inviting, because it cannot be
   undone for anyone holding the old URL. */
.invite-stability{margin:10px 0 0;font-size:12px;line-height:17px;color:var(--t-muted)}
.invite-revoke{margin:6px 0 0}
.invite-revoke>summary{list-style:none;display:inline-block;padding:6px 0;
  font-size:13px;font-weight:600;color:var(--t-muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--t-line)}
.invite-revoke>summary::-webkit-details-marker{display:none}
.invite-revoke>summary:hover{color:var(--t-ink)}
.invite-revoke>summary:focus-visible{outline:2px solid var(--t-brand-deep);
  outline-offset:3px;border-radius:6px}
.invite-revoke-body{margin-top:8px;padding:12px;border-radius:10px;
  background:var(--t-accent-soft,#F7EDE6);border:1px solid var(--t-line)}
.invite-revoke-body p{margin:0 0 10px;font-size:13px;line-height:19px;color:var(--t-ink)}
.btn-confirm-off{background:var(--t-accent);color:#fff;border:0;border-radius:20px;
  padding:9px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.btn-confirm-off:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}

.invite-absent{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.invite-absent-line{margin:0;font-size:14px;line-height:20px;color:var(--t-ink)}
.invite-absent .field-hint{margin:0}

/* --- Receiving order (S1b) ----------------------------------------------- */
/* A numbered list and one button. No drag handles, no arrows: rearranging
   already happens on the roster, and adding a second way to do it here would
   be two controls for one decision. */
/* The method, above the sequence. Deliberately quiet -- a pill and a line, not
   a panel: it is the rule that produced the list, and given equal weight the two
   competed, so the method read as a second heading rather than as the caption on
   the first. */
/* `order-method`, not `receiving-method`: that name was already taken by the
   payment-method rows in _receiving_picker.html, which render on this same
   step. Sharing it merged the two rules -- this line inherited their border,
   padding and pointer cursor, so the quiet caption rendered as a panel, and my
   declarations leaked back onto their radio rows. The screen-capture checkpoint
   found it; neither stylesheet nor template would have. */
.order-method{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:6px 0 2px;font-size:13px;line-height:18px;color:var(--t-muted)}
/* No chip. A pill around the word METHOD made a caption look like a status,
   and the sequence it captions is the thing to read. */
.order-method-key{font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t-muted);flex:none}
.order-method b{color:var(--t-ink);font-weight:650}

/* --- R1: the order, arranged in place ------------------------------------- */
/* The number is drawn rather than counted by the list, because it has to change
   the instant a row moves -- a CSS counter would, but only after a reflow the
   script cannot address, and the position is the thing the organizer is
   checking. */
.receiving-order-list[data-order-list]{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}
/* Flex rather than the grid this was: the row now carries two optional things
   -- a "First" label and a readiness line -- and a hidden grid child still
   leaves its gap behind, so an ordinary row would sit a column-gap wider than
   its neighbours for a badge nobody can see. Flex simply omits them. */
.receiving-order-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid transparent;border-radius:12px;
}
/* The name does not grow, so "First" sits beside it rather than being pushed
   to the far edge; the move controls take the remaining space instead. */
.receiving-order-row .receiving-order-name{flex:0 1 auto;min-width:0}
.receiving-order-row .receiving-order-moves{margin-left:auto}
/* Says which row is first, quietly. The number already carries the position;
   this names what the position means, so it is a label rather than a second
   emphasis -- muted, not accented. */
.receiving-order-first{
  color:var(--t-muted);font-size:11.5px;font-weight:650;
  letter-spacing:.04em;text-transform:uppercase;
}
/* The readiness condition, on the row it belongs to. Its own line, indented
   past the position number so it reads as belonging to the name rather than to
   the list. 28px is the number's 18px plus the row's 10px gap. */
.receiving-order-need{
  flex:0 0 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:2px 0 0;padding-left:28px;
  font-size:13px;line-height:18px;color:var(--t-accent);
}
.receiving-order-need-act{
  color:var(--t-ink);text-decoration:underline;text-underline-offset:2px;
}
/* No rule for the ready state. There is no element to style: when details
   exist the row renders nothing here at all, so nothing reserves the space. */
.receiving-order-list.is-editing .receiving-order-row{border-color:var(--t-line);background:var(--t-card)}
.receiving-order-pos{
  min-width:18px;color:var(--t-muted);font-size:12.5px;font-weight:650;
  font-variant-numeric:tabular-nums;
}
/* Written for every row and revealed with the edit state, so the control set
   does not appear and disappear as the script loads. */
.receiving-order-moves{display:none;gap:4px}
.receiving-order-list.is-editing .receiving-order-moves{display:inline-flex}
.order-move{
  display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);
  color:var(--t-ink);cursor:pointer;
}
.order-move svg{width:16px;height:16px}
.order-move:hover:not(:disabled){border-color:var(--t-muted)}
.order-move:disabled{opacity:.35;cursor:default}
.order-move:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
/* A finger needs more than an eye does. The pill stays 32px; the target does
   not -- SC 2.5.5 wants 44px where a finger is the input. */
@media(pointer:coarse){
  .order-move{width:44px;height:44px;border-radius:12px}
}
.order-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.order-actions .btn{margin:0;width:auto}

.receiving-order-list{list-style:decimal;margin:8px 0 12px;padding-left:22px;
  display:flex;flex-direction:column;gap:4px}
.receiving-order-list li{color:var(--t-ink);font-size:15px;line-height:22px}
.receiving-order-name{font-weight:500}
.receiving-order .btn{margin:0}
.receiving-order .field-hint{margin:8px 0 0}

/* --- post-setup guide ------------------------------------------------------
   Optional configuration on a running circle. Deliberately quieter than
   anything that blocks: no accent fill, no attention dot, and it takes the
   inset ground rather than a card of its own so it reads as a note beside the
   circle rather than another thing demanding a decision. */
.setup-guide{
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-inset);
  padding:14px;
}
/* The dismiss button takes `.btn`, which is full width by default, and sat in
   a flex item told never to shrink -- so at 420px it measured 350px, pushed its
   right edge to 464, and gave the round page the only horizontal scroll on it.
   Kenya is a phone-first market, so that is the primary device profile.
   Sized to its own content, and the row may wrap, like every other row here. */
.setup-guide-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.setup-guide-dismiss .btn{width:auto;min-height:40px;margin:0;padding:8px 14px}
.setup-guide-head h3{margin:0 0 2px;font-size:15px;line-height:20px}
.setup-guide-head .muted{margin:0;font-size:13px;line-height:18px}
.setup-guide-dismiss{margin:0;flex:0 0 auto}
.setup-guide-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.setup-guide-item{
  display:flex;gap:10px;align-items:center;
  min-height:44px;  /* SC 2.5.5: each row is a link a finger has to hit */
  font-size:14px;line-height:19px;
}
/* The empty circle and the tick occupy the same box, so a row does not shift
   sideways when it completes. */
.setup-guide-mark{
  flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;
  border:1.5px solid var(--t-line);border-radius:50%;color:var(--t-brand-deep);
}
.setup-guide-mark.is-done{border-color:transparent}
.setup-guide-mark svg{width:16px;height:16px}
.setup-guide-item.is-done .setup-guide-label{color:var(--t-muted)}
a.setup-guide-label{color:var(--t-ink);text-decoration:underline;text-underline-offset:2px}
/* Collapsed by "Not now": one line, still honest about what is outstanding. */
.setup-guide-collapsed{
  display:flex;gap:8px;align-items:center;width:100%;min-height:44px;
  padding:0;border:0;background:none;color:var(--t-ink);
  font:inherit;font-size:14px;text-align:left;cursor:pointer;
}
.setup-guide-count{
  margin-left:auto;padding:2px 8px;border-radius:999px;
  background:var(--t-card);border:1px solid var(--t-line);
  color:var(--t-muted);font-size:12px;font-variant-numeric:tabular-nums;
}

/* The quiet way back into an existing account, on an invitation.

   A button rather than a link because it posts -- the destination is carried
   in a continuation row and an HttpOnly cookie, never in the URL -- and drawn
   as text because the primary action on this page is asking to join. The
   password toggles in this stylesheet are the same shape. */
.claim-signin-hint{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.claim-signin-hint form{display:inline}
.claim-signin-link{padding:0;border:0;background:transparent;color:var(--t-brand-deep);
  font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.claim-recover form{display:inline}

/* --- My circles on a desktop ---------------------------------------------- *
   The page was a 620px column at every width -- --t-canvas-max, which is the
   phone the member surfaces were drawn at -- so on a monitor it read as a
   phone page left in the middle of the screen. These widen it in two steps
   and give each row one line of hierarchy: who and what on the left, state on
   the right edge. A phone keeps the stacked card it had.

   Scoped to .circles-page throughout. The canvas cap is right for the circle
   pages, whose forms and ledgers are one column on purpose. */
.circles-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.circles-head .circles-new{width:auto;display:inline-flex;align-items:center;gap:8px;
  margin:0;min-height:44px;padding:0 20px;flex:0 0 auto}
.circles-tools{display:flex;gap:10px;align-items:center;margin:0 0 14px}
.circles-search{flex:1 1 auto;position:relative;display:flex;align-items:center;min-width:0}
.circles-search .icon{position:absolute;left:12px;color:var(--t-muted);pointer-events:none}
.circles-page .circles-search input{width:100%;min-height:44px;padding-left:38px;margin:0}
.circles-sort{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--t-muted);white-space:nowrap}
.circles-page .circles-sort select{min-height:44px;width:auto;margin:0}
.circles-tools-apply{width:auto;margin:0}
.circles-tools-apply[hidden]{display:none}
.circles-count{color:var(--t-muted);font-weight:500}
.circles-no-match{margin:0 0 10px}
.member-list-panel .member-circle-row[hidden]{display:none}

/* The row as a grid, so the state has a place of its own. On a phone the
   state sits under the facts, which is where it was; wider, it moves to the
   right edge beside the chevron. */
.member-list-panel .minimal-row.member-circle-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"glyph main chev" "glyph status chev";
  align-items:center;column-gap:14px;row-gap:6px}
.member-circle-row .member-circle-glyph{grid-area:glyph;align-self:center}
.member-circle-row .member-circle-main{grid-area:main}
.member-circle-row .member-circle-chevron{grid-area:chev}
.minimal-row .member-circle-status{grid-area:status;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px;margin:0}
.member-shell .member-circle-status small.circle-card-state{
  display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 10px;border-radius:999px;
  background:var(--t-inset);border:1px solid var(--t-line);
  color:var(--t-muted);font-size:12px;line-height:18px;font-weight:600;white-space:nowrap}
.member-shell .member-circle-status small.circle-card-state.needs{
  background:var(--t-green-tint);border-color:var(--t-brand);color:var(--t-brand-deep)}
.member-shell .member-circle-status small.circle-card-billing{
  display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--t-accent);font-weight:600}
.member-circle-main small.circle-card-due{margin-top:2px}

@media (min-width:720px){
  .app-shell > .wrap:has(.circles-page){max-width:800px}
  .member-list-panel .minimal-row.member-circle-row{
    grid-template-areas:"glyph main status chev";
    grid-template-columns:auto minmax(0,1fr) auto auto;
    padding:12px 16px;min-height:0}
  .minimal-row .member-circle-status{flex-direction:column;align-items:flex-end;justify-content:center}
  .member-list-panel .minimal-list{gap:8px}
  .member-circle-glyph{width:40px;height:40px}
}

/* The rail. Beside the list, never under it: sharing is a utility here, and a
   utility at the foot of a list is something the list trails off into. */
@media (min-width:1100px){
  .app-shell > .wrap:has(.circles-page){max-width:1120px;padding-left:32px;padding-right:32px}
  .circles-page{grid-template-columns:minmax(0,1fr) 300px;column-gap:28px;align-items:start}
  .circles-rail{position:sticky;top:calc(var(--t-topbar-h) + 16px);margin-top:18px}
}

/* A footer that belongs to the page, not the last line of the list. */
body:has(.circles-page) .app-shell > .foot{
  max-width:1120px;margin:40px auto 0;padding:18px 32px 32px;
  border-top:1px solid var(--t-line);text-align:right}
@media (max-width:719px){
  body:has(.circles-page) .app-shell > .foot{text-align:center;padding:18px 20px 32px}
}

/* --- The setup shell on a desktop ----------------------------------------- *
   Every step of setup was the 620px canvas at every width, so on a monitor
   Gather, Agree, Order and Preview were phone forms in the middle of a large
   empty field. One frame for all four: 1000px above 900, the header and rail
   stretched with it, and the primary sized to its words rather than to the
   column -- a 1000px-wide button reads as a banner, not as an action.

   Below 900px nothing here applies, so the phone keeps its full-width,
   thumb-reachable buttons. Dialogs are excluded: their buttons stack by
   design and a shrink-wrapped one beside a full-width Go back reads broken. */
.setup-state-tag{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  background:var(--t-inset);border:1px solid var(--t-line);
  color:var(--t-muted);font-size:11px;line-height:18px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
@media (min-width:900px){
  .app-shell > .wrap:has(.setup-shell){max-width:1000px;padding-left:32px;padding-right:32px}
  .setup-shell .btn.member-primary:not(dialog .btn),
  .setup-shell .setup-add-primary:not(dialog .btn),
  .setup-footer .btn{width:auto;min-width:260px;align-self:flex-start;justify-self:start}
  .setup-footer{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:20px}
  .setup-footer .setup-reassure{flex-basis:100%}
}
body:has(.setup-shell) .app-shell > .foot{
  max-width:1000px;margin:40px auto 0;padding:18px 32px 32px;
  border-top:1px solid var(--t-line);text-align:right}
@media (max-width:899px){
  body:has(.setup-shell) .app-shell > .foot{text-align:center;padding:18px 20px 32px}
}

/* --- Agree: the plan as one structured card ------------------------------- *
   On a desktop the amount and the schedule sit side by side, so the four
   fields that make the plan read as one line of decisions rather than a form
   that continues downward. A phone keeps them stacked. */
.setup-field-need{
  grid-column:1 / -1;display:flex;align-items:center;gap:6px;margin:0;
  color:var(--t-accent);font-size:13px;line-height:18px;font-weight:600}
/* Steps aside the moment a value is typed. The input carries a placeholder,
   so :placeholder-shown is exactly "empty" -- no script. */
.settings-amount-row:has([data-setup-amount]:not(:placeholder-shown)) .setup-field-need{display:none}
@media (min-width:900px){
  .setup-agree-form .setup-work-card{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:24px;align-items:start}
  .setup-agree-form .setup-work-card > *{grid-column:1 / -1}
  .setup-agree-form .setup-work-card > .settings-amount-row{grid-column:1}
  .setup-agree-form .setup-work-card > .settings-schedule-row{grid-column:2;grid-template-columns:1fr 1fr}
  .setup-agree-form .setup-more-body{display:grid;grid-template-columns:140px minmax(0,420px);column-gap:16px;row-gap:10px;align-items:center}
  .setup-agree-form .setup-more-body > label{grid-row:auto;margin:0}
}

/* --- Order: the list is the page ----------------------------------------- *
   Every row is a card with its position as a filled number, so the sequence
   is the thing the eye lands on; the method card below it is quieter, because
   it is the rule that produced the list rather than the list. */
.receiving-order-row{
  padding:10px 14px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
.receiving-order-pos{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--t-inset);border:1px solid var(--t-line);color:var(--t-ink);font-size:12.5px}
.receiving-order-row .receiving-order-name{font-weight:600;color:var(--t-ink)}
/* The readiness condition as a badge on the person, not a sentence under them.
   The dot goes: the badge's own colour says it, and the words say it again. */
.receiving-order-need{padding-left:36px}
.receiving-order-need .status-dot{display:none}
.receiving-order-need-text{
  display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
  background:var(--t-accent-tint);border:1px solid rgba(176,82,26,.3);
  color:var(--t-accent);font-size:12px;line-height:18px;font-weight:600}
.order-method-card{
  margin-top:0;padding:4px 16px;border:1px solid var(--t-line);border-radius:14px;
  background:var(--t-inset)}

/* --- Order: denser, and at rest once confirmed ---------------------------- *
   Three large cards with page ground between them read as three steps. They
   are one list, one condition on it, and the rule behind it -- so the list is
   tight and the two after it sit close. */
.setup-cluster.receiving-order{gap:6px;padding:12px 14px}
.setup-cluster.receiving-order .receiving-order-row{padding:8px 12px}
.setup-cluster.receiving-order > h3{margin:0}
.setup-cluster.receiving-order > p{margin:0}
.receiving-order-list{margin:2px 0 0}
.order-confirmed-state{
  display:inline-flex;align-items:center;gap:6px;margin-right:4px;
  color:var(--t-brand-deep);font-size:14px;font-weight:600}
.order-confirmed-state .icon-lead{width:16px;height:16px}
/* The receiving section before there is anybody to hold it: a line, not a card. */
.setup-step-body:has(> .receiving-order){gap:12px}
.setup-inline-pending{
  display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 14px;
  border-radius:12px;background:var(--t-inset);
  color:var(--t-muted);font-size:13px;line-height:19px}
.setup-inline-pending strong{color:var(--t-ink);font-weight:600}
.setup-inline-pending .icon-lead{flex:none;width:16px;height:16px;margin-top:1px}


/* --- Agree: the schedule reassures, it does not compete ------------------- */
.setup-work-card .setup-schedule-preview{
  border:0;border-radius:10px;background:var(--t-inset);padding:10px 12px;margin-top:0}
.setup-work-card .setup-schedule-preview strong{
  color:var(--t-muted);font-size:10px;line-height:14px;margin-bottom:2px}
.setup-agree-note{margin:4px 0 12px}
.setup-agree-form > .btn.member-primary{margin-top:0}

/* --- Create: what the circle is ------------------------------------------- */
.circle-type-choice{display:grid;gap:8px}
/* The wizard draws its text fields by placeholder and hides every direct label
   of a cluster; these labels *are* the control, so they are drawn. */
body:has(.member-wizard) .setup-cluster > label.circle-type-opt{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin:0}
body:has(.member-wizard) .circle-type-choice{padding:4px 0 8px}
/* The whole card is the control: the radio stays in the form for the keyboard
   and screen readers, and is not drawn. */
body:has(.member-wizard) .circle-type-opt input{
  position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}
.circle-type-opt{
  position:relative;display:grid;grid-template-columns:1fr;row-gap:2px;align-items:start;
  padding:12px 14px;border:2px solid var(--t-line);border-radius:12px;background:var(--t-card);
  cursor:pointer}
.circle-type-opt .t{font-weight:600;color:var(--t-ink)}
.circle-type-opt .d{color:var(--t-muted);font-size:13px;line-height:19px;font-weight:400}
.circle-type-opt:has(input:checked){border-color:var(--t-brand);background:var(--t-green-tint)}
.circle-type-opt:has(input:checked) .t{color:var(--t-brand-deep)}
.circle-type-opt:has(input:checked) .t::after{content:" \2713" / "";font-weight:700}
.circle-type-opt:has(input:focus-visible){outline:2px solid var(--t-brand-deep);outline-offset:2px}
@media (min-width:900px){
  .circle-type-choice{grid-template-columns:1fr 1fr}
  .circle-type-choice > legend{grid-column:1 / -1}
}
.order-method-card > summary{font-size:14px;font-weight:600;color:var(--t-ink)}
@media (min-width:900px){
  .receiving-order-need{flex:0 1 auto;padding-left:0;margin:0}
  .receiving-order-row{flex-wrap:nowrap}
  .order-method-card .order-method-form{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;align-items:end}
  .order-method-card .order-method-form > label,
  .order-method-card .order-method-form > .field-hint{grid-column:1 / -1}
}

/* A request the plan will not admit: the reason and the way past it, where
   Approve would have been. Attention, not danger -- nothing is wrong with the
   person asking, and the request stays open. */
.setup-approval-blocked{margin:0;max-width:34ch;font-size:13px;line-height:19px;
  color:var(--t-ink);padding:8px 10px;border-radius:10px;
  background:var(--t-accent-tint);border-left:3px solid var(--t-accent)}
.setup-approval-blocked a{color:var(--t-brand-deep);font-weight:600;white-space:nowrap}
/* The order method, stated rather than chosen while there is one on offer. */
.order-method-statement{margin:0;font-size:14px;line-height:20px;color:var(--t-ink)}

/* A submit that has been sent and is waiting on the server (shell.js). Not
   the disabled look -- nothing is wrong -- just quieter, with a wait cursor,
   so a second press is visibly pointless rather than silently refused. */
.btn.is-pending,button.is-pending{opacity:.72;cursor:progress}

/* An order reopened by a new member (setup.html). Attention, not an error:
   nothing was lost, one decision is waiting. */
.receiving-order-reopened{margin:0 0 8px;padding:8px 12px;border-radius:10px;
  background:var(--t-accent-tint);border-left:3px solid var(--t-accent);
  color:var(--t-ink);font-size:13px;line-height:19px}

/* The workspace menu, grouped by intent (circle_workspace.html). Light
   headings rather than coloured blocks: they name a group, they are not
   controls. The note replaces Leave for a sole admin. */
.cockpit-shell .workspace-menu-panel .menu-group{
  margin:8px 12px 2px;font-size:11px;line-height:16px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.cockpit-shell .workspace-menu-panel .menu-group:first-of-type{margin-top:4px}
.cockpit-shell .workspace-menu-panel .menu-note{
  margin:6px 12px 4px;font-size:12.5px;line-height:18px;color:var(--t-muted)}
.cockpit-shell .workspace-menu-panel .menu-note a{display:inline;padding:0;color:var(--t-brand-deep)}

/* A member the old next-receiver rule passed over, now paid (workspace). */
.next-round-passed-over{margin:6px 0 0;padding:8px 10px;border-radius:10px;
  background:var(--t-accent-tint);border-left:3px solid var(--t-accent);
  color:var(--t-ink);font-size:13px;line-height:19px}

/* Removing or leaving while the open round pays you (seat_succession,
   leave_circle): who the round goes to instead, before the press. */
.succession-live-round{margin:0 0 12px;padding:10px 12px;border-radius:10px;
  background:var(--t-accent-tint);border-left:3px solid var(--t-accent);
  color:var(--t-ink);font-size:14px;line-height:20px}

/* Finish later and the line under it are one quiet thought, not a link and a
   paragraph a row apart. */
.setup-shell .setup-footer{row-gap:0}
.setup-shell .setup-footer .setup-reassure{margin-top:6px;font-size:13px;line-height:18px;color:var(--t-muted)}

/* Who receives sooner when somebody goes: a name and the move, one per line. */
.succession-moves{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:4px}
.succession-moves li{display:flex;justify-content:space-between;gap:12px;
  padding:8px 12px;border-radius:10px;background:var(--t-inset);font-size:14px;line-height:20px}
.succession-moves .n{font-weight:600;color:var(--t-ink)}
.succession-moves .r{color:var(--t-muted);white-space:nowrap}

/* Somebody new in a departed member's place: one line and its share button. */
.successor-waiting{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.successor-waiting li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border:1px dashed var(--t-line);border-radius:12px;background:var(--t-inset)}
.successor-waiting p{margin:0;font-size:14px;line-height:20px}
@media (max-width:599px){.successor-waiting li{flex-direction:column;align-items:flex-start}}

/* Create step two: the three fields of the Circle section are labelled where
   people can see them. The wizard hides a cluster's labels and leans on
   placeholders, which left "Local name" with no heading at all -- its
   suggestion chips read as a choice of circle type. */
body:has(.member-wizard) [data-create-step-two] .setup-cluster > label:not(.circle-type-opt){
  position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
  margin:10px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-muted)}
body:has(.member-wizard) [data-create-step-two] .setup-cluster > label:first-of-type{margin-top:0}
body:has(.member-wizard) [data-create-step-two] .setup-cluster > label.optional-label em{
  text-transform:none;letter-spacing:0;font-weight:600}

/* Change round: the rounds still to come, as a row of choices. */
.order-move-rounds{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.order-move-round{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);
  color:var(--t-ink);font-size:14px;font-weight:600;text-decoration:none}
.order-move-round.is-current{border-style:dashed;color:var(--t-muted)}
.order-move-round.is-chosen{border-color:var(--t-brand);background:var(--t-green-tint);color:var(--t-brand-deep)}
.order-move-round:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.succession-moves .r.is-later{color:var(--t-accent)}

/* Gather: invited and not joined yet is a count and the way to Manage invitations. */
.setup-roster-invited{margin:10px 0 0;font-size:13px;line-height:19px;color:var(--t-muted)}
.setup-roster-invited a{font-weight:600}
.setup-approvals-head h3 .count-badge{margin-left:6px;vertical-align:1px}

/* Gather's share row on a desktop: WhatsApp and Copy link side by side at one
   height. The primary sized to its words while Copy link sat alone in a
   three-column grid beneath it, so the two never matched. */
.circle-invite-row{display:grid;gap:8px}
@media (min-width:900px){
  body:has(.setup-shell) .circle-invite-row{display:flex;align-items:stretch;gap:8px}
  body:has(.setup-shell) .circle-invite-row .circle-invite-primary{width:auto;min-width:220px}
  body:has(.setup-shell) .circle-invite-row .circle-invite-secondary{display:flex}
  body:has(.setup-shell) .circle-invite-row .circle-invite-secondary .btn{
    min-height:0;height:100%;min-width:160px;font-size:14px;border-radius:16px}
}

/* Create step two: the Circle section's fields are labelled now, so its
   legend would read "CIRCLE" over "CIRCLE NAME". Kept for screen readers. */
body:has(.member-wizard) [data-create-step-two] .setup-cluster:not(.circle-type-choice) > legend{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Gather: where the group stands, in one row on a desktop. */
.gather-status{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.gather-status .setup-blockers,.gather-status .people-target{margin:0}
@media (min-width:900px){
  .gather-status{flex-direction:row;align-items:stretch}
  .gather-status .setup-blockers{flex:1 1 auto}
  .gather-status .people-target{flex:0 0 280px}
}
/* People: readiness named; one action shown as itself, not a menu of one. */
.receiving-line-key{font-size:12px;color:var(--t-muted)}
.member-action-single{display:flex;gap:6px;flex-wrap:wrap}
.member-action-single form{margin:0}

/* --- Preview: what blocks the start, then the snapshot as a checklist ------ */
.setup-action-required{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  margin:0 0 14px;padding:14px 16px;border:1px solid rgba(176,82,26,.28);border-radius:14px;
  background:var(--t-accent-tint)}
.setup-action-required-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--t-card);color:var(--t-accent)}
.setup-action-required strong{display:block;color:var(--t-ink);font-size:15px}
.setup-action-required p{margin:2px 0 0;color:var(--t-ink);font-size:14px;line-height:20px}
.setup-action-required-fix{margin:0;white-space:nowrap}
@media (max-width:599px){
  .setup-action-required{grid-template-columns:auto 1fr}
  .setup-action-required-fix{grid-column:1 / -1}
}
/* Fixed tracks, so every row's columns line up: each row is its own grid. */
.setup-checklist .setup-check-row{display:grid;
  grid-template-columns:36px minmax(0,1fr) 22px minmax(0,1fr) 112px;gap:12px;align-items:center}
.setup-checklist .setup-check-value{justify-self:start;text-align:left}
.setup-check-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--t-green-tint);color:var(--t-brand-deep)}
.setup-check-state{display:inline-grid;place-items:center;width:22px;height:22px}
.setup-check-state.is-ok{color:var(--t-brand-deep)}
.setup-check-state.is-attention{color:var(--t-accent)}
.setup-check-row.is-unresolved .setup-check-value{color:var(--t-accent)}
.setup-check-fix{justify-self:end;font-weight:600}
@media (max-width:599px){
  .setup-checklist .setup-check-row{grid-template-columns:36px minmax(0,1fr) 22px;row-gap:4px}
  .setup-check-value{grid-column:2 / 3}
  .setup-check-fix{grid-column:3 / 4;justify-self:end}
}

/* Help & feedback: one readable card on a desktop, and an error only after a
   failed send. */
.feedback-shell .feedback-choice-card,.feedback-shell .feedback-form,.feedback-shell .feedback-list-card{max-width:740px}
.feedback-field small.is-error{color:#B92E2E;font-weight:600}
.feedback-circle-search input{width:100%;min-height:44px}
.feedback-empty{padding:18px 16px}
.feedback-empty p{margin:0 0 12px}
.feedback-empty-actions{display:flex;flex-wrap:wrap;gap:8px}
/* "Change" beside a chosen circle: a small control, not a second big button. */
.feedback-circle-set .btn.feedback-circle-change{width:auto;justify-self:start;align-self:flex-start;
  min-height:36px;padding:6px 14px;font-size:13px;box-shadow:none}

/* Preview (owner mockup): "Finish later" and the line under it centred beneath
   the checklist -- the step's last word, not a peer of Start. */
body:has(.setup-checklist) .setup-shell .setup-footer{justify-content:center;text-align:center;align-items:center}
body:has(.setup-checklist) .setup-shell .setup-footer .setup-reassure{text-align:center}
/* ...and Start Round 1 across the card, its reason centred under it. */
body:has(.setup-checklist) .setup-shell .setup-step-body > .btn.member-primary.setup-add-primary{width:100%;max-width:none;align-self:stretch}
body:has(.setup-checklist) .setup-step-body > .setup-add-primary + .field-hint{text-align:center}

/* --- Buttons: one ergonomic shape (owner direction, 2026-09-30) ------------ *
   A thumb-sized pill for the action a screen exists for, a press that feels
   pressed, and a ring that shows where the keyboard is. Row actions reach the
   44px target. On a phone the step's Continue sits in a bar pinned above the
   thumb rather than wherever the page happens to end. */
:is(.member-shell,.member-auth,.member-form-shell) .btn,
.member-primary,.setup-add-primary{
  border-radius:999px;font-weight:600;letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .15s ease,box-shadow .15s ease,transform .08s ease}
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
.member-primary:not(:disabled),.setup-add-primary:not(:disabled){
  min-height:52px;padding-left:24px;padding-right:24px;border-radius:999px;
  box-shadow:0 1px 2px rgba(15,31,38,.14),0 6px 16px -6px rgba(15,31,38,.35)}
@media (min-width:900px){
  :is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(.is-incomplete):not(:disabled),
  .member-primary:not(:disabled),.setup-add-primary:not(:disabled){min-height:48px}
}
@media (hover:hover){
  :is(.member-shell,.member-auth,.member-form-shell) .btn:not(.ghost):not(.secondary):not(:disabled):hover,
  .member-primary:not(:disabled):hover,.setup-add-primary:not(:disabled):hover{
    box-shadow:0 2px 4px rgba(15,31,38,.16),0 10px 22px -8px rgba(15,31,38,.42)}
}
:is(.member-shell,.member-auth,.member-form-shell) .btn:not(:disabled):active,
.member-primary:not(:disabled):active,.setup-add-primary:not(:disabled):active{transform:scale(.98);box-shadow:none}
:is(.member-shell,.member-auth,.member-form-shell) .btn:focus-visible,
.member-primary:focus-visible,.setup-add-primary:focus-visible{outline:3px solid var(--t-brand);outline-offset:2px}
:is(.member-shell,.member-auth,.member-form-shell) .btn.ghost,.circle-invite-secondary .btn.ghost{min-height:44px;border-width:1.5px;border-radius:999px}
:is(.member-shell,.member-auth,.member-form-shell) .btn.table-actions,
.setup-check-fix,.setup-blocker-fix,.pill-action{min-height:44px;display:inline-flex;align-items:center}
/* Forward actions say which way they go. */
[data-forward]::after{content:"\2192" / "";margin-left:8px;transition:transform .15s ease}
@media (hover:hover){[data-forward]:hover::after{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  :is(.member-shell,.member-auth,.member-form-shell) .btn,.member-primary,.setup-add-primary,[data-forward]::after{transition:none}
  :is(.member-shell,.member-auth,.member-form-shell) .btn:active,.member-primary:active,.setup-add-primary:active{transform:none}
}
/* The step's Continue, pinned in the thumb zone on a phone. */
@media (max-width:599px){
  .setup-shell .setup-footer:has(.setup-continue){position:sticky;bottom:0;z-index:5;
    margin-left:-16px;margin-right:-16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--t-bg);box-shadow:0 -8px 20px -12px rgba(15,31,38,.3)}
  .setup-shell .setup-footer:has(.setup-continue) .setup-continue{width:100%}
}

/* Keyboard focus is always a ring (product-wide rule, 2026-09-30). These
   answered :focus-visible with a colour or background change alone -- or with
   nothing -- which is easy to miss on a phone-bright screen and invisible to
   anyone who cannot tell the two greens apart. Keyboard only: a tap or click
   does not match :focus-visible, so nothing changes for touch. */
.member-provider-button:focus-visible,.nav-install-menu:focus-visible,.theme-toggle:focus-visible,
.cockpit-shell .workspace-menu-panel button:focus-visible,.profile-link:focus-visible,
.bottom-nav-item:focus-visible,.cockpit-shell .round-warning a:focus-visible,
.rotation-calendar:focus-visible,.confirm-chip .chip-yes:focus-visible,.confirm-chip .chip-no:focus-visible{
  outline:2px solid var(--t-brand-deep);outline-offset:2px}
.market-select-wrap:focus-within{outline:2px solid var(--t-brand-deep);outline-offset:2px;border-radius:12px}

/* Transfer organizer on Admins: a quiet section, one confirm per admin. */
.handover{margin-top:18px;padding-top:14px;border-top:1px solid var(--t-line);display:grid;gap:8px}
.handover h3{margin:0}
.handover-choice > summary{list-style:none;width:max-content;cursor:pointer}
.handover-choice > summary::-webkit-details-marker{display:none}
.handover-choice form{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--t-inset);display:grid;gap:10px}
.handover-choice form p{margin:0}
.handover-pending{margin:0}

/* --- Country and currency picker (market-picker.js) ----------------------- *
   The field says what is chosen; choosing happens in a dialog, a sheet on a
   phone, so a list of countries never pushes the form around. The country
   code is a badge: Windows draws flag emoji as two letters. */
.market-trigger{display:flex;width:100%;min-height:52px;align-items:center;padding:10px 14px;
  border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);color:var(--t-ink);
  font:inherit;text-align:left;cursor:pointer}
.market-trigger:hover{border-color:var(--t-brand)}
.market-trigger:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.market-trigger::after{content:"\203A" / "";margin-left:auto;padding-left:10px;color:var(--t-muted);font-size:20px;line-height:1}
.market-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;flex:1}
.market-badge{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:7px;
  background:var(--t-green-tint);color:var(--t-brand-deep);font-size:12px;font-weight:700;letter-spacing:.04em}
.market-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.market-money{color:var(--t-muted);font-size:14px;white-space:nowrap}
.market-dialog{width:min(480px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 64px));padding:0;
  border:1px solid var(--t-line);border-radius:18px;background:var(--t-card);color:var(--t-ink);
  box-shadow:0 24px 64px rgba(11,16,22,.22)}
.market-dialog[open]{display:flex;flex-direction:column}
.market-dialog::backdrop{background:rgba(15,31,38,.42)}
.market-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
.market-dialog-close{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:24px;cursor:pointer;color:var(--t-muted)}
.market-dialog-close:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:2px}
.market-search{margin:0 18px 10px;min-height:48px;padding:0 14px;border:1px solid var(--t-line);border-radius:12px;font:inherit}
.market-search:focus{outline:0;border-color:var(--t-brand);box-shadow:0 0 0 3px rgba(42,165,106,.16)}
.market-list{list-style:none;margin:0;padding:0 10px 12px;overflow:auto}
.market-choice{display:flex;width:100%;min-height:52px;align-items:center;padding:8px 10px;border:0;border-radius:12px;
  background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.market-choice:hover{background:var(--t-inset)}
.market-choice:focus-visible{outline:2px solid var(--t-brand-deep);outline-offset:-2px}
.market-choice[aria-selected="true"]{background:var(--t-green-tint)}
.market-empty{margin:0 18px 16px;color:var(--t-muted)}
@media (max-width:599px){
  .market-dialog{width:100vw;max-width:none;max-height:85vh;margin:auto 0 0;border-radius:18px 18px 0 0}
}

/* Agree: the currency sits inside the amount field as its unit. */
.amount-field{position:relative}
.amount-field input{padding-right:64px}
.amount-suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--t-muted);font-weight:600;font-size:15px;pointer-events:none}
.amount-currency-note{margin:6px 0 0;font-size:13px;line-height:18px;color:var(--t-muted)}
.amount-currency-note a{font-weight:600}
.setup-work-card .settings-amount-row{grid-template-columns:minmax(0,1fr)}
.country-form{display:grid;gap:10px;max-width:520px}

/* Landing refresh (owner mockup 2026-09-30). Built on the public theme's own
   variables (--card, --paper, --mute, --green), which the light theme
   redefines, so each rule below serves both themes. The handwritten notes use
   whatever script face the device already has: no web font, no request. */
body.brand-night .home-accent{color:var(--green)}
body.brand-night .home-trust{list-style:none;padding:0}
body.brand-night .home-trust li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border:1px solid rgba(244,241,234,.1);border-radius:999px;background:rgba(244,241,234,.03)}
body.brand-night .home-trust li .home-icon{color:var(--green);flex:none}
body.brand-night .home-trust li span,
html[data-public-theme="light"] body.brand-night .home-trust li span{padding:0;border:0;background:none}
html[data-public-theme="light"] body.brand-night .home-trust li{border-color:rgba(11,16,22,.1);background:rgba(255,255,255,.7)}
body.brand-night .home-early-bird{justify-content:flex-start;padding:14px 16px;border-radius:18px}
body.brand-night .home-early-bird > div{flex:1}
body.brand-night .home-early-bird-icon{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(42,165,106,.14);color:var(--green)}
.home-phone-wrap{position:relative;display:grid;justify-items:center;gap:6px}
body.brand-night .home-phone{border:8px solid #1B2430;border-radius:34px;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
html[data-public-theme="light"] body.brand-night .home-phone{border-color:#0B1016}
.home-progress{display:grid;gap:5px;margin:10px 0 4px}
.home-progress-bar{display:block;height:6px;border-radius:999px;background:rgba(127,140,155,.25);overflow:hidden}
.home-progress-bar > span{display:block;height:100%;border-radius:inherit;background:var(--green, var(--t-brand))}
.home-progress small{font-size:12px;color:var(--mute)}
.home-note{margin:0;font-family:var(--t-font-script);font-size:18px;line-height:1.25;color:var(--green);transform:rotate(-4deg)}
.home-note-phone{justify-self:end;margin-right:4px}
body.brand-night .home-steps{list-style:none;margin:22px 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.brand-night .home-steps li{position:relative;display:grid;align-content:start;gap:8px;padding:20px;border:1px solid rgba(244,241,234,.08);border-radius:20px;background:var(--card)}
html[data-public-theme="light"] body.brand-night .home-steps li{border-color:rgba(11,16,22,.08)}
body.brand-night .home-steps li:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:34px;color:var(--green);font-size:18px}
body.brand-night .home-steps h3{margin:0;font-size:17px;line-height:24px;color:var(--paper)}
body.brand-night .home-steps p{margin:0;color:var(--mute);font-size:14px;line-height:21px}
body.brand-night .home-steps .num{font-size:12px;font-weight:650;letter-spacing:.08em;color:var(--mute)}
.home-step-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(42,165,106,.14);color:var(--green)}
body.brand-night .home-control{padding:28px;border-radius:24px;background:var(--card);border:1px solid rgba(42,165,106,.22)}
body.brand-night .home-control .mkt-eyebrow{text-transform:uppercase;letter-spacing:.12em}
.home-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:14px}
.home-control-grid .home-icon{color:var(--green)}
body.brand-night .home-control-grid h3{margin:8px 0 4px;font-size:16px;line-height:22px;color:var(--paper)}
body.brand-night .home-control-grid p{margin:0;font-size:14px;line-height:21px;color:var(--mute)}
.home-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 12px}
body.brand-night .home-price-card{display:grid;gap:4px;padding:18px;border-radius:18px;background:var(--card);border:1px solid rgba(244,241,234,.08)}
html[data-public-theme="light"] body.brand-night .home-price-card{border-color:rgba(11,16,22,.08)}
body.brand-night .home-price-card.is-featured{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.home-price-label{font-size:13px;color:var(--mute)}
body.brand-night .home-price-card strong{font-size:28px;line-height:34px;color:var(--paper)}
.home-price-card small{font-size:13px;color:var(--mute)}
body.brand-night .home-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;text-align:left}
body.brand-night .home-cta .mkt-actions{justify-content:flex-start}
.home-cta-art{display:grid;justify-items:center;gap:4px;color:var(--mute)}
.home-cta-art .home-cta-pot{fill:var(--green)}
@media (max-width:760px){
  body.brand-night .home-steps,.home-control-grid,.home-price-grid{grid-template-columns:1fr}
  body.brand-night .home-steps li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px}
  body.brand-night .home-cta{grid-template-columns:1fr;text-align:center}
  body.brand-night .home-cta .mkt-actions{justify-content:center}
  body.brand-night .home-control{padding:20px}
}
/* The headline's second line is grey by an older `span + span` rule in both
   themes; these outrank it. On light, green type is --t-brand-dim: --t-brand
   is fill only (3.14:1) and would fail AA as text. */
html body.brand-night .identity-headline span.home-accent{color:var(--green)}
html[data-public-theme="light"] body.brand-night .identity-headline span.home-accent,
html[data-public-theme="light"] body.brand-night .home-note{color:var(--t-brand-dim)}
/* Landing alignment. The pricing teaser carried an 820px cap from when it was
   a lone lockup, and centred its lead inside that, so the section sat 150px in
   from the ones above it and its paragraph a further 70px in from its heading.
   The "Known by many names" label picked up a pill's padding and wash from the
   later `.market-picker > span` rules, drawn as a band wider than the chips. */
body.brand-night .price-teaser.home-pricing{max-width:none}
body.brand-night .home-pricing .mkt-lead{margin-inline:0;justify-self:start}
body.brand-night .identity-picker > span,
html[data-public-theme="light"] body.brand-night .identity-picker > span{padding:0;border:0;background:none}

/* ------------------------------------------------------------------------ *
   Public site header, 2026-10-02: mark + wordmark on the left, a side drawer
   opened from the top right at every width.

   The header's own background moved to ::before. backdrop-filter on an
   element makes it the containing block for its position:fixed descendants,
   which would pin the drawer and its backdrop inside a 68px bar; on a
   pseudo-element it blurs the same pixels and contains nothing.

   Every selector is prefixed with `html body.public.brand-night` so it wins
   over the four earlier generations of this bar without !important.
 * ------------------------------------------------------------------------ */
html body.public.brand-night header.public-topbar{
  position:sticky;
  top:0;
  z-index:40;
  isolation:isolate;
  max-width:none;
  height:68px;
  margin:0;
  padding:0 max(16px,calc((100vw - 1200px)/2 + 24px));
  flex-wrap:nowrap;
  display:flex;
  align-items:center;
  gap:16px;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:0;
  box-shadow:none;
}
html body.public.brand-night header.public-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(11,16,22,.94),rgba(11,16,22,.84));
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(244,241,234,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
html body.public.brand-night header.public-topbar::after{
  /* A hairline of brand green under the bar, brightest at the mark. */
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(42,165,106,.55) 22%,rgba(42,165,106,.12) 70%,transparent);
  pointer-events:none;
}
html[data-public-theme="light"] body.public.brand-night header.public-topbar::before{
  background:linear-gradient(180deg,rgba(247,245,242,.96),rgba(247,245,242,.88));
  border-bottom-color:rgba(11,16,22,.08);
  box-shadow:0 10px 30px rgba(11,16,22,.06);
}

/* --- the lockup ---------------------------------------------------------- */
html body.public.brand-night .site-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
  color:var(--paper);
  text-decoration:none;
}
html body.public.brand-night .site-brand-mark{
  display:block;
  width:38px;
  height:38px;
  border-radius:11px;
  box-shadow:0 0 0 1px rgba(42,165,106,.35),0 6px 18px rgba(42,165,106,.22);
  transition:transform .2s ease,box-shadow .2s ease;
}
html body.public.brand-night a.site-brand:hover .site-brand-mark,
html body.public.brand-night a.site-brand:focus-visible .site-brand-mark{
  transform:rotate(-6deg) scale(1.04);
  box-shadow:0 0 0 1px rgba(42,165,106,.6),0 8px 24px rgba(42,165,106,.32);
}
html body.public.brand-night .site-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
html body.public.brand-night .site-brand-name{
  font-size:1.42rem;
  font-weight:720;
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--paper);
  background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 55%,var(--t-brand) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* --t-brand is fill only on a light ground (3.14:1), so the wordmark's green
   end is the deep green there. */
html[data-public-theme="light"] body.public.brand-night .site-brand-name{
  background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 55%,var(--t-brand-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
html body.public.brand-night .site-brand-tag{
  margin-top:4px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap;
}

/* --- inline links and actions ------------------------------------------- */
html body.public.brand-night header.public-topbar .public-nav{
  margin:0 auto;
  gap:2px;
  flex-wrap:nowrap;
}
html body.public.brand-night header.public-topbar .public-nav a{
  position:relative;
  padding:8px 11px;
  border-radius:999px;
  border-bottom:0;
  white-space:nowrap;
}
html body.public.brand-night header.public-topbar .public-nav a:hover,
html body.public.brand-night header.public-topbar .public-nav a[aria-current="page"]{
  color:var(--paper);
  background:rgba(42,165,106,.12);
  text-decoration:none;
}
html body.public.brand-night header.public-topbar .public-actions{
  margin-left:0;
  gap:8px;
}
html body.public.brand-night header.public-topbar .btn.nav-cta{
  border-radius:999px;
  padding:8px 18px;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(42,165,106,.25);
}

/* --- the menu button, top right ----------------------------------------- */
html body.public.brand-night header.public-topbar .nav-menu{
  display:block;
  margin-left:0;
}
html body.public.brand-night .nav-menu > summary{
  position:relative;
  z-index:2;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 16px 0 13px;
  border:1px solid rgba(244,241,234,.14);
  border-radius:999px;
  background:rgba(244,241,234,.04);
  color:var(--paper);
  font-size:.9rem;
  font-weight:600;
  transition:border-color .2s ease,background-color .2s ease;
}
html body.public.brand-night .nav-menu > summary:hover,
html body.public.brand-night .nav-menu > summary:focus-visible{
  border-color:rgba(42,165,106,.6);
  background:rgba(42,165,106,.1);
  outline:0;
}
html[data-public-theme="light"] body.public.brand-night .nav-menu > summary{
  border-color:rgba(11,16,22,.14);
  background:#FFFFFF;
}
html body.public.brand-night .nav-menu-bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:18px;
}
html body.public.brand-night .nav-menu-bars span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
html body.public.brand-night .nav-menu-bars span:nth-child(2){
  width:70%;
  margin-left:auto;
  background:var(--t-brand);
}

/* The open summary becomes the backdrop: a tap anywhere outside the panel
   lands on it and toggles the <details> shut, with no script involved. */
html body.public.brand-night .nav-menu[open] > summary::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(4,7,10,.56);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  cursor:default;
}
body.public:has(.nav-menu[open]){overflow:hidden}
/* The shared pressed state scales the trigger with a transform, and a
   transformed element becomes the containing block for its position:fixed
   descendants -- so on an open drawer the backdrop above shrank to the size of
   the button the moment it was pressed, the release landed on the page behind,
   and a tap outside never closed the drawer. While open, the press keeps its
   opacity cue and drops the transform. */
html body.public.brand-night .nav-menu[open] > summary:active{transform:none}

/* --- the drawer ---------------------------------------------------------- */
html body.public.brand-night .nav-menu .nav-menu-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  z-index:3;
  width:min(360px,88vw);
  margin:0;
  padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--card);
  border:0;
  border-left:1px solid rgba(244,241,234,.08);
  border-radius:20px 0 0 20px;
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  animation:nav-drawer-in .26s cubic-bezier(.2,.8,.2,1);
}
html[data-public-theme="light"] body.public.brand-night .nav-menu .nav-menu-panel{
  border-left-color:rgba(11,16,22,.08);
  box-shadow:-24px 0 60px rgba(11,16,22,.14);
}
@keyframes nav-drawer-in{
  from{transform:translateX(100%);opacity:.6}
  to{transform:none;opacity:1}
}
html body.public.brand-night .nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 4px 14px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(42,165,106,.22);
}
html body.public.brand-night .nav-drawer-brand .site-brand-mark{width:32px;height:32px;border-radius:9px}
html body.public.brand-night .nav-drawer-brand .site-brand-name{font-size:1.2rem}
html body.public.brand-night .nav-drawer-close{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  background:transparent;
  color:var(--paper);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
html[data-public-theme="light"] body.public.brand-night .nav-drawer-close{border-color:rgba(11,16,22,.12)}
html body.public.brand-night .nav-drawer-close:hover,
html body.public.brand-night .nav-drawer-close:focus-visible{
  border-color:rgba(42,165,106,.6);
  outline:0;
}
html body.public.brand-night .nav-drawer-heading{
  margin:14px 12px 4px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
html body.public.brand-night .nav-menu-panel a:not(.btn),
html body.public.brand-night .nav-menu-panel .theme-toggle{
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border-left:3px solid transparent;
  color:var(--paper);
  font-size:.98rem;
  font-weight:500;
  text-decoration:none;
}
html body.public.brand-night .nav-menu-panel a:not(.btn):hover,
html body.public.brand-night .nav-menu-panel a[aria-current="page"],
html body.public.brand-night .nav-menu-panel .theme-toggle:hover{
  background:rgba(42,165,106,.1);
}
html body.public.brand-night .nav-menu-panel a[aria-current="page"]{
  border-left:3px solid var(--t-brand);
  font-weight:650;
}
html body.public.brand-night .nav-menu-panel .btn{
  min-height:46px;
  margin:6px 0 0;
  border-radius:999px;
  justify-content:center;
}
html body.public.brand-night .nav-menu-panel .theme-toggle{
  gap:10px;
  justify-content:flex-start;
}

/* --- widths --------------------------------------------------------------- */
@media(max-width:1180px){
  /* The drawer carries every one of these, so the bar keeps its room. */
  html body.public.brand-night header.public-topbar .public-nav{display:none}
  html body.public.brand-night header.public-topbar .public-actions{margin-left:auto}
}
@media(max-width:760px){
  html body.public.brand-night header.public-topbar{height:64px}
  html body.public.brand-night header.public-topbar .nav-menu{margin-left:auto}
  html body.public.brand-night header.public-topbar .nav-install-mobile:not([hidden]) + .nav-menu{margin-left:0}
}
@media(max-width:480px){
  html body.public.brand-night .site-brand-tag{display:none}
  html body.public.brand-night .nav-menu-label{display:none}
  html body.public.brand-night .nav-menu > summary{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night .nav-menu .nav-menu-panel{animation:none}
  html body.public.brand-night .site-brand-mark{transition:none}
}

/* ------------------------------------------------------------------------ *
   Light by default, 2026-10-02.

   The public site starts light (public_base.html puts data-public-theme="light"
   on <html> from the server) and dark is the visitor's choice. Light is a white
   field that warms slightly toward the fold, with the faintest brand tint at
   the top right; dark keeps the night canvas it always had.
 * ------------------------------------------------------------------------ */
html[data-public-theme="light"] body.public.brand-night{
  background:#FFFFFF;
}
html[data-public-theme="light"] body.public.brand-night header.public-topbar::before{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.86));
}

/* --- the theme switch, immediately left of Menu, at every width ----------- */
html body.public.brand-night header.public-topbar .nav-theme-utility{
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(244,241,234,.14);
  border-radius:999px;
  background:rgba(244,241,234,.04);
  color:var(--paper);
  transition:border-color .2s ease,background-color .2s ease,transform .25s ease;
}
html[data-public-theme="light"] body.public.brand-night header.public-topbar .nav-theme-utility{
  border-color:rgba(11,16,22,.14);
  background:#FFFFFF;
}
html body.public.brand-night header.public-topbar .nav-theme-utility:hover,
html body.public.brand-night header.public-topbar .nav-theme-utility:focus-visible{
  border-color:rgba(42,165,106,.6);
  background:rgba(42,165,106,.1);
  transform:rotate(-14deg);
  outline:0;
}
html body.public.brand-night header.public-topbar .nav-theme-utility svg{width:19px;height:19px}
@media(max-width:760px){
  /* The actions collapse to the theme switch alone; Sign in and Start a
     circle are in the drawer. */
  html body.public.brand-night header.public-topbar .public-actions{
    display:flex;
    margin-left:auto;
    gap:0;
  }
  html body.public.brand-night header.public-topbar .public-actions .nav-signin,
  html body.public.brand-night header.public-topbar .public-actions .nav-cta{display:none}
  html body.public.brand-night header.public-topbar .nav-menu{margin-left:8px}
  html body.public.brand-night header.public-topbar .nav-install-mobile:not([hidden]){margin-left:8px}
  html body.public.brand-night header.public-topbar .nav-install-mobile:not([hidden]) + .nav-menu{margin-left:8px}
}

/* --- the drawer's close control ----------------------------------------- */
html body.public.brand-night .nav-drawer-close{
  width:42px;
  height:42px;
  position:relative;
  z-index:1;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
html body.public.brand-night .nav-drawer-close:hover,
html body.public.brand-night .nav-drawer-close:focus-visible{
  background:rgba(42,165,106,.12);
  transform:rotate(90deg);
}

/* ------------------------------------------------------------------------ *
   Footer
 * ------------------------------------------------------------------------ */
html body.public.brand-night .public-footer[data-public-footer]{
  position:relative;
  margin-top:48px;
  padding:56px max(18px,calc((100vw - 1120px)/2 + 24px)) 26px;
  background:
    radial-gradient(900px 320px at 12% 0%,rgba(42,165,106,.10),transparent 70%),
    linear-gradient(180deg,#0E151D 0%,#0A0F14 100%);
  border-top:0;
}
html body.public.brand-night .public-footer[data-public-footer]::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(42,165,106,.6) 25%,rgba(244,241,234,.1) 70%,transparent);
}
html[data-public-theme="light"] body.public.brand-night .public-footer[data-public-footer]{
  background:
    radial-gradient(900px 320px at 12% 0%,rgba(42,165,106,.08),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,#F2F8F4 100%);
}
html[data-public-theme="light"] body.public.brand-night .public-footer[data-public-footer]::before{
  background:linear-gradient(90deg,transparent,rgba(20,123,73,.45) 25%,rgba(11,16,22,.08) 70%,transparent);
}
html body.public.brand-night .public-footer .foot-grid{
  gap:40px;
}
html body.public.brand-night .public-footer .foot-brand{
  gap:12px;
  padding-right:12px;
}
html body.public.brand-night .public-footer .foot-brand .public-lockup img{width:132px;height:auto}
html body.public.brand-night .public-footer .foot-col h4{
  position:relative;
  margin-bottom:10px;
  padding-bottom:10px;
  font-size:12px;
  letter-spacing:.14em;
}
html body.public.brand-night .public-footer .foot-links h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--t-brand);
}
html body.public.brand-night .public-footer .foot-col nav{gap:10px}
html body.public.brand-night .public-footer .foot-col nav a,
html body.public.brand-night .public-footer .foot-col nav button{
  width:max-content;
  transition:color .18s ease,transform .18s ease;
}
html body.public.brand-night .public-footer .foot-col nav a:hover,
html body.public.brand-night .public-footer .foot-col nav button:hover{
  text-decoration:none;
  transform:translateX(3px);
}
html body.public.brand-night .public-footer .foot-email{
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:9px 16px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  color:var(--paper);
  font-size:14px;
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
html[data-public-theme="light"] body.public.brand-night .public-footer .foot-email{
  border-color:rgba(11,16,22,.12);
  background:#FFFFFF;
  color:#111820;
}
html body.public.brand-night .public-footer .foot-email:hover{
  border-color:rgba(42,165,106,.6);
  background:rgba(42,165,106,.08);
}
html body.public.brand-night .foot-social-row{gap:8px}
html body.public.brand-night .foot-social-row a,
html body.public.brand-night .foot-social-row span{
  width:40px;
  min-width:40px;
  height:40px;
  border-radius:999px;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease;
}
html body.public.brand-night .foot-social-row a:hover{
  border-color:rgba(42,165,106,.6);
  background:rgba(42,165,106,.1);
  transform:translateY(-2px);
}
html[data-public-theme="light"] body.public.brand-night .foot-social-row a,
html[data-public-theme="light"] body.public.brand-night .foot-social-row span{
  border-color:rgba(11,16,22,.1);
  background:#FFFFFF;
}
html body.public.brand-night .public-footer .foot-legal-block{
  margin-top:40px;
  padding-top:20px;
  align-items:center;
}
html[data-public-theme="light"] body.public.brand-night .public-footer .foot-legal-block{
  border-top-color:rgba(11,16,22,.08);
}
html body.public.brand-night .public-footer .foot-disclosure{
  border-bottom:1px solid rgba(244,241,234,.08);
}
html[data-public-theme="light"] body.public.brand-night .public-footer .foot-disclosure{
  border-bottom-color:rgba(11,16,22,.08);
}

/* ------------------------------------------------------------------------ *
   Landing page cards. Scoped to main.mkt-home so the other marketing pages,
   which have their own ratchets, are untouched.
 * ------------------------------------------------------------------------ */
html body.public.brand-night main.mkt-home{
  --home-card:linear-gradient(180deg,rgba(244,241,234,.045),rgba(244,241,234,.015)),var(--card);
  --home-card-line:rgba(244,241,234,.09);
  --home-card-shadow:0 1px 0 rgba(244,241,234,.04) inset,0 18px 40px rgba(0,0,0,.28);
  --home-card-lift:0 1px 0 rgba(244,241,234,.06) inset,0 26px 54px rgba(0,0,0,.38);
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home{
  --home-card:linear-gradient(180deg,#FFFFFF,#FDFCFA);
  --home-card-line:rgba(11,16,22,.07);
  --home-card-shadow:0 1px 2px rgba(11,16,22,.04),0 14px 34px rgba(11,16,22,.06);
  --home-card-lift:0 2px 4px rgba(11,16,22,.05),0 24px 48px rgba(11,16,22,.10);
}
html body.public.brand-night main.mkt-home .home-steps li,
html body.public.brand-night main.mkt-home .home-control-grid > div,
html body.public.brand-night main.mkt-home .home-price-card{
  position:relative;
  overflow:visible;
  padding:26px 24px 24px;
  border:1px solid var(--home-card-line);
  border-radius:22px;
  background:var(--home-card);
  box-shadow:var(--home-card-shadow);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
html body.public.brand-night main.mkt-home .home-steps li::before,
html body.public.brand-night main.mkt-home .home-control-grid > div::before{
  /* A short brand rule at the top edge: the card's one bit of colour. */
  content:"";
  position:absolute;
  left:24px;
  top:-1px;
  width:44px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--t-brand),rgba(42,165,106,.35));
}
html body.public.brand-night main.mkt-home .home-steps li:hover,
html body.public.brand-night main.mkt-home .home-control-grid > div:hover,
html body.public.brand-night main.mkt-home .home-price-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--home-card-lift);
  border-color:rgba(42,165,106,.35);
}
html body.public.brand-night main.mkt-home .home-steps{gap:22px}
html body.public.brand-night main.mkt-home .home-steps li{gap:10px}
html body.public.brand-night main.mkt-home .home-steps li:not(:last-child)::after{
  right:-17px;
  top:42px;
  z-index:1;
}
html body.public.brand-night main.mkt-home .home-steps .num{
  position:absolute;
  top:20px;
  right:22px;
  font-size:30px;
  line-height:1;
  font-weight:750;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(42,165,106,.45);
}
html body.public.brand-night main.mkt-home .home-step-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(42,165,106,.22),rgba(42,165,106,.08));
  box-shadow:0 0 0 1px rgba(42,165,106,.22) inset;
}
/* The section already draws a panel round these three. It becomes a tinted
   band rather than a fourth card, so the cards inside read as the cards. */
html body.public.brand-night main.mkt-home .home-control{
  padding:32px;
  border:1px solid rgba(42,165,106,.18);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(42,165,106,.10),rgba(42,165,106,.02));
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-control{
  background:linear-gradient(135deg,#EEF8F2,#F8FBF9);
}
html body.public.brand-night main.mkt-home .home-control-grid{gap:22px}
html body.public.brand-night main.mkt-home .home-control-grid > div > .home-icon{
  box-sizing:content-box;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(42,165,106,.22),rgba(42,165,106,.08));
  box-shadow:0 0 0 1px rgba(42,165,106,.22) inset;
}
html body.public.brand-night main.mkt-home .home-control-grid h3{margin-top:16px}
html body.public.brand-night main.mkt-home .home-price-grid{gap:20px}
html body.public.brand-night main.mkt-home .home-price-card{gap:6px}
html body.public.brand-night main.mkt-home .home-price-card strong{font-size:32px;line-height:38px;letter-spacing:-.02em}
html body.public.brand-night main.mkt-home .home-price-label{
  font-size:12px;
  font-weight:650;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}
html body.public.brand-night main.mkt-home .home-price-card.is-featured{
  border-color:transparent;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg,var(--t-brand),rgba(42,165,106,.25)) border-box;
  border:1.5px solid transparent;
  box-shadow:0 0 0 6px rgba(42,165,106,.08),var(--home-card-shadow);
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-price-card.is-featured{
  background:
    linear-gradient(#FFFFFF,#FFFFFF) padding-box,
    linear-gradient(135deg,var(--t-brand-deep),rgba(42,165,106,.3)) border-box;
}
html body.public.brand-night main.mkt-home .home-cta{
  position:relative;
  overflow:hidden;
  padding:40px 44px;
  border:1px solid rgba(42,165,106,.28);
  border-radius:28px;
  background:
    radial-gradient(600px 260px at 100% 0%,rgba(42,165,106,.22),transparent 70%),
    linear-gradient(135deg,rgba(42,165,106,.10),rgba(42,165,106,.02)),
    var(--card);
  box-shadow:var(--home-card-shadow);
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-cta{
  background:
    radial-gradient(600px 260px at 100% 0%,rgba(42,165,106,.14),transparent 70%),
    linear-gradient(135deg,#F1FAF5,#FFFFFF);
}
html body.public.brand-night main.mkt-home .home-early-bird{
  border-radius:20px;
  box-shadow:var(--home-card-shadow);
}
html body.public.brand-night main.mkt-home .home-phone{
  box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(42,165,106,.12);
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-phone{
  box-shadow:0 30px 70px rgba(11,16,22,.14),0 0 0 1px rgba(11,16,22,.06);
}
@media(max-width:760px){
  html body.public.brand-night main.mkt-home .home-steps li:not(:last-child)::after{display:none}
  html body.public.brand-night main.mkt-home .home-cta{padding:30px 22px}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night main.mkt-home .home-steps li,
  html body.public.brand-night main.mkt-home .home-control-grid > div,
  html body.public.brand-night main.mkt-home .home-price-card,
  html body.public.brand-night header.public-topbar .nav-theme-utility,
  html body.public.brand-night .nav-drawer-close,
  html body.public.brand-night .public-footer .foot-col nav a,
  html body.public.brand-night .foot-social-row a{transition:none}
  html body.public.brand-night main.mkt-home .home-steps li:hover,
  html body.public.brand-night main.mkt-home .home-control-grid > div:hover,
  html body.public.brand-night main.mkt-home .home-price-card:hover{transform:none}
}

/* ------------------------------------------------------------------------ *
   Getting-started tips on the landing page, 2026-10-03. One tip at a time
   with a hairline counting down to the next; see home.html and
   public-shell.js for the behaviour.
 * ------------------------------------------------------------------------ */
/* A full-width bar above the header, its content in the header's column. It
   sits outside <main>, so it carries its own glass values. */
html body.public.brand-night .home-tips{
  --glass:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.52));
  --glass-edge:rgba(20,123,73,.16);
  position:relative;
  z-index:41;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:9px max(16px,calc((100vw - 1200px)/2 + 24px));
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--glass-edge);
  background:var(--t-green-tint);
}
html:not([data-public-theme="light"]) body.public.brand-night .home-tips{
  --glass:linear-gradient(135deg,rgba(30,41,54,.72),rgba(20,28,38,.50));
  --glass-edge:rgba(255,255,255,.10);
  background:#10261C;
}
html body.public.brand-night .home-tips[hidden]{display:none}
html body.public.brand-night .home-tips-track{flex:1 1 auto;min-width:0}
html body.public.brand-night .home-tip{
  display:flex;
  align-items:center;
  gap:12px;
}
html body.public.brand-night .home-tip[hidden]{display:none}
/* Each tip settles in with a slow, slight zoom rather than sliding up: it
   arrives without asking to be looked at. */
html body.public.brand-night .home-tips.is-live .home-tip.is-current{
  animation:home-tip-in .7s cubic-bezier(.2,.8,.2,1);
}
@keyframes home-tip-in{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:none}
}
html body.public.brand-night .home-tip-icon{
  flex:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#FFFFFF;
  background:linear-gradient(135deg,var(--t-green-bright),var(--t-brand-deep));
  box-shadow:0 6px 16px rgba(42,165,106,.28);
}
html body.public.brand-night .home-tip-icon .home-icon{width:18px;height:18px}
html body.public.brand-night .home-tip-text{
  margin:0;
  color:var(--paper);
  font-size:15px;
  line-height:21px;
}
html body.public.brand-night .home-tip-link{
  white-space:nowrap;
  font-weight:650;
  color:var(--t-brand-deep);
  text-decoration:none;
}
html:not([data-public-theme="light"]) body.public.brand-night .home-tip-link{color:var(--t-green-bright)}
html body.public.brand-night .home-tip-link:hover{text-decoration:underline}
html body.public.brand-night .home-tips-controls{
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
}
html body.public.brand-night .home-tips-controls[hidden]{display:none}
html body.public.brand-night .home-tips-count{
  min-width:44px;
  margin-right:4px;
  text-align:center;
  font-size:12px;
  font-weight:650;
  letter-spacing:.06em;
  color:var(--mute);
  font-variant-numeric:tabular-nums;
}
/* The dismiss X, pinned to the banner's top-right corner. */
html body.public.brand-night .home-tips-close{
  position:absolute;
  top:6px;
  right:8px;
  z-index:1;
  width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--glass-edge);
  border-radius:999px;
  background:var(--glass);
  color:var(--paper);
  cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
html body.public.brand-night .home-tips-close[hidden]{display:none}
html body.public.brand-night .home-tips-close:hover,
html body.public.brand-night .home-tips-close:focus-visible{
  border-color:rgba(42,165,106,.6);
  background:rgba(42,165,106,.12);
  transform:rotate(90deg);
  outline:0;
}
/* Room for the X, so a long tip never runs under it. */
html body.public.brand-night .home-tips.is-live{padding-right:max(52px,calc((100vw - 1200px)/2 + 24px))}
/* The countdown to the next tip: a hairline at low opacity, there for
   anyone who looks for it and quiet for everyone else. Its duration comes
   from --home-tip-ms, which public-shell.js sets from the same TIP_MS the
   timer uses, so the line and the change cannot drift apart. */
html body.public.brand-night .home-tips-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:transparent;
  opacity:.35;
}
html body.public.brand-night .home-tips-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--t-brand);
}
html body.public.brand-night .home-tips-progress span.is-running{
  animation:home-tips-progress var(--home-tip-ms,10000ms) linear forwards;
}
@keyframes home-tips-progress{
  from{width:0}
  to{width:100%}
}
@media(max-width:760px){
  html body.public.brand-night .home-tips{
    flex-wrap:wrap;
    gap:6px 8px;
    padding:10px 16px;
  }
  html body.public.brand-night .home-tip-icon{width:32px;height:32px;border-radius:10px}
  html body.public.brand-night .home-tip-text{font-size:14px;line-height:20px}
  html body.public.brand-night .home-tips-controls{display:none}
  html body.public.brand-night .home-tips.is-live{padding-right:48px}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night .home-tips.is-live .home-tip.is-current,
  html body.public.brand-night .home-tips-progress span.is-running{animation:none}
  html body.public.brand-night .home-tips-close{transition:none}
  html body.public.brand-night .home-tips-close:hover{transform:none}
}

/* ------------------------------------------------------------------------ *
   Tanda AI, the built-in guide (tanda-ai.js, launched from pwa.js). Shared by
   the public site and the member shell, so it carries its own colours rather
   than either shell's, with a dark variant for the public night theme.
 * ------------------------------------------------------------------------ */
/* The assistant's floating action button, bottom right. Owner request,
   2026-10-12/13: a green-gradient disc carrying a white bot head (antenna,
   eyes, a smile) -- the assistant's own mark. 60px on a desktop, 54px on a tablet, 48px on a phone, so
   it reads as a primary control without crowding the corner.

   A soft top highlight and a faint rim keep the disc from looking flat. It
   eases in once, rings softly twice to say it is there, lifts on hover with
   the bot tilting a little, and presses on tap. prefers-reduced-motion
   keeps all of it still. */
.tanda-ai-launcher{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  width:60px;
  height:60px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  /* Its own green, owner request 2026-10-13: mint into emerald into a deep
     teal-green, so the assistant is recognisably not one of the page's
     flat green buttons. The white bot sits on the emerald centre at
     3.96:1, above the 3:1 WCAG asks of a non-text graphic. */
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.26),rgba(255,255,255,0) 48%),
    linear-gradient(140deg,#34C98A 0%,#13925F 48%,#0B5E4C 100%);
  color:#FFFFFF;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 2px 4px rgba(16,24,40,.16),
    0 10px 24px -6px rgba(11,94,76,.55);
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
  animation:tanda-ai-launcher-in .5s cubic-bezier(.2,.8,.2,1) .4s backwards;
}
.tanda-ai-launcher-glyph{
  display:block;
  width:26px;
  height:26px;
  color:#FFFFFF;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
/* A ring that breathes out twice after the button arrives, then rests. */
.tanda-ai-launcher::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(42,165,106,.45);
  animation:tanda-ai-launcher-ring 2.4s ease-out 1.2s 2;
  pointer-events:none;
}
.tanda-ai-launcher:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24) inset,
    0 3px 6px rgba(16,24,40,.18),
    0 16px 32px -8px rgba(20,123,73,.6);
}
/* Upright always: no tilt on hover. A tilt also stuck after a tap on touch
   screens, where :hover outlives the touch, leaving the bot askew. */
.tanda-ai-launcher:hover .tanda-ai-launcher-glyph{transform:scale(1.06)}
.tanda-ai-launcher:active{transform:scale(.95)}
.tanda-ai-launcher:focus-visible{outline:3px solid var(--t-green-soft);outline-offset:4px}
.tanda-ai-launcher.is-dragging{cursor:grabbing;transform:scale(1.06);transition:none}
html[data-public-theme="dark"] .tanda-ai-launcher{
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.28) inset,
    0 2px 6px rgba(0,0,0,.45),
    0 12px 28px -6px rgba(0,0,0,.6);
}
html.tanda-ai-open .tanda-ai-launcher{opacity:0;pointer-events:none;transform:scale(.8)}
@keyframes tanda-ai-launcher-in{
  from{opacity:0;transform:translateY(12px) scale(.85)}
  to{opacity:1;transform:none}
}
@keyframes tanda-ai-launcher-ring{
  0%{box-shadow:0 0 0 0 rgba(42,165,106,.45)}
  70%{box-shadow:0 0 0 14px rgba(42,165,106,0)}
  100%{box-shadow:0 0 0 14px rgba(42,165,106,0)}
}
/* Tablet. */
@media(max-width:1024px) and (min-width:641px){
  .tanda-ai-launcher{right:20px;bottom:20px;width:54px;height:54px}
  .tanda-ai-launcher-glyph{width:24px;height:24px}
}
/* Phone: 48px -- above the 44px touch minimum, but small enough not to
   crowd a 360-430px screen (56px read as oversized there, owner feedback
   2026-10-12). A thumb's reach from the corner, clear of the safe area. */
@media(max-width:640px){
  .tanda-ai-launcher{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:48px;
    height:48px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.18) inset,
      0 2px 4px rgba(16,24,40,.16),
      0 6px 16px -4px rgba(20,123,73,.5);
  }
  .tanda-ai-launcher-glyph{width:22px;height:22px}
  /* Above the member shell's bottom navigation, never over its tabs. */
  body:has(.bottom-nav) .tanda-ai-launcher{bottom:calc(82px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .tanda-ai-launcher,
  .tanda-ai-launcher-glyph{animation:none;transition:none}
  .tanda-ai-launcher::after{animation:none}
  .tanda-ai-launcher:hover,
  .tanda-ai-launcher:hover .tanda-ai-launcher-glyph{transform:none}
}

.tanda-ai-panel{
  --ai-ink:#111820;
  --ai-mute:#5D6876;
  --ai-surface:rgba(255,255,255,.94);
  --ai-line:rgba(11,16,22,.10);
  --ai-bot:#F1F6F3;
  --ai-link:var(--t-brand-deep);
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:61;
  width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100vh - 40px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--ai-line);
  border-radius:22px;
  background:var(--ai-surface);
  color:var(--ai-ink);
  box-shadow:0 30px 80px rgba(11,16,22,.24);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  font-size:14px;
  line-height:20px;
}
.tanda-ai-panel[hidden]{display:none}
html[data-public-theme="dark"] .tanda-ai-panel{
  --ai-ink:#F4F1EA;
  --ai-mute:#9AA8BA;
  --ai-surface:rgba(20,28,38,.94);
  --ai-line:rgba(255,255,255,.10);
  --ai-bot:rgba(255,255,255,.06);
  --ai-link:var(--t-green-bright);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.tanda-ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 12px 14px;
  background:var(--ai-head,rgba(42,165,106,.08));
  border-bottom:1px solid var(--ai-line);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.tanda-ai-panel.is-dragging .tanda-ai-head{cursor:grabbing}
.tanda-ai-title{display:flex;align-items:center;gap:10px;min-width:0}
.tanda-ai-mark{
  flex:none;
  width:34px;
  height:34px;
  border-radius:10px;
  background:url("tanda-icon.svg") center/cover no-repeat;
  box-shadow:none;
}
.tanda-ai-name{display:flex;flex-direction:column;min-width:0}
.tanda-ai-name strong{font-size:15px;line-height:20px}
.tanda-ai-name small{font-size:11.5px;line-height:15px;color:var(--ai-mute)}
.tanda-ai-close{
  flex:none;
  width:32px;
  height:32px;
  border:1px solid var(--ai-line);
  border-radius:999px;
  background:transparent;
  color:var(--ai-ink);
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.tanda-ai-close:hover,.tanda-ai-close:focus-visible{border-color:rgba(42,165,106,.6);background:rgba(42,165,106,.12);outline:0}
.tanda-ai-log{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tanda-ai-msg{display:flex}
.tanda-ai-msg.is-user{justify-content:flex-end}
.tanda-ai-bubble{
  max-width:86%;
  padding:9px 12px;
  border-radius:16px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.tanda-ai-msg.is-bot .tanda-ai-bubble{background:var(--ai-bot);border-top-left-radius:6px}
.tanda-ai-msg.is-user .tanda-ai-bubble{
  background:linear-gradient(135deg,var(--t-green-bright),var(--t-brand-deep));
  color:#FFFFFF;
  border-top-right-radius:6px;
}
/* Thinking: "Thinking" with a slow shimmer and three soft dots. The orb that
   spun beside it is gone (owner, 2026-10-13: it read like a tracker). */
.tanda-ai-thinking{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ai-mute);
}
.tanda-ai-stage{
  font-size:13px;
  background:linear-gradient(90deg,var(--ai-mute) 0%,var(--ai-ink) 50%,var(--ai-mute) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:tanda-ai-shimmer 1.8s ease-in-out infinite;
}
@keyframes tanda-ai-shimmer{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}
.tanda-ai-dots{display:inline-flex;gap:3px}
.tanda-ai-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ai-mute);
  animation:tanda-ai-dot 1.2s ease-in-out infinite;
}
.tanda-ai-dots i:nth-child(2){animation-delay:.15s}
.tanda-ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes tanda-ai-dot{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}
}
.tanda-ai-sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
/* While an answer streams in, a soft caret marks where it is being written. */
.tanda-ai-msg.is-streaming .tanda-ai-bubble::after{
  content:"";
  display:inline-block;
  width:7px;
  height:14px;
  margin-left:2px;
  vertical-align:-2px;
  border-radius:2px;
  background:rgba(42,165,106,.55);
  animation:tanda-ai-caret 1s steps(2) infinite;
}
@keyframes tanda-ai-caret{50%{opacity:0}}
.tanda-ai-msg.is-thinking,
.tanda-ai-msg.is-streaming{animation:tanda-ai-rise .25s ease-out}
@keyframes tanda-ai-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tanda-ai-send:disabled,
.tanda-ai-chip:disabled{opacity:.5;cursor:default}
.tanda-ai-link{color:var(--ai-link);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.tanda-ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.tanda-ai-chips[hidden]{display:none}
.tanda-ai-chip{
  padding:6px 11px;
  border:1px solid rgba(42,165,106,.35);
  border-radius:999px;
  background:transparent;
  color:var(--ai-ink);
  font:inherit;
  font-size:12.5px;
  line-height:16px;
  cursor:pointer;
}
.tanda-ai-chip:hover,.tanda-ai-chip:focus-visible{background:rgba(42,165,106,.12);outline:0}
.tanda-ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--ai-line)}
.tanda-ai-input{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--ai-line);
  border-radius:999px;
  background:transparent;
  color:var(--ai-ink);
  font:inherit;
}
.tanda-ai-input:focus{outline:2px solid rgba(42,165,106,.55);outline-offset:1px}
.tanda-ai-send{
  flex:none;
  min-height:40px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--t-green-bright),var(--t-brand));
  color:#07110D;
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.tanda-ai-foot{margin:0;padding:0 14px 10px;font-size:11px;line-height:15px;color:var(--ai-mute)}
@media(max-width:640px){
  /* A bottom sheet on a phone: full width, not draggable. */
  .tanda-ai-panel{
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:8px !important;
    width:auto;
    height:min(78vh,560px);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .tanda-ai-head{cursor:default}
}
@media(prefers-reduced-motion:reduce){
  .tanda-ai-launcher{transition:none}
  .tanda-ai-launcher:hover{transform:none}
  .tanda-ai-stage,
  .tanda-ai-dots i,
  .tanda-ai-msg.is-streaming .tanda-ai-bubble::after,
  .tanda-ai-msg.is-thinking,
  .tanda-ai-msg.is-streaming{animation:none}
  .tanda-ai-stage{-webkit-text-fill-color:var(--ai-mute)}
}
/* The public and member shells both style bare inputs; the guide's own field
   keeps the guide's colours on either. */
html body .tanda-ai-panel .tanda-ai-input{
  background:transparent;
  color:var(--ai-ink);
  border-color:var(--ai-line);
}
html body .tanda-ai-panel .tanda-ai-input::placeholder{color:var(--ai-mute)}

/* ------------------------------------------------------------------------ *
   Corporate polish and responsive layout, 2026-10-03.

   The principles of a well-run institutional site rather than anyone's
   stylesheet: one type scale that grows smoothly from phone to desktop, one
   page column whose edges line up with the header's, a steady vertical
   rhythm, restrained weights, and layouts chosen per width -- phone (to
   640px), tablet (641-1024px) and desktop -- rather than one layout squeezed.
 * ------------------------------------------------------------------------ */
html body.public.brand-night{
  --page-gutter:clamp(16px,3vw,24px);
  --page-column:min(1152px,calc(100% - 2 * var(--page-gutter)));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- one column, aligned with the header ---------------------------------- */
html body.public.brand-night header.public-topbar,
html body.public.brand-night .home-tips{
  padding-left:max(var(--page-gutter),calc((100vw - 1200px) / 2 + 24px));
}
html body.public.brand-night header.public-topbar{
  padding-right:max(var(--page-gutter),calc((100vw - 1200px) / 2 + 24px));
}
html body.public.brand-night main.mkt-home .home-hero,
html body.public.brand-night main.mkt-home .mkt-section,
html body.public.brand-night main.mkt-home .mkt-cta{
  width:var(--page-column);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* --- type scale ------------------------------------------------------------ */
html body.public.brand-night main.mkt-home .identity-headline{
  font-size:clamp(2rem,1.15rem + 3.2vw,3.5rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.025em;
}
html body.public.brand-night main.mkt-home .mkt-section h2,
html body.public.brand-night main.mkt-home .home-cta h2{
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.015em;
  max-width:28ch;
}
html body.public.brand-night main.mkt-home h3{
  font-weight:600;
  letter-spacing:-.005em;
}
html body.public.brand-night main.mkt-home .mkt-lead{
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.65;
  max-width:62ch;
}
html body.public.brand-night main.mkt-home .mkt-eyebrow,
html body.public.brand-night main.mkt-home .mkt-kicker{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html body.public.brand-night header.public-topbar .public-nav a{
  font-size:15px;
  font-weight:500;
}

/* --- rhythm ----------------------------------------------------------------- */
html body.public.brand-night main.mkt-home .home-hero{
  margin-top:clamp(16px,3vw,32px);
  padding:clamp(24px,5vw,56px);
}
html body.public.brand-night main.mkt-home .mkt-section{
  padding-top:clamp(48px,7vw,96px);
  padding-bottom:0;
}
html body.public.brand-night main.mkt-home .mkt-cta{
  margin-top:clamp(48px,7vw,96px);
  margin-bottom:clamp(48px,7vw,96px);
}

/* --- controls ----------------------------------------------------------------- */
html body.public.brand-night main.mkt-home .mkt-actions .btn{
  min-height:48px;
  padding-inline:24px;
  font-weight:600;
  letter-spacing:.01em;
}
html body.public.brand-night a:focus-visible,
html body.public.brand-night button:focus-visible,
html body.public.brand-night summary:focus-visible{
  outline:2px solid var(--t-brand-deep);
  outline-offset:3px;
}
html[data-public-theme="dark"] body.public.brand-night a:focus-visible,
html[data-public-theme="dark"] body.public.brand-night button:focus-visible,
html[data-public-theme="dark"] body.public.brand-night summary:focus-visible{
  outline-color:var(--t-green-bright);
}

/* --- cards share one shape ----------------------------------------------------- */
html body.public.brand-night main.mkt-home .home-steps li,
html body.public.brand-night main.mkt-home .home-control-grid > div,
html body.public.brand-night main.mkt-home .home-price-card{
  border-radius:20px;
  padding:clamp(20px,2.5vw,28px);
}

/* --- desktop (1025px and up) ----------------------------------------------------- */
@media(min-width:1025px){
  html body.public.brand-night main.mkt-home .hero-grid{
    grid-template-columns:minmax(0,1fr) 340px;
    gap:clamp(40px,5vw,72px);
  }
}

/* --- tablet (641-1024px) ----------------------------------------------------------- */
@media(min-width:641px) and (max-width:1024px){
  html body.public.brand-night main.mkt-home .hero-grid{
    grid-template-columns:minmax(0,1fr) 260px;
    gap:32px;
  }
  html body.public.brand-night main.mkt-home .home-phone{transform:scale(.92);transform-origin:top center}
  /* Three cards go two-up, with the third spanning the row, rather than three
     columns too narrow to read. */
  html body.public.brand-night main.mkt-home .home-steps,
  html body.public.brand-night main.mkt-home .home-control-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  html body.public.brand-night main.mkt-home .home-steps li:last-child,
  html body.public.brand-night main.mkt-home .home-control-grid > div:last-child{
    grid-column:1 / -1;
  }
  html body.public.brand-night main.mkt-home .home-steps li::after{display:none}
  html body.public.brand-night main.mkt-home .home-price-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  /* The footer's three link columns sit in a row under the brand. */
  html body.public.brand-night .public-footer .foot-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px;
  }
  html body.public.brand-night .public-footer .foot-brand{grid-column:1 / -1}
}
@media(min-width:641px) and (max-width:860px){
  html body.public.brand-night main.mkt-home .hero-grid{grid-template-columns:1fr}
  html body.public.brand-night main.mkt-home .home-phone-wrap{max-width:320px;margin-inline:auto}
  html body.public.brand-night main.mkt-home .home-phone{transform:none}
}

/* --- phone (to 640px) ---------------------------------------------------------------- */
@media(max-width:640px){
  html body.public.brand-night main.mkt-home .hero-grid{grid-template-columns:1fr;gap:28px}
  html body.public.brand-night main.mkt-home .home-steps,
  html body.public.brand-night main.mkt-home .home-control-grid,
  html body.public.brand-night main.mkt-home .home-price-grid{grid-template-columns:1fr}
  html body.public.brand-night main.mkt-home .home-steps li::after{display:none}
  html body.public.brand-night main.mkt-home .mkt-actions{flex-direction:column;align-items:stretch}
  html body.public.brand-night main.mkt-home .mkt-actions .btn{width:100%;justify-content:center}
  html body.public.brand-night main.mkt-home .home-phone-wrap{max-width:300px;margin-inline:auto}
}
/* "Your money" is a section drawn as a panel: the section rhythm belongs
   outside it, and inside it keeps a panel's padding. */
html body.public.brand-night main.mkt-home .mkt-section.home-control{
  margin-top:clamp(48px,7vw,96px);
  padding:clamp(22px,4vw,40px);
}

/* ------------------------------------------------------------------------ *
   Clean white, 2026-10-12.

   Owner request: light mode on a plain white page, the real Tanda icon in the
   header, Google's own type styles, and the brand green only where it means
   something -- actions, links, the current item, the one accent line in a
   headline. This replaces the "emerald sunrise" fields, glass and green-to-
   coral text of 2026-10-03, which put colour behind everything and so let it
   mean nothing.

   The type follows Google's sites rather than a marketing deck: display and
   headings in the face at 400-500 (Google Sans is drawn to be read at weight
   400 large, and bold flattens it), labels at 500, body at 400, a near-black
   ink rather than pure black, and a cool grey for secondary text. Neutrals are
   Google's: #1F1F1F ink, #5F6368 secondary (6.0:1 on white), #DADCE0 lines,
   #F8F9FA quiet surfaces. Cards are white with a hairline and earn a shadow
   only when they are interactive and hovered.

   Dark keeps its night ground and takes the same shapes, so switching themes
   changes colour and nothing else.
 * ------------------------------------------------------------------------ */
body.public{font-family:var(--t-font-public)}
body.public button,
body.public input,
body.public select,
body.public textarea{font-family:inherit}

html body.public.brand-night{
  --cw-ink:var(--paper);
  --cw-ink-2:var(--mute);
  --cw-line:rgba(244,241,234,.12);
  --cw-quiet:#111821;
  --cw-card:#141C26;
  --cw-accent:var(--t-green-bright);
  --cw-action:var(--t-brand);
  --cw-action-hover:var(--t-green-bright);
  --cw-action-ink:#07110D;
  --cw-tint:rgba(42,165,106,.14);
  --cw-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 6px 2px rgba(0,0,0,.2);
  --cw-shadow-hover:0 1px 3px rgba(0,0,0,.4),0 6px 18px 4px rgba(0,0,0,.25);
}
html[data-public-theme="light"] body.public.brand-night{
  --night:#FFFFFF;
  --card:#FFFFFF;
  --paper:#1F1F1F;
  --mute:#5F6368;
  --cw-line:#DADCE0;
  --cw-quiet:#F8F9FA;
  --cw-card:#FFFFFF;
  --cw-accent:var(--t-brand-deep);
  --cw-action:var(--t-brand-deep);
  --cw-action-hover:var(--t-brand-dim);
  --cw-action-ink:#FFFFFF;
  --cw-tint:var(--t-green-tint);
  --cw-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --cw-shadow-hover:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
  background:#FFFFFF;
  color:var(--paper);
}

/* --- type: Google's styles ------------------------------------------------ */
html body.public.brand-night main h1,
html body.public.brand-night main.mkt-home .identity-headline{
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--cw-ink);
}
html body.public.brand-night main h2,
html body.public.brand-night main.mkt-home .mkt-section h2,
html body.public.brand-night main.mkt-home .home-cta h2{
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--cw-ink);
}
html body.public.brand-night main h3{
  font-weight:500;
  letter-spacing:0;
  color:var(--cw-ink);
}
html body.public.brand-night main p,
html body.public.brand-night main li{letter-spacing:.005em}
html body.public.brand-night main .mkt-lead,
html body.public.brand-night main.mkt-home .mkt-lead{
  font-weight:400;
  line-height:1.6;
  color:var(--cw-ink-2);
}
html body.public.brand-night main .mkt-eyebrow,
html body.public.brand-night main .mkt-kicker,
html body.public.brand-night main.mkt-home .mkt-eyebrow,
html body.public.brand-night main.mkt-home .mkt-kicker{
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cw-accent);
}
/* The headline's second line is the one place the brand is set in type. */
html body.public.brand-night main.mkt-home .home-accent{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--cw-accent);
}

/* --- header ------------------------------------------------------------- */
html body.public.brand-night header.public-topbar::before{
  background:rgba(11,16,22,.92);
  box-shadow:none;
}
html[data-public-theme="light"] body.public.brand-night header.public-topbar::before{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--cw-line);
  box-shadow:none;
}
html body.public.brand-night header.public-topbar::after{display:none}
/* The real icon -- the same tile as the favicon and the installed app -- so
   the header, the browser tab and the home screen show one mark. */
html body.public.brand-night .site-brand-mark{
  width:36px;
  height:36px;
  border-radius:10px;
  box-shadow:none;
}
html body.public.brand-night a.site-brand:hover .site-brand-mark,
html body.public.brand-night a.site-brand:focus-visible .site-brand-mark{
  transform:none;
  box-shadow:none;
}
html body.public.brand-night .site-brand-name,
html[data-public-theme="light"] body.public.brand-night .site-brand-name,
html:not([data-public-theme="light"]) body.public.brand-night .site-brand-name{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--cw-ink);
  font-size:1.375rem;
  font-weight:500;
  letter-spacing:-.01em;
}
html body.public.brand-night .site-brand-tag{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--cw-ink-2);
}
html body.public.brand-night header.public-topbar .public-nav a{
  font-weight:500;
  color:var(--cw-ink-2);
}
html body.public.brand-night header.public-topbar .public-nav a:hover{color:var(--cw-ink)}
html body.public.brand-night header.public-topbar .public-nav a[aria-current="page"]{
  color:var(--cw-accent);
  background:var(--cw-tint);
}

/* --- buttons: one filled action, one outlined, pill-shaped ---------------- */
html body.public.brand-night .btn:not(.ghost):not(.secondary):not(.text-button),
html body.public.brand-night header.public-topbar .btn.nav-cta,
html body.public.brand-night .nav-menu-panel .btn,
html body.public.brand-night main.mkt-home .mkt-actions .btn:not(.ghost){
  border:1px solid transparent;
  border-radius:999px;
  background:var(--cw-action);
  color:var(--cw-action-ink);
  font-weight:500;
  letter-spacing:.01em;
  box-shadow:none;
  transition:background-color .2s ease,box-shadow .2s ease;
}
html body.public.brand-night .btn:not(.ghost):not(.secondary):not(.text-button):hover,
html body.public.brand-night header.public-topbar .btn.nav-cta:hover,
html body.public.brand-night .nav-menu-panel .btn:hover,
html body.public.brand-night main.mkt-home .mkt-actions .btn:not(.ghost):hover{
  background:var(--cw-action-hover);
  color:var(--cw-action-ink);
  box-shadow:var(--cw-shadow);
}
html body.public.brand-night .btn.ghost,
html body.public.brand-night .btn.secondary{
  border:1px solid var(--cw-line);
  border-radius:999px;
  background:transparent;
  color:var(--cw-accent);
  font-weight:500;
  box-shadow:none;
}
html body.public.brand-night .btn.ghost:hover,
html body.public.brand-night .btn.secondary:hover{
  background:var(--cw-tint);
  border-color:var(--cw-line);
}
/* A bare link beside a button reads as a second action, so it gets the
   outlined shape too -- the same height, so the row lines up. */
html body.public.brand-night main .mkt-actions > a:not(.btn){
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--cw-line);
  border-radius:999px;
  color:var(--cw-accent);
  font-weight:500;
  text-decoration:none;
}
html body.public.brand-night main .mkt-actions > a:not(.btn):hover{background:var(--cw-tint)}
html body.public.brand-night main .text-link{
  color:var(--cw-accent);
  font-weight:500;
}

/* --- cards: white, a hairline, a shadow only when they lift --------------- */
html body.public.brand-night main.mkt-home{
  --home-card:var(--cw-card);
  --home-card-line:var(--cw-line);
  --home-card-shadow:none;
  --home-card-lift:var(--cw-shadow-hover);
}
html[data-public-theme="light"] body.public.brand-night main.mkt-home{
  --home-card:var(--cw-card);
  --home-card-line:var(--cw-line);
  --home-card-shadow:none;
  --home-card-lift:var(--cw-shadow-hover);
}
html body.public.brand-night main .mkt-card,
html body.public.brand-night main .plan-path-card,
html body.public.brand-night main .feature-card,
html body.public.brand-night main .signin-card,
html body.public.brand-night main .narrow-public-card,
html body.public.brand-night main .support-guide-card,
html body.public.brand-night main .support-form-card,
html body.public.brand-night main .start-panel,
html body.public.brand-night main.mkt-home .home-steps li,
html body.public.brand-night main.mkt-home .home-control-grid > div,
html body.public.brand-night main.mkt-home .home-price-card,
html body.public.brand-night main.mkt-home .home-early-bird{
  border:1px solid var(--cw-line);
  border-radius:24px;
  background:var(--cw-card);
  box-shadow:none;
}
html body.public.brand-night main.mkt-home .home-steps li:hover,
html body.public.brand-night main.mkt-home .home-control-grid > div:hover,
html body.public.brand-night main.mkt-home .home-price-card:hover{
  transform:translateY(-2px);
  border-color:transparent;
  box-shadow:var(--cw-shadow-hover);
}
/* The coloured rules along each card's top edge go: one accent per card is
   the icon. */
html body.public.brand-night main.mkt-home .home-steps li::before,
html body.public.brand-night main.mkt-home .home-control-grid > div::before{display:none}
html body.public.brand-night main.mkt-home .home-steps .num{
  color:var(--cw-ink-2);
  -webkit-text-stroke:0;
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
}
html body.public.brand-night main.mkt-home .home-step-icon,
html body.public.brand-night main.mkt-home .home-control-grid > div > .home-icon{
  border-radius:12px;
  background:var(--cw-tint);
  box-shadow:none;
  color:var(--cw-accent);
}
/* The featured plan is marked by a brand outline, not a gradient. */
html body.public.brand-night main .plan-path-card.is-featured,
html body.public.brand-night main.mkt-home .home-price-card.is-featured,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-price-card.is-featured,
html:not([data-public-theme="light"]) body.public.brand-night main.mkt-home .home-price-card.is-featured{
  border:2px solid var(--cw-accent);
  background:var(--cw-card);
  box-shadow:none;
}

/* --- quiet panels: the hero, "your money" and the closing call ------------ */
html body.public.brand-night main.mkt-home .home-hero,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero,
html body.public.brand-night main.mkt-home .home-control,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-control,
html body.public.brand-night main.mkt-home .home-cta,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-cta,
html body.public.brand-night main .mkt-cta{
  border:0;
  border-radius:32px;
  background:var(--cw-quiet);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html body.public.brand-night main.mkt-home .home-hero::before,
html body.public.brand-night main.mkt-home .home-hero::after,
html body.public.brand-night main.mkt-home .home-phone-wrap::before{display:none}
html body.public.brand-night main.mkt-home .home-hero .mkt-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:0;
  border-radius:999px;
  background:var(--cw-tint);
  color:var(--cw-accent);
  letter-spacing:.06em;
}
html body.public.brand-night main.mkt-home .home-phone,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-phone{
  box-shadow:var(--cw-shadow-hover);
}

/* --- the drawer ----------------------------------------------------------- */
html body.public.brand-night .nav-menu .nav-menu-panel{
  background:var(--cw-card);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-left:1px solid var(--cw-line);
}
@media(max-width:760px){
  /* It covered 88% of a phone. Now a little over half, so the page stays in
     view beside it; 220px is the floor where "Early Bird · Open" still fits
     on one line. */
  html body.public.brand-night .nav-menu .nav-menu-panel{
    width:clamp(220px,58vw,320px);
    padding:14px 12px calc(18px + env(safe-area-inset-bottom));
    border-radius:18px 0 0 18px;
  }
  html body.public.brand-night .nav-drawer-head{padding:0 2px 10px}
  html body.public.brand-night .nav-drawer-brand .site-brand-mark{width:28px;height:28px}
  html body.public.brand-night .nav-drawer-brand .site-brand-name{font-size:1.05rem}
  html body.public.brand-night .nav-drawer-close{width:36px;height:36px}
  html body.public.brand-night .nav-drawer-heading{margin:10px 8px 2px;font-size:10px}
  html body.public.brand-night .nav-menu-panel a:not(.btn),
  html body.public.brand-night .nav-menu-panel .theme-toggle{
    min-height:42px;
    padding:8px 10px;
    font-size:.92rem;
  }
  html body.public.brand-night .nav-menu-panel .btn{min-height:42px;font-size:.92rem}
  html body.public.brand-night main.mkt-home .home-hero,
  html body.public.brand-night main.mkt-home .home-control,
  html body.public.brand-night main.mkt-home .home-cta,
  html body.public.brand-night main .mkt-cta{border-radius:24px}
}

/* --- the tips banner: one tint, no sunrise -------------------------------- */
html body.public.brand-night .home-tips{border-bottom:1px solid var(--cw-line)}
html body.public.brand-night .home-tip-icon{
  border-radius:10px;
  background:var(--cw-action);
  color:var(--cw-action-ink);
  box-shadow:none;
}
html body.public.brand-night .home-tip-link{font-weight:500;color:var(--cw-accent)}
html body.public.brand-night .home-tips-close{
  border:0;
  background:transparent;
  color:var(--cw-ink-2);
}
html body.public.brand-night .home-tips-close:hover,
html body.public.brand-night .home-tips-close:focus-visible{
  background:rgba(60,64,67,.08);
  color:var(--cw-ink);
}
html body.public.brand-night .home-tips-progress span{background:var(--cw-accent)}

/* --- footer: white, a hairline above ------------------------------------- */
html body.public.brand-night .public-footer[data-public-footer]{background:var(--cw-quiet)}
html[data-public-theme="light"] body.public.brand-night .public-footer[data-public-footer]{
  background:var(--cw-quiet);
  border-top:1px solid var(--cw-line);
}
html body.public.brand-night .public-footer[data-public-footer]::before{display:none}
html body.public.brand-night .public-footer .foot-col h4{
  font-weight:500;
  letter-spacing:.08em;
  color:var(--cw-ink);
}
html body.public.brand-night .public-footer .foot-col h4::after{background:var(--cw-accent)}

/* --- member shell: the same white page ------------------------------------ */
/* The green field of 2026-09-10 goes with the public one. Cards keep their
   hairline, which is what separates them from a white ground. */
body:has(.member-shell),
body:has(.member-auth){
  background:#FFFFFF;
}
body:has(.member-shell) .topbar,
body:has(.member-auth) .topbar{
  background:rgba(255,255,255,.94);
  border-bottom-color:#DADCE0;
}
:is(.member-shell,.member-auth) .member-auth-panel,
:is(.member-shell,.member-auth) .card,
:is(.member-shell,.member-auth) .member-form-card{
  border-color:#DADCE0;
  border-radius:24px;
}
/* Names and titles take Google's heading weight, not a bold display cut. */
.member-intro h2,.member-intro h1,.token-title{font-weight:500;letter-spacing:-.01em}

/* ------------------------------------------------------------------------ *
   Cards, 2026-10-12 (second pass).

   Owner request, with a reference screenshot of a modern SaaS landing page:
   that page's card styling, with Tanda's own colours and words and nothing
   else changed. What the reference does, and so what this does:

   - Cards float rather than sit: a faint edge plus a soft two-part shadow
     (a 1px contact shadow and a wide, low-opacity ambient one), 16px corners,
     and a slightly deeper shadow and a 2px lift on hover.
   - The hero is open page, not a panel. Its visual stands on a soft blob of
     the brand tint with a fine dot grid off one corner.
   - Feature notes are an icon on a tinted square tile beside the words, with
     no outline of their own.
   - Small inner tiles (stats, prices) are cards in miniature: 12px corners,
     the same edge, no shadow.

   The footer is deliberately untouched, and so are colours: the shadows are
   neutral, and the only colour introduced is the brand tint already in use.
 * ------------------------------------------------------------------------ */
html body.public.brand-night{
  --card-edge:rgba(244,241,234,.10);
  --card-shadow:0 1px 2px rgba(0,0,0,.30),0 12px 32px -10px rgba(0,0,0,.45);
  --card-shadow-hover:0 2px 4px rgba(0,0,0,.35),0 22px 48px -12px rgba(0,0,0,.55);
  --blob:rgba(42,165,106,.20);
  --blob-2:rgba(53,184,121,.10);
  --dots:rgba(244,241,234,.14);
}
html[data-public-theme="light"] body.public.brand-night{
  --card-edge:rgba(16,24,40,.08);
  --card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -10px rgba(16,24,40,.10);
  --card-shadow-hover:0 2px 4px rgba(16,24,40,.06),0 22px 48px -12px rgba(16,24,40,.16);
  --blob:rgba(42,165,106,.24);
  --blob-2:rgba(42,165,106,.10);
  --dots:rgba(20,123,73,.18);
}

/* --- cards ---------------------------------------------------------------- */
html body.public.brand-night main .mkt-card,
html body.public.brand-night main .plan-path-card,
html body.public.brand-night main .feature-card,
html body.public.brand-night main .signin-card,
html body.public.brand-night main .narrow-public-card,
html body.public.brand-night main .support-guide-card,
html body.public.brand-night main .support-form-card,
html body.public.brand-night main .start-panel,
html body.public.brand-night main .pricing-boundary-strip,
html body.public.brand-night main.mkt-home .home-steps li,
html body.public.brand-night main.mkt-home .home-control-grid > div,
html body.public.brand-night main.mkt-home .home-price-card,
html body.public.brand-night main.mkt-home .home-early-bird{
  border:1px solid var(--card-edge);
  border-radius:16px;
  background:var(--cw-card);
  box-shadow:var(--card-shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
html body.public.brand-night main .mkt-card:hover,
html body.public.brand-night main .plan-path-card:hover,
html body.public.brand-night main .feature-card:hover,
html body.public.brand-night main .support-guide-card:hover,
html body.public.brand-night main.mkt-home .home-steps li:hover,
html body.public.brand-night main.mkt-home .home-control-grid > div:hover,
html body.public.brand-night main.mkt-home .home-price-card:hover{
  transform:translateY(-2px);
  border-color:var(--card-edge);
  box-shadow:var(--card-shadow-hover);
}
/* The featured plan keeps its brand outline; the shadow is what floats it. */
html body.public.brand-night main .plan-path-card.is-featured,
html body.public.brand-night main.mkt-home .home-price-card.is-featured,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-price-card.is-featured,
html:not([data-public-theme="light"]) body.public.brand-night main.mkt-home .home-price-card.is-featured{
  border:2px solid var(--cw-accent);
  box-shadow:var(--card-shadow-hover);
}
/* Tiles inside a card: the card's edge, smaller corners, no shadow. */
html body.public.brand-night main .paid-price,
html body.public.brand-night main .round-mock .mock-card-title + *,
html body.public.brand-night main .paid-interval-choice button,
html body.public.brand-night main .paid-interval-choice label{
  border-radius:12px;
}
html body.public.brand-night main .paid-price{
  border:1px solid var(--card-edge);
  background:var(--cw-quiet);
}

/* --- icon tiles ----------------------------------------------------------- */
html body.public.brand-night main.mkt-home .home-step-icon,
html body.public.brand-night main.mkt-home .home-control-grid > div > .home-icon,
html body.public.brand-night main .mkt-icon,
html body.public.brand-night main .boundary-icon{
  border-radius:12px;
  background:var(--cw-tint);
  color:var(--cw-accent);
  box-shadow:none;
}

/* --- the hero: open page, the visual on a blob ------------------------------ */
html body.public.brand-night main.mkt-home .home-hero,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
html body.public.brand-night main.mkt-home .home-phone-wrap{
  position:relative;
  isolation:isolate;
}
html body.public.brand-night main.mkt-home .home-phone-wrap::before{
  display:block;
  content:"";
  position:absolute;
  z-index:-1;
  inset:-10% -22% -8% -26%;
  border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;
  background:
    radial-gradient(closest-side at 60% 30%,var(--blob),transparent),
    radial-gradient(closest-side at 30% 80%,var(--blob-2),transparent),
    linear-gradient(160deg,var(--blob-2),transparent 70%);
  pointer-events:none;
}
html body.public.brand-night main.mkt-home .home-phone-wrap::after{
  /* The dot grid off the top corner. */
  content:"";
  position:absolute;
  z-index:-1;
  top:-6%;
  right:-18%;
  width:160px;
  height:160px;
  background:radial-gradient(var(--dots) 1.2px,transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);
  mask:radial-gradient(closest-side,#000,transparent);
  pointer-events:none;
}
html body.public.brand-night main.mkt-home .home-phone,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-phone{
  box-shadow:var(--card-shadow-hover);
}

/* --- feature notes: an icon tile beside the words, no outline ------------- */
html body.public.brand-night main.mkt-home .home-trust{gap:10px 22px}
html body.public.brand-night main.mkt-home .home-trust li{
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
html body.public.brand-night main.mkt-home .home-trust li svg,
html body.public.brand-night main.mkt-home .home-trust li .home-icon{
  box-sizing:content-box;
  flex:none;
  width:16px;
  height:16px;
  padding:9px;
  border-radius:10px;
  background:var(--cw-tint);
  color:var(--cw-accent);
}

/* --- the "Built for trusted groups" badge: the reference's "New" pill ----- */
html body.public.brand-night main.mkt-home .home-hero .mkt-kicker{
  border:1px solid var(--card-edge);
  background:var(--cw-card);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
html body.public.brand-night main.mkt-home .home-hero .mkt-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cw-accent);
  box-shadow:0 0 0 3px var(--cw-tint);
}

/* --- sections that were quiet panels become cards ------------------------- */
html body.public.brand-night main.mkt-home .home-control,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-control,
html body.public.brand-night main.mkt-home .home-cta,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-cta,
html body.public.brand-night main .mkt-cta{
  border:1px solid var(--card-edge);
  border-radius:24px;
  box-shadow:var(--card-shadow);
}

@media(max-width:760px){
  html body.public.brand-night main.mkt-home .home-phone-wrap::before{inset:-6% -10% -4% -10%}
  html body.public.brand-night main.mkt-home .home-phone-wrap::after{right:-4%;width:110px;height:110px}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night main .mkt-card,
  html body.public.brand-night main .plan-path-card,
  html body.public.brand-night main .feature-card{transition:none}
  html body.public.brand-night main .mkt-card:hover,
  html body.public.brand-night main .plan-path-card:hover,
  html body.public.brand-night main .feature-card:hover{transform:none}
}

/* --- member pages: the same card ------------------------------------------ */
:is(.member-shell,.member-auth) .member-auth-panel,
:is(.member-shell,.member-auth) .card,
:is(.member-shell,.member-auth) .member-form-card{
  border-color:rgba(16,24,40,.08);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -10px rgba(16,24,40,.10);
}

/* ------------------------------------------------------------------------ *
   Header and tips heights, 2026-10-12.

   Owner request: the tips banner reads as a slim strip above the header, so
   it is always shorter than the header, and the header itself is a little
   taller. One number per width, used by both the bar and the scroll offset,
   so an in-page link never lands under the bar.

   Desktop: header 76px (was 68), banner about 40px (was 54).
   Phone:   header 72px (was 64), banner at most three short lines, about
            60px (was up to 81): the text drops to 12.5px, the decorative
            icon goes, and the padding halves. Nothing is clipped -- every
            tip still reads in full -- which a max-height would not promise.
 * ------------------------------------------------------------------------ */
html body.public.brand-night{
  --public-header-h:76px;
  scroll-padding-top:calc(var(--public-header-h) + var(--space-4));
}
html body.public.brand-night header.public-topbar{height:var(--public-header-h)}

html body.public.brand-night .home-tips{
  padding-top:6px;
  padding-bottom:6px;
  gap:10px;
}
html body.public.brand-night .home-tip{gap:10px}
html body.public.brand-night .home-tip-icon{width:28px;height:28px;border-radius:8px}
html body.public.brand-night .home-tip-icon .home-icon{width:15px;height:15px}
html body.public.brand-night .home-tip-text{font-size:14px;line-height:20px}
html body.public.brand-night .home-tips-close{top:50%;width:28px;height:28px;margin-top:-14px}
html body.public.brand-night .home-tips-close:hover,
html body.public.brand-night .home-tips-close:focus-visible{transform:rotate(90deg)}

@media(max-width:760px){
  html body.public.brand-night{--public-header-h:72px}
  html body.public.brand-night .home-tips,
  html body.public.brand-night .home-tips.is-live{
    padding:6px 44px 6px 16px;
    gap:8px;
  }
  html body.public.brand-night .home-tip-icon{display:none}
  html body.public.brand-night .home-tip-text{font-size:12.5px;line-height:17px}
  html body.public.brand-night .home-tips-close{right:6px;width:32px;height:32px;margin-top:-16px}
}
/* The narrowest phones: four lines at 12.5px, three at 12px. */
@media(max-width:359px){
  html body.public.brand-night .home-tips,
  html body.public.brand-night .home-tips.is-live{padding:6px 38px 6px 12px}
  html body.public.brand-night .home-tip-text{font-size:12px;line-height:16px}
  html body.public.brand-night .home-tips-close{right:4px}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night .home-tips-close:hover,
  html body.public.brand-night .home-tips-close:focus-visible{transform:none}
}

/* ------------------------------------------------------------------------ *
   Page-loading shimmer, 2026-10-12 (pwa.js builds it; see the note there).

   Shown only while the next page is on its way, under a header that stays.
   One sweep layer moves by transform across the whole skeleton, so the
   animation runs on the compositor: no layout and no paint per frame, which
   is what keeps it from costing a budget phone a frame. The bones are flat
   shapes in the shell's own quiet surface.
 * ------------------------------------------------------------------------ */
.page-shimmer{
  --sk-ground:#FFFFFF;
  --sk-bone:#EEF0F2;
  --sk-shine:rgba(255,255,255,.75);
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:35;
  display:none;
  overflow:hidden;
  background:var(--sk-ground);
  opacity:0;
  pointer-events:none;
}
html:not([data-public-theme="light"]) body.public .page-shimmer{
  --sk-ground:#0B1016;
  --sk-bone:rgba(244,241,234,.07);
  --sk-shine:rgba(244,241,234,.06);
}
html.is-page-loading .page-shimmer{
  display:block;
  pointer-events:auto;
  animation:page-shimmer-in .18s ease-out forwards;
}
@keyframes page-shimmer-in{to{opacity:1}}

/* An indeterminate line under the header, in the brand. */
.page-shimmer-bar{
  position:absolute;
  top:0;
  left:0;
  width:40%;
  height:3px;
  border-radius:0 3px 3px 0;
  background:var(--t-brand);
  animation:page-shimmer-bar 1.1s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform;
}
@keyframes page-shimmer-bar{
  from{transform:translateX(-100%)}
  to{transform:translateX(260%)}
}

/* The skeleton: a kicker, a title, two lines, three cards, two lines. */
.page-shimmer-page{
  position:relative;
  box-sizing:border-box;
  width:min(1152px,100% - 32px);
  margin:clamp(28px,6vw,64px) auto 0;
  display:grid;
  gap:14px;
}
.page-shimmer .sk{display:block;border-radius:8px;background:var(--sk-bone)}
.page-shimmer .sk-kicker{width:120px;height:12px;border-radius:999px}
.page-shimmer .sk-title{width:min(560px,90%);height:40px;margin-bottom:6px;border-radius:12px}
.page-shimmer .sk-line{width:min(640px,100%);height:14px}
.page-shimmer .sk-short{width:min(420px,70%)}
.page-shimmer .sk-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:18px 0 10px;
}
.page-shimmer .sk-card{height:150px;border-radius:16px}
@media(max-width:640px){
  .page-shimmer .sk-cards{grid-template-columns:1fr}
  .page-shimmer .sk-card{height:96px}
  .page-shimmer .sk-card:nth-child(3){display:none}
}
/* The member shell is a single narrow column; so is its skeleton. */
body:has(.member-shell) .page-shimmer-page,
body:has(.member-auth) .page-shimmer-page{width:min(560px,100% - 32px)}
body:has(.member-shell) .page-shimmer .sk-cards,
body:has(.member-auth) .page-shimmer .sk-cards{grid-template-columns:1fr}
body:has(.member-shell) .page-shimmer .sk-card,
body:has(.member-auth) .page-shimmer .sk-card{height:84px}

/* The sweep: a band of light crossing each bone, clipped to it so the
   ground never shows a box. Every band is a transformed pseudo-element --
   compositor work only -- and they share one timing so they read as a
   single pass. */
.page-shimmer .sk{position:relative;overflow:hidden}
.page-shimmer .sk::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 20%,var(--sk-shine) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:page-shimmer-sweep 1.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes page-shimmer-sweep{
  to{transform:translateX(100%)}
}

@media(prefers-reduced-motion:reduce){
  html.is-page-loading .page-shimmer{animation:none;opacity:1}
  .page-shimmer-bar{animation:none;width:100%;opacity:.5}
  .page-shimmer .sk::after{animation:none;display:none}
}

/* ------------------------------------------------------------------------ *
   Header edge, hero card and card outlines, 2026-10-12.

   Owner request: the header's lower edge clearly outlined with a shadow on a
   soft white gradient; the hero back inside a card with a white gradient and
   a well-defined edge; and every card's edge outlined clearly. Colours stay
   neutral -- white into a breath of grey -- so the brand green is still the
   only colour on the page. The footer is not touched.
 * ------------------------------------------------------------------------ */
html body.public.brand-night{
  --edge-strong:rgba(244,241,234,.14);
  --hero-sheen:0 1px 0 rgba(244,241,234,.05) inset;
  --head-ground:linear-gradient(180deg,rgba(17,24,33,.97) 0%,rgba(11,16,22,.94) 100%);
  --head-shadow:0 1px 0 rgba(244,241,234,.08),0 10px 24px -12px rgba(0,0,0,.65);
  --white-card:linear-gradient(180deg,#18212C 0%,#121A23 100%);
  --hero-card:
    radial-gradient(900px 420px at 85% 0%,rgba(42,165,106,.10),transparent 70%),
    linear-gradient(180deg,#16202A 0%,#0F161E 100%);
}
html[data-public-theme="light"] body.public.brand-night{
  --edge-strong:rgba(16,24,40,.12);
  --hero-sheen:0 1px 0 rgba(255,255,255,.8) inset;
  --head-ground:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,250,249,.96) 100%);
  --head-shadow:0 1px 0 rgba(16,24,40,.08),0 10px 24px -12px rgba(16,24,40,.22);
  --white-card:linear-gradient(180deg,#FFFFFF 0%,#FAFBFB 100%);
  --hero-card:
    radial-gradient(900px 420px at 85% 0%,rgba(42,165,106,.06),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,#F7F9F8 100%);
}

/* --- the header: a white gradient, its lower edge drawn by a shadow ------- */
html body.public.brand-night header.public-topbar::before,
html[data-public-theme="light"] body.public.brand-night header.public-topbar::before{
  background:var(--head-ground);
  border-bottom:1px solid var(--edge-strong);
  box-shadow:var(--head-shadow);
}

/* --- the hero, as an outlined white-gradient card ------------------------- */
html body.public.brand-night main.mkt-home .home-hero,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero{
  overflow:hidden;
  margin-top:clamp(16px,3vw,32px);
  padding:clamp(24px,5vw,56px);
  border:1px solid var(--edge-strong);
  border-radius:28px;
  background:var(--hero-card);
  box-shadow:var(--hero-sheen),var(--card-shadow);
}

/* --- every card: the same white gradient, a clearly drawn edge ------------ */
html body.public.brand-night main .mkt-card,
html body.public.brand-night main .plan-path-card,
html body.public.brand-night main .feature-card,
html body.public.brand-night main .signin-card,
html body.public.brand-night main .narrow-public-card,
html body.public.brand-night main .support-guide-card,
html body.public.brand-night main .support-form-card,
html body.public.brand-night main .start-panel,
html body.public.brand-night main .pricing-boundary-strip,
html body.public.brand-night main.mkt-home .home-steps li,
html body.public.brand-night main.mkt-home .home-control-grid > div,
html body.public.brand-night main.mkt-home .home-price-card,
html body.public.brand-night main.mkt-home .home-early-bird{
  border-color:var(--edge-strong);
  background:var(--white-card);
}
html body.public.brand-night main .mkt-card:hover,
html body.public.brand-night main .plan-path-card:hover,
html body.public.brand-night main .feature-card:hover,
html body.public.brand-night main .support-guide-card:hover,
html body.public.brand-night main.mkt-home .home-steps li:hover,
html body.public.brand-night main.mkt-home .home-control-grid > div:hover,
html body.public.brand-night main.mkt-home .home-price-card:hover{
  border-color:var(--edge-strong);
}
/* The featured plan keeps its brand outline. */
html body.public.brand-night main .plan-path-card.is-featured,
html body.public.brand-night main.mkt-home .home-price-card.is-featured,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-price-card.is-featured,
html:not([data-public-theme="light"]) body.public.brand-night main.mkt-home .home-price-card.is-featured{
  border-color:var(--cw-accent);
  background:var(--white-card);
}
/* Panels that hold cards: the same edge, a white gradient of their own. */
html body.public.brand-night main.mkt-home .home-control,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-control,
html body.public.brand-night main.mkt-home .home-cta,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-cta,
html body.public.brand-night main .mkt-cta{
  border-color:var(--edge-strong);
  background:var(--hero-card);
}
@media(max-width:760px){
  html body.public.brand-night main.mkt-home .home-hero,
  html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero{border-radius:22px}
}

/* ------------------------------------------------------------------------ *
   Landing conversion pass, 2026-10-12.

   From an owner-supplied review, the parts that are true to the product:
   the call to action directly under the headline, the market names as one
   swipeable row on a phone, a "Private by design" section built only from
   claims /security already makes, and the questions groups ask before they
   start. (Invented numbers, testimonials, a demo that does not exist and
   features the product does not have were left out on purpose.)
 * ------------------------------------------------------------------------ */
html body.public.brand-night main.mkt-home .home-hero .mkt-lead{margin-bottom:4px}
html body.public.brand-night main.mkt-home .home-hero .mkt-actions{margin:18px 0 22px}
html body.public.brand-night main.mkt-home .home-hero .market-picker{margin-top:0}

/* --- the market names: one swipeable row on a phone ----------------------- */
/* The options sit in their own wrapper so the label can stay put while the
   names scroll. On wider screens the wrapper is display:contents, which
   leaves the picker's wrapping layout exactly as it was. */
html body.public.brand-night main.mkt-home .market-options{display:contents}
@media(max-width:640px){
  html body.public.brand-night main.mkt-home .market-picker{flex-wrap:wrap}
  html body.public.brand-night main.mkt-home .market-picker > span{flex:1 1 100%}
  html body.public.brand-night main.mkt-home .market-options{
    display:flex;
    flex:1 1 100%;
    gap:8px;
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:2px;
    -webkit-mask:linear-gradient(90deg,#000 85%,transparent);
    mask:linear-gradient(90deg,#000 85%,transparent);
  }
  html body.public.brand-night main.mkt-home .market-options::-webkit-scrollbar{display:none}
  html body.public.brand-night main.mkt-home .market-options > *{flex:none;scroll-snap-align:start}
}

/* --- private by design ---------------------------------------------------- */
html body.public.brand-night main.mkt-home .home-privacy-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:24px 0 18px;
  padding:0;
  list-style:none;
}
html body.public.brand-night main.mkt-home .home-privacy-grid li{
  display:grid;
  align-content:start;
  gap:8px;
  padding:clamp(20px,2.5vw,26px);
  border:1px solid var(--edge-strong);
  border-radius:16px;
  background:var(--white-card);
  box-shadow:var(--card-shadow);
}
html body.public.brand-night main.mkt-home .home-privacy-grid .home-icon{
  box-sizing:content-box;
  width:20px;
  height:20px;
  padding:11px;
  border-radius:12px;
  background:var(--cw-tint);
  color:var(--cw-accent);
}
html body.public.brand-night main.mkt-home .home-privacy-grid h3{margin:8px 0 0;font-size:1.05rem}
html body.public.brand-night main.mkt-home .home-privacy-grid p{margin:0;color:var(--cw-ink-2);font-size:.95rem;line-height:1.55}
@media(max-width:1024px){
  html body.public.brand-night main.mkt-home .home-privacy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  html body.public.brand-night main.mkt-home .home-privacy-grid{grid-template-columns:1fr}
}

/* --- questions ------------------------------------------------------------ */
html body.public.brand-night main.mkt-home .home-faq .faq-list{
  max-width:820px;
  margin-top:20px;
  border:1px solid var(--edge-strong);
  border-radius:16px;
  background:var(--white-card);
  box-shadow:var(--card-shadow);
  overflow:hidden;
}
html body.public.brand-night main.mkt-home .home-faq .faq-list details{
  margin:0;
  padding:0 22px;
  border:0;
  border-top:1px solid var(--edge-strong);
  background:transparent;
}
html body.public.brand-night main.mkt-home .home-faq .faq-list details:first-child{border-top:0}
html body.public.brand-night main.mkt-home .home-faq .faq-list summary{
  padding:18px 0;
  font-weight:500;
  color:var(--cw-ink);
  cursor:pointer;
}
html body.public.brand-night main.mkt-home .home-faq .faq-list p{
  margin:0 0 18px;
  max-width:68ch;
  color:var(--cw-ink-2);
}

/* --- contrast, measured -------------------------------------------------- *
   A sweep of every text node on /, /pricing and /how against its rendered
   ground, in both themes. Four failures, all fixed here:
   - "Early Bird · Open" (light): #D69A62 on white, 2.43:1 -> the accent.
   - the phone mockup's helper line (light): #9EADBF, 2.26-2.29:1 -> --mute.
   - the numbered rules and steps (light): --t-brand is fill only, 3.14:1
     -> --t-brand-deep, as tokens.css says text should be.
   - /pricing "What you pay for" (dark): the member shell's allocation panel
     is also called .split-section, and its white background landed under
     the public section's near-white text, 1.13:1. The public section takes
     its own card ground back. */
html[data-public-theme="light"] body.public.brand-night .early-bird-inline span{color:var(--t-accent)}
html[data-public-theme="light"] body.public.brand-night .round-mock p.mock-helper{color:var(--mute)}
html[data-public-theme="light"] body.public.brand-night .rule-grid span,
html[data-public-theme="light"] body.public.brand-night .mkt-step .num{color:var(--t-brand-deep)}
html body.public.brand-night main .split-section{
  border:1px solid var(--edge-strong);
  background:var(--white-card);
  box-shadow:var(--card-shadow);
}
/* The same sweep across the other public pages (/how, /early-bird, /support,
   /start, /chama, /circles, /signin). The pattern was the same each time:
   step numbers in the fill-only green, and text colours carried over from
   the other theme. */
html[data-public-theme="light"] body.public.brand-night .round-loop span,
html[data-public-theme="light"] body.public.brand-night .early-bird-proof > span,
html[data-public-theme="light"] body.public.brand-night .support-guide-card > span,
html[data-public-theme="light"] body.public.brand-night .start-move > span{color:var(--t-brand-deep)}
html[data-public-theme="light"] body.public.brand-night .start-side-panel .mkt-kicker{color:var(--t-brand-dim)}
html[data-public-theme="light"] body.public.brand-night .mkt-step p,
html[data-public-theme="light"] body.public.brand-night .mkt-cta-note{color:var(--mute)}
/* The product mockups are screens: solid night in both themes, so their
   light type reads (it was a translucent night over white -- a grey box). */
html[data-public-theme="light"] body.public.brand-night .product-shot,
html[data-public-theme="light"] body.public.brand-night .assistant-shot{background:#141C26}
html:not([data-public-theme="light"]) body.public.brand-night .support-guide-card > span,
html:not([data-public-theme="light"]) body.public.brand-night .start-member-strip strong{color:var(--t-green-bright)}
html:not([data-public-theme="light"]) body.public.brand-night .trust-spine p{color:var(--mute)}
/* The /early-bird step numbers sat on the brown generation's tile (#3A2A1E)
   at 2.59:1; they take the brand chip every other step number uses. */
html body.public.brand-night .trust-spine .num{
  background:var(--cw-tint);
  color:var(--cw-accent);
  font-family:var(--t-font-body);
  font-weight:500;
}
html[data-public-theme="light"] body.public.brand-night .trust-spine .num{color:var(--t-brand-dim)}
html[data-public-theme="light"] body.public.brand-night .start-move > span{color:var(--t-brand-dim)}
html:not([data-public-theme="light"]) body.public.brand-night .legal-page th{color:var(--mute)}
html:not([data-public-theme="light"]) body.public.brand-night .legal-page .inline-cookie-settings{color:var(--t-green-bright)}

/* --- the hero's "Start a circle": a white-shade button --------------------- *
   Owner request, 2026-10-13: on a phone the green AI launcher sits in the
   same corner as this button and two greens ran together. The hero's main
   action takes a white-shade face with the brand green as its text and
   edge, so each reads on its own. Every other primary button is unchanged. */
html body.public.brand-night main.mkt-home .home-hero .mkt-actions .btn:not(.ghost),
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero .mkt-actions .btn:not(.ghost){
  border:1.5px solid var(--t-brand-deep);
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F6F3 100%);
  color:var(--t-brand-deep);
  font-weight:500;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px -8px rgba(20,123,73,.35);
}
html body.public.brand-night main.mkt-home .home-hero .mkt-actions .btn:not(.ghost):hover,
html[data-public-theme="light"] body.public.brand-night main.mkt-home .home-hero .mkt-actions .btn:not(.ghost):hover{
  border-color:var(--t-brand-dim);
  background:linear-gradient(180deg,#FFFFFF 0%,#E7F4EE 100%);
  color:var(--t-brand-dim);
  box-shadow:0 2px 4px rgba(16,24,40,.08),0 10px 22px -8px rgba(20,123,73,.4);
}

/* ------------------------------------------------------------------------ *
   The public drawer, 2026-10-13: full height, an Admin portal submenu.

   The drawer is fixed from the viewport's top to its bottom, but it lives
   inside the header, whose z-index (40) is below the tips banner's (41) --
   so the banner sat over the drawer's head. While the drawer is open the
   header is raised above everything on the page, so the drawer covers the
   full height, banner included.

   The theme switch left the drawer (the header keeps its sun/moon button).
   "Admin portal" is a nested <details>: its chevron item opens a second,
   indented menu with the admin links, and turns as it opens.
 * ------------------------------------------------------------------------ */
html body.public.brand-night header.public-topbar:has(.nav-menu[open]){z-index:90}
html body.public.brand-night .nav-menu .nav-menu-panel{
  top:0;
  bottom:0;
  height:100vh;
  height:100dvh;
  border-radius:0;
}
html body.public.brand-night .nav-admin{
  margin-top:10px;
  border-top:1px solid var(--cw-line);
  padding-top:8px;
}
html body.public.brand-night .nav-admin > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--cw-ink);
  font-weight:500;
  list-style:none;
  cursor:pointer;
}
html body.public.brand-night .nav-admin > summary::-webkit-details-marker{display:none}
html body.public.brand-night .nav-admin > summary:hover{background:var(--cw-tint)}
html body.public.brand-night .nav-admin-chevron{transition:transform .2s ease;color:var(--cw-ink-2)}
html body.public.brand-night .nav-admin[open] .nav-admin-chevron{transform:rotate(180deg);color:var(--cw-accent)}
html body.public.brand-night .nav-admin-menu{
  display:grid;
  gap:2px;
  margin:4px 0 0 12px;
  padding:6px 0 6px 10px;
  border-left:2px solid var(--cw-accent);
  animation:nav-admin-open .2s ease-out;
}
html body.public.brand-night .nav-admin-menu a:not(.btn){min-height:40px;font-size:.94rem}
@keyframes nav-admin-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night .nav-admin-chevron{transition:none}
  html body.public.brand-night .nav-admin-menu{animation:none}
}

/* The footer's way to the assistant, where the mailbox used to be. */
html body.public.brand-night .public-footer .foot-assistant{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--cw-accent);
  border-radius:999px;
  background:var(--cw-card);
  color:var(--cw-accent);
  font-weight:500;
  text-decoration:none;
}
html body.public.brand-night .public-footer .foot-assistant:hover{background:var(--cw-tint)}

/* --- the Terms agreement on sign-in and sign-up ----------------------------- */
.member-auth .auth-terms{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin:4px 0 2px;
  padding:10px 12px;
  border:1px solid var(--t-line);
  border-radius:12px;
  background:var(--t-inset);
  color:var(--t-ink);
  font-size:14px;
  line-height:20px;
  cursor:pointer;
}
.member-auth .auth-terms input{
  width:18px;
  height:18px;
  min-height:0;
  margin:1px 0 0;
  padding:0;
  accent-color:var(--t-brand-deep);
}
.member-auth .auth-terms a{color:var(--t-brand-deep);font-weight:500}
.member-auth .auth-terms.is-flagged{border-color:var(--t-accent);background:var(--t-accent-tint)}
.member-auth [data-auth-terms-gated][aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* --- console: the capacity's tools on the dashboard ------------------------ */
.console-tools .console-tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:10px;
  margin-top:10px;
}
.console-tools .console-tool{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid rgba(231,238,246,.12);
  border-radius:12px;
  color:#E7EEF6;
  text-decoration:none;
}
.console-tools .console-tool:hover{border-color:var(--t-green-bright);background:rgba(53,184,121,.08)}
.console-tools .console-tool strong{font-size:14px;font-weight:600}
.console-tools .console-tool span{font-size:12px;line-height:17px;color:#9AA8BA}
.console-tools .console-tools-more{margin-top:12px}
.console-tools .console-tools-more > summary{cursor:pointer;color:#9AA8BA;font-size:13px}

/* ------------------------------------------------------------------------ */
/* Support conversations, and Tanda AI's hand-over to the team.             */
/* ------------------------------------------------------------------------ */
/* The chat window carries the launcher's bot, on the launcher's green, so
   the button and the window it opens read as one assistant. */
.tanda-ai-mark{
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.26),rgba(255,255,255,0) 48%),
    linear-gradient(140deg,#34C98A 0%,#13925F 48%,#0B5E4C 100%);
  color:#FFFFFF;
}
.tanda-ai-mark svg{display:block;width:20px;height:20px}

.tanda-ai-handoff{display:grid;gap:8px;width:100%}
.tanda-ai-handoff p{margin:0;font-size:12.5px;line-height:17px;color:var(--ai-mute)}
.tanda-ai-handoff textarea,
.tanda-ai-handoff input[type="email"]{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  border:1px solid var(--ai-line);
  border-radius:10px;
  background:var(--t-card);
  color:var(--ai-ink);
  font:inherit;
  font-size:14px;
  resize:vertical;
}
.tanda-ai-handoff-share{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ai-mute)}
.tanda-ai-handoff-actions{display:flex;gap:8px;flex-wrap:wrap}
.tanda-ai-chip.is-primary{background:var(--t-brand-deep);border-color:var(--t-brand-deep);color:#FFFFFF}

.support-shell .support-compose form{display:grid;gap:8px}
.support-shell .support-compose select,
.support-shell .support-compose textarea{width:100%;box-sizing:border-box}
.support-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.support-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--t-line);
  border-radius:14px;
  background:var(--t-card);
  color:var(--t-ink);
  text-decoration:none;
}
.support-row:hover{border-color:var(--t-brand-deep)}
.support-row-main{display:grid;gap:2px;min-width:0}
.support-row-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-row-main small{color:var(--t-muted)}
.support-status{
  flex:none;
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:var(--t-inset);
  color:var(--t-ink);
}
.support-status.is-in_progress{background:var(--t-green-tint);color:var(--t-brand-deep)}
.support-status.is-open{background:var(--t-accent-tint);color:var(--t-ink)}
.support-thread{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.support-msg{
  max-width:86%;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid var(--t-line);
  background:var(--t-card);
}
.support-msg p{margin:2px 0 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.support-msg-who{font-size:12px;font-weight:600;color:var(--t-muted)}
.support-msg time{font-size:11.5px;color:var(--t-muted)}
.support-msg.is-requester{justify-self:end;background:var(--t-green-tint);border-bottom-right-radius:6px}
.support-msg.is-staff{justify-self:start;border-bottom-left-radius:6px}
.support-msg.is-assistant{justify-self:start;background:var(--t-inset);border-style:dashed}
@media(max-width:640px){.support-msg{max-width:100%}}

/* --- console: database analytics and tools -------------------------------- */
.console-database .db-panel{max-width:1180px;margin:0 auto 14px}
.console-database .db-panel h4{margin:16px 0 8px;font-size:14px;color:#E7EEF6}
.console-database .db-panel .console-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.console-database .db-panel .console-section-head p{margin:4px 0 0;color:#9AA8BA;font-size:13px;max-width:62ch}
.console-database .db-table-wrap{overflow-x:auto;margin-top:10px}
.console-database .db-table{width:100%;border-collapse:collapse;font-size:13px}
.console-database .db-table th{text-align:left;font-weight:600;color:#9AA8BA;padding:8px 10px;border-bottom:1px solid rgba(231,238,246,.12);white-space:nowrap}
.console-database .db-table td{padding:9px 10px;border-bottom:1px solid rgba(231,238,246,.06);color:#E7EEF6;vertical-align:top}
.console-database .db-table td small{display:block;color:#9AA8BA;font-size:11.5px}
.console-database .db-table tr.needs-care td:first-child{box-shadow:inset 3px 0 0 var(--t-accent)}
.console-database .db-flag{color:#F3B37B !important}
.console-database .db-tools{display:flex;gap:6px;flex-wrap:nowrap}
.console-database .db-history{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.console-database .db-history li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;padding:8px 10px;border:1px solid rgba(231,238,246,.08);border-radius:10px;font-size:13px;color:#E7EEF6}
.console-database .db-history li span:nth-child(2){color:#9AA8BA}
.console-database .db-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:10px 0 0;font-size:13px}
.console-database .db-facts dt{color:#9AA8BA}
.console-database .db-facts dd{margin:0;color:#E7EEF6;overflow-wrap:anywhere}
.console-database .db-note{color:#9AA8BA;font-size:12.5px;margin:10px 0 0}
.console-database .db-summary-link{color:var(--t-green-bright)}
.console-database .db-schema-request{margin-top:14px;padding:12px;border:1px solid rgba(243,179,123,.35);border-radius:12px;display:grid;gap:10px}
.console-database .db-schema-request h4{margin:0;color:#E7EEF6;font-size:14px}
.console-database .db-schema-request form{display:grid;gap:8px;justify-items:start}
.console-database .db-sql{margin:8px 0 0;padding:10px;max-height:260px;overflow:auto;border-radius:8px;background:rgba(0,0,0,.25);color:#E7EEF6;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.console-database .db-policy{border:1px solid rgba(231,238,246,.1);border-radius:10px;padding:8px 10px;display:grid;gap:4px;color:#E7EEF6;font-size:13px}
.console-database .db-schema-history{margin-top:12px;color:#9AA8BA;font-size:13px}
/* Developer workspace (/console/dev): an editor-like dark surface. */
.dev-workspace .dev-pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid rgba(231,238,246,.16);color:#9AA8BA}
.dev-workspace .dev-pill.is-open{color:#07110D;background:var(--t-green-bright);border-color:transparent}
.dev-workspace .dev-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px;position:sticky;top:0;z-index:2;padding:6px 0;background:inherit}
.dev-workspace .dev-tabs a{padding:6px 12px;border-radius:8px;border:1px solid rgba(231,238,246,.1);color:#E7EEF6;font-size:13px;text-decoration:none}
.dev-workspace .dev-tabs a:hover,.dev-workspace .dev-tabs a:focus-visible{border-color:var(--t-green-bright)}
.dev-workspace .dev-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--t-accent);color:#fff;font-size:11px;text-align:center}
.dev-workspace .dev-panel{margin-bottom:14px;scroll-margin-top:56px}
.dev-workspace .dev-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.dev-workspace .dev-tiles div{padding:10px 12px;border:1px solid rgba(231,238,246,.08);border-radius:10px;display:grid;gap:2px}
.dev-workspace .dev-tiles strong{color:#E7EEF6;font-size:18px;font-family:var(--t-font-mono)}
.dev-workspace .dev-tiles span{color:#9AA8BA;font-size:12px}
.dev-workspace .dev-tiles .is-bad{border-color:var(--t-accent)}
.dev-workspace .dev-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0 0;font-size:13px}
.dev-workspace .dev-facts dt{color:#9AA8BA}
.dev-workspace .dev-facts dd{margin:0;color:#E7EEF6;overflow-wrap:anywhere}
.dev-workspace .dev-sub{margin:16px 0 8px;color:#E7EEF6;font-size:13px}
.dev-workspace .dev-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dev-workspace .dev-list li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:center;padding:7px 10px;border:1px solid rgba(231,238,246,.08);border-radius:10px;font-size:13px;color:#E7EEF6}
.dev-workspace .dev-list li span:last-child{color:#9AA8BA;overflow-wrap:anywhere}
.dev-workspace .dev-dot{width:8px;height:8px;border-radius:50%;background:#9AA8BA}
.dev-workspace .dev-dot.is-ok{background:var(--t-green-bright)}
.dev-workspace .dev-link{display:inline-block;margin-top:8px;color:var(--t-green-bright);font-size:13px}
.dev-workspace .dev-table-wrap{overflow-x:auto}
.dev-workspace .dev-table{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--t-font-mono)}
.dev-workspace .dev-table th{text-align:left;color:#9AA8BA;font-weight:600;padding:6px 8px;border-bottom:1px solid rgba(231,238,246,.12);white-space:nowrap}
.dev-workspace .dev-table td{padding:6px 8px;border-bottom:1px solid rgba(231,238,246,.06);color:#E7EEF6;white-space:nowrap}
.dev-workspace .dev-table tr.is-unknown td{background:rgba(243,179,123,.08)}
.dev-workspace .dev-kind{padding:1px 7px;border-radius:6px;font-size:11px;border:1px solid rgba(231,238,246,.14);color:#9AA8BA}
.dev-workspace .dev-kind.is-unknown{color:#F3B37B;border-color:#F3B37B}
.dev-workspace .dev-kind.is-application,.dev-workspace .dev-kind.is-self{color:var(--t-green-bright);border-color:rgba(231,238,246,.14)}
.dev-workspace .dev-inline{display:inline;margin:0}
.dev-workspace .dev-kill{padding:3px 10px;border-radius:7px;border:1px solid #F3B37B;background:transparent;color:#F3B37B;font-size:12px;cursor:pointer}
.dev-workspace .dev-term{background:#0B1118;border:1px solid rgba(231,238,246,.1);border-radius:10px;padding:12px;font-family:var(--t-font-mono);font-size:12.5px;color:#D6E2EE;max-height:520px;overflow:auto}
.dev-workspace .dev-term pre{margin:4px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;color:#B8C7D6}
.dev-workspace .dev-prompt{color:var(--t-green-bright);margin-right:6px}
.dev-workspace .dev-term-input{display:flex;gap:8px;align-items:center}
.dev-workspace .dev-term-input label{flex:1;display:flex;align-items:center}
.dev-workspace .dev-term-input input{flex:1;background:transparent;border:0;outline:none;color:#E7EEF6;font:inherit}
.dev-workspace .dev-term-input button{background:transparent;border:1px solid rgba(231,238,246,.16);border-radius:6px;color:#E7EEF6;font:inherit;padding:2px 10px}
.dev-workspace .dev-newkey{display:grid;gap:6px;padding:12px;border:1px solid var(--t-green-bright);border-radius:10px;color:#E7EEF6;margin-bottom:10px}
.dev-workspace .dev-newkey code{font-family:var(--t-font-mono);font-size:15px;overflow-wrap:anywhere;user-select:all}
.dev-workspace .dev-newkey span{color:#9AA8BA;font-size:12.5px}
.dev-workspace .dev-forms{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.dev-workspace .dev-forms form{display:grid;gap:6px;justify-items:start}
.dev-workspace .dev-forms label{display:grid;gap:4px;color:#9AA8BA;font-size:12.5px}
.dev-workspace .dev-forms input{padding:7px 10px;border-radius:8px;border:1px solid rgba(231,238,246,.16);background:#0B1118;color:#E7EEF6}
.dev-workspace .db-note{color:#9AA8BA;font-size:12.5px;margin:6px 0 0}
@media(max-width:640px){
  .dev-workspace .dev-list li{grid-template-columns:auto 1fr;gap:4px}
  .dev-workspace .dev-list li span:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .console-database .db-history li{grid-template-columns:1fr;gap:2px}
}
.console-tools .console-db-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(231,238,246,.12);
  border-radius:12px;
  color:#E7EEF6;
  text-decoration:none;
}
.console-tools .console-db-summary:hover{border-color:var(--t-green-bright)}
.console-tools .console-db-summary span{display:grid;gap:2px}
.console-tools .console-db-summary strong{font-size:16px}
.console-tools .console-db-summary small{font-size:12px;color:#9AA8BA}
@media(max-width:640px){.console-tools .console-db-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- console sign-in: the owners' Google door ----------------------------- */
.console-login-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#9AA8BA;font-size:12px}
.console-login-divider::before,
.console-login-divider::after{content:"";flex:1;height:1px;background:rgba(231,238,246,.14)}
.console-google-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(231,238,246,.2);
  border-radius:12px;
  background:#FFFFFF;
  color:#1F2937;
  font-weight:600;
  text-decoration:none;
}
.console-google-button:hover{border-color:var(--t-green-bright)}
.console-google-button:focus-visible{outline:3px solid var(--t-green-soft);outline-offset:3px}
.console-google-button .google-mark{display:inline-grid;place-items:center}
.console-google-note{margin:6px 0 0;text-align:center;font-size:12px;color:#9AA8BA}

/* ------------------------------------------------------------------------ *
   Hero card shine, 2026-10-13.

   Owner request: a shimmer across the hero card after a short wait, to make
   the card feel finished. One soft diagonal band of light crosses the card,
   rests, and crosses again. Transform only, so the compositor moves it and
   nothing is laid out or repainted per frame; pointer-events none, so it can
   never sit between a visitor and the hero's buttons. Still for reduced
   motion.
 * ------------------------------------------------------------------------ */
html body.public.brand-night main.mkt-home section.home-hero{position:relative;isolation:isolate}
/* The light passes behind the words and buttons, never over them. */
html body.public.brand-night main.mkt-home section.home-hero > .hero-grid{position:relative;z-index:1}
html body.public.brand-night main.mkt-home section.home-hero::after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:45%;
  z-index:0;
  pointer-events:none;
  /* A green-tinted light: plain white would vanish on the white card. */
  background:linear-gradient(105deg,rgba(42,165,106,0) 0%,rgba(42,165,106,.07) 38%,rgba(255,255,255,.85) 50%,rgba(42,165,106,.07) 62%,rgba(42,165,106,0) 100%);
  transform:translateX(-120%) skewX(-12deg);
  animation:hero-card-shine 7s cubic-bezier(.4,0,.2,1) 2.5s infinite;
}
html:not([data-public-theme="light"]) body.public.brand-night main.mkt-home section.home-hero::after{
  background:linear-gradient(105deg,rgba(52,201,138,0) 0%,rgba(52,201,138,.06) 40%,rgba(255,255,255,.09) 50%,rgba(52,201,138,.06) 60%,rgba(52,201,138,0) 100%);
}
/* About a second crossing the card, then six seconds at rest off its edge. */
@keyframes hero-card-shine{
  0%{transform:translateX(-120%) skewX(-12deg)}
  16%{transform:translateX(330%) skewX(-12deg)}
  100%{transform:translateX(330%) skewX(-12deg)}
}
@media(prefers-reduced-motion:reduce){
  html body.public.brand-night main.mkt-home section.home-hero::after{animation:none;display:none}
}


/* ------------------------------------------------------------------------ *
   Tanda AI thinking panel, 2026-10-13.

   Owner request: thinking in the style of a reasoning model -- a "Thinking"
   header with a live token count and timer, the reasoning writing out under
   it, and once the answer arrives a folded "Thought for 3s" that can be
   opened again. While it thinks, a light runs down its edge and the header
   shimmers: transform and opacity, stilled for reduced motion.
 * ------------------------------------------------------------------------ */
.tanda-ai-msg.is-bot{flex-direction:column;align-items:flex-start}
.tanda-ai-think{
  position:relative;
  max-width:86%;
  padding:8px 12px 8px 14px;
  border-radius:12px;
  background:var(--ai-bot);
  overflow:hidden;
}
.tanda-ai-think::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:var(--ai-line);
}
.tanda-ai-msg.is-thinking .tanda-ai-think::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:40%;
  background:linear-gradient(180deg,rgba(52,201,138,0),#34C98A,rgba(52,201,138,0));
  animation:tanda-ai-think-scan 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes tanda-ai-think-scan{
  from{transform:translateY(-100%)}
  to{transform:translateY(260%)}
}
.tanda-ai-think-head{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  color:var(--ai-mute);
}
.tanda-ai-think-head::-webkit-details-marker{display:none}
.tanda-ai-think-head::after{
  content:"";
  width:7px;
  height:7px;
  margin-left:2px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.tanda-ai-think[open] > .tanda-ai-think-head::after{transform:rotate(225deg) translateY(-2px)}
.tanda-ai-think-meta{
  margin-left:auto;
  padding-left:10px;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  color:var(--ai-mute);
}
.tanda-ai-think-body{
  margin-top:6px;
  max-height:168px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:12.5px;
  line-height:18px;
  color:var(--ai-mute);
}
.tanda-ai-think-body:empty{display:none}
.tanda-ai-msg.is-thought .tanda-ai-stage{animation:none;-webkit-text-fill-color:var(--ai-mute)}
.tanda-ai-tokens{
  margin:3px 0 0 4px;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--ai-mute);
}
@media(prefers-reduced-motion:reduce){
  .tanda-ai-msg.is-thinking .tanda-ai-think::after{animation:none;display:none}
  .tanda-ai-think-head::after{transition:none}
}

/* ------------------------------------------------------------------------ *
   Tanda AI guide tips, 2026-10-13.

   A small card that rises beside the launcher when the page sits idle; the
   card asks the question, "x" ends tips for the tab. Placed by pwa.js next
   to wherever the launcher is. Transform and opacity only, still for
   reduced motion.
 * ------------------------------------------------------------------------ */
.tanda-ai-tip{
  position:fixed;
  z-index:61;
  display:flex;
  align-items:stretch;
  max-width:min(280px,calc(100vw - 24px));
  border:1px solid rgba(42,165,106,.28);
  border-radius:16px;
  background:var(--t-card);
  box-shadow:0 2px 6px rgba(16,24,40,.08),0 14px 32px -10px rgba(11,94,76,.35);
  animation:tanda-ai-tip-in .35s cubic-bezier(.2,.8,.2,1);
}
.tanda-ai-tip::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:-6px;
  width:10px;
  height:10px;
  background:inherit;
  border-right:1px solid rgba(42,165,106,.28);
  border-bottom:1px solid rgba(42,165,106,.28);
  transform:rotate(45deg);
}
.tanda-ai-tip-go{
  display:grid;
  gap:2px;
  padding:10px 4px 10px 14px;
  border:0;
  background:transparent;
  color:var(--t-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.tanda-ai-tip-go strong{font-size:14px;font-weight:600;line-height:19px}
.tanda-ai-tip-go span{font-size:12.5px;line-height:17px;color:var(--t-brand-deep);font-weight:600}
.tanda-ai-tip-go:focus-visible,
.tanda-ai-tip-close:focus-visible{outline:3px solid var(--t-green-soft);outline-offset:2px;border-radius:12px}
.tanda-ai-tip-close{
  flex:none;
  align-self:flex-start;
  width:32px;
  height:32px;
  margin:4px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--t-muted);
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
html[data-public-theme="dark"] .tanda-ai-tip{background:#16202A;border-color:rgba(52,201,138,.3)}
html[data-public-theme="dark"] .tanda-ai-tip-go{color:#E7EEF6}
html[data-public-theme="dark"] .tanda-ai-tip-go span{color:#6FD7A4}
@keyframes tanda-ai-tip-in{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.tanda-ai-tip{animation:none}}
.console-database .team-add-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:12px}
.console-database .team-add-form label{color:#9AA8BA;font-size:13px}
.console-database .team-add-form input[type="email"]{min-height:40px;padding:8px 12px;border:1px solid rgba(231,238,246,.2);border-radius:10px;background:transparent;color:#E7EEF6;font:inherit}
@media(max-width:640px){.console-database .team-add-form{grid-template-columns:1fr}}
.junior-signout{margin-top:14px}