/* =====================================================================================================================
   Grow App Design System · components.css · v1.0.3 (2026-10-04)
   Load after ds/tokens.css. The resolved Grow Hubs "Studio" look (rounds 5 → 6p) as one flat, mode-aware layer: no
   patch blocks, no !important, no color-mix(). Class names are the Hubs names wherever they are generic (hdr, rail,
   ph, bar, btn, inp, seg, tabs, pop, ctx, dlg, toast, empty, ftr …); Hubs-only names became neutral identity names
   (hubcard → idcard, hubhead → idhead, hublist → idlist, hubcols → cols-side, setcard → panel, .sw tile → idtile).
   See DESIGN-SYSTEM.md for the catalogue, markup and the Hubs/Builder migration tables.
   Sections: 1 base · 2 mode toggle · 3 type · 4 header · 5 popovers · 6 app shell + rail · 7 mobile sheet · 8 footer ·
             9 page header + toolbar · 10 cards + panels · 11 identity art · 12 identity card + header + tabs ·
             13 list rows · 14 buttons · 15 fields · 16 chips, counts, people · 17 menus · 18 dialogs · 19 toasts ·
             20 empty states · 21 tables · 22 steps + options · 23 hero strip · 24 responsive · 25 reduced motion
   ===================================================================================================================== */

/* ---------- 1. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 24px); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
body.noscroll, body.sheet-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a sprite icon that nobody sized would render at 300×150: zero specificity, so every real size rule wins */
:where(svg:not([viewBox]):not([width])) { width: 1.25em; height: 1.25em; }
.gc-logo svg, .idbanner svg, .idbadge svg { stroke: none; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; }
b, strong { font-weight: 650; }
p { text-wrap: pretty; }
a { color: var(--acc-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
:is(.cnt, time, .num, .tnum) { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: 10px; z-index: 130; background: var(--sf); color: var(--ink); padding: 10px 14px; border-radius: 10px; box-shadow: var(--e2);
  font-weight: 700; text-decoration: none; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.tlink { color: var(--acc-ink); font-weight: 650; text-decoration: none; }
.tlink:hover { text-decoration: underline; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 14px; color: var(--acc-ink); text-decoration: none; white-space: nowrap; }
.more svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.more:hover { text-decoration: underline; }
.more:hover svg { transform: translateX(3px); }
/* Safari-safe upload control (Hubs round 3): a rendered, visually hidden file input + a <label for> as the button */
.upl { position: relative; display: inline-flex; flex: none; min-width: 0; }
.upl-in { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.upl-in:focus-visible + label { outline: 2px solid var(--acc-ring); outline-offset: 2px; }

/* ---------- 2. light / dark toggle (sun/moon) + mode cross-fade ---------- */
.hdr-mode { overflow: hidden; }
.hdr-mode .mi { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .hdr-mode .mi-sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-mode="dark"] .hdr-mode .mi-moon { opacity: 0; transform: rotate(80deg) scale(.4); }
/* ds/mode.js adds .mode-xfade for ~260ms while the mode flips (never under reduced motion) */
html.mode-xfade, html.mode-xfade *, html.mode-xfade *::before, html.mode-xfade *::after {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease, outline-color .22s ease !important; }

/* ---------- 3. type helpers: sentence-case group labels, calm kickers ---------- */
.lbl-group, .rail-h, .pop-h, .sheet-h { font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; color: var(--ink-3); text-transform: none; }

/* ---------- 4. header: sticky, 2px strategy stripe, Grow | Product lockup, utilities in logo ink ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); box-shadow: 0 1px 0 var(--hair);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.hdr-stripe { height: var(--stripe-h); background: var(--stripe); }
html[data-mode="dark"] .hdr-stripe { opacity: .85; }
.hdr-in { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); height: var(--hdr); display: flex; align-items: center; gap: 16px; }
.gc-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--logo-ink); text-decoration: none; flex: none; }
.gc-logo .mark { height: 32px; display: inline-flex; }
.gc-logo .mark svg { height: 100%; width: auto; }
.gc-logo .rule { width: 2px; height: 30px; border-radius: 1px; background: var(--logo-rule); }
.gc-logo .word { font-weight: 700; font-size: 18.5px; line-height: 1; letter-spacing: -.02em; }
.hdr-util { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pop-wrap { position: relative; }
.hdr-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-right: 6px; padding: 0 16px 0 13px; border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer; color: var(--hdr-ink); font: 600 14px/1 var(--font); box-shadow: inset 0 0 0 1px var(--hdr-ring);
  transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.hdr-pill:hover, .hdr-pill[aria-expanded="true"] { background: var(--hdr-tint); box-shadow: inset 0 0 0 1px var(--hdr-ring-hover); }
.hdr-pill svg { width: 16px; height: 16px; }
.hdr :is(.hdr-ico, .hdr-mode, .hdr-burger) { color: var(--hdr-ink); }
.hdr :is(.hdr-ico, .hdr-mode, .hdr-burger):hover { background: var(--hdr-tint); color: var(--hdr-ink); }
.hdr .hdr-ico[aria-current="page"] { background: var(--hdr-tint); box-shadow: inset 0 0 0 1px var(--hair-2); }
/* the account circle (6p): solid logo ink with inverse initials; people avatars elsewhere stay slate */
.av-btn { display: inline-flex; align-items: center; gap: 3px; height: 42px; padding: 0 8px 0 4px; border: 0; background: none; border-radius: 12px; cursor: pointer;
  color: var(--hdr-ink); transition: background var(--dur-fast); }
.av-btn:hover, .av-btn[aria-expanded="true"] { background: var(--hdr-tint); }
html[data-mode] .hdr .av.av-me { background: var(--me-bg); color: var(--me-ink); box-shadow: none; }
.av-caret { width: 14px; height: 14px; color: var(--hdr-ink); transition: transform .2s var(--ease); }
.av-btn[aria-expanded="true"] .av-caret { transform: rotate(180deg); }
.hdr .hdr-burger { display: none; background: var(--bg); }
.hdr .hdr-burger[aria-expanded="true"] { background: var(--hdr-tint); box-shadow: inset 0 0 0 1px var(--hair-2); }
/* optional global search in the header (Slides): the 6c/6o filled field */
.hdr-search { position: relative; flex: 1 1 auto; max-width: 440px; min-width: 0; margin: 0 auto 0 18px; }
.hdr-search > svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--ink-3); pointer-events: none; }
.hdr-search .fld { min-height: 40px; padding: 0 40px 0 39px; font-size: 14.5px; }
.hdr-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font: 650 12px/22px var(--font); text-align: center; pointer-events: none; }
.hdr-search:focus-within kbd { display: none; }

/* ---------- 5. popovers: Grow tools + account ---------- */
.pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; background: var(--raise); color: var(--ink); border-radius: var(--r-pop); box-shadow: var(--e3);
  padding: 8px; transform-origin: top right; animation: dsPopIn .18s var(--ease); }
