/* GreenWorks 365 - Admin
 *
 * The design system of prototype/greenworks-365-demo.html, rebuilt for a desk-width console.
 * Same two families (Newsreader for display, Manrope for body), the same lit green ground, the
 * same #26805A primary button, the same 24px panel radius and the same glowing green panel
 * outline in both themes.
 *
 * Two themes, one rule about how they are written: every token is declared on the .admin element
 * and every light-mode override is declared on ".admin.light" - the SAME element, never
 * ".admin.light .something". Panels carry their own palette as --panel-* tokens which they remap
 * onto --ink/--sub/--brand/... for their own subtree, so light mode is a solid white card sitting
 * on the dark lit ground, with dark text inside the card and white text on the ground. There is no
 * translucent white and no blur in light mode; those read as fog.
 *
 * Gold is only for membership and PRO in the member app, and gold is the only thing that shimmers.
 * The admin uses neither.
 */

*,*::before,*::after{box-sizing:border-box}

html{background:#0E1114;-webkit-text-size-adjust:100%}
html.theme-light{background:#2B3A33}

/* ---------- tokens: dark is the base ---------- */
.admin{
 color-scheme:dark;
 --font-display:"Newsreader",Georgia,serif;
 --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

 --ground:#0E1114;
 --g1:rgba(60,196,137,.26);--g2:rgba(53,94,59,.42);--g3:rgba(230,194,116,.08);
 --g4:rgba(45,86,58,.34);--g5:rgba(28,75,60,.50);

 --ink:#ECEEEA;--sub:#A9B1BC;--faint:#707986;
 --brand:#3CC489;--red:#F26A4B;--amber:#F2B64A;--blue:#7FB3E8;--champ:#E6C274;
 --brand-soft:rgba(60,196,137,.14);--red-soft:rgba(242,106,75,.14);
 --amber-soft:rgba(242,182,74,.16);--blue-soft:rgba(127,179,232,.14);
 --fill:rgba(255,255,255,.09);--hair:rgba(255,255,255,.10);--hair2:rgba(255,255,255,.16);

 /* the panel palette: what a card looks like from the inside */
 --card:rgba(255,255,255,.055);
 /* opaque, because the pinned actions column must hide the row scrolling under it */
 --acts-bg:#181D1A;--acts-hover:#1E2521;
 --card2:rgba(255,255,255,.07);
 --panel-border:rgba(255,255,255,.10);
 --panel-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px rgba(0,0,0,.35);
 --panel-blur:blur(18px) saturate(140%);
 --panel-ink:#ECEEEA;--panel-sub:#A9B1BC;--panel-faint:#707986;
 --panel-brand:#3CC489;--panel-red:#F26A4B;--panel-amber:#F2B64A;--panel-blue:#7FB3E8;
 --panel-brand-soft:rgba(60,196,137,.14);--panel-red-soft:rgba(242,106,75,.14);
 --panel-amber-soft:rgba(242,182,74,.16);--panel-blue-soft:rgba(127,179,232,.14);
 --panel-fill:rgba(255,255,255,.09);--panel-hair:rgba(255,255,255,.10);--panel-hair2:rgba(255,255,255,.16);
 --field-bg:rgba(255,255,255,.05);
 --row-hover:rgba(255,255,255,.045);
 --sheet:#1F252F;

 --r:24px;--r-sm:14px;
}

/* ---------- light: the hybrid. Same dark scene, solid white panels ---------- */
.admin.light{
 color-scheme:light;
 --ground:#2B3A33;
 --g1:rgba(60,196,137,.28);--g2:rgba(53,94,59,.42);--g3:rgba(60,196,137,.14);
 --g4:rgba(45,86,58,.36);--g5:rgba(31,122,84,.32);

 --ink:#FFFFFF;--sub:#CBD4CE;--faint:#A9B8AF;
 --brand:#7FD8AE;--red:#FF9C80;--amber:#F2C97A;--blue:#A8CDF2;--champ:#E6C274;
 --brand-soft:rgba(60,196,137,.22);--red-soft:rgba(255,156,128,.20);
 --amber-soft:rgba(242,201,122,.22);--blue-soft:rgba(168,205,242,.20);
 --fill:rgba(255,255,255,.14);--hair:rgba(255,255,255,.22);--hair2:rgba(255,255,255,.34);

 --card:#FFFFFF;
 --card2:#F4F7F3;
 --acts-bg:#FFFFFF;--acts-hover:#F2F7F4;
 --panel-border:rgba(60,196,137,.34);
 --panel-shadow:inset 0 1px 0 rgba(255,255,255,1),0 0 0 1px rgba(60,196,137,.30),0 0 14px rgba(60,196,137,.34),0 10px 24px rgba(5,12,9,.42);
 --panel-blur:none;
 --panel-ink:#0F1524;--panel-sub:#5B6470;--panel-faint:#7A8490;
 --panel-brand:#1F7A54;--panel-red:#C24628;--panel-amber:#B8791F;--panel-blue:#2F6FA8;
 --panel-brand-soft:rgba(31,122,84,.12);--panel-red-soft:rgba(194,70,40,.12);
 --panel-amber-soft:rgba(184,121,31,.14);--panel-blue-soft:rgba(47,111,168,.12);
 --panel-fill:rgba(31,122,84,.10);--panel-hair:rgba(31,122,84,.20);--panel-hair2:rgba(31,122,84,.34);
 --field-bg:#FFFFFF;
 --row-hover:rgba(31,122,84,.06);
 --sheet:#FFFFFF;
}

body.admin{
 margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;
 -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
 background:
  radial-gradient(75% 45% at 12% 6%,var(--g1),transparent 62%),
  radial-gradient(55% 38% at 86% 20%,var(--g2),transparent 62%),
  radial-gradient(45% 32% at 96% 52%,var(--g3),transparent 62%),
  radial-gradient(42% 30% at 18% 62%,var(--g4),transparent 62%),
  radial-gradient(70% 45% at 50% 104%,var(--g5),transparent 66%),
  var(--ground);
 background-repeat:no-repeat;background-attachment:fixed;
}
@supports (min-height:100dvh){body.admin{min-height:100dvh}}

[hidden]{display:none!important}
h1,h2,h3,h4,p,figure{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- header strip ---------- */
.topbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
 padding:.85rem clamp(14px,3vw,28px);border-bottom:1px solid var(--hair);
 background:rgba(8,10,12,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.admin.light .topbar{background:rgba(10,20,15,.30)}
.topbar .brand{font-family:var(--font-display);font-size:1.18rem;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.topbar .kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.topbar .who{margin-left:auto;font-size:.82rem;color:var(--sub);text-align:right;min-width:0}
.topbar .who b{display:block;color:var(--ink);font-weight:700;font-size:.88rem}
.topbar .tools{display:flex;gap:.5rem;align-items:center}

/* ---------- shell: nav rail plus one main ---------- */
.shell{max-width:1480px;margin:0 auto;padding:clamp(16px,2.4vw,28px) clamp(14px,3vw,28px) 72px;
 display:grid;grid-template-columns:214px minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:start}
.nav{display:flex;flex-direction:column;gap:.25rem;position:sticky;top:clamp(16px,2.4vw,28px)}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:left;
 border:1px solid transparent;background:transparent;color:var(--sub);font-size:.92rem;font-weight:600;
 padding:.62rem .8rem;border-radius:12px;cursor:pointer}
.nav button:hover{background:var(--fill);color:var(--ink)}
.nav button.on{background:#26805A;color:#fff;border-color:transparent;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.28)}
.nav button .tag{font-size:.7rem;font-weight:700;padding:.1rem .42rem;border-radius:999px;
 background:var(--amber-soft);color:var(--amber)}
.nav button.on .tag{background:rgba(255,255,255,.22);color:#fff}
@media (max-width:1040px){
 .shell{grid-template-columns:minmax(0,1fr)}
 .nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:.3rem;gap:.35rem}
 .nav button{width:auto;flex:0 0 auto;padding:.5rem .8rem;border-radius:999px}
}

/* ---------- headings ---------- */
.head{margin:0 2px 1.05rem}
.h1{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.1rem);font-weight:600;letter-spacing:-.014em;
 line-height:1.12;color:var(--ink)}
.h1 .greet{display:block;font-size:.95rem;font-family:var(--font-body);font-weight:600;color:var(--brand);
 letter-spacing:0;margin-bottom:.25rem}
.head p{font-size:.95rem;color:var(--sub);margin-top:.3rem;max-width:62ch}
.rowline{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.rowline .grow{flex:1;min-width:14rem}

/* ---------- panels ----------
 * A panel carries its own palette. Everything inside it reads --ink, --sub, --brand and the rest
 * from the panel, which is why light mode is a solid white card with dark text sitting on the dark
 * lit ground. The remap lives on the SAME element as the background, never a descendant selector.
 */
.panel,.sheet,.banner,.rowmenu{
 --ink:var(--panel-ink);--sub:var(--panel-sub);--faint:var(--panel-faint);
 --brand:var(--panel-brand);--red:var(--panel-red);--amber:var(--panel-amber);--blue:var(--panel-blue);
 --brand-soft:var(--panel-brand-soft);--red-soft:var(--panel-red-soft);
 --amber-soft:var(--panel-amber-soft);--blue-soft:var(--panel-blue-soft);
 --fill:var(--panel-fill);--hair:var(--panel-hair);--hair2:var(--panel-hair2);
 color:var(--ink)
}
.panel{
 background:var(--card);border:1px solid var(--panel-border);border-radius:var(--r);
 box-shadow:var(--panel-shadow);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);
 overflow:hidden;margin-bottom:clamp(14px,1.6vw,20px)}
.panel-hd{padding:1rem 1.15rem .85rem;border-bottom:1px solid var(--hair);display:flex;align-items:baseline;
 gap:.7rem;flex-wrap:wrap}
.panel-hd h2{font-family:var(--font-display);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.panel-hd .hint{font-size:.84rem;color:var(--sub)}
.panel-hd .count{margin-left:auto;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;
 background:var(--fill);color:var(--sub)}
.panel-bd{padding:1rem 1.15rem 1.1rem}
.panel-bd.flush{padding:0}
.grid2{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid2>.panel{margin-bottom:0}

/* ---------- text bits ---------- */
.ttl{font-weight:700;color:var(--ink)}
.sm{font-size:.82rem;color:var(--sub);line-height:1.45}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
.num{font-variant-numeric:tabular-nums}
.note{border:1px dashed var(--hair2);border-radius:var(--r-sm);padding:.8rem .9rem;font-size:.86rem;color:var(--sub)}
.banner{position:relative;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;border-radius:var(--r-sm);
 padding:.8rem 1rem .8rem 1.3rem;font-size:.9rem;margin-bottom:clamp(14px,1.6vw,20px);
 background:var(--card);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);
 backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);overflow:hidden}
.banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--amber)}
.banner.info::before{background:var(--blue)}
.banner .grow{flex:1;min-width:16rem}
.state{padding:1.4rem 1.15rem;font-size:.92rem;color:var(--sub);text-align:center}
.state.bad{color:var(--red)}
.state b{display:block;color:var(--ink);font-weight:700;margin-bottom:.2rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:999px;
 padding:.62rem 1.05rem;font-size:.9rem;font-weight:700;letter-spacing:-.01em;cursor:pointer;
 background:#26805A;color:#fff;text-decoration:none;white-space:nowrap;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.28);
 transition:transform .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;filter:none;transform:none}
.btn.wide{width:100%}
.btn.sm{padding:.4rem .78rem;font-size:.82rem;box-shadow:none}
.btn.plain{background:var(--fill);color:var(--ink);font-weight:600;border:1px solid var(--hair2);box-shadow:none}
.btn.danger{background:var(--red-soft);color:var(--red);border:1px solid var(--red);box-shadow:none}
.btn.quiet{background:transparent;color:var(--brand);font-weight:600;box-shadow:none;padding-left:.4rem;padding-right:.4rem}
.btn.quiet:hover{background:var(--fill)}
.btnrow{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.btnrow.end{justify-content:flex-end}
a.link,button.link{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
 background:none;border:none;padding:0;font-size:inherit;font-family:inherit}

/* ---------- fields ----------
 * A field is a light surface in light mode wherever it sits, including the filter bar, which is on
 * the dark ground and NOT inside a panel. So a field takes its ink from the panel palette directly
 * rather than from whatever --ink happens to be around it; otherwise a filter dropdown would be
 * white text on a white box.
 */
.field{display:block;width:100%;border:1px solid var(--panel-hair2);background:var(--field-bg);border-radius:var(--r-sm);
 padding:.66rem .8rem;font-family:inherit;font-size:.92rem;color:var(--panel-ink);outline:none}
.field::placeholder{color:var(--panel-faint)}
.field:focus{border-color:var(--panel-brand);box-shadow:0 0 0 3px var(--panel-brand-soft)}
textarea.field{min-height:5.2rem;resize:vertical;line-height:1.5}
select.field{appearance:none;background-image:none;padding-right:.8rem}
.lbl{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin:0 2px .3rem}
.hint{font-size:.79rem;color:var(--sub);margin:.32rem 2px 0;line-height:1.45}
.err{font-size:.85rem;color:var(--red);font-weight:600;margin:.4rem 2px 0}
.fld{margin-bottom:.95rem}
.fldrow{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--ink);font-weight:600}
.check input{width:18px;height:18px;margin-top:.15rem;accent-color:#26805A;flex:0 0 auto}
input[type=range]{width:100%;accent-color:#26805A}

/* ---------- filters ---------- */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:0 2px 1rem}
.filters .search{flex:1 1 15rem;min-width:11rem}
.filters select.field{flex:0 0 auto;width:auto;min-width:9rem}
.seg{display:flex;flex-wrap:wrap;gap:3px;background:var(--fill);border:1px solid var(--hair);border-radius:999px;padding:3px}
.seg button{border:none;background:transparent;font-size:.82rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;
 color:var(--sub);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#26805A;color:#fff}
.dates{display:flex;gap:.4rem;align-items:center;font-size:.82rem;color:var(--sub)}
.dates input{width:9.6rem}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:46rem}
table.tbl.narrow{min-width:34rem}
table.tbl th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--faint);padding:.7rem .9rem;border-bottom:1px solid var(--hair);white-space:nowrap;background:var(--card2)}
table.tbl td{padding:.72rem .9rem;border-bottom:1px solid var(--hair);vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:none}
/* The first column is the one a person reads to find the row, so it gets room before anything wraps. */
table.tbl:not(.narrow) td:first-child,table.tbl:not(.narrow) th:first-child{min-width:11.5rem}
table.tbl tbody tr.click{cursor:pointer}
table.tbl tbody tr.click:hover{background:var(--row-hover)}
table.tbl tbody tr.hl td{background:var(--brand-soft)}
table.tbl tbody tr.click:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* Room for two buttons on a line. Without it the actions column collapses to one button per row. */
table.tbl td.acts{min-width:13.5rem}
/* The row actions are why a staff member opened the table, so they stay in view when a wide table
   scrolls inside its own wrapper. The page itself never scrolls sideways; this keeps Edit and
   Archive reachable without hunting for them. */
table.tbl th.acts,table.tbl td.acts{position:sticky;right:0;z-index:2}
table.tbl td.acts{background:var(--acts-bg);box-shadow:-10px 0 12px -10px rgba(0,0,0,.28)}
table.tbl th.acts{background:var(--acts-bg);box-shadow:-10px 0 12px -10px rgba(0,0,0,.28)}
@media (max-width:52rem){table.tbl th.acts,table.tbl td.acts{position:static;box-shadow:none}}
/* A pinned cell keeps the row's hover, so the row still reads as one line under the pointer. */
table.tbl tbody tr.click:hover td.acts{background:var(--acts-hover)}
/* A wide table can pin its first column too (pinFirst): the name a person reads to find the row stays
   in view while the rest scrolls, so the actions on the right are never next to an unnamed row. */
table.tbl.pin1 td:first-child,table.tbl.pin1 th:first-child{position:sticky;left:0;z-index:1;background:var(--acts-bg)}
table.tbl.pin1 td:first-child{box-shadow:10px 0 12px -10px rgba(0,0,0,.28)}
table.tbl.pin1 tbody tr.click:hover td:first-child{background:var(--acts-hover)}
@media (max-width:52rem){table.tbl.pin1 td:first-child,table.tbl.pin1 th:first-child{position:static;box-shadow:none}}
/* One small menu button instead of a row of buttons: the pinned actions column stays one button wide,
   so it never wraps onto a second line or covers the columns scrolling past it. */
table.tbl td.acts.menu,table.tbl th.acts.menu{min-width:0;width:3.6rem;padding-left:.45rem;padding-right:.7rem;text-align:center}
.rowmenu-btn{min-width:2.3rem;padding:.2rem .55rem;font-size:1.15rem;line-height:1.1;letter-spacing:.04em}
.rowmenu{position:fixed;z-index:65;min-width:11rem;padding:.3rem;display:flex;flex-direction:column;gap:.1rem;
 background:var(--sheet);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.38)}
