:root{
  --ground:#F9F9F9; --surface:#FFFFFF; --surface-2:#F3F2F7; --line:#E6E4EE; --line-2:#D5D2E0;
  --ink:#151632; --ink-2:#44425F; --muted:#77748F;
  --brand:#7755EE; --brand-ink:#5638D0; --brand-soft:#ECE6FF;
  --orange:#FF6700; --aubergine:#443388; --lilac:#BB98F8; --butter:#FFEDA8; --midnight:#151632; --marsh:#F0EEE4; --grape:#7755EE;
  --side:#151632; --side-2:#23245A; --side-ink:#F0EEE4; --side-muted:#9A97C0;
  --c-events:#FF6700; --c-programmes:#7755EE; --c-funding:#1F9E86; --c-finance:#C99400; --c-marketing:#D65DB1; --c-tasks:#2F86D6;
  --good-bg:#DCF1E6; --good-ink:#14694A; --warn-bg:#FFF0C2; --warn-ink:#7F5200; --bad-bg:#FFE1DD; --bad-ink:#AE2A1F;
  --prog-bg:#E9E3FF; --prog-ink:#4F33BF; --neu-bg:#ECEAF2; --neu-ink:#53516B;
  --shadow:0 1px 2px rgba(21,22,50,.06),0 10px 28px -14px rgba(21,22,50,.22);
  --display:"Nunito Sans","Arial Narrow",system-ui,sans-serif;
  --body:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,Consolas,monospace;
  --r-sm:6px; --r:10px; --r-lg:18px;
}
*{box-sizing:border-box}
html,body{background:var(--ground);color:var(--ink);margin:0}
body{font-family:var(--body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3,.disp{font-family:var(--display);font-variation-settings:"wdth" 75;text-wrap:balance;margin:0}

/* shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:16px 12px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brandmark{display:flex;align-items:center;gap:10px;padding:2px 8px 2px}
.brandmark svg{flex:none}
.brandmark b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:17px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
.navgroup{display:flex;flex-direction:column;gap:2px}
.navlabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--side-muted);padding:0 10px 3px;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--side-ink);padding:5px 10px;border-radius:8px;text-align:left;font-size:14px;opacity:.8}
.nav:hover{background:var(--side-2);opacity:1}
.nav[aria-current="page"]{background:var(--side-2);opacity:1;font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
.nav .dot{width:8px;height:8px;border-radius:50%;flex:none}
.nav .count{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--orange);color:#151632;border-radius:999px;padding:1px 7px;font-weight:700}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid var(--side-2)}
.side .me small{display:block;color:var(--side-muted);font-size:12px}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--line);background:var(--ground)}
.top h1{font-size:32px;font-weight:900;line-height:1}
.top .grow{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;min-width:220px;color:var(--muted)}
.search input{border:0;background:transparent;outline:none;width:100%;color:var(--ink)}
.sample{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--line-2);color:var(--muted);border-radius:999px;padding:4px 10px;white-space:nowrap}
.view{padding:24px 28px 56px;display:flex;flex-direction:column;gap:22px}

/* primitives */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#151632}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font-size:21px;font-weight:900}
.panel-b{padding:16px 18px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--neu-bg);color:var(--neu-ink)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{background:var(--good-bg);color:var(--good-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill.prog{background:var(--prog-bg);color:var(--prog-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;font-size:12px;background:var(--surface);color:var(--ink);white-space:nowrap}
.chip.id{font-family:var(--mono);font-size:11px}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
button.chip:hover{border-color:var(--ink)}
.cdot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:900;flex:none;color:#151632}
.av.lg{width:68px;height:68px;font-size:24px}
.av.none{background:transparent;border:1.5px dashed var(--bad-ink);color:var(--bad-ink)}
.who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:2px;background:var(--surface)}
.seg button{border:0;background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.tablewrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tr.sel td{background:var(--brand-soft)}
.tbl .r{text-align:right}
.bar{height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--grape);border-radius:999px}
.bar.full i{background:var(--orange)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 18px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:12px 10px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)}
.stack{display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.split{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:22px;align-items:start}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.input{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);padding:9px 12px;width:100%}

/* overview hero */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;color:#151632;display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;
  background:
    radial-gradient(55% 130% at 100% 0%,rgba(119,85,238,.95) 0%,rgba(119,85,238,0) 62%),
    radial-gradient(50% 150% at 90% 115%,#FF6700 0%,rgba(255,103,0,0) 62%),
    radial-gradient(45% 120% at 62% 40%,rgba(187,152,248,.95) 0%,rgba(187,152,248,0) 70%),
    linear-gradient(90deg,#F9F9F9 0%,#F9F9F9 36%,#E6DCF7 60%,#BB98F8 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero>*{position:relative;z-index:1}
.hero .date{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.hero h1{font-size:clamp(48px,6.2vw,80px);font-weight:1000;line-height:.88;letter-spacing:-.01em;margin-top:8px}
.hero .sub{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:800;font-size:22px;margin-top:10px}
.hero .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:540px}
.hero .actions .btn{background:rgba(251,250,246,.94);border-color:transparent;color:#151632}
.hero .actions .btn:hover{background:#fff}
.hero .actions .btn.primary{background:#151632;color:#F0EEE4}

/* KPI blocks: brand colour pairings */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{position:relative;overflow:hidden;border-radius:16px;padding:16px;min-height:138px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;border:0;text-align:left;color:#151632;transition:transform .15s}
.kpi:hover{transform:translateY(-2px)}
.kpi::after{content:"";position:absolute;width:104px;height:104px;border-radius:50%;right:-26px;top:-26px;background:var(--circ)}
.kpi>*{position:relative;z-index:1}
.kpi .k-l{font-size:11.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;max-width:68%}
.kpi .k-n{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:1000;font-size:58px;line-height:.85}
.kpi .k-s{font-size:12.5px;font-weight:700}
.kpi.k1{background:#FF6700;--circ:#443388}
.kpi.k2{background:#443388;color:#F0EEE4;--circ:#BB98F8}
.kpi.k3{background:#FFEDA8;--circ:#FF6700}
.kpi.k4{background:#BB98F8;--circ:#FFEDA8}
.kpi.k5{background:#151632;color:#F0EEE4;--circ:#FF6700;box-shadow:inset 0 0 0 1px var(--line-2)}

/* alerts */
.alert{display:grid;grid-template-columns:4px minmax(0,1fr);gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;width:100%;color:var(--ink)}
.alert:last-child{border-bottom:0}
.alert:hover{background:var(--surface-2)}
.alert .sev{border-radius:4px;background:var(--warn-ink)}
.alert.crit .sev{background:var(--bad-ink)}
.alert b{display:block;font-size:13.5px}
.alert .meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;align-items:center}

/* calendar */
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-head{border-bottom:1px solid var(--line)}
.cal-head div{padding:8px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cal-day{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-day:nth-child(7n){border-right:0}
.cal-grid .cal-day:nth-last-child(-n+7){border-bottom:0}
.cal-day.out{background:var(--surface-2)}
.cal-day.out .dn{opacity:.45}
.cal-day .dn{font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:1px 6px;align-self:flex-start;border-radius:999px}
.cal-day.today .dn{background:var(--orange);color:#151632;font-weight:700}
.ev{display:flex;align-items:flex-start;gap:6px;border:0;border-radius:6px;padding:3px 6px 3px 8px;font-size:11.5px;line-height:1.25;text-align:left;width:100%;color:var(--ink);background:color-mix(in srgb,var(--c) 15%,var(--surface));box-shadow:inset 3px 0 0 var(--c)}
.ev:hover{background:color-mix(in srgb,var(--c) 28%,var(--surface))}
.ev span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ev.past{opacity:.6}
/* one item that runs from one day to another is drawn as a single line */
.ev.span{width:auto;min-height:21px;align-items:center;position:relative;z-index:1}
.ev.span span{-webkit-line-clamp:1}
.ev.cont{border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:none;padding-left:6px}
.ev.goes{border-top-right-radius:0;border-bottom-right-radius:0}
.cal-day .ev.cont{margin-left:-7px}
.cal-day .ev.goes{margin-right:-7px}
.cal-day:nth-child(7n+1) .ev.cont{margin-left:0}
.cal-day:nth-child(7n) .ev.goes{margin-right:0}
.week .col .ev.cont{margin-left:-9px}
.week .col .ev.goes{margin-right:-9px}
.week .col:first-child .ev.cont{margin-left:0}
.week .col:last-child .ev.goes{margin-right:0}
.more{border:0;background:transparent;font-size:11px;color:var(--muted);text-align:left;padding:0 6px;font-weight:700}
.more:hover{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.weekwrap{overflow-x:auto}
.week{display:grid;grid-template-columns:repeat(7,minmax(128px,1fr));min-width:900px}
.week .col{border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:6px;min-height:340px}
.week .col:last-child{border-right:0}
.week .col.today{background:color-mix(in srgb,var(--orange) 6%,var(--surface))}
.week .wh{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.week .wh b{display:block;font-family:var(--display);font-variation-settings:"wdth" 75;font-size:28px;color:var(--ink);letter-spacing:0;line-height:1}
.lday{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:12px 18px;border-bottom:1px solid var(--line)}
.lday:last-child{border-bottom:0}
.lday .d{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:20px;line-height:1.05}
.litem{display:grid;grid-template-columns:52px 10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border:0;background:transparent;width:100%;text-align:left;border-radius:8px;color:var(--ink)}
.litem:hover{background:var(--surface-2)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(9,9,27,.42);z-index:50}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(440px,100vw);background:var(--surface);border-left:1px solid var(--line);z-index:51;box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slide .2s ease-out}
.drawer-h{padding:22px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;position:relative}
.drawer-h h2{font-size:32px;font-weight:900;line-height:.98;padding-right:40px}
.drawer-h .x{position:absolute;right:16px;top:16px}
.drawer-b{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
@keyframes slide{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}

/* boards */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.lane{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px}
.lane-h{display:flex;align-items:center;gap:8px;padding:4px 4px 6px}
.lane-h b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:17px}
.lane-h .mono{margin-left:auto;font-size:12px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%;color:var(--ink)}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.card h3{font-size:18px;font-weight:900;line-height:1.08}
.amt{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:26px;line-height:1}
.due{font-family:var(--mono);font-size:11.5px;font-weight:700}
.due.soon{color:var(--bad-ink)}
.next{font-size:12.5px;border-top:1px dashed var(--line-2);padding-top:8px;color:var(--ink-2)}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.stat{padding:14px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:36px;line-height:.95}

/* attendance */
.attwrap{overflow-x:auto}
.att{display:grid;grid-template-columns:minmax(170px,1.4fr) repeat(12,30px) 70px;gap:6px 4px;align-items:center;min-width:640px;font-size:13px}
.att .h{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center}
.att .c{width:20px;height:20px;border-radius:50%;justify-self:center}
.att .yes{background:var(--grape)}
.att .no{border:2px solid var(--bad-ink)}
.att .fut{border:1.5px dashed var(--line-2)}
.att .pct{font-family:var(--mono);text-align:right;font-weight:700}

/* registration phone */
.regwrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.phone{width:380px;max-width:100%;border-radius:40px;border:10px solid #151632;background:#F9F9F9;color:#151632;overflow:hidden;box-shadow:var(--shadow)}
.ph-top{padding:18px 20px 22px;background:linear-gradient(180deg,#FF6700 0%,#F7864E 20%,#BB98F8 58%,#EDE6F7 84%,#F9F9F9 100%);display:flex;flex-direction:column;gap:12px}
.ph-top h2{font-size:38px;font-weight:1000;line-height:.9}
.ph-top .facts{display:grid;gap:4px;font-size:13px;font-weight:700}
.ph-body{padding:18px 20px 26px;display:flex;flex-direction:column;gap:13px;max-height:620px;overflow-y:auto}
.phone .input{background:#fff;border-color:#D8D3E6;color:#151632}
.phone .field label{color:#44425F}
.phone .opts{display:flex;flex-wrap:wrap;gap:6px}
.phone .opt{border:1px solid #D8D3E6;border-radius:999px;padding:4px 10px;font-size:12px;background:#fff;color:#151632}
.phone .opt.on{background:#443388;color:#F0EEE4;border-color:#443388}
.phone .check{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.phone .check input{margin-top:3px;accent-color:#443388}
.phone .submit{background:#151632;color:#F0EEE4;border:0;border-radius:999px;padding:13px;font-weight:1000;font-family:var(--display);font-variation-settings:"wdth" 75;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.phone .submit[disabled]{background:#C9C6D8;color:#55536E}
.phone .state{border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px}
.photo{display:flex;align-items:center;gap:10px;border:1.5px dashed #BDB7D2;border-radius:12px;padding:10px;font-size:13px}
.places{display:inline-flex;align-self:flex-start;background:#151632;color:#FFEDA8;border-radius:999px;padding:4px 12px;font-family:var(--mono);font-size:12px;font-weight:700}

/* finance chart */
.chart svg{display:block;width:100%;height:auto}
.chart .gl{stroke:var(--line)}
.chart text{fill:var(--muted);font-family:var(--mono);font-size:11px}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--surface);padding:7px 10px;border-radius:8px;font-size:12px;z-index:60;box-shadow:var(--shadow)}

/* email */
.mail{max-width:580px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#FFFFFF;color:#151632}
.mail .m-top{padding:22px 26px;background:linear-gradient(115deg,#7755EE 0%,#8D3AF6 35%,#FF6700 100%);color:#F0EEE4}
.mail .m-top h3{font-size:30px;font-weight:1000;line-height:.95}
.mail .m-body{padding:22px 26px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.55}
.mail .m-card{background:#F0EEE4;border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.mail .quote{font-family:var(--mono);font-size:13px;color:#443388;border-left:3px solid #FF6700;padding-left:12px}
.merge{font-family:var(--mono);font-size:12px;background:var(--brand-soft);color:var(--brand-ink);border-radius:4px;padding:1px 5px}

/* automations */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 120px 44px;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.flow:last-child{border-bottom:0}
.node{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;background:var(--surface-2);font-size:13px}
.node small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px}
.sw{width:40px;height:23px;border-radius:999px;background:var(--line-2);border:0;position:relative;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s}
.sw[aria-checked="true"]{background:var(--grape)}
.sw[aria-checked="true"]::after{left:20px}
.sw[disabled]{opacity:.45;cursor:not-allowed}

/* profile */
.profile-h{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.profile-h h2{font-size:34px;font-weight:1000;line-height:.95}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:86px 14px minmax(0,1fr);gap:10px;padding-bottom:14px;position:relative;font-size:13.5px}
.timeline li::before{content:"";position:absolute;left:101px;top:15px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .t{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding-top:1px}
.timeline .tl{width:12px;height:12px;border-radius:50%;margin-top:3px;background:var(--c)}
.minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini{background:var(--surface-2);border-radius:12px;padding:10px 12px}
.mini .v{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:28px;line-height:1}

@media (max-width:1280px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.grid2{grid-template-columns:1fr}.regwrap{grid-template-columns:1fr}}
/* ---------- on a phone: one thing under another, nothing squashed ---------- */
.menubtn{display:none;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);width:40px;height:40px;border-radius:12px;place-items:center;flex:none}
.navscrim{position:fixed;inset:0;background:rgba(21,22,50,.5);z-index:70}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .menubtn{display:grid}

  /* the menu slides over the page instead of sitting across the top */
  .side{position:fixed;top:0;bottom:0;left:0;width:272px;max-width:84vw;height:100dvh;z-index:80;
    transform:translateX(-101%);transition:transform .2s ease;flex-direction:column;overflow-y:auto;
    padding:18px 12px;box-shadow:0 0 70px rgba(21,22,50,.55)}
  body.navopen .side{transform:none}
  .side nav{flex-direction:column!important}
  .navgroup{flex-direction:column}
  .navlabel,.side .me,.brandmark b{display:block}
  .nav{white-space:normal}

  .top{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .top h1{font-size:24px}
  .search{min-width:0;flex:1 1 100%;order:5}
  .view{padding:14px 14px 96px;gap:14px}

  /* everything gets its own row */
  .split,.grid2,.two,.deskcols,.cols,.regwrap,.lookrow,.kpis,.stats,.form .two{grid-template-columns:1fr!important}
  .stats>.stat{border-right:0!important;border-bottom:1px solid var(--line)}
  .hero{padding:20px 18px;gap:16px}
  .hero h1{font-size:30px}
  .panel-h{padding:12px 14px}
  .panel-b{padding:14px}

  /* a table becomes a stack of cards, each line saying what it is */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-bottom:1px solid var(--line);padding:10px 14px}
  .tbl tbody tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:4px 0;display:flex;gap:10px;align-items:flex-start;text-align:left}
  .tbl td:before{content:attr(data-label);flex:0 0 92px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:3px}
  .tbl td:not([data-label]):before,.tbl td[data-label=""]:before{display:none}
  .tbl .r{text-align:left}

  /* lists with fixed columns stack too */
  .litem{grid-template-columns:1fr!important;gap:6px!important;align-items:flex-start;padding:12px 14px!important}
  .lday{grid-template-columns:1fr;gap:6px}

  /* nothing zooms when a box is tapped */
  input,select,textarea,.input,.search input{font-size:16px}

  /* the month grid, small but readable */
  .cal-day{min-height:74px;padding:4px}
  .cal-day .dn{font-size:11px;padding:0 4px}
  .ev{font-size:10px;padding:2px 4px}
  .calbar{padding:12px 14px;gap:8px}
  .calbar h2{font-size:18px}

  .tabs{padding:0 14px}
  .flow{grid-template-columns:1fr;gap:6px}
  .flow>span[aria-hidden]{display:none}
  .drawer{width:100%;max-width:100%}
  .phone{width:100%}
}
@media (max-width:560px){
  .view{padding:12px 12px 96px}
  .tbl tr{padding:10px 12px}
  .tbl td{flex-direction:column;gap:2px}
  .tbl td:before{flex:none}
  .hero h1{font-size:26px}
  .top h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 18px;border-radius:999px;font-weight:700;z-index:70;box-shadow:var(--shadow)}
.calbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.calbar h2{font-size:26px;font-weight:900;min-width:170px}
.calbar .legend{width:100%}
.cal-big .cal-day{min-height:140px}

/* ---------- My desk ---------- */
.deskcols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:18px;align-items:start}
.daybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.daybar .input{width:auto;min-width:124px;padding:6px 8px;font-size:13.5px}
.daybar .seg button{padding:5px 10px;font-size:12px}
.daybar .btn{padding:6px 12px;font-size:12.5px}
.daybar .label{font-size:10px;letter-spacing:.1em}
.daybar .label{flex:none}
.daybar .date{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:19px}
.daybar .fig{font-size:13px;color:var(--ink-2)}
.onnow{display:flex;align-items:center;gap:8px;border:1px dashed var(--line-2);border-radius:999px;padding:4px 14px 4px 6px;font-size:13px;color:var(--ink-2);min-width:230px}
.onnow input{border:0;background:transparent;outline:none;width:100%;font-size:13px}

.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:14px 18px}
.wd{border:1px solid var(--line);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px}
.wd .dn{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.wd .num{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:22px;line-height:1}
.wd .pips{display:flex;gap:3px;min-height:7px}
.wd .pips i{width:6px;height:6px;border-radius:50%;display:block}
.wd.today{background:var(--ink);border-color:var(--ink);color:#fff}
.wd.today .dn{color:var(--lilac)}
.wd.rest{background:var(--surface-2)}

.addline{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line)}
.addline .ring{width:19px;height:19px;border-radius:50%;border:1.5px dashed var(--line-2);flex:none}
.addline input{border:0;background:transparent;outline:none;width:100%;color:var(--ink)}
.tk{display:flex;align-items:flex-start;gap:11px;padding:11px 18px;border-bottom:1px solid var(--line)}
.tk:last-child{border-bottom:0}
.tk .ring{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;margin-top:2px;background:var(--surface);padding:0}
.tk .ring:hover{border-color:var(--ink)}
.tk .ring.hi{border-color:var(--bad-ink)}
.tk .body{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.tk .name{font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.tk .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.tk .late{color:var(--bad-ink);font-weight:700}
.tk .soon{color:var(--orange);font-weight:700}
.tk .open{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:2px 6px;border-radius:6px}
.tk .open:hover{color:var(--ink);background:var(--surface-2)}
.tk.done .name{text-decoration:line-through;color:var(--muted);font-weight:400}
.tk.done .ring{background:var(--good-bg);border-color:var(--good-ink)}

.steps{margin-top:4px;border-left:2px solid var(--line);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:7px}
.step{display:flex;align-items:center;gap:9px;font-size:13.5px}
.step .box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:10px;background:var(--surface);padding:0;color:var(--good-ink)}
.step .box.tick{background:var(--good-bg);border-color:var(--good-ink);font-weight:900}
.step.tick span{text-decoration:line-through;color:var(--muted)}
.prog{display:flex;align-items:center;gap:8px;margin-top:2px}
.prog .bar{height:5px;border-radius:999px;background:var(--surface-2);flex:1;overflow:hidden;max-width:170px}
.prog .bar i{display:block;height:100%;background:var(--c-tasks)}
.prog small{font-size:11px;color:var(--muted)}
.fold{display:flex;align-items:center;gap:10px;padding:10px 18px;color:var(--muted);font-size:12.5px;font-weight:700;border-top:1px solid var(--line);background:var(--surface-2)}

.fy{display:flex;align-items:flex-start;gap:10px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:13px}
.fy:last-child{border-bottom:0}
.fy small{display:block;color:var(--muted);font-size:11.5px;font-family:var(--mono);margin-top:2px}
.short{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px}

.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;padding:16px 18px}
.note{border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:6px;min-height:150px;background:var(--surface);text-align:left;color:var(--ink)}
.note:hover{border-color:var(--ink)}
.note.pin{background:var(--butter);border-color:#EBD98C}
.note b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:15.5px}
.note p{margin:0;font-size:12.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.note .foot{margin-top:auto;font-size:11px;color:var(--muted)}

.chat{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:540px}
.chat .people{border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;max-height:600px}
.chat .person{display:flex;align-items:center;gap:10px;padding:11px 14px;border:0;background:transparent;text-align:left;border-bottom:1px solid var(--line);width:100%}
.chat .person.on{background:var(--surface-2)}
.chat .person .nm{font-weight:700;font-size:13.5px}
.chat .person .last{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.chat .person .unread{width:8px;height:8px;border-radius:50%;background:var(--orange);margin-left:auto;flex:none}
.chat .room{display:flex;flex-direction:column;min-width:0}
.chat .roomh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat .thread{padding:16px;display:flex;flex-direction:column;gap:13px;flex:1;overflow-y:auto;max-height:470px}
.dayline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dayline:before,.dayline:after{content:"";height:1px;background:var(--line);flex:1}
.msg{display:flex;gap:9px;align-items:flex-start}
.msg .bub{background:var(--surface-2);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:13.5px;max-width:74%;white-space:pre-line;overflow-wrap:anywhere}
.msg .bub .nm{font-weight:900;font-size:12px;margin-bottom:2px}
.msg .bub time{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}
.msg.mine{flex-direction:row-reverse}
.msg.mine .bub{background:var(--brand-soft);border-radius:14px 14px 4px 14px}
.attach{display:inline-flex;align-items:center;gap:8px;margin-top:7px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:6px 10px;font-size:12.5px;font-weight:700}
.compose{display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid var(--line)}
.compose .box{flex:1;border:1px solid var(--line-2);border-radius:999px;padding:9px 15px;font-size:13px;background:var(--surface);outline:none}
.compose .send{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#151632;display:grid;place-items:center;border:0;font-weight:900;flex:none}
.tabs .unread{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;margin-left:5px}

@media (max-width:1000px){
  .deskcols{grid-template-columns:1fr}
  .chat{grid-template-columns:1fr}
  .chat .people{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;max-height:none;overflow-x:auto}
  .chat .person{border-bottom:0;width:auto}
  .chat .person .last{display:none}
}
@media (max-width:620px){
  .week{grid-template-columns:repeat(4,1fr)}
  .daybar{gap:10px}
  .onnow{min-width:0;width:100%}
  .notes{grid-template-columns:1fr}
  .chat{min-height:0}
  .chat .thread{max-height:none}
  .msg .bub{max-width:88%}
  .tk,.fy,.addline{padding-left:14px;padding-right:14px}
  .week,.short,.notes{padding-left:14px;padding-right:14px}
}

/* a task's own name opens it, and its details read as text */
.tk .name{font-weight:700;font-size:14.5px;overflow-wrap:anywhere;border:0;background:transparent;padding:0;text-align:left;color:var(--ink)}
.tk .name:hover{text-decoration:underline}
.tk .details{margin:2px 0 0;font-size:13px;color:var(--ink-2);white-space:pre-line}
/* the steps written inside a form */
.stepsedit{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stepsedit .step{display:flex;align-items:center;gap:9px;font-size:13.5px}
.stepsedit .step .box{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;font-size:10px;background:var(--surface);padding:0;color:var(--good-ink)}
.stepsedit .step .box.tick{background:var(--good-bg);border-color:var(--good-ink);font-weight:900}
.stepsedit .step.tick span{text-decoration:line-through;color:var(--muted)}
.stepsedit .step span:not(.box){flex:1;overflow-wrap:anywhere}

/* a step: its words can be clicked, and one box opens at a time */
.step .txt{flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:2px 0;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.step .txt:hover{text-decoration:underline}
.step.tick .txt{text-decoration:line-through;color:var(--muted)}
.step .x{border:0;background:transparent;color:var(--muted);padding:0 4px;font-weight:700;flex:none;visibility:hidden}
.step:hover .x,.step .x:focus-visible{visibility:visible}
.step.writing{gap:8px;flex-wrap:wrap}
.step.writing .field{flex:1;min-width:150px;border:1.5px solid var(--brand);border-radius:10px;padding:7px 11px;background:var(--surface);outline:none;font-size:13.5px;color:var(--ink)}
.step.writing .btn{flex:none}
.addbtn{align-self:flex-start;border:1px dashed var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px}
.addbtn:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- Messaging: a bar along the bottom, the way a messenger sits ---------- */
.msgpanel{width:330px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -2px 24px -10px rgba(21,22,50,.35);display:flex;flex-direction:column;overflow:hidden}
.msgpanel.open{height:440px;max-height:calc(100vh - 70px)}
.msgbar{display:flex;align-items:center;gap:4px;padding:8px 10px;flex:none;background:var(--surface);border-bottom:1px solid transparent}
.msgpanel.open .msgbar{border-bottom-color:var(--line)}
.msgbar-name{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:2px;text-align:left}
.msgbar-name b{font-family:var(--display);font-variation-settings:"wdth" 75;font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgcount{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--orange);color:#151632;border-radius:999px;padding:1px 7px;flex:none}
.msgicon{border:0;background:transparent;color:var(--ink-2);padding:6px;border-radius:8px;display:grid;place-items:center;flex:none}
.msgicon:hover{background:var(--surface-2);color:var(--ink)}

.msglist{flex:1;overflow-y:auto}
.msgrow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.msgrow:hover,.msgrow.on{background:var(--surface-2)}
.msgrow .face{position:relative;flex:none;line-height:0}
.msgrow .here{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--good-ink);border:2px solid var(--surface)}
.msgrow .who{min-width:0;flex:1}
.msgrow .who b{display:block;font-size:13.5px}
.msgrow .last{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgrow .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none}

.msgthread{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.dockempty{color:var(--muted);font-size:13px;text-align:center;margin:auto}
.msgform{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.msgbox{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;font-size:13.5px;background:var(--surface);outline:none;color:var(--ink)}
.msgbox:focus{border-color:var(--ink)}
.msgsend{width:34px;height:34px;flex:none;border-radius:50%;background:var(--orange);color:#151632;display:grid;place-items:center;border:0;font-weight:900;font-size:19px;line-height:1}
.herepill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--good-ink);color:#fff;border-radius:999px;padding:2px 8px}
@media (max-width:560px){
  .msgpanel{width:auto}
  .msgpanel.open{height:min(70vh,480px)}
}

/* the row you were sent to, marked for a moment */
.spot{animation:spotfade 2.2s ease-out}
tr.spot td{background:var(--butter)!important}
@keyframes spotfade{0%,55%{background:var(--butter)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.spot{animation:none;background:var(--butter)}}

/* ---------- the notepad, over the top of the notes ---------- */
.note{position:relative}
.note .pinmark{position:absolute;top:9px;right:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#8A7A3C;font-weight:700}
.note b{padding-right:26px}
.pad{--paper:#FFFDF4;--rule:#E4DFC8;--margin:#E9A28C;background:var(--paper);border-color:var(--rule);display:flex;flex-direction:column;overflow:hidden;min-height:min(70vh,560px)}
.padtop{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#F4EFDC;border-bottom:1px solid var(--rule);flex:none}
.padtop .back{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--rule);background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.padtop .back:hover{background:#fff;border-color:var(--ink)}
.padtop .when{font-size:10.5px;color:#9A8F6A;letter-spacing:.05em;text-transform:uppercase}
.pad .sheet{flex:1;min-height:0;overflow-y:auto;position:relative;padding:16px 20px 18px 54px}
.pad .sheet:before{content:"";position:absolute;top:0;bottom:0;left:36px;width:1.5px;background:var(--margin);opacity:.6}
.padtitle{width:100%;border:0;background:transparent;outline:none;font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:24px;line-height:1.1;color:var(--ink);padding:0 0 9px;border-bottom:1px solid var(--rule);margin-bottom:7px}
.padtitle::placeholder{color:#C4BC9C}
.padbody{width:100%;border:0;outline:none;resize:none;background:repeating-linear-gradient(var(--paper),var(--paper) 25px,var(--rule) 25px,var(--rule) 26px);line-height:26px;font-size:15px;color:var(--ink-2);padding:0;min-height:300px;font-family:var(--body)}
.padbody::placeholder{color:#C4BC9C}
.padbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--rule);background:#F4EFDC;flex:none}
.padbar .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.padbar .saved{font-size:12px;color:var(--good-ink);font-weight:700}
@media (max-width:620px){
  .pad .sheet{padding:14px 14px 16px 44px}
  .pad .sheet:before{left:28px}
  .padtitle{font-size:21px}
}

/* nothing runs off the side of a phone */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .main,.view,.panel,.viewroot{min-width:0;max-width:100%}
  .main{overflow-x:clip}
  .view>*{max-width:100%}
  .tablewrap{overflow-x:visible}
  .row,.stack,.panel-h{max-width:100%}
  .mono,.chip.id,.refchip{overflow-wrap:anywhere}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:8px}
  .stat{min-width:0}
  .weekwrap,.week{overflow-x:auto}
  .input,.search,.field,textarea{max-width:100%}
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
}

/* an email on an event or a programme: the name and its switch, the rest on a tap */
.mailrow{border-bottom:1px solid var(--line)}
.mailrow:last-of-type{border-bottom:0}
.mailrow>summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none}
.mailrow>summary::-webkit-details-marker{display:none}
.mailrow>summary::marker{content:""}
.mailrow>summary b{flex:1;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.mailrow>summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-right:3px;flex:none;transition:transform .15s}
.mailrow[open]>summary:after{transform:rotate(-135deg)}
.mailbody{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 12px}
.mailbody .when{font-size:12.5px;color:var(--muted);flex:1;min-width:150px}
.mailbody .tally{font-size:12px;white-space:nowrap}
@media (max-width:900px){
  .mailrow>summary{padding:11px 0}
  .mailbody{gap:8px;padding-bottom:12px}
  .mailbody .when{flex:1 1 100%;min-width:0}
  .mailbody .btn{margin-left:auto}
}

/* ---------- Control centre ---------- */
.ctl{width:100%;border-collapse:collapse}
.ctl thead th{text-align:right;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.ctl thead th:first-child{text-align:left}
.ctl td{padding:9px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.ctl tbody tr:last-child td{border-bottom:0}
.ctl tr.group td{background:var(--surface-2)}
.ctl tr.group td:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ctl td.name{font-weight:700}
.ctl td.name.sub{padding-left:40px;font-weight:400;color:var(--ink-2)}
.ctl td.set{width:104px;text-align:right}
.ctl tr.off td.name{color:var(--muted)}
.ctl tbody tr:hover td{background:var(--surface-2)}
.ctl .always{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media (max-width:900px){
  .ctl{display:table}
  .ctl thead{display:table-header-group}
  .ctl tbody{display:table-row-group}
  .ctl tr{display:table-row;padding:0}
  .ctl td{display:table-cell;padding:8px 12px;width:auto}
  .ctl td:before{display:none}
  .ctl td.name.sub{padding-left:26px}
  .ctl td.set{width:68px}
  .ctl thead th{padding:8px 12px;font-size:9.5px}
}

/* strips that slide sideways do not also scroll up and down,
   and they carry no scrollbar of their own */
.tabs,.weekwrap,.tablewrap,.legend,.whatrow,.chat .people,.calbar .seg{overflow-y:hidden}
.tabs,.weekwrap,.legend,.whatrow,.chat .people{scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar,.weekwrap::-webkit-scrollbar,.legend::-webkit-scrollbar,.whatrow::-webkit-scrollbar,.chat .people::-webkit-scrollbar{display:none}
@media (max-width:900px){
  .side{overscroll-behavior:contain}
  .tabs{-webkit-overflow-scrolling:touch}
}

/* ---------- a phone opens at its own size, and the little chat stays off it ---------- */
@media (max-width:900px){
  /* the corner Messaging bar belongs to a computer; on a phone the Chat tab is the place */

  /* nothing on the Scan tab is wider than the screen, so the page never starts zoomed */
  .manual{flex-wrap:wrap;padding:0 14px 14px}
  .manual .input{flex:1 1 100%;min-width:0}
  .manual .btn{margin-left:auto}
  .cam{margin:12px 14px}
  .whatrow{padding:12px 14px}
  .res{padding:14px}
  .res h3{font-size:24px}
  .res dl{grid-template-columns:1fr;gap:2px}
  .res .mark{width:56px;height:56px;font-size:30px}
  .codebox{max-width:100%}
  .mail,.phone{max-width:100%}
  img,svg,video,canvas{max-width:100%}
}

/* ---------- no zoom when a box is tapped, anywhere on a phone ----------
   iOS zooms in on any field smaller than 16px, so nothing is. The few that
   should look bigger say so again below. */
@media (max-width:900px){
  input,select,textarea,[contenteditable="true"],.input,.stepbox,.field,.box,.msgbox,.dockbox{font-size:16px!important}
  .padtitle{font-size:22px!important}
  .codebox{font-size:22px!important}
  .step .box,.stepsedit .step .box{font-size:10px!important}
  .onnow input{font-size:16px!important}
}

/* ---------- writing a note on a phone: the pad owns the screen,
     its bar sits on top of the keyboard, and only the paper scrolls ---------- */
@media (max-width:900px){
  .pad{position:fixed;left:0;right:0;top:0;z-index:55;margin:0;border:0;border-radius:0;
    height:var(--vvh,100dvh);min-height:0;transform:translateY(var(--vvt,0px))}
  .pad .sheet{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .padbar{flex:none;position:sticky;bottom:0;padding:10px 12px}
  .padbar .chip{font-size:12px;padding:5px 11px}
  .padtop{flex:none}
}

/* ---------- the chat on a phone: it owns the screen and sits on the keyboard ---------- */
.chatback{display:none}
@media (max-width:900px){
  .chat{position:fixed;left:0;right:0;top:0;z-index:55;display:flex;flex-direction:column;
    height:var(--vvh,100dvh);min-height:0;transform:translateY(var(--vvt,0px));background:var(--surface)}
  .chat .people{flex:none;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}
  .chat .room{flex:1;min-height:0;display:flex;flex-direction:column}
  .chat .roomh{flex:none;gap:8px}
  .chat .thread{flex:1;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .compose{flex:none;position:sticky;bottom:0;background:var(--surface)}
  .chatback{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);flex:none}
}

/* ---------- the team: who they are, what they do, what they may open ---------- */
.person{display:flex;align-items:flex-start;gap:10px}
.person>div{min-width:0}
.person b{font-size:13.5px}
.jobtitle{border:1px solid transparent;background:transparent;border-radius:8px;padding:2px 6px;margin-left:-6px;width:100%;min-width:150px;font-size:12.5px;color:var(--muted)}
.jobtitle:hover{border-color:var(--line)}
.jobtitle:focus{border-color:var(--grape);background:var(--surface);color:var(--ink);outline:none}
.jobtitle::placeholder{color:var(--muted);font-style:italic}
.pick{width:auto;padding:4px 10px;border-radius:999px;font-size:13px}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.seen{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.seen:hover{border-color:var(--ink)}
.seen.cut{border-color:var(--orange);background:#FFF1E6;color:#8A3A00}
.keycode{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:12px;padding:12px 14px}
.keycode b{font-size:18px;word-break:break-all}
.keycode b.small{font-size:12.5px}

/* an arrow back, where a screen opens over the one before it */
.back{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:grid;place-items:center;flex:none;font-size:17px;line-height:1;font-weight:700}
.back:hover{border-color:var(--ink)}
.panel-b.narrow{max-width:620px;display:flex;flex-direction:column;gap:16px}

/* the tabs one person may open: one list, in the order the menu has them */
.screens{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.screens .sgroup{background:var(--surface-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 14px;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.screens .sgroup:first-child{border-top:0}
.srow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow b{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.srow.sub{padding-left:34px}
.srow.sub b{font-weight:400;color:var(--ink-2);font-size:13px}
.srow.off b{color:var(--muted)}
.sw.sm{width:34px;height:20px}
.sw.sm::after{width:14px;height:14px}
.sw.sm[aria-checked="true"]::after{left:17px}

/* one of two ways of doing something, picked by tapping the whole box */
.choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;border:1.5px solid var(--line-2);border-radius:16px;padding:12px 14px;background:var(--surface);text-align:left;width:100%;color:var(--ink)}
.choice[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.choice .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center}
.choice[aria-checked="true"] .dot{border-color:var(--ink)}
.choice[aria-checked="true"] .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--orange)}
.choice b{display:block;font-size:15px}

@media (max-width:900px){
  /* each person is a card: their name and position on top, the buttons across the foot */
  .person{align-items:center}
  .jobtitle{min-width:0}
  .acts{justify-content:stretch;width:100%;padding-top:6px}
  .acts .btn{flex:1;justify-content:center}
  .tbl td.r .acts{justify-content:stretch}
  .panel-b.narrow{max-width:100%}
  .srow{padding:11px 14px}
  .srow.sub{padding-left:28px}
}

/* a name that opens everything about that person */
.nameopen{border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);text-align:left;border-bottom:1px solid transparent}
.nameopen:hover{border-bottom-color:var(--ink)}

/* ---------- the account, at the right of the search ---------- */
.account{position:relative;flex:none}
.mebtn{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px 5px 6px;text-align:left;max-width:230px}
.mebtn:hover,.mebtn[aria-expanded="true"]{border-color:var(--ink)}
.mebtn .mename{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mebtn .mename b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mebtn .mename small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mebtn .chev{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);flex:none}
.mebtn[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.memenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:260px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;padding:6px}
.mehead{display:flex;align-items:center;gap:10px;padding:10px 10px 8px}
.mehead b{display:block;font-size:14px}
.mehead small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.metag{margin:0 10px 6px;display:inline-flex;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--neu-ink);background:var(--neu-bg);border-radius:999px;padding:3px 9px}
.meitem{display:block;width:100%;border:0;background:transparent;color:var(--ink);text-align:left;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:700}
.meitem:hover{background:var(--surface-2)}
.meitem.out{color:var(--bad-ink);border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px}

@media (max-width:900px){
  /* on a phone only the face shows, and the menu spans the screen */
  .mebtn{padding:4px;max-width:none}
  .mebtn .mename,.mebtn .chev{display:none}
  .memenu{width:min(280px,calc(100vw - 28px))}
}

/* ---------- invoices ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;align-items:start}
.finder{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:5px 13px;flex:0 1 180px;min-width:140px;color:var(--muted)}
.finder input{border:0;background:transparent;outline:none;width:100%;color:var(--ink)}
.dayhead{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dayhead b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dayhead .v{margin-left:auto;font-size:12.5px;font-weight:700}
.invrow{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border:0;border-bottom:1px solid var(--line);width:100%;background:none;text-align:left;color:var(--ink)}
.invrow:last-child{border-bottom:0}
.invrow:hover{background:var(--surface-2)}
.invrow b{font-size:14px;display:block}
.invrow .meta{font-size:12px;color:var(--muted);display:block;overflow-wrap:anywhere}
.shot{width:54px;height:54px;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2);flex:none;display:grid;place-items:center;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.big{width:100%;height:auto;min-height:120px;border:0;border-radius:0}
.shot.big img{height:auto;object-fit:contain}
.pdfmark{position:absolute;bottom:3px;right:3px;font-family:var(--mono);font-size:8.5px;font-weight:700;background:var(--bad-ink);color:#fff;border-radius:3px;padding:1px 4px}
.tag{display:inline-block;font-size:11px;font-weight:700;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-right:4px}
.amt{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:19px;white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

.look{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:16px;align-items:start;padding:16px}
.paper{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.paper .cap{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);background:var(--surface);font-size:12.5px;flex-wrap:wrap}

.items{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.item{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px 34px;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.item:last-of-type{border-bottom:0}
.item input,.item select{border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 8px;width:100%;font-size:16px}
.item input:hover,.item select:hover{border-color:var(--line)}
.item input:focus,.item select:focus{border-color:var(--grape);background:var(--surface);outline:none}
.item .price{text-align:right;font-family:var(--mono);font-weight:700}
.item .x{border:0;background:transparent;color:var(--muted);font-size:15px;border-radius:8px;padding:4px}
.item .x:hover{color:var(--bad-ink)}
.item.head{background:var(--surface-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.item.head span:nth-child(3){text-align:right}
.total{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:2px solid var(--ink);font-weight:900}
.total .v{margin-left:auto;font-family:var(--display);font-variation-settings:"wdth" 75;font-size:24px}

.drop{border:2px dashed var(--line-2);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;background:var(--surface-2)}

@media (max-width:900px){
  .look{grid-template-columns:1fr;padding:12px}
  /* a line on a phone: what it was on top, then its category and price */
  .item{grid-template-columns:minmax(0,1fr) 104px 30px;grid-template-areas:"name name name" "cat price x";gap:6px;padding:10px 12px}
  .item.head{display:none}
  .item input:first-child{grid-area:name}
  .item select{grid-area:cat}
  .item .price{grid-area:price;text-align:right}
  .item .x{grid-area:x;justify-self:end}
  /* an invoice stays on one line: picture, who it was from, what it cost */
  .invrow{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:10px 12px;align-items:center}
  .invrow b{font-size:13.5px}
  .invrow .meta{font-size:11.5px}
  .invrow .amt{font-size:17px}
  .tag{font-size:10.5px;padding:1px 6px}
  .shot{width:44px;height:44px}
  .crop{grid-template-columns:1fr 1fr;gap:8px;order:1}
  .crop .arrow{display:none}
  .crop.one-up{grid-template-columns:1fr}
  .picks{order:2;flex-direction:column;align-items:stretch}
  .picks .btn.sm{width:auto;align-self:flex-start}
  .picks .btn{width:100%;justify-content:center}
  .picks .pill{align-self:flex-start}
  .crop .one{max-width:none}
  .daybar{gap:8px;padding:10px 12px}
  .daybar .input[type=date]{flex:1 1 120px;min-width:120px;max-width:170px}
  /* the four figures sit two by two instead of one under another */
  .stats{grid-template-columns:1fr 1fr!important}
  .stat .v{font-size:23px}
  .daybar select.input{flex:1 1 100%;width:auto}
  .daybar .seg{flex:1 1 100%;justify-content:center}
  .daybar .btn{flex:1 1 100%;justify-content:center}
  .finder{flex:1 1 100%}
  /* the line under a shop stays one line */
  .invrow .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* on paper: the page only, no menu and no buttons */
@media print{
  .side,.top,.tabs,#chatdock,.daybar .btn,.daybar .seg,.btn,.back,.addbtn{display:none!important}
  .app{grid-template-columns:1fr}
  .view{padding:0}
  .panel{border:0;break-inside:avoid}
  body{background:#fff}
}

/* ---------- the menu: dark all the way down, and a bar that matches ---------- */
@media (min-width:901px){
  /* the column behind the menu is dark however long the page gets, so no white
     strip shows under it when the page is scrolled */
  .app{background:linear-gradient(90deg,var(--side) 0 232px,var(--ground) 232px)}
}
.side{scrollbar-width:none;-ms-overflow-style:none}
.side::-webkit-scrollbar{display:none}

/* ---------- the page never shifts sideways ----------
   Windows takes room for the scrollbar only when a page is long enough to
   need one. Keeping that room always means nothing jumps as you move about. */
html{scrollbar-gutter:stable}


/* ---------- reading an invoice: the lines it found, ticked one by one ---------- */
.lines{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lhead,.lines .line{display:grid;grid-template-columns:28px minmax(0,1fr) 132px 56px 80px 80px 28px;gap:8px;align-items:center}
.lhead{padding:8px 11px;background:var(--surface-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.lhead span:nth-child(n+4){text-align:right}
.lines .line{padding:7px 11px;border-top:1px solid var(--line)}
.lines .line:first-of-type{border-top:0}
.lines .line.off{opacity:.42}
.lines .line.off input{text-decoration:line-through}
.lines .line input,.lines .line select{border:1px solid transparent;background:transparent;border-radius:8px;padding:5px 7px;width:100%;font-size:16px}
.lines .line input:hover,.lines .line select:hover{border-color:var(--line)}
.lines .line input:focus,.lines .line select:focus{border-color:var(--grape);background:var(--surface);outline:none}
.lines .line .num{text-align:right;font-family:var(--mono);font-weight:700}
.lines .line .x{border:0;background:transparent;color:var(--muted);font-size:14px;padding:2px;justify-self:end}
.lines .line .x:hover{color:var(--bad-ink)}
.tick{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--surface);display:grid;place-items:center;font-size:12px;color:#fff;padding:0}
.tick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.guess{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:5px;vertical-align:middle}
.guess.sure{background:var(--good-ink)}
.guess.maybe{background:var(--warn-ink)}
.guess.poor{background:var(--bad-ink)}
.step{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 0 2px}
.step i{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;font-family:var(--body)}
.reading{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:700;font-size:13.5px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.sums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.sum{padding:10px 13px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.sum:last-child{border-right:0}
.sum b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:19px}
.off1{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700}
.shotpick{display:flex;flex-direction:column;gap:14px}
.picks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* the photo as it was taken, and what is kept of it */
.crop{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:start;max-width:620px}
.crop.one-up{grid-template-columns:minmax(0,320px)}
.crop .arrow{color:var(--muted);font-size:18px;text-align:center}
.crop .one{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.crop .one img,.crop .one .drawn{width:100%;height:170px;object-fit:contain;background:var(--surface-2);display:block;flex:none}
.crop .one .cap{padding:6px 10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pdfbig{display:grid;place-items:center;height:150px;font-family:var(--mono);font-weight:700;color:var(--bad-ink);background:var(--surface-2)}

@media (max-width:900px){
  /* a line on a phone: the name across the top, its category under it, then the figures */
  .lhead{display:none}
  .lines .line{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 66px;
    grid-template-areas:"tick name name x" "tick cat cat cat" "tick qty each cost";gap:6px;padding:10px 11px}
  .lines .line>*:nth-child(1){grid-area:tick;align-self:start;margin-top:4px}
  .lines .line>*:nth-child(2){grid-area:name;font-weight:700}
  .lines .line>*:nth-child(3){grid-area:cat}
  .lines .line>*:nth-child(4){grid-area:qty}
  .lines .line>*:nth-child(5){grid-area:each}
  .lines .line>*:nth-child(6){grid-area:cost;align-self:center;font-size:13px;text-align:right}
  .lines .line>*:nth-child(7){grid-area:x;align-self:start}
  .lines .line input,.lines .line select{border-color:var(--line)}
  .crop{grid-template-columns:1fr 1fr;gap:8px;order:1}
  .crop .arrow{display:none}
  .crop.one-up{grid-template-columns:1fr}
  .picks{order:2;flex-direction:column;align-items:stretch}
  .picks .btn{width:100%;justify-content:center}
  .picks .pill{align-self:flex-start}
  .sums{grid-template-columns:1fr 1fr}
}

/* how a new invoice goes, while the screen is still empty */
.how{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:9px;max-width:66ch;color:var(--ink-2);font-size:13.5px}
.how li{padding-left:2px}
.how b{color:var(--ink)}

/* ---------- the CRM filters: even columns, two tidy rows ---------- */
.crmbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:14px 16px;align-items:center}
.crmbar .search{grid-column:span 3;min-width:0;padding:6px 14px}
.crmbar .search input{min-width:0}
.crmbar .input{width:100%;min-width:0;padding:6px 10px;border-radius:999px;font-size:13.5px}
.crmbar .btn{width:100%;justify-content:center}
.crmbar .newbtn{grid-column:6}
@media (max-width:1200px){
  .crmbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .crmbar .search{grid-column:span 3}
  .crmbar .newbtn{grid-column:4}
}
@media (max-width:900px){
  .crmbar{grid-template-columns:1fr 1fr;padding:12px}
  .crmbar .search{grid-column:span 2}
  .crmbar .newbtn{grid-column:span 2}
}

/* the sheet that is being brought in */
.crmbar .newbtn{display:none}

/* ---------- marketing: ideas, campaigns, posts and the feed ---------- */
.post{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.idea{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px}
.idea .thumb{width:54px;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.idea .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.idea b{display:block;font-size:13.5px}
.idea .meta{font-size:12px;color:var(--muted)}
.camp{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.camp:last-child{border-bottom:0}
.beats{display:flex;flex-wrap:wrap;gap:6px}
.beatrow{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;background:var(--surface);color:var(--ink)}
.beatrow:hover{border-color:var(--ink)}
.beat{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line-2)}
.beat.done{background:var(--good-ink)}
.beat.soon{background:var(--orange)}
.beat.empty{background:transparent;border:1.5px dashed var(--line-2)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px}
.shots .shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1;background:var(--surface-2)}
.shots .shot img{width:100%;height:100%;object-fit:cover;display:block}
.shots .shot .n{position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:rgba(21,22,50,.78);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.shots .shot .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(21,22,50,.78);color:#fff;border:0;font-size:11px;line-height:1;padding:0}
.shots .shot.add{display:grid;place-items:center;border-style:dashed;color:var(--muted);font-weight:700;font-size:12.5px}
.counter{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.counter.over{color:var(--bad-ink);font-weight:700}
.tagline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.queue .q{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 16px;border:0;border-bottom:1px solid var(--line);width:100%;background:none;text-align:left;color:var(--ink)}
.queue .q:last-child{border-bottom:0}
.queue .q:hover{background:var(--surface-2)}
.queue .q .thumb{width:54px;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.queue .q .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.queue .q b{display:block;font-size:13.5px}
.queue .q .meta{font-size:12px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.when{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap;text-align:right}

/* the phone with the feed on it */
.phonewrap{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px}
.igphone{border:9px solid #151632;border-radius:28px;overflow:hidden;background:#fff}
.igtop{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #eee;font-weight:700;font-size:13px;color:#111}
.igtop .dotrow{margin-left:auto;color:#888;letter-spacing:2px}
.ightabs{display:flex;border-top:1px solid #eee}
.ightabs span{flex:1;text-align:center;padding:7px;font-size:11px;color:#999;border-bottom:2px solid transparent}
.ightabs span.on{color:#111;border-bottom-color:#111}
.igphone .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;background:#fff}
.igphone .cell{position:relative;aspect-ratio:1;overflow:hidden;background:#eee}
.igphone .cell img{width:100%;height:100%;object-fit:cover;display:block}
.igphone .cell .tag{position:absolute;left:3px;bottom:3px;font-family:var(--mono);font-size:8.5px;font-weight:700;background:rgba(21,22,50,.82);color:#fff;border-radius:4px;padding:1px 4px}
.igphone .cell .order{position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:50%;background:var(--orange);color:#151632;font-size:10px;font-weight:900;display:grid;place-items:center}
.igphone .cell.soon{outline:2px solid var(--orange);outline-offset:-2px}

@media (max-width:1100px){
  .post{grid-template-columns:1fr}
  .phonewrap{position:static;max-width:330px}
}
@media (max-width:900px){
  .idea{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .idea .thumb{width:44px;height:44px}
  .idea .row{grid-column:1/-1}
  .idea .row .btn{flex:1;justify-content:center}
  .queue .q{grid-template-columns:44px minmax(0,1fr) auto;padding:10px 12px}
  .queue .q .thumb{width:44px;height:44px}
  .shots{grid-template-columns:repeat(3,1fr)}
  .phonewrap{max-width:none}
}

/* ---------- LinkedIn and TikTok ---------- */
.phone{border:9px solid #151632;border-radius:28px;overflow:hidden;background:#fff}
.phonecap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0}

.lit{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #eee;font-size:13px;color:#111}
.lisq{width:34px;height:34px;border-radius:5px;overflow:hidden;flex:none;background:#e8e6f0}
.lisq img{width:100%;height:100%;object-fit:cover;display:block}
.lihead b{display:block;font-size:12.5px;line-height:1.15;color:#111}
.lihead span{font-size:10.5px;color:#666}
.libody{padding:10px 12px;font-size:12.5px;color:#111;line-height:1.5}
.libody .more{color:#666}
.lihash{color:#0A66C2;font-weight:700}
.limg{aspect-ratio:1.25;overflow:hidden;background:#eee}
.limg img{width:100%;height:100%;object-fit:cover;display:block}
.liacts{display:flex;border-top:1px solid #eee}
.liacts span{flex:1;text-align:center;padding:9px 2px;font-size:10.5px;color:#666;font-weight:700}
.opt{border:1px solid #0A66C2;color:#0A66C2;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;text-align:center;margin-top:6px}
.lidocpage{position:relative;aspect-ratio:1.33;background:#e9e7e2}
.lidocn{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.66);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:700;border-radius:4px;padding:1px 5px}
.lidocfoot{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#F4F2EE;border-top:1px solid #e3e1dc}
.lidocfoot b{font-size:11.5px;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.licardimg{aspect-ratio:1.91;background:#e9e7e2}
.licardtext{padding:8px 12px;background:#F4F2EE}
.licardtext b{display:block;font-size:12px;color:#111;line-height:1.3}
.licardtext span{font-size:10.5px;color:#666}

.ttphone{background:#151632;position:relative;aspect-ratio:9/17.5}
.ttshade{position:absolute;inset:0;background:linear-gradient(200deg,#443388,#151632 55%,#FF6700)}
.tttabs{position:absolute;top:10px;left:0;right:0;display:flex;justify-content:center;gap:16px;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:700}
.tttabs .on{color:#fff}
.ttrail{position:absolute;right:8px;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff}
.ttrail i{font-style:normal;display:block;text-align:center}
.ttrail small{display:block;font-size:9.5px;font-weight:700;margin-top:2px}
.ttav{width:34px;height:34px;border-radius:50%;border:2px solid #fff;overflow:hidden;background:rgba(255,255,255,.25)}
.ttcap{position:absolute;left:12px;right:56px;bottom:14px;color:#fff}
.ttcap b{display:block;font-size:12.5px}
.ttcap p{margin:4px 0 0;font-size:11.5px;line-height:1.35}
.ttmusic{display:block;margin-top:6px;font-size:10.5px;opacity:.9}
.ttbar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;padding:6px 4px 7px;background:#000;font-size:9px;color:rgba(255,255,255,.65)}
.ttbar b{color:#fff;font-weight:700}
.ttplus{width:34px;height:20px;border-radius:6px;background:linear-gradient(90deg,#25F4EE 0 30%,#FE2C55 70% 100%);display:grid;place-items:center;color:#000;font-weight:900;font-size:13px}

.capr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:11px 16px;border-bottom:1px solid var(--line);align-items:center}
.capr:last-child{border-bottom:0}
.capr b{font-size:13px}
.capr .bar{grid-column:1/-1}
.capr .seg button{padding:3px 9px;font-size:13px;font-weight:900;line-height:1}

.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow b{display:block;font-size:13.5px}
.vrow .meta{font-size:12px;color:var(--muted)}
.vrow .seg button{padding:4px 8px;font-size:11.5px}

.steps{display:grid;gap:10px}
.step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700}
.step b{font-size:13.5px}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center;padding:12px;background:var(--surface-2);border-radius:12px}
.node{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:10px 8px;text-align:center}
.node b{display:block;font-size:12.5px}
.node span{font-size:11px;color:var(--muted)}
.arr{color:var(--muted);font-weight:900;text-align:center}

@media (max-width:900px){
  .vrow{grid-template-columns:minmax(0,1fr) auto}
  .vrow .seg{grid-column:1/-1;overflow-x:auto;scrollbar-width:none}
  .flow{grid-template-columns:1fr;gap:6px}
  .arr{transform:rotate(90deg)}
}

/* ---------- choosing from the Google Drive ---------- */
.drivewrap{position:fixed;inset:0;z-index:60;background:rgba(21,22,50,.5);display:flex;align-items:center;justify-content:center;padding:18px}
.drivebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);width:min(720px,100%);max-height:min(680px,92vh);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.drivebody{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.drivefolders{display:flex;flex-wrap:wrap;gap:8px}
.drivefolders .folder{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink)}
.drivefolders .folder:hover{border-color:var(--ink)}
.drivefolders .folder b{font-weight:700}
.drivebody .shots .shot{display:flex;flex-direction:column;justify-content:flex-end;padding:0;background:var(--surface-2);text-align:left}
.drivebody .shots .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drivebody .shots .shot.on{outline:3px solid var(--orange);outline-offset:-3px}
.drivebody .shots .shot .n{position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#151632;font-family:var(--mono);font-size:11px;font-weight:900;display:grid;place-items:center;z-index:2}
.dname{position:relative;z-index:1;font-size:11px;font-weight:700;color:#fff;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.dmeta{position:relative;z-index:1;font-family:var(--mono);font-size:10px;color:#fff;padding:0 6px 6px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media (max-width:640px){
  .drivewrap{padding:0;align-items:stretch}
  .drivebox{max-height:100vh;border-radius:0;width:100%}
  .drivebody .shots{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Storage ---------- */
.holders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.place{display:flex;flex-direction:column}
.place .pad{padding:16px 18px;display:flex;flex-direction:column;gap:14px;flex:1}
.place .logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;font-family:var(--display);flex:none}
.holdwhat{font-size:12.5px;color:var(--muted);line-height:1.4}
.meter{display:flex;flex-direction:column;gap:6px}
.mtop{display:flex;align-items:baseline;gap:10px}
.mtop b{font-size:13.5px}
.mtop .mono{margin-left:auto;font-size:12.5px;color:var(--ink-2);font-weight:700}
.mline{height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.mline i{display:block;height:100%;border-radius:999px}
.meter .pill{align-self:flex-start}
.upgrade{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.upgrade b{font-size:13.5px}
.upgrade span{font-size:12px;color:var(--muted)}
.upgrade .btn{margin-top:4px}

.wholebar{display:flex;height:34px;border-radius:999px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.wholebar i{display:block;height:100%}
.holdkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.holdkey span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px}
.holdkey b{width:11px;height:11px;border-radius:3px;flex:none}
.holdbig{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:44px;line-height:1}

.hold{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center}
.hold:last-child{border-bottom:0}
.holdmark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px;font-family:var(--display)}
.hold b{font-size:14.5px;display:block}
.holdon{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px;margin-left:7px;vertical-align:2px}
.holdamount{font-family:var(--mono);font-weight:700;font-size:15px;text-align:right;white-space:nowrap}
.hold .mline{grid-column:2/-1}
.hold .bits{grid-column:2/-1;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.hold .bit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px}
.hold .bit .amt{font-family:var(--mono);color:var(--muted);white-space:nowrap}

.tidy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:13px 18px;border-bottom:1px solid var(--line);align-items:center}
.tidy:last-child{border-bottom:0}
.tidy b{font-size:13.5px}
.tidywhat{font-size:12px;color:var(--muted);grid-column:1/-1}

@media (max-width:1100px){ .holders{grid-template-columns:1fr} }
@media (max-width:900px){
  .holdbig{font-size:34px}
  .hold{grid-template-columns:28px minmax(0,1fr) auto}
  .holdmark{width:28px;height:28px;font-size:11px}
}

/* ---------- Marketing -> Media ---------- */
.crumbs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13px;min-width:0}
.crumbs button{border:0;background:transparent;padding:2px 4px;color:var(--brand);font-weight:700;font-size:13px}
.crumbs span{color:var(--muted)}
.folders{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line)}
.folders button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink)}
.folders button:hover{border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px;padding:16px 18px}
.tile{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface-2);aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0;text-align:left}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.on{outline:3px solid var(--orange);outline-offset:-3px}
.tile .tick{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(21,22,50,.35);z-index:2;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:11px;font-weight:900}
.tile.on .tick{background:var(--orange);border-color:var(--orange);color:#151632}
.tile .len{position:absolute;top:7px;right:7px;z-index:2;font-family:var(--mono);font-size:10px;font-weight:700;background:rgba(21,22,50,.78);color:#fff;border-radius:5px;padding:2px 6px}
.tile .cap{position:relative;z-index:1;padding:22px 9px 8px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.tile .cap b{display:block;font-size:11.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .cap span{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.82)}
.tile .used{position:absolute;bottom:34px;right:7px;z-index:2;font-family:var(--mono);font-size:9.5px;font-weight:700;background:var(--brand-soft);color:var(--prog-ink);border-radius:5px;padding:1px 5px}

.drop{border:2px dashed var(--line-2);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;background:var(--surface-2);margin:16px 18px}
.drop.over{border-color:var(--orange);background:var(--brand-soft)}
.drop b{font-size:14.5px}
.drop svg{color:var(--muted)}
.going{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 18px;border-top:1px solid var(--line)}
.going .sq{width:40px;height:40px;border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.going b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.going .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.going .prog{grid-column:1/-1;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.going .prog i{display:block;height:100%;background:var(--grape);border-radius:999px;transition:width .2s}
.going .prog i.done{background:var(--good-ink)}

.look{aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--surface-2)}
.look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;padding:14px 18px;font-size:13px;margin:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.inposts{display:flex;flex-direction:column}
.inposts button{display:flex;gap:9px;align-items:center;padding:10px 18px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font-size:12.5px;text-align:left;width:100%}
.inposts button:hover{background:var(--surface-2)}
.inposts .sq{width:28px;height:28px;border-radius:7px;overflow:hidden;flex:none;border:1px solid var(--line);position:relative;background:var(--surface-2)}
.inposts .sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.chosenbar{position:fixed;left:232px;right:0;bottom:0;background:var(--ink);color:var(--side-ink);padding:11px 28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:20;box-shadow:0 -8px 24px -12px rgba(21,22,50,.5)}
.chosenbar b{font-family:var(--display);font-variation-settings:"wdth" 75;font-weight:900;font-size:16px}
.chosenbar .btn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.chosenbar .btn.primary{background:var(--orange);border-color:var(--orange);color:#151632}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px 14px}
  .chosenbar{left:0;padding:10px 14px}
  .chosenbar .btn{flex:1;justify-content:center}
}

/* ---------- Settings -> Integrations ---------- */
.wire{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
.shelf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:16px}
.shelfgroup{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:13px 16px 6px}
.wireitem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;width:100%;border:0;background:none;padding:10px 16px;text-align:left;color:var(--ink);border-left:3px solid transparent}
.wireitem:hover{background:var(--surface-2)}
.wireitem[aria-current="true"]{background:var(--brand-soft);border-left-color:var(--orange)}
.wireitem b{display:block;font-size:14px}
.wireitem .who{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wireitem .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px;font-family:var(--display);flex:none}
.sdot{width:9px;height:9px;border-radius:50%;flex:none}
.sdot.on{background:var(--good-ink)}
.sdot.off{background:var(--line-2)}
.sdot.wait{background:var(--warn-ink)}
.tally{display:flex;gap:16px;padding:13px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.tally span{font-size:12px;color:var(--muted)}
.tally b{font-family:var(--display);font-variation-settings:"wdth" 75;font-size:19px;display:block;color:var(--ink)}
.headcard{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.headcard .mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;font-family:var(--display);flex:none}
.headcard h2{font-size:22px}
.headcard .what{font-size:13px;color:var(--muted)}
.note{padding:13px 18px;border-top:1px solid var(--line);background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:700}
@media (max-width:1000px){ .wire{grid-template-columns:1fr} .shelf{position:static} }
@media (max-width:900px){
  .headcard{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .headcard .mark{width:40px;height:40px;font-size:15px}
  .headcard .row{grid-column:1/-1}
}

.folderrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.folderrow b{display:block;font-size:13.5px}
.folderrow .what{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.picker{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.pickcrumb{font-size:11.5px;color:var(--muted);padding-bottom:8px}
.pickrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 0}
.intofolder{display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r);padding:8px 12px;text-align:left;color:var(--ink);font-size:13.5px}
.intofolder:hover{border-color:var(--ink)}
.intofolder .muted{color:var(--muted);font-size:12px}
.folderrow.sub{padding-left:34px;background:var(--surface-2)}
.folderrow.sub b{font-weight:400;color:var(--ink-2)}
.drivefolders .folder .muted{color:var(--muted);margin-left:2px}
.drivebox .crumbs{flex-wrap:wrap}