@keyframes dsPopIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
html[data-mode="dark"] .pop { background: var(--sf); }
.pop.tools { width: min(580px, calc(100vw - 2 * var(--gut))); padding: 14px 12px 10px; }
.tools-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.pop-h { margin: 0 10px 8px; }
.pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: var(--r-tile); color: var(--ink); text-decoration: none; transition: background .12s; }
.mm-item:hover { background: var(--bg); }
.mm-item[aria-current="page"] { background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); }
.mm-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--a-fill, var(--bg)); color: var(--a-on, var(--ink)); }
.mm-ico svg { width: 18px; height: 18px; }
.mm-item b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.mm-item small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.am { width: min(316px, calc(100vw - 2 * var(--gut))); }
.am-who { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.am-who p { margin: 0; min-width: 0; }
.am-who b { display: block; font-size: 15px; line-height: 1.3; }
.am-who p span { display: block; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-plan { margin: 0 4px 6px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-tile); }
.am-plan p { margin: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 10px; align-items: center; font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.am-plan i { width: 9px; height: 9px; border-radius: 50%; background: var(--product); }
.am-plan small { grid-column: 2; color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.am-plan a { grid-column: 2; justify-self: start; margin-top: 4px; font-size: 13px; }
.am-links a, .am-links button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink);
  font: 550 14.5px/1.3 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.am-links a:hover, .am-links button:hover { background: var(--bg); }
.am-links svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.am-links .am-out { position: relative; margin-top: 9px; }
.am-links .am-out::before { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--hair); }
.am-proto { margin: 6px 4px 2px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-align: center; }
.am-proto button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }

/* ---------- 6. app shell + left rail ---------- */
.app { flex: 1 0 auto; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap); align-items: start; }
.main { min-width: 0; padding: 32px 0 80px; container: main / inline-size; }
.main:focus { outline: none; }
.rail { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); max-height: calc(100vh - var(--hdr) - var(--stripe-h)); overflow-y: auto; scrollbar-width: none; padding: 28px 2px; margin: 0 -2px; }
.rail::-webkit-scrollbar { display: none; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-tile); color: var(--ink-2); font-weight: 600; font-size: 14.5px;
  text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.rail-link:hover { background: var(--hover); color: var(--ink); }
.rail-link[aria-current="page"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.rail-link > svg { width: 19px; height: 19px; flex: none; }
.rail-link .cnt { margin-left: auto; }
.rail-h { margin: 26px 12px 8px; }
.rail-sep { height: 1px; margin: 14px 12px; background: var(--hair); border: 0; }
.idlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.idlist a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-tile); color: var(--ink-2); font-weight: 600; font-size: 14px;
  line-height: 1.25; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.idlist a:hover { background: var(--hover); color: var(--ink); }