.rowmenu-item{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;
 text-align:left;padding:.55rem .75rem;border-radius:8px;cursor:pointer;white-space:nowrap}
.rowmenu-item:hover,.rowmenu-item:focus-visible{background:var(--fill);outline:none}
.rowmenu-item.danger{color:var(--red)}
table.tbl td .nowrap{white-space:nowrap}
table.tbl td .cell2{font-size:.8rem;color:var(--sub);margin-top:.12rem}
.thumb{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
 background:var(--fill);border:1px solid var(--hair);color:var(--brand);font-size:.74rem;font-weight:800;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain}
.withthumb{display:flex;gap:.6rem;align-items:flex-start}
.more{padding:.9rem;text-align:center;border-top:1px solid var(--hair)}

/* ---------- chips: one palette across every table ---------- */
.chip{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.01em;padding:.2rem .56rem;border-radius:999px;
 background:var(--fill);color:var(--sub);white-space:nowrap}
.chip.ok{background:var(--brand-soft);color:var(--brand)}
.chip.warn{background:var(--amber-soft);color:var(--amber)}
.chip.bad{background:var(--red-soft);color:var(--red)}
.chip.info{background:var(--blue-soft);color:var(--blue)}
.chip.mute{background:var(--fill);color:var(--sub)}
.chips{display:flex;gap:.28rem;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block;background:var(--sub)}
.dot.ok{background:var(--brand)}.dot.warn{background:var(--amber)}.dot.bad{background:var(--red)}
.dot.info{background:var(--blue)}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;gap:clamp(12px,1.4vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));
 margin-bottom:clamp(14px,1.6vw,20px)}