.idlist a[aria-current="page"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.idlist a[aria-current="page"] .idtile { box-shadow: 0 0 0 2px var(--sf), 0 0 0 3.5px var(--id-td, var(--ink-3)); }
.idlist .nm { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.idlist .none { padding: 8px 12px; font-size: 14px; color: var(--ink-3); }
.rail-new { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 4px; min-height: 42px; padding: 0 10px; border: 0; border-radius: var(--r-tile); background: none;
  color: var(--ink-3); font: 600 14px/1.55 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.rail-new svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 7px; border: 1px dashed var(--line-2); }
.rail-new:hover { background: var(--hover); color: var(--ink); }
html[data-mode="dark"] :is(.rail-link, .idlist a)[aria-current="page"] { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

/* ---------- 7. mobile sheet (< 1000px): the rail + account menu as one full-width sheet under the header ---------- */
.sheet { position: fixed; z-index: 48; top: calc(var(--hdr) + var(--stripe-h)); left: 0; right: 0; bottom: 0; background: var(--sf); overflow-y: auto;
  overscroll-behavior: contain; box-shadow: inset 0 1px 0 var(--hair); }
html[data-mode="dark"] .sheet { background: var(--canvas); }
.sheet-in { max-width: 640px; margin: 0 auto; padding: 16px var(--gut) calc(40px + env(safe-area-inset-bottom)); }
.sheet-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sheet-main a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 78px; padding: 10px 6px;
  border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 13.5px; text-align: center; text-decoration: none; }
.sheet-main a svg { width: 21px; height: 21px; }
.sheet-main a[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
.sheet-main .cnt { position: absolute; top: 8px; right: 10px; }
.sheet-h { margin: 24px 4px 8px; }
.sheet .idlist a { min-height: 44px; }
.sheet-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sheet-links a, .sheet-links button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: var(--r-tile);
  background: none; color: var(--ink); font: 550 15px/1.3 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.sheet-links a:hover, .sheet-links button:hover { background: var(--bg); }
.sheet-links svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.sheet .am-proto { margin: 22px 0 0; }
.scrim { position: fixed; inset: 0; z-index: 47; background: var(--scrim); }

/* ---------- 8. footer ---------- */
.ftr { background: var(--sf); box-shadow: 0 -1px 0 var(--hair); }
.ftr-in { max-width: var(--shell); margin: 0 auto; padding: 30px var(--gut) 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.ftr .gc-logo { gap: 10px; }
.ftr .gc-logo .mark { height: 26px; } .ftr .gc-logo .rule { height: 24px; } .ftr .gc-logo .word { font-size: 15.5px; }
.ftr-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ftr-fine { margin: 0; font-size: 13px; color: var(--ink-3); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.ftr-links a { color: var(--ink-2); font-weight: 550; text-decoration: none; }
.ftr-links a:hover { color: var(--ink); text-decoration: underline; }
.draft { width: fit-content; max-width: calc(100% - 32px); margin: 8px auto 24px; padding: 5px 11px; border-radius: var(--r-sm); background: var(--bg); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-align: center; }
.draft .linkish { color: var(--ink-3); font-weight: 700; letter-spacing: inherit; }

/* ---------- 9. page header (kicker / H1 / sub / actions) + breadcrumbs + toolbar ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.ph-copy { min-width: 0; flex: 1 1 22rem; }
.ph-kicker { margin: 0 0 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); }
.ph h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.ph-sub { margin: 10px 0 0; font-size: var(--fs-sub); color: var(--ink-3); max-width: 40rem; }
.ph-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* breadcrumbs (Hubs): <nav aria-label="Breadcrumb"><ol class="crumbs"><li><a>…</a></li><li aria-current="page">…</li></ol></nav>,
   items separated by a quiet "/" */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs svg { width: 14px; height: 14px; color: var(--ink-3); }
.crumbs [aria-current] { color: var(--ink); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; }
.bar .search { flex: 1 1 240px; max-width: 420px; }
.bar .grow { flex: 1 1 auto; }
.sortlab { position: relative; display: inline-flex; align-items: center; }
.sortlab > svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.sel.sel-pill { min-height: 44px; width: auto; padding: 0 40px 0 38px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 34px 0 14px; }
.sec-h h2 { margin: 0; font-size: var(--fs-card); letter-spacing: var(--ls-h2); }
.sec-h p { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }

/* ---------- 10. cards, panels, side cards ---------- */
.card { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); }
.panel { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); padding: 20px 22px 22px; margin-bottom: 18px; }
.panel-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.panel-h h2 { margin: 0; font-size: var(--fs-h3); letter-spacing: var(--ls-h2); }
.panel-h p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-3); }
.recess { background: var(--bg); border-radius: var(--r-tile); padding: 12px 14px; }
.cols-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.side { display: grid; gap: 16px; min-width: 0; }
.side-card { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); padding: 16px 18px 18px; min-width: 0; }
.side-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 15px; letter-spacing: -.01em; }
.side-card h2 :is(a, button) { font-size: 13.5px; }
.side-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
@container main (min-width: 900px) {
  .cols-side { grid-template-columns: minmax(0, 1fr) var(--side); }
  .cols-side > .side { position: sticky; top: calc(var(--hdr) + var(--stripe-h) + 20px); }
}
@container main (max-width: 899px) { .cols-side > .side { order: -1; } }

/* ---------- 11. identity art: tiles, badges, gradient default banners (by Grow area, [data-area]) ---------- */
.idtile { position: relative; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; overflow: hidden;
  background: radial-gradient(100% 100% at 15% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 65%), linear-gradient(145deg, var(--id-tl, #434A50), var(--id-td, #23272B));
  color: var(--id-on, #FFFFFF); box-shadow: inset 0 0 0 1px rgba(31,35,40,.08); font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: -.01em; line-height: 1; user-select: none; }
html[data-mode="dark"] .idtile { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.idtile.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 7.5px; }
.idtile.md { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.idtile.lg { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
.idtile.xl { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }
.idbadge { position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--id-on, #FFFFFF);
  background: radial-gradient(100% 100% at 15% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 65%), linear-gradient(145deg, var(--id-tl, #434A50), var(--id-td, #23272B)); }
.idbadge > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.idbadge text { font-family: var(--font); font-weight: 700; letter-spacing: -.03em; fill: var(--id-on, #FFFFFF); }
html[data-mode="dark"] .idbadge { background: radial-gradient(90% 90% at 18% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%), linear-gradient(145deg, var(--id-da, #393F45), var(--id-db, #434A50)); }
html[data-mode="dark"] .idbadge text { fill: var(--id-don, #D4D8DC); }
.idbanner { position: relative; overflow: hidden; isolation: isolate; color: var(--id-con, #FFFFFF);
  background: radial-gradient(90% 140% at 0% 0%, var(--id-c3, #848DA7) 0%, rgba(255,255,255,0) 62%), radial-gradient(70% 120% at 100% 100%, var(--id-c4, #2A8899) 0%, rgba(0,0,0,0) 65%),
    linear-gradient(135deg, var(--id-c1, #2B3A67), var(--id-c2, #3ABDD5)); }
.idbanner::before, .idbanner::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.idbanner::before { z-index: 1; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.34) 1px, rgba(255,255,255,0) 1.5px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(70% 120% at 96% 8%, #000 0%, rgba(0,0,0,0) 70%); mask: radial-gradient(70% 120% at 96% 8%, #000 0%, rgba(0,0,0,0) 70%); }
.idbanner::after { z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(31,35,40,.06); }
html[data-mode="dark"] .idbanner::after { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.idbanner > svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; }
.idbanner text { font-family: var(--font); font-weight: 700; letter-spacing: -.045em; fill: var(--id-con, #FFFFFF); }
/* a banner can carry content (e.g. a live preview) instead of initials */
.idbanner > .idbanner-in { position: absolute; inset: 0; z-index: 3; }

/* ---------- 12. identity card grid, identity header card, tabs ---------- */
.idgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.idcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.idcard:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.idcard > .idbanner, .idcard > .idcard-art { aspect-ratio: 16 / 7.5; }
/* card banners keep their full colour in both modes: only a 1px top hairline, no dark veil and no inner ring
   (the resolved Hubs hub-card look; the identity HEADER banner keeps the dark veil) */
.idcard .idbanner::after { bottom: auto; height: 1px; background: rgba(31,35,40,.07); }
html[data-mode="dark"] .idcard .idbanner::after { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.2)); }
.idcard-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 18px 18px; min-width: 0; }
.idcard-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.idcard h2, .idcard h3 { flex: 1; min-width: 0; margin: 4px 0 0; font-size: var(--fs-card); line-height: 1.22; letter-spacing: var(--ls-h2); }
.idcard h2 a, .idcard h3 a { color: inherit; text-decoration: none; }
.idcard :is(h2, h3) a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.idcard :is(h2, h3) a:focus-visible { outline: none; }
.idcard:has(:is(h2, h3) a:focus-visible) { outline: 2px solid var(--acc-ring); outline-offset: 3px; }
.idcard-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding-right: 6px; font-size: var(--fs-meta); font-weight: 550; color: var(--ink-3); }
.idcard-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.idcard-meta svg { width: 15px; height: 15px; flex: none; }
.idcard-foot { margin-top: auto; padding-top: 12px; padding-right: 6px; }
.idcard-foot > p, .idcard-foot > .recess { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border-radius: var(--r-tile); background: var(--bg);
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); min-width: 0; }
.idcard .more-btn { position: relative; z-index: 2; flex: none; color: var(--ink-3); }
.idcard .more-btn:hover, .idcard .more-btn[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
/* controls inside a stretched-link card sit above the link (zero-specificity, so app rules can still place them) */
.idcard :where(button, a:not(.stretch), input, label, select) { position: relative; z-index: 2; }
.idcard-add { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 220px; padding: 22px; border: 1.5px dashed var(--line-2); border-radius: var(--r-card);
  background: none; color: var(--ink-2); font: 650 15px/1.3 var(--font); text-align: center; cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.idcard-add:hover { border-color: var(--ink-3); background: var(--hover); color: var(--ink); }
.idcard-add svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; border: 1px dashed var(--line-2); }
.idcard-add small { font-size: 13px; font-weight: 550; color: var(--ink-3); }

.idhead { container: ih / inline-size; position: relative; background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); overflow: hidden; margin-bottom: 22px; }
.idhead > .idbanner { height: clamp(112px, 17cqi, 188px); }
.ih-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px 22px; padding: 0 clamp(18px, 3cqi, 32px); }
.ih-badge { position: relative; z-index: 4; align-self: start; width: clamp(64px, 9cqi, 88px); height: clamp(64px, 9cqi, 88px); margin-top: calc(clamp(64px, 9cqi, 88px) / -2);
  border-radius: 18px; box-shadow: 0 0 0 4px var(--sf), var(--e2); overflow: hidden; }
.ih-copy { min-width: 0; padding-top: 14px; }
.ih-copy h1 { margin: 0; font-size: clamp(26px, 4.2cqi, 40px); line-height: 1.04; letter-spacing: var(--ls-h1); overflow-wrap: anywhere; }
.ih-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: 14px; font-weight: 550; color: var(--ink-3); }
.ih-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.ih-meta svg { width: 16px; height: 16px; }
.ih-act { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; }
.ih-act .ibtn { background: var(--sf); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ih-act .ibtn:hover { background: var(--bg); color: var(--ink); }
.idhead .tabs { margin-top: 18px; padding: 0 calc(clamp(18px, 3cqi, 32px) - 14px); }
.idhead .ih-foot { padding: 14px clamp(18px, 3cqi, 32px) 18px; }
@container ih (max-width: 760px) { .ih-body { grid-template-columns: auto minmax(0, 1fr); } .ih-copy { padding-top: 10px; } .ih-act { grid-column: 1 / -1; } }
@container ih (max-width: 560px) {
  .ih-body { grid-template-columns: minmax(0, 1fr); }
  .ih-copy { padding-top: 0; }
  .ih-act { width: 100%; min-width: 0; flex-wrap: wrap; }
  .ih-act .btn { flex: 1 1 auto; min-width: 0; padding-left: 16px; padding-right: 16px; }
  .tabs [role="tab"] { padding: 0 11px; }
  .tabs [role="tab"] svg { display: none; }
}

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 1px 0 var(--hair); }
.tabs::-webkit-scrollbar { display: none; }
.tabs.flat { box-shadow: inset 0 -1px 0 var(--hair); margin-bottom: 18px; }
.tabs [role="tab"] { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border: 0; background: none;
  color: var(--ink-3); font: 600 14.5px/1 var(--font); text-decoration: none; cursor: pointer; }
.tabs [role="tab"]:hover, .tabs [aria-selected="true"] { color: var(--ink); }
.tabs [role="tab"] svg { width: 18px; height: 18px; }
.tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.tabs [role="tab"]:focus-visible { outline-offset: -4px; }
.tabs .n { font-size: 12px; font-weight: 650; color: var(--ink-2); background: var(--bg); padding: 3px 6px; border-radius: var(--r-chip); line-height: 1; }
html[data-mode="dark"] .tabs .n { background: #393F44; }
/* settings-style sub-tabs: dark selection pills */
.subtabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs :is(a, button) { flex: none; padding: 8px 14px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); font: 600 14px/1.55 var(--font);
  text-decoration: none; cursor: pointer; }
.subtabs :is(a, button):hover { background: var(--hover); color: var(--ink); }
.subtabs :is([aria-current], [aria-selected="true"], .on) { background: var(--sel-bg); color: var(--sel-ink); }
.subtabs :is([aria-current], [aria-selected="true"], .on):hover { background: var(--sel-bg); color: var(--sel-ink); }

/* ---------- 13. list rows (6n): thin grey dividers past the leading mark, hidden next to the hovered/open row ---------- */
.rows { list-style: none; margin: 0; padding: 0; --row-inset: 70px; } /* = row padding 12 + lead mark 44 + gap 14 (Hubs Messages: 82 = 12 + 56 + 14) */
.rows > li { position: relative; }
.rows > li + li::before { content: ""; position: absolute; top: 0; left: var(--row-inset); right: 12px; height: 1px; background: var(--divider); pointer-events: none; transition: opacity var(--dur-fast); }
.rows > li:hover::before, .rows > li:hover + li::before,
.rows > li:has(> .row.on, > .row[aria-current])::before, .rows > li:has(> .row.on, > .row[aria-current]) + li::before { opacity: 0; }
.row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
a.row:hover, button.row:hover, .row.click:hover { background: var(--bg); }
.row.on, .row[aria-current] { background: var(--unread-soft); }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 550; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { flex: none; display: flex; align-items: center; gap: 8px; }

/* ---------- 14. buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font); font-weight: var(--fw-btn); font-size: var(--fs-ui); letter-spacing: -.005em; padding: 11px 18px; border-radius: var(--r-pill);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.btn svg, .bi { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--acc); color: var(--acc-on); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 1px 2px rgba(var(--shd),.10); }
.btn-primary:hover { background: var(--acc-hover); color: var(--acc-on); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--acc-edge), 0 6px 14px -6px var(--acc-glow), 0 1px 2px rgba(var(--shd),.10); }
html[data-mode="dark"] .btn-primary { box-shadow: inset 0 0 0 1px var(--acc-edge); }
html[data-mode="dark"] .btn-primary:hover { box-shadow: inset 0 0 0 1px var(--acc-edge), 0 6px 16px -8px var(--acc-glow); }
.btn-primary:active, .btn-danger:active { transform: none; }
.btn-ghost { background: var(--sf); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(var(--shd),.05); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-mode="dark"] .btn-ghost { box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-quiet { background: none; color: var(--ink-2); padding-left: 12px; padding-right: 12px; }
.btn-quiet:hover { background: var(--bg); color: var(--ink); }
.btn-danger { background: var(--alert); color: #FFFFFF; }
.btn-danger:hover { background: var(--alert-hover); color: #FFFFFF; transform: translateY(-1px); }
.btn-dark { background: var(--sel-bg); color: var(--sel-ink); }
.btn-dark:hover { background: #404448; color: var(--sel-ink); }
html[data-mode="dark"] .btn-dark { background: #434A50; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html[data-mode="dark"] .btn-dark:hover { background: #495057; color: #FFFFFF; }
.btn-light { background: rgba(255,255,255,.10); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); border-radius: 9px; }
.btn-light:hover { background: rgba(255,255,255,.18); color: #FFFFFF; }
.btn-sm { padding: 8px 13px; font-size: var(--fs-meta); border-radius: 9px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-xs { padding: 6px 10px; font-size: 13px; gap: 6px; border-radius: var(--r-sm); }
.btn-xs svg { width: 15px; height: 15px; }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-wide { width: 100%; }
.btn .arr { transition: transform var(--dur-fast); }
.btn:hover .arr { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary:is([disabled], [aria-disabled="true"]), .btn-dark:is([disabled], [aria-disabled="true"]) { opacity: 1; background: var(--bg); color: var(--ph); box-shadow: inset 0 0 0 1px var(--line); }
.ibtn { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-tile); background: none;
  color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.ibtn:hover { background: var(--bg); color: var(--ink); }
.ibtn svg { width: 20px; height: 20px; }
.ibtn.sm { width: 34px; height: 34px; border-radius: var(--r-sm); }
.ibtn.sm svg { width: 18px; height: 18px; }
.ibtn.ring { background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); }
.ibtn.ring:hover { background: var(--bg); }
.ibtn[disabled], .ibtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* unread dot on an icon button (6m): small SYCU-blue dot ringed in the surface; the number lives in the label */
.ibtn .cnt { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%; background: var(--unread);
  box-shadow: 0 0 0 2px var(--sf); color: transparent; font-size: 0; line-height: 0; overflow: hidden; }

/* ---------- 15. fields ---------- */
.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label, .lbl { font-size: 14px; font-weight: 650; color: var(--ink); }
.hint { margin: 0; font-size: 13px; color: var(--ink-3); font-weight: 500; line-height: 1.45; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.inp, .sel, .ta { width: 100%; min-height: 44px; padding: 11px 14px; border: 0; border-radius: var(--r-ctl); background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2);
  font: 500 15px/1.4 var(--font); color: var(--ink); transition: box-shadow var(--dur-fast), background var(--dur-fast); }
.inp::placeholder, .ta::placeholder, .fld::placeholder { color: var(--ph); opacity: 1; }
.inp:hover, .sel:hover, .ta:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.inp:focus, .sel:focus, .ta:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--focus-glow); }
/* the resolved Hubs focus: keyboard / text focus also draws the global 2px ring at 2px offset over the glow */
:is(.inp, .sel, .ta):focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.inp[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--alert-ink), 0 0 0 3px rgba(232,78,78,.18); }
.ta { min-height: 110px; resize: vertical; }
.sel { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--sf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6873' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 16px; }
html[data-mode="dark"] .sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC0C5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; z-index: 1; }
.search .inp, .search .fld { padding-left: 42px; min-height: 44px; border-radius: var(--r-pill); }
.search.flat .inp { box-shadow: var(--e1); }
.search.flat .inp:hover { box-shadow: var(--e1), inset 0 0 0 1px var(--line-2); }
.search.flat .inp:focus { box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--focus-glow); }
.search.inset .inp { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.search .inp::-webkit-search-cancel-button { cursor: pointer; }
/* filled field (6c/6o: search, composer, header search): no outline; focus lifts the fill + a soft SYCU-blue underline */
.fld { width: 100%; min-height: 44px; padding: 11px 14px; border: 0; border-radius: var(--r-pill); background: var(--fld); color: var(--ink); box-shadow: none;
  font: 500 15px/1.4 var(--font); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.fld:hover { background: var(--fld-hover); }
.fld:focus { outline: none; background: var(--fld-on); box-shadow: var(--fld-sh), inset 0 -2px 0 var(--fbar), 0 0 0 3px var(--fglow); }
/* segmented control */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--ink-2); font: 600 13.5px/1 var(--font); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.seg button:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), 0 1px 2px rgba(var(--shd),.12); }
.seg button svg { width: 16px; height: 16px; }
.seg .n { font-size: 12px; font-weight: 800; opacity: .7; }
/* inside a recessed row the track steps down to the canvas (Hubs settings "Apply to all") */
.recess .seg { background: var(--canvas); }
html[data-mode="dark"] .seg { background: #1C1F22; box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-mode="dark"] .seg button:hover { background: rgba(255,255,255,.06); }
html[data-mode="dark"] .seg button:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) { background: #434A50; color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5); }
/* switch */
.tgl { position: relative; flex: none; display: inline-block; width: 46px; height: 28px; }
.tgl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.tgl i { position: absolute; inset: 0; border-radius: 14px; background: var(--trk); transition: background .18s; }
.tgl i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .22s var(--ease); }
.tgl input:checked + i { background: var(--accent); }
.tgl input:checked + i::after { transform: translateX(18px); }
.tgl input:focus-visible + i { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.tgl input:disabled { cursor: not-allowed; }
.tgl input:disabled + i { opacity: .45; }
html[data-mode="dark"] .tgl input:checked + i::after { background: #1F2328; }
/* checkbox chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { position: relative; display: inline-flex; }
.chk input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chk > span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 10px; border-radius: 9px; background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.chk > span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--sf) no-repeat center / 14px; }
.chk input:checked + span { box-shadow: inset 0 0 0 1.5px var(--accent); }
.chk input:checked + span::before { box-shadow: none; background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html[data-mode="dark"] .chk input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.chk input:focus-visible + span { outline: 2px solid var(--acc-ring); outline-offset: 2px; }

/* ---------- 16. chips, counts, dots, people ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border-radius: var(--r-chip); background: var(--bg); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-xs); font-weight: 650; line-height: 1; white-space: nowrap; }
.tag svg { width: 13px; height: 13px; flex: none; }
.tag.plain { background: none; }
.tag.dark { background: var(--sel-bg); color: var(--sel-ink); box-shadow: none; }
html[data-mode="dark"] .tag.dark { background: #E4E7EB; color: #1F2328; }
.tag.soft { background: var(--a-soft, var(--bg)); color: var(--a-ink, var(--ink-2)); box-shadow: none; }
.tag.ok { background: var(--evt-soft); color: var(--evt-ink); box-shadow: none; }
.tag.new { background: var(--unread-soft); color: var(--unread-ink); box-shadow: none; }
.cnt { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-chip); background: var(--unread); color: var(--unread-on); box-shadow: none;
  font-size: var(--fs-micro); font-weight: 700; line-height: 20px; text-align: center; letter-spacing: 0; }
.dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--unread); }
.dot.read { background: var(--line-2); }
.av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, #5F6873 0%, #434A50 100%); color: #FFFFFF; font-weight: 650; font-size: 12px; letter-spacing: .02em; line-height: 1; user-select: none; }
html[data-mode="dark"] .av:not(.av-ph) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }
.av-ph { background: var(--bg); }
.av-ph img { width: 100%; height: 100%; object-fit: cover; }
.av-lg { width: 44px; height: 44px; font-size: 14.5px; }
.av-sm { width: 28px; height: 28px; font-size: 10.5px; }
.av-xs { width: 22px; height: 22px; font-size: 8.5px; }
.avs { display: inline-flex; align-items: center; }
.avs .av { box-shadow: 0 0 0 2px var(--sf); }
html[data-mode="dark"] .avs .av { box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 2px var(--sf); }
.avs .av + .av { margin-left: -5px; }
.avs .av-more { background: var(--bg); color: var(--ink-2); }
/* date chip (Hubs "next event" tile): an Events-green month band over the day */
.dchip { flex: none; display: grid; justify-items: center; align-content: start; width: 38px; height: 40px; border-radius: 9px; overflow: hidden; line-height: 1;
  background: linear-gradient(var(--evt), var(--evt)) top / 100% 15px no-repeat, var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); }
.dchip small { display: grid; place-items: center; width: 100%; height: 15px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1F2328; }
.dchip strong { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* status: a lit Events-green LED for "live / on air", SYCU blue for "scheduled", grey for "off", a hollow ring for
   "draft". The dot is decoration: it always sits next to words (the LED is 1.6:1 on white, by design). */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--trk); }
.st > svg { width: 15px; height: 15px; flex: none; }
.st-on { color: var(--ink); }
.st-on::before { background: var(--live); box-shadow: 0 0 0 3px var(--live-halo); }
.st-sched::before { display: none; }
.st-sched > svg { color: var(--unread-ink); }
.st-draft::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ---------- 17. context menus (role=menu), anchored by ds/ui.js DS.menu ---------- */
.ctx { position: absolute; z-index: 110; min-width: 216px; max-width: calc(100vw - 16px); padding: 5px; border-radius: 12px; background: var(--raise); color: var(--ink);
  box-shadow: var(--e3); animation: dsPopIn .16s var(--ease); }
html[data-mode="dark"] .ctx { background: var(--sf); }
.ctx :is(button, a) { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink);
  font: 550 14.5px/1.3 var(--font); text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer; }
.ctx :is(button, a):hover, .ctx :is(button, a):focus-visible { background: var(--bg); outline: none; }
.ctx :is(button, a) > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.ctx :is(button, a) small { margin-left: auto; padding-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ctx .danger, .ctx .danger > svg { color: var(--alert-ink); }
.ctx [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ctx hr { height: 1px; margin: 5px 8px; border: 0; background: var(--hair); }

/* ---------- 18. dialogs ---------- */
dialog.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 16px; background: var(--raise); color: var(--ink); box-shadow: var(--e3); overflow: hidden; }
html[data-mode="dark"] dialog.dlg { background: var(--sf); }
dialog.dlg:not([open]) { display: none; }
dialog.dlg[open] { display: flex; flex-direction: column; animation: dsDlgIn .28s var(--ease); }
@keyframes dsDlgIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog.dlg::backdrop { background: rgba(31,35,40,.42); }
html[data-mode="dark"] dialog.dlg::backdrop { background: rgba(0,0,0,.62); }
dialog.dlg.wide { width: min(760px, calc(100vw - 24px)); }
dialog.dlg.narrow { width: min(440px, calc(100vw - 24px)); }
dialog.dlg > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.dlg-top { position: relative; flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 22px 64px 4px 26px; }
.dlg-top > div { min-width: 0; }
.dlg-top h2 { margin: 0; font-size: var(--fs-dlg); line-height: 1.2; letter-spacing: var(--ls-h2); overflow-wrap: anywhere; }
.dlg-top p { margin: 6px 0 0; color: var(--ink-3); font-size: 14.5px; }
.dlg-crumb { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dlg-back { margin: -6px 0 0 -10px; }
.dlg-x { position: absolute; right: 14px; top: 14px; }
.dlg-body { flex: 1 1 auto; min-height: 0; display: block; padding: 16px 26px 8px; overflow-y: auto; overscroll-behavior: contain; }
.dlg-body > p:first-child { margin-top: 0; }
.dlg-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 26px 22px; border-top: 1px solid var(--hair); margin-top: 8px; }
.dlg-foot .grow { margin-right: auto; }

/* ---------- 19. toasts ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 12px; background: var(--toast-bg); color: #FFFFFF;
  box-shadow: 0 0 0 1px var(--toast-ring), var(--e3); font-size: 14.5px; font-weight: 600; line-height: 1.35; transition: opacity .2s ease, transform .28s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast > svg { width: 18px; height: 18px; flex: none; color: #BFE478; }
.toast button { flex: none; border: 0; background: rgba(255,255,255,.12); color: #FFFFFF; font: 700 13.5px/1 var(--font); padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; }
.toast button:hover { background: rgba(255,255,255,.2); }

/* ---------- 20. empty states ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(32px, 6cqi, 64px) 24px; background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); }
.empty-art { width: min(260px, 70%); aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.empty-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 16px; background: var(--bg); color: var(--ink-3); }
.empty-ico svg { width: 26px; height: 26px; }
.empty :is(h2, h3) { margin: 0; font-size: 21px; letter-spacing: var(--ls-h2); }
.empty p { margin: 0; max-width: 30rem; color: var(--ink-2); font-size: 15.5px; }
.empty .btn { margin-top: 8px; }

/* ---------- 21. tables ---------- */
.tbl-wrap { overflow-x: auto; padding: 4px 8px; background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; padding: 12px 10px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--hair); color: var(--ink-2); font-weight: 550; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl td b, .tbl td a { color: var(--ink); }
.tbl td small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.tbl tbody tr:hover td { background: var(--bg); }

/* ---------- 22. numbered steps + option rows ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: dsstep; }
.steps > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; counter-increment: dsstep; font-size: 14.5px; color: var(--ink-2); }
.steps > li::before { content: counter(dsstep); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 13px; font-weight: 700; }
.steps > li > * { grid-column: 2; margin: 0; }
.steps b { color: var(--ink); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.opt + .opt { border-top: 1px solid var(--hair); }
.opt b { display: block; font-size: 15px; line-height: 1.3; }
.opt small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); line-height: 1.4; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-3); font-weight: 600; }
.kv dd { margin: 0; color: var(--ink); font-weight: 600; }

/* ---------- 23. hero strip: the one charcoal band (Hubs trial strip); at most one per screen ---------- */
.hero-strip { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 24px; padding: 16px 20px;
  border-radius: var(--r-card); background: var(--hero); color: #FFFFFF; box-shadow: var(--e-dark); }
.hero-strip::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -90px; width: 260px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #BFE478, rgba(191,228,120,0)); opacity: .30; }
.hero-strip > div { flex: 1 1 18rem; min-width: 0; }
.hero-strip b { display: block; font-size: 16px; }
.hero-strip span { font-size: 14px; color: rgba(255,255,255,.72); }
html[data-mode="dark"] .hero-strip { box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -24px rgba(0,0,0,.9); }

/* ---------- 24. responsive ---------- */
@media (max-width: 999px) {
  .app { display: block; }
  .rail { display: none; }
  .main { padding-top: 24px; }
  .hdr-pill, .hdr-acct { display: none; }
  .hdr .hdr-burger { display: inline-grid; }
}
@media (min-width: 1000px) { .sheet, .scrim { display: none !important; } }
@media (max-width: 600px) {
  .hdr-in { gap: 8px; }
  .hdr .gc-logo { gap: 9px; }
  .hdr .gc-logo .mark { height: 27px; } .hdr .gc-logo .rule { height: 25px; } .hdr .gc-logo .word { font-size: 16px; }
  .hdr-util { gap: 6px; }
  .main { padding-bottom: 56px; }
  .ph { margin-bottom: 18px; }
  .ph-act, .ph-act .btn { width: 100%; }
  .ph-act:has(.ibtn) { flex-wrap: nowrap; }
  .ph-act:has(.ibtn) .btn { width: auto; flex: 1; }
  .ph-act .ibtn { flex: none; background: var(--sf); box-shadow: var(--e1); }
  .bar:has(.search) { flex-wrap: nowrap; }
  .bar .search { flex: 1 1 0; max-width: none; }
  .bar .grow { display: none; }
  .ftr-in { flex-direction: column; align-items: flex-start; }
  dialog.dlg, dialog.dlg.wide, dialog.dlg.narrow { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: calc(100dvh - 12px); }
  .dlg-top { padding: 20px 60px 4px 20px; }
  .dlg-body { padding: 14px 20px 8px; }
  .dlg-foot { padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); }
  .dlg-foot .btn { flex: 1 1 auto; }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .hdr .gc-logo .mark { height: 24px; } .hdr .gc-logo .rule { height: 22px; } .hdr .gc-logo .word { font-size: 14.5px; }
  .ibtn { width: 38px; height: 38px; }
}

/* ---------- 25. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .hdr-mode .mi { transition: none; }
  .idcard:hover, .btn-primary:hover, .btn-danger:hover, .btn:hover .arr, .more:hover svg { transform: none; }
  .toast { transition: opacity .01ms; }
}