.kpi{position:relative;padding:1rem 1.1rem 1.05rem 1.35rem}
.kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 5px 5px 0;background:var(--sub)}
.kpi.good::before{background:var(--brand)}
.kpi.info::before{background:var(--blue)}
.kpi.warn::before{background:var(--amber)}
.kpi.danger::before{background:var(--red)}
.kpi .v{font-family:var(--font-display);font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;
 font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .l{font-size:.88rem;font-weight:700;color:var(--ink);margin-top:.35rem}
.kpi .s{font-size:.79rem;color:var(--sub);margin-top:.1rem}

/* ---------- attention groups, rank list, bars, activity ---------- */
.att{border-bottom:1px solid var(--hair);padding:.8rem 1.15rem}
.att:last-child{border-bottom:none}
.att .top{display:flex;align-items:center;gap:.55rem}
.att .top .n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);min-width:1.4rem}
.att .top .l{font-weight:700;color:var(--ink);font-size:.92rem}
.att .top .go{margin-left:auto}
.att ul{list-style:none;margin:.45rem 0 0;padding:0}
.att li{margin-top:.2rem}
.att li button{display:block;width:100%;text-align:left;border:none;background:transparent;color:var(--sub);
 font-size:.85rem;font-family:inherit;padding:.3rem .45rem;border-radius:9px;cursor:pointer}
.att li button:hover{background:var(--fill);color:var(--ink)}
.att .none{font-size:.85rem;color:var(--sub);margin-top:.3rem}
ol.rank{list-style:none;margin:0;padding:0;counter-reset:r}
ol.rank li{counter-increment:r;display:flex;gap:.7rem;align-items:baseline;padding:.55rem 1.15rem;
 border-bottom:1px solid var(--hair)}
ol.rank li:last-child{border-bottom:none}
ol.rank li::before{content:counter(r) ".";color:var(--faint);font-weight:700;font-variant-numeric:tabular-nums;min-width:1.3rem}
ol.rank .nm{flex:1;min-width:0;font-weight:600;color:var(--ink)}
ol.rank .v{font-variant-numeric:tabular-nums;color:var(--sub);font-weight:700}
.bars{display:grid;gap:.6rem}
.bars .b .t{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem;margin-bottom:.22rem}
.bars .b .t .v{font-variant-numeric:tabular-nums;color:var(--sub);font-weight:700}
.bars .track{height:9px;border-radius:999px;background:var(--fill);overflow:hidden}
.bars .track i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:.7rem;align-items:baseline;padding:.5rem 1.15rem;border-bottom:1px solid var(--hair);font-size:.85rem}
.feed li:last-child{border-bottom:none}
.feed .at{color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.78rem;min-width:8.6rem}
.feed .ac{font-weight:700;color:var(--ink)}
.feed .by{color:var(--sub);margin-left:auto;text-align:right}

/* ---------- drawer, modal, confirm, toast ---------- */
.veil{position:fixed;inset:0;z-index:60;background:rgba(6,8,10,.6);display:flex;align-items:center;
 justify-content:center;padding:clamp(12px,3vw,32px)}
.veil.right{justify-content:flex-end;align-items:stretch;padding:0}
.sheet{background:var(--sheet);border:1px solid var(--panel-border);border-radius:var(--r);
 box-shadow:0 24px 60px rgba(0,0,0,.5);max-width:34rem;width:100%;max-height:100%;overflow-y:auto}
.sheet.drawer{max-width:33rem;border-radius:var(--r) 0 0 var(--r);max-height:none;height:100%}
.sheet-hd{display:flex;gap:.8rem;align-items:baseline;padding:1.1rem 1.25rem .85rem;border-bottom:1px solid var(--hair)}
.sheet-hd h2{font-family:var(--font-display);font-size:1.22rem;font-weight:600;letter-spacing:-.012em;flex:1;min-width:0}
.sheet-bd{padding:1.1rem 1.25rem 1.25rem}
.sheet-ft{padding:.9rem 1.25rem 1.1rem;border-top:1px solid var(--hair);display:flex;gap:.5rem;justify-content:flex-end;
 flex-wrap:wrap;position:sticky;bottom:0;background:var(--sheet)}
.kv{display:grid;gap:.05rem;margin-bottom:1rem}
.kv>div{display:flex;gap:.8rem;justify-content:space-between;padding:.48rem 0;border-bottom:1px solid var(--hair);font-size:.87rem}
.kv>div:last-child{border-bottom:none}
.kv .k{color:var(--sub)}
.kv .v{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.urlblock{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;
 border:1px solid var(--hair2);border-radius:var(--r-sm);padding:.7rem .8rem;background:var(--fill);
 user-select:all;overflow-wrap:anywhere;margin-bottom:.9rem}
pre.json{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.5;
 background:var(--fill);border:1px solid var(--hair);border-radius:var(--r-sm);padding:.7rem .8rem;
 margin:.4rem 0 0;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:70;max-width:min(30rem,92vw);
 background:var(--sheet);color:var(--panel-ink);border:1px solid var(--panel-border);border-radius:var(--r-sm);
 padding:.75rem 1rem;font-size:.9rem;box-shadow:0 16px 40px rgba(0,0,0,.45)}

/* ---------- sign-in card ---------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(20px,6vw,64px) 18px}
@supports (min-height:100dvh){.gate{min-height:100dvh}}
.gate .panel{max-width:24rem;width:100%;margin:0}
.gate .panel-bd{padding:1.6rem 1.5rem 1.7rem}
.gate .brand{font-family:var(--font-display);font-size:1.9rem;font-weight:600;letter-spacing:-.014em;line-height:1.1}
.gate .kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
 margin-top:.3rem}
.gate .lead{font-size:.9rem;color:var(--sub);margin:1rem 0 1.15rem}
.gate .btn{width:100%;margin-top:.8rem}
.gate .foot{font-size:.79rem;color:var(--sub);margin-top:1rem;line-height:1.5}
.devbox{border:1px solid var(--brand);background:var(--brand-soft);border-radius:var(--r-sm);
 padding:.7rem .85rem;margin-top:1rem}
.devbox .k{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.devbox .c{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:700;
 letter-spacing:.22em;color:var(--ink);margin-top:.15rem}

/* ---------- partner editor: coverage preview and trade picker ---------- */
/* One long form. Capped so a field is never a 1100 px slot at 1440 px, which is unreadable. */
.editor{max-width:58rem}
.sec{margin-bottom:1.5rem}
.sec>h3{font-family:var(--font-display);font-size:1.06rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sec>.why{font-size:.85rem;color:var(--sub);margin:.18rem 0 .9rem}
.picked{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.picked .p{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;padding:.24rem .3rem .24rem .6rem;
 border-radius:999px;background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand)}
.picked .p button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:.95rem;line-height:1;
 padding:0 .2rem;border-radius:999px}
.picked .p button:hover{background:rgba(0,0,0,.08)}
.cover{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,14rem);align-items:start}
@media (max-width:760px){.cover{grid-template-columns:minmax(0,1fr)}}
.radiusart{border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--fill);padding:.6rem}
.radiusart svg{display:block;width:100%;height:auto}
.radiusart .cap{font-size:.76rem;color:var(--sub);text-align:center;margin-top:.35rem}
.offer{border:1px solid var(--hair);border-radius:var(--r-sm);padding:.75rem .85rem;margin-bottom:.55rem}
.offer .t{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.offer .t .ttl{flex:1;min-width:8rem}

/* ---------- switches ---------- */
.master{padding:1.25rem 1.3rem}
.master .st{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.master .why{font-size:.92rem;color:var(--sub);margin:.35rem 0 1rem;max-width:48ch}
.master.on{border-color:var(--amber)}
.sw{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 1.15rem;border-bottom:1px solid var(--hair)}
.sw:last-child{border-bottom:none}
.sw .grow{flex:1;min-width:0}
.sw .l{font-weight:700;color:var(--ink);font-size:.94rem}
.sw .c{font-size:.83rem;color:var(--sub);margin-top:.1rem}
.sw .m{font-size:.78rem;color:var(--faint);margin-top:.25rem}
.pill{flex:0 0 auto;width:52px;height:30px;border-radius:999px;border:1px solid var(--hair2);background:var(--fill);
 position:relative;cursor:pointer;padding:0;transition:background .16s ease,border-color .16s ease}
.pill::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
 background:var(--sub);transition:transform .16s ease,background .16s ease}
.pill[aria-checked=true]{background:#26805A;border-color:#26805A}
.pill[aria-checked=true]::after{transform:translateX(22px);background:#fff}
.pill:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.pill,.pill::after{transition:none}}

/* ---------- concierge: two panes ---------- */
.two{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.rail{max-height:min(70vh,44rem);overflow-y:auto}
.rail button.card{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--hair);
 background:transparent;padding:.8rem 1rem;cursor:pointer;font-family:inherit;color:inherit}
.rail button.card:hover{background:var(--row-hover)}
.rail button.card.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.rail .who{font-weight:700;font-size:.89rem;color:var(--ink);overflow-wrap:anywhere}
.rail .meta{font-size:.77rem;color:var(--faint);margin-top:.12rem}
.rail .prev{font-size:.83rem;color:var(--sub);margin-top:.3rem;display:-webkit-box;-webkit-line-clamp:2;
 -webkit-box-orient:vertical;line-clamp:2;overflow:hidden}
.thread{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.15rem;max-height:min(52vh,34rem);overflow-y:auto}
.msg{max-width:min(30rem,86%);border-radius:16px;padding:.6rem .8rem;font-size:.89rem;line-height:1.5;
 white-space:pre-wrap;overflow-wrap:anywhere}
.msg.them{align-self:flex-start;background:var(--fill);border:1px solid var(--hair)}
.msg.us{align-self:flex-end;background:#26805A;color:#fff}
.msg .rl{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 opacity:.72;margin-bottom:.18rem}
.replybox{padding:.9rem 1.15rem 1.05rem;border-top:1px solid var(--hair)}
/* what the lead chain did, under the line the member reads: staff see it, the member never does */
.msg .stag{display:block;margin-top:.4rem;padding-top:.32rem;border-top:1px dashed currentColor;font-size:.76rem;
 font-weight:700;opacity:.82}

/* ---------- concierge leads: the visits one conversation made, and the pro picker ---------- */
.leads{padding:.85rem 1.15rem .95rem;border-bottom:1px solid var(--hair)}
.leads .hd{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.55rem}
.leads .hd h3{flex:1;min-width:10rem;font-family:var(--font-display);font-size:1rem;font-weight:600;
 letter-spacing:-.01em;color:var(--ink)}
.leads .offer:last-child{margin-bottom:0}
.leads .picker{margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--hair2)}
.leads .picker>.sm{margin:.2rem 2px .6rem}
.leads .divide{display:flex;align-items:center;gap:.6rem;font-size:.79rem;color:var(--sub);margin:.85rem 2px .55rem}
.leads .divide::before,.leads .divide::after{content:"";flex:1;height:1px;background:var(--hair2)}

/* the Trade select in a fact row, no bigger than the value it stands in for */
.kv select.field.slim{display:inline-block;width:auto;max-width:100%;padding:.28rem .6rem;font-size:.84rem;font-weight:600}

/* ---------- member drill-down tabs ---------- */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;padding:.7rem 1.15rem 0}
.tabs button{border:1px solid transparent;background:transparent;color:var(--sub);font-family:inherit;
 font-size:.86rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;cursor:pointer}
.tabs button:hover{color:var(--ink);background:var(--fill)}
.tabs button.on{background:#26805A;color:#fff}

/* ---------- motion: opacity and transform only, resting state fully visible ---------- */
@media (prefers-reduced-motion:no-preference){
 .rise{animation:rise .34s cubic-bezier(.2,.7,.3,1) both}
 .veil{animation:fade .18s ease both}
 .sheet{animation:pop .26s cubic-bezier(.2,.7,.3,1) both}
 .toast{animation:pop .22s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

@media print{.topbar,.nav,.btnrow,.filters{display:none}}