/* ============================================================
   Accession client portal.
   Type: Archivo (display, headings) and Host Grotesk (body, UI), Accession core identity v2, self-hosted.
   Structure, depth, spacing, radius, buttons and nav states follow the Brand Hub internal UI
   (brand-hub/editor/ui/editor.css and the shared tokens). Colours are the portal's own.
   Depth: canvas (base) → surface cards (elevated, --e1/--e2) → sheets, viewer, toast (floating, --e3).
   ============================================================ */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-Variable.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url('../fonts/HostGrotesk-Variable.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}

:root{
  /* brand accent (replaced per client by brand.js) */
  --brand:#118A6B;
  --brand-ink:#0B6E55;
  --brand-deep:#0B3B2E;
  --brand-soft:#E3F2EC;
  --brand-line:#BCE0D2;
  --brand-rgb:17,138,107;
  --brand-bright:#5FD3B0;

  /* neutrals: warm paper */
  --page:#FCFBF8;
  --rail:#F6F3EE;
  --surface:#FFFFFF;
  --sunken:#F6F4EF;
  --line:#E8E3DA;
  --line-strong:#D9D2C6;
  --ink:#16140F;
  --ink-2:#47433B;
  --ink-3:#757065;
  --ink-4:#A39E93;

  /* status */
  --done:#0B6E55;   --done-bg:#E3F2EC;
  --doing:#9A5B0B;  --doing-bg:#FBF0DD;
  --next:#3D5670;   --next-bg:#E8EEF4;
  --you:#B1432A;    --you-bg:#FBE8E2;

  /* Brand Hub roles, mapped to the portal's colours */
  --canvas:var(--page);
  --sidebar:var(--rail);
  --hairline:var(--line);
  --hover:rgba(var(--brand-rgb),.07);
  --well:var(--sunken);
  --focus:var(--brand);
  --primary-hover:#2B2822;

  /* type */
  --display:'Archivo','Host Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Host Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:12px;--fs-sm:13px;--fs:14px;--fs-md:15px;--fs-lg:17px;--fs-h3:20px;--fs-h2:24px;--fs-h1:40px;

  /* spacing (4px base, Brand Hub) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
  --r-sm:6px;--r:8px;--r-lg:14px;--r-xl:16px;
  --rail-w:232px;
  --tap:36px;
  --tap-track:20px;

  /* depth: base → elevated → floating (tinted, low opacity) */
  --e1:0 1px 2px rgba(20,48,38,.05);
  --e2:0 1px 2px rgba(20,48,38,.06),0 6px 16px -8px rgba(20,48,38,.14);
  --e3:0 2px 6px rgba(20,48,38,.08),0 24px 48px -16px rgba(20,48,38,.28);

  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
}
@media (max-width:749px){:root{--tap:44px;--fs-h1:32px;--fs-h2:21px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ui);font-size:var(--fs-md);line-height:1.6;color:var(--ink);background:var(--canvas);min-height:100vh}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num-tab{font-variant-numeric:tabular-nums}

/* ============================================================
   WINDOW: sidebar + main (Brand Hub grid)
   ============================================================ */
.app{display:block;min-height:100vh}
.rail{display:none}
.topbar{
  position:sticky;top:0;z-index:40;min-height:60px;padding:var(--s2) var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--sidebar);border-bottom:1px solid var(--hairline);
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:600;font-size:var(--fs-md);border-radius:var(--r-sm)}
.brand-icon{width:28px;height:auto;display:block}
.brand b{display:block;line-height:1.25;font-weight:600}
.brand small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);line-height:1.2}
.branded .topbar .brand-icon{width:64px;height:auto}
.branded .topbar .brand>span{display:none}

.main{padding-bottom:calc(88px + env(safe-area-inset-bottom));min-width:0}
.view{animation:viewIn .4s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (min-width:990px){
  .topbar,.tabbar{display:none}
  .app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .rail{
    display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:0;height:100vh;overflow-y:auto;
    padding:var(--s5) var(--s4);background:var(--sidebar);border-right:1px solid var(--hairline);
  }
  .main{padding-bottom:var(--s12)}
  .main>.view{max-width:1200px}
}
.rail-logo{display:block;padding:2px var(--s2);border-radius:var(--r-sm)}
.rail-logo img{height:22px;width:auto;display:block}
.branded .rail-logo img{height:auto;width:140px;max-width:100%}
.client-tag{padding:0 var(--s2)}
.client-tag b{display:block;font-size:var(--fs);font-weight:600;line-height:1.3;color:var(--ink-2)}
.branded .client-tag{display:none}

/* nav (Brand Hub states) */
.nav{display:flex;flex-direction:column;gap:2px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group+.nav-group{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.nav a{
  display:flex;align-items:center;gap:var(--s2);min-height:36px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:var(--fs);font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:transform .18s var(--spring),opacity .18s var(--ease);
}
.nav a svg.i{display:none}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a:active{transform:scale(.98)}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--e1)}
.nav .count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;background:var(--you-bg);color:var(--you);font-variant-numeric:tabular-nums}

.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s3)}
.help-card{padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1);border:1px solid var(--hairline)}
.help-card strong{display:block;font-size:var(--fs);font-weight:600}
.help-card p{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3);margin:2px 0 var(--s3)}
.help-btns{display:flex;gap:var(--s2);flex-wrap:wrap}
.me{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s1) 0;border-top:1px solid var(--hairline)}
.me>div{min-width:0;flex:1}
.me b{display:block;font-size:var(--fs);font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me div span{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.3}
.me .icon-btn{width:32px;height:32px}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:#fff;background:var(--brand-deep);flex-shrink:0}

/* mobile tab bar (floating layer) */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--hairline);box-shadow:var(--e3);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;
  font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);text-decoration:none;border-radius:var(--r);
  background:none;border:0;cursor:pointer;position:relative;
  transition:transform .18s var(--spring),opacity .18s var(--ease);
}
.tab svg.i{width:21px;height:21px}
.tab:hover{color:var(--ink);background:var(--hover)}
.tab:active{transform:scale(.95)}
.tab[aria-current="page"]{color:var(--ink);background:var(--sunken);font-weight:600}
.tab[aria-current="page"] svg.i{stroke:var(--brand-ink)}
.tab .dot{position:absolute;top:6px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--you);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}

/* ============================================================
   PAGE STRUCTURE (Brand Hub .head and sections)
   ============================================================ */
.page-head{padding:var(--s6) var(--s4) var(--s6);border-bottom:1px solid var(--hairline);position:relative}
.page-head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em}
.page-head p{color:var(--ink-3);margin-top:var(--s2);font-size:var(--fs-md);max-width:64ch;line-height:1.6}
.head-meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:99px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--hairline);white-space:nowrap}
.chip svg.i{width:14px;height:14px;color:var(--ink-3)}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}

.section{padding:var(--s8) var(--s4) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.section-head h2{font-size:var(--fs-h2);letter-spacing:-.025em;line-height:1.2}
.section-head p{font-size:var(--fs);color:var(--ink-3);margin-top:var(--s1);line-height:1.55;max-width:72ch}
.link-btn{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);font-size:var(--fs);font-weight:600;color:var(--brand-ink);text-decoration:none;white-space:nowrap;border-radius:var(--r-sm);padding:0 2px;
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.link-btn:hover{opacity:.72}
.link-btn:active{transform:translateX(2px)}
.link-btn svg.i{width:15px;height:15px}

@media (min-width:750px){
  .page-head{padding:var(--s10) var(--s8) var(--s8)}
  .section{padding:var(--s10) var(--s8) 0}
}
@media (min-width:990px){
  .page-head{padding:var(--s10) var(--s10) var(--s8)}
  .section{padding:var(--s10) var(--s10) 0}
}

/* ============================================================
   COMPONENTS
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e1)}

/* buttons (Brand Hub) */
.btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 14px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--ui);font-size:var(--fs);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:var(--e1);
  transition:transform .18s var(--spring),opacity .18s var(--ease);
}
.btn svg.i{width:16px;height:16px}
.btn:hover{background:var(--sunken);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:var(--primary-hover)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.brand:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{min-height:max(32px,var(--tap));padding:0 12px;font-size:var(--fs-sm)}
.btn.copied{background:var(--done-bg);border-color:var(--brand-line);color:var(--done)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:var(--s2);flex-wrap:wrap}

/* status tags */
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.done{color:var(--done);background:var(--done-bg)}
.tag.doing{color:var(--doing);background:var(--doing-bg)}
.tag.next{color:var(--next);background:var(--next-bg)}
.tag.you{color:var(--you);background:var(--you-bg)}
.tag.plain::before{display:none}
.tag.plain{color:var(--ink-2);background:var(--sunken);border:1px solid var(--hairline)}
.tag svg.i{width:12px;height:12px}
.tag:has(svg.i)::before{display:none}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.stat{
  display:flex;flex-direction:column;gap:2px;padding:var(--s4);text-decoration:none;cursor:pointer;min-height:var(--tap);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e1);text-align:left;
  transition:transform .25s var(--spring),opacity .2s var(--ease);
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.stat:active{transform:translateY(0) scale(.99)}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-num{font-family:var(--display);font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-top:var(--s3);font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.4}
.stat .i{color:var(--ink-4)}
@media (min-width:750px){.stats{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}

.phase{margin-top:var(--s4);padding:var(--s4);display:grid;gap:var(--s3)}
.phase-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.phase-top b{font-size:var(--fs);font-weight:600}
.phase-top span{font-size:var(--fs-sm);color:var(--ink-3)}
.track{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;row-gap:0}
.track i{height:8px;border-radius:3px;background:var(--line)}
.track a.wk{display:flex;align-items:center;min-height:var(--tap-track);border-radius:4px;transition:transform .18s var(--spring),opacity .18s var(--ease)}
.track a.wk span,.track .wk.locked span{display:block;width:100%;height:8px;border-radius:3px;background:var(--line)}
.track a.wk.on span{background:var(--brand)}
.track a.wk.now span{background:repeating-linear-gradient(-45deg,var(--brand) 0 3px,var(--brand-bright) 3px 6px)}
.track a.wk:hover span{background:var(--ink-4)}
.track a.wk.on:hover span{background:var(--brand-ink)}
.track a.wk:active{transform:scaleY(.85)}
.track a.wk.sel span{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
.track .wk.locked{display:flex;align-items:center;min-height:var(--tap-track);cursor:not-allowed;opacity:.55}
.track .wk.locked span{background:repeating-linear-gradient(-45deg,var(--line) 0 3px,transparent 3px 6px)}
/* phones: the bar is a plain progress bar (the week menu in the top bar does the choosing); wider screens: each week is a link */
.track-static .wk{display:flex;align-items:center;min-height:20px}
.track-static .wk span{display:block;width:100%;height:8px;border-radius:3px;background:var(--line)}
.track-static .wk.on span{background:var(--brand)}
.track-static .wk.now span{background:repeating-linear-gradient(-45deg,var(--brand) 0 3px,var(--brand-bright) 3px 6px)}
.track-static .wk.sel span{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
.track-static .wk.locked span{background:repeating-linear-gradient(-45deg,var(--line) 0 3px,transparent 3px 6px)}
.track-links{display:none}
@media (min-width:750px){.track-static{display:none}.track-links{display:grid}}
.track-legend{display:grid;grid-template-columns:4fr 4fr 4fr;font-size:var(--fs-xs);color:var(--ink-3)}
.track-legend span:nth-child(2){text-align:center}
.track-legend span:last-child{text-align:right}

/* two-column split */
.split{display:grid;gap:var(--s4)}
@media (min-width:990px){.split{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}}
.reports>*,.split>*{min-width:0}

/* scrollers: fixed-height boxes for long text, so side-by-side cards line up */
.scroller{min-height:0}
@media (min-width:750px){
  .scroller{max-height:var(--scroll-h,440px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .scroller.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
  .scroller.fade-t{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px);mask-image:linear-gradient(to bottom,transparent,#000 32px)}
  .scroller.fade-t.fade-b{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 32px,#000 calc(100% - 48px),transparent)}
  .scroller:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r)}
}
/* captions are long on every screen: they scroll on phones too */
.scroller.always{max-height:var(--scroll-h,240px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.scroller.always.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
.scroller.always.fade-t.fade-b{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.scroller.always.fade-t:not(.fade-b){-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px);mask-image:linear-gradient(to bottom,transparent,#000 24px)}
.scroller.always:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* checklist */
.list-card{overflow:hidden;display:flex;flex-direction:column}
.list-card>.scroller{flex:1 1 auto}
.list-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--hairline)}
.list-card-head h3{font-family:var(--ui);font-size:var(--fs-md);font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:var(--s2)}
.list-card-head h3 svg.i{color:var(--ink-3)}
.list-card-head .muted{font-size:var(--fs-sm);color:var(--ink-3)}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:0 var(--s4)}
.bar b{display:block;height:100%;width:100%;background:var(--brand);border-radius:99px;transform-origin:left;transition:transform .7s var(--ease)}
.todo{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--hairline);position:relative}
.todo:last-child{border-bottom:0}
.check{
  width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-strong);background:var(--surface);flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;cursor:pointer;position:relative;transition:transform .18s var(--spring),opacity .18s var(--ease);
}
.check::after{content:"";position:absolute;inset:-11px}
.check svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .25s var(--spring)}
.check:hover{border-color:var(--brand)}
.check:active{transform:scale(.9)}
.check[aria-checked="true"]{background:var(--brand);border-color:var(--brand)}
.check[aria-checked="true"] svg{opacity:1;transform:none}
.todo-body{flex:1;min-width:0}
.todo-body b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.45}
.todo-body p{font-size:var(--fs);color:var(--ink-3);line-height:1.55;margin-top:2px}
.todo.is-done .todo-body b{color:var(--ink-4);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.todo.is-done .todo-body p{opacity:.6}
.todo-actions{display:flex;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.pulse{width:22px;height:22px;flex-shrink:0;margin-top:1px;display:grid;place-items:center}
.pulse i{width:8px;height:8px;border-radius:50%;background:var(--doing);box-shadow:0 0 0 4px rgba(154,91,11,.14);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}

/* read-only status marks */
.mark{width:22px;height:22px;border-radius:7px;flex-shrink:0;margin-top:1px;display:grid;place-items:center;border:1.5px solid var(--line-strong)}
.mark.open{border-color:var(--you);background:radial-gradient(circle,var(--you) 0 3px,transparent 3.5px)}
.mark.planned{border-style:dashed;border-color:var(--ink-4)}
.mark.done{background:var(--brand);border-color:var(--brand)}
.mark.done svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none}
.ask-tag{margin-top:1px;flex-shrink:0}
@media (max-width:749px){.ask-tag{display:none}}

/* work cards */
.rail-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px var(--s4);margin:-4px -4px 0;scrollbar-width:thin;align-items:stretch}
.rail-scroll>*{scroll-snap-align:start}
@media (min-width:750px){.rail-scroll{grid-auto-columns:calc((100% - 32px)/2.4)}}
@media (min-width:1280px){.rail-scroll{grid-auto-columns:calc((100% - 48px)/3.25)}}
.work{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .25s var(--spring),opacity .2s var(--ease)}
.work:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.work:active{transform:translateY(0) scale(.99)}
.media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--brand-deep);isolation:isolate;flex-shrink:0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover .media img{transform:scale(1.03)}
.media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(var(--brand-rgb),.22),rgba(61,86,112,.16));mix-blend-mode:multiply;pointer-events:none}
.media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);pointer-events:none}
.media .overlay-tag{position:absolute;z-index:2;top:10px;left:10px;height:24px;padding:0 9px;border-radius:99px;background:var(--surface);color:var(--ink);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:var(--e1)}
.media .overlay-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--brand))}
.media .overlay-cap{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;color:rgba(255,255,255,.92);font-size:var(--fs-sm);font-weight:500;display:flex;gap:6px;align-items:center}
.media .overlay-cap svg.i{width:14px;height:14px}
.work-body{padding:var(--s4)}
.work-body b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.4}
.work-body p{font-size:var(--fs);color:var(--ink-3);line-height:1.55;margin-top:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
/* the card links to the full note on Progress, so its summary is clamped to keep the row even */

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1)}
table{width:100%;border-collapse:collapse;font-size:var(--fs);min-width:680px}
th{text-align:left;font-weight:500;color:var(--ink-3);font-size:var(--fs-sm);background:var(--sunken);padding:12px var(--s4);border-bottom:1px solid var(--hairline);white-space:nowrap;position:sticky;top:0;z-index:1}
th svg.i{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
td{padding:12px var(--s4);border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.5}
tr:last-child td{border-bottom:0}
td.num{color:var(--ink-3);width:48px;font-variant-numeric:tabular-nums}
td .sub{display:block;font-size:var(--fs-sm);color:var(--ink-3)}
td a{color:var(--brand-ink);font-weight:600;text-decoration:none;border-radius:4px}
td a:hover{text-decoration:underline}
tr.sel td{background:var(--brand-soft)}
tr.locked td{color:var(--ink-4)}

/* reports */
.reports{display:grid;gap:var(--s4)}
@media (min-width:990px){.reports{grid-template-columns:1.4fr 1fr;align-items:start}}
.reports-main,.reports-side{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-content:start}
.latest{overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:750px){.latest{grid-template-columns:220px minmax(0,1fr)}}
.deck-cover{
  position:relative;min-height:150px;padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,var(--brand-ink) 0%,transparent 60%),radial-gradient(90% 80% at 100% 100%,var(--brand) 0%,transparent 60%),var(--brand-deep);
}
.deck-cover small{overflow-wrap:anywhere;padding-right:52px;font-size:var(--fs-sm);font-weight:500;opacity:.8}
.deck-cover strong{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.deck-cover .ext{position:absolute;right:12px;top:12px;font-size:var(--fs-xs);font-weight:700;padding:3px 7px;border-radius:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.latest-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.latest-body h3{font-family:var(--ui);font-size:var(--fs-lg);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.latest-body .tag{align-self:flex-start}
.latest-body .meta{font-size:var(--fs-sm);color:var(--ink-3)}
.latest-body .row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:auto;padding-top:var(--s3)}
.deck-list{display:flex;flex-direction:column;overflow:hidden}
.deck-list .scroller{--scroll-h:360px}
.deck-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--hairline)}
.deck-row:last-child{border-bottom:0}
.file-ico{width:38px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;color:#fff;position:relative;box-shadow:var(--e1)}
.file-ico.pdf{background:linear-gradient(160deg,#C4533A,#9D3A25)}
.file-ico.pptx,.file-ico.ppt{background:linear-gradient(160deg,#C9762E,#A35A1B)}
.file-ico.key{background:linear-gradient(160deg,#4A6F96,#2F4F72)}
.file-ico.img{background:linear-gradient(160deg,#2F8A72,#1C5E4C)}
.deck-row-body{flex:1;min-width:0}
.deck-row-body b{display:block;font-size:var(--fs);font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-row-body span{font-size:var(--fs-sm);color:var(--ink-3)}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:var(--r);display:grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--ink-3);cursor:pointer;flex-shrink:0;text-decoration:none;
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.icon-btn:hover{background:var(--hover);color:var(--ink);border-color:var(--hairline)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.danger:hover{color:var(--you);background:var(--you-bg)}
.icon-btn svg.i{width:17px;height:17px}

.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:var(--s6) var(--s4);
  border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sunken);cursor:pointer;
  transition:transform .18s var(--spring),opacity .18s var(--ease);
}
.drop:hover{border-color:var(--brand);background:var(--brand-soft)}
.drop:active{transform:scale(.99)}
.drop.over{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.01)}
.drop .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--e1);color:var(--brand-ink);margin-bottom:4px}
.drop b{font-size:var(--fs);font-weight:600}
.drop span{font-size:var(--fs-sm);color:var(--ink-3)}
.upload-form{display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--brand-line);border-radius:var(--r-lg);background:var(--brand-soft)}
.upload-form .fname{font-size:var(--fs-sm);color:var(--ink-2);display:flex;gap:8px;align-items:center;min-width:0}
.upload-form .fname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-form .row{display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
.progress-line{height:4px;border-radius:99px;background:rgba(var(--brand-rgb),.15);overflow:hidden}
.progress-line b{display:block;height:100%;background:var(--brand-ink);transform-origin:left;transform:scaleX(0);transition:transform .2s linear}

/* form fields (Brand Hub) */
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md);line-height:1.5}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
.field textarea{resize:vertical}
.fields{display:grid;gap:var(--s3)}
@media (min-width:750px){.fields{grid-template-columns:1fr 160px}}
.hint{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}

/* empty, loading and error states */
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--fs);display:grid;justify-items:center;gap:var(--s2)}
.empty svg.i{color:var(--brand);width:22px;height:22px}
.empty b{color:var(--ink);font-size:var(--fs-md);font-weight:600}
.empty .btn{margin-top:var(--s2)}
.state-error{display:grid;justify-items:start;gap:var(--s2);padding:var(--s5);border-color:var(--line)}
.state-error .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--you-bg);color:var(--you)}
.state-error b{font-size:var(--fs-md);font-weight:600}
.state-error p{color:var(--ink-3);font-size:var(--fs);max-width:60ch}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--sunken) 0%,var(--line) 50%,var(--sunken) 100%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}
.skel.h1{height:40px;width:min(420px,80%)}
.skel.line{height:12px;width:100%}
.skel.short{width:60%}
.skel.card-h{height:140px;border-radius:var(--r-lg)}
.skel-stack{display:grid;gap:var(--s3)}
.skel-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* progress board */
.filters{display:flex;gap:var(--s2);overflow-x:auto;padding:2px;margin:0 -2px var(--s4);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{min-height:max(34px,var(--tap));padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs);font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.filter:hover{border-color:var(--line-strong);color:var(--ink)}
.filter:active{transform:scale(.96)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filter em{font-style:normal;font-size:var(--fs-xs);opacity:.65;font-variant-numeric:tabular-nums}
.board{display:grid;gap:var(--s4)}
@media (min-width:990px){.board{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.col{background:var(--sunken);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s3);display:flex;flex-direction:column;min-width:0}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px var(--s3)}
.col-head h3{font-family:var(--ui);font-size:var(--fs);font-weight:600;letter-spacing:0;display:flex;align-items:center;gap:8px}
.col-head h3 i{width:8px;height:8px;border-radius:50%}
.col-head span{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.col-items{display:grid;gap:var(--s2);align-content:start;--scroll-h:640px;padding:2px}
.col .empty{padding:var(--s4);border:1px dashed var(--line-strong);border-radius:var(--r)}
.item{padding:14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--e1)}
.item-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:6px}
.item-area{font-size:var(--fs-xs);font-weight:500;color:var(--ink-3)}
.item b{display:block;font-size:var(--fs);font-weight:600;line-height:1.45}
.item p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55;margin-top:4px}
.item .when{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3);margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline)}
.item .when svg.i{width:14px;height:14px}
.item.hide{display:none}

/* roadmap */
.roadmap{display:grid;gap:var(--s4)}
@media (min-width:990px){.roadmap{grid-template-columns:repeat(3,minmax(0,1fr))}}
.month{padding:var(--s5)}
.month.current{border-color:var(--brand-line);box-shadow:var(--e2)}
.month small{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.month h3{font-size:var(--fs-h3);margin:2px 0 var(--s3);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.month ul{list-style:none;display:grid;gap:8px}
.month li{display:flex;gap:10px;font-size:var(--fs);line-height:1.5;color:var(--ink-2)}
.month li .mk{width:18px;height:18px;border-radius:50%;flex-shrink:0;margin-top:2px;display:grid;place-items:center;border:1.5px solid var(--line-strong)}
.month li.done .mk{background:var(--brand);border-color:var(--brand)}
.month li.done .mk svg{width:10px;height:10px;stroke:#fff;stroke-width:3.2;fill:none}
.month li.doing .mk{border-color:var(--doing);background:radial-gradient(circle,var(--doing) 0 3px,transparent 3.5px)}
.month li.done span{color:var(--ink-3)}

/* posts */
.post{overflow:hidden;margin-bottom:var(--s4)}
.post-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding:var(--s4);border-bottom:1px solid var(--hairline)}
.post-head .sub-name{display:flex;align-items:center;gap:var(--s3)}
.reddit-dot{width:36px;height:36px;border-radius:50%;background:#FF4500;display:grid;place-items:center;flex-shrink:0}
.reddit-dot svg{width:20px;height:20px}
.post-head b{font-size:var(--fs-md);font-weight:600;display:block;line-height:1.3}
.post-head span{font-size:var(--fs-sm);color:var(--ink-3)}
.post-media .media{border-radius:var(--r);aspect-ratio:4/3}
.file-pill{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--hairline)}
.file-pill svg.i{color:var(--ink-3)}
.file-pill b{font-size:var(--fs-sm);font-weight:600;display:block;line-height:1.35;word-break:break-all}
.file-pill span{font-size:var(--fs-xs);color:var(--ink-3);display:block;line-height:1.35}
.copy-text{padding:14px 16px;border-radius:var(--r);background:var(--sunken);border:1px solid var(--hairline);font-size:var(--fs);line-height:1.7;white-space:pre-line;color:var(--ink-2)}
.copy-text.title{font-weight:600;color:var(--ink);font-size:var(--fs-md);line-height:1.55}
.tip{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r);background:var(--next-bg);color:var(--next);font-size:var(--fs);line-height:1.55}
.tip svg.i{margin-top:2px}
.tip.warn{background:var(--you-bg);color:var(--you)}
.post-when{display:flex;gap:10px;align-items:flex-start;padding:12px var(--s4);background:var(--brand-soft);border-bottom:1px solid var(--hairline);font-size:var(--fs);color:var(--ink-2);line-height:1.5}
.post-when svg.i{color:var(--brand-ink);width:16px;height:16px;margin-top:2px}
.post-when b{display:block;color:var(--ink);font-size:var(--fs)}
.post-tip{margin:var(--s4) var(--s4) 0}
.psteps{list-style:none;padding:var(--s2) var(--s4) var(--s4);display:grid}
.pstep{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--hairline)}
.pstep:last-child{border-bottom:0;padding-bottom:var(--s2)}
.pstep-n{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:var(--fs);font-variant-numeric:tabular-nums}
.pstep-body{display:grid;gap:var(--s2);min-width:0;align-content:start}
.pstep-t{font-size:var(--fs-md);font-weight:600;line-height:32px}
.pstep-body p{font-size:var(--fs);color:var(--ink-3);line-height:1.6}
.pstep-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pstep-media{max-width:420px}
.pstep-media .media{border-radius:var(--r);aspect-ratio:16/10}
.pstep .hint{font-size:var(--fs-sm);color:var(--ink-4);word-break:break-word}
.pstep .copy-text:not(.title){--scroll-h:300px}
@media (min-width:990px){.psteps{max-width:860px}}
@media (max-width:749px){.pstep-row .btn{flex:1}.list-card-head .hide-sm{display:none}}
.later{display:grid;gap:var(--s2)}
.sched-mobile{display:grid}
.sched-desktop{display:none}
@media (min-width:750px){.sched-mobile{display:none}.sched-desktop{display:block;--scroll-h:480px}}
.later-row{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);flex-wrap:wrap}
.later-row .n{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--sunken);font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);flex-shrink:0;font-variant-numeric:tabular-nums}
.later-row div{flex:1 1 180px;min-width:0}
.later-row .tag{margin-left:40px}
@media (min-width:750px){.later-row{flex-wrap:nowrap}.later-row .tag{margin-left:0}}
.later-row b{display:block;font-size:var(--fs);font-weight:600;line-height:1.4}
.later-row span{font-size:var(--fs-sm);color:var(--ink-3)}
.later-row.sel{border-color:var(--brand-line);background:var(--brand-soft)}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:var(--tap);padding:0 14px 0 10px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:var(--fs);
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.toggle:hover{border-color:var(--brand)}
.toggle:active{transform:scale(.97)}

/* content library and post cards */
.grid{display:grid;gap:var(--s4)}
@media (min-width:750px){.grid.two,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.creative{overflow:hidden;display:flex;flex-direction:column}
.creative .media{aspect-ratio:16/10}
.creative-body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.creative-body>.file-pill{margin-top:auto}
.creative-body>*{min-width:0}
.creative-body h3{font-family:var(--ui);font-size:var(--fs-md);font-weight:600;letter-spacing:-.005em;line-height:1.35}
.creative-date{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3)}
.creative-date svg.i{width:15px;height:15px}
.platforms{display:flex;flex-wrap:wrap;gap:6px}
details.cap{border:1px solid var(--hairline);border-radius:var(--r);background:var(--sunken)}
details.cap summary{list-style:none;cursor:pointer;min-height:var(--tap);padding:0 14px;font-size:var(--fs);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);border-radius:var(--r)}
details.cap summary::-webkit-details-marker{display:none}
details.cap summary:hover{background:var(--hover)}
details.cap summary:active{opacity:.75}
details.cap summary svg.i{width:16px;height:16px;transition:transform .25s var(--spring)}
details.cap[open] summary svg.i{transform:rotate(180deg)}
details.cap .inner{padding:0 14px 14px;display:grid;gap:var(--s3)}
details.cap .copy-text{background:var(--surface)}
.hashtags{font-size:var(--fs-sm);color:var(--brand-ink);line-height:1.65}
.creative-foot{display:flex;gap:var(--s2);flex-wrap:wrap;padding:0 var(--s4) var(--s4)}

/* the plan */
.steps{display:grid;gap:var(--s3)}
@media (min-width:750px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
.step{padding:var(--s4)}
.step .n{font-family:var(--display);font-size:28px;font-weight:700;color:var(--brand-ink);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.step b{display:block;font-size:var(--fs-md);font-weight:600;margin:var(--s2) 0 4px;line-height:1.4}
.step p{font-size:var(--fs);color:var(--ink-3);line-height:1.6}
.pillars{display:grid;gap:var(--s4)}
@media (min-width:750px){.pillars{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.pillar{padding:var(--s5);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pillar h3{font-size:var(--fs-h3);line-height:1.2}
.pillar p{font-size:var(--fs);color:var(--ink-3);line-height:1.65}
.pillar .tag{margin-top:auto}
.flow{display:grid;gap:var(--s3);align-items:stretch}
@media (min-width:990px){.flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}}
.flow-node{padding:var(--s4);display:grid;gap:4px;align-content:start}
.flow-node .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:6px}
.flow-node b{font-size:var(--fs-md);font-weight:600}
.flow-node p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}
.flow-node.goal{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;box-shadow:var(--e2)}
.flow-node.goal p{color:rgba(255,255,255,.75)}
.flow-node.goal .ico{background:rgba(255,255,255,.1);color:var(--brand-bright)}
.flow-arrow{display:grid;place-items:center;color:var(--ink-4)}
.flow-arrow svg.i{transform:rotate(90deg)}
@media (min-width:990px){.flow-arrow svg.i{transform:none}}
.promise{display:grid;gap:var(--s3)}
@media (min-width:750px){.promise{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promise .card{padding:var(--s4);display:flex;gap:var(--s3)}
.promise .card svg.i{color:var(--brand-ink);margin-top:2px}
.promise b{display:block;font-size:var(--fs);font-weight:600;line-height:1.45}
.promise p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55;margin-top:2px}

/* footer */
.foot{margin:var(--s12) var(--s4) 0;padding:var(--s5) 0 var(--s4);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:var(--ink-3)}
.foot-brand{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot-brand img{width:16px;height:auto}
.foot a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink-2);font-weight:600;text-decoration:none;border-radius:4px}
.foot a:hover{color:var(--brand-ink)}
@media (min-width:750px){.foot{margin:var(--s12) var(--s8) 0}}
@media (min-width:990px){.foot{margin:var(--s12) var(--s10) 0}}

/* ============================================================
   FLOATING LAYER: scrim, viewer, sheet, toast
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(12,20,17,.45);opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.viewer{
  position:fixed;z-index:90;inset:0;display:flex;flex-direction:column;background:var(--surface);
  opacity:0;transform:translateY(16px) scale(.985);pointer-events:none;visibility:hidden;transition:opacity .25s var(--ease),transform .35s var(--spring),visibility 0s linear .35s;
}
@media (min-width:750px){.viewer{inset:24px;border-radius:var(--r-xl);box-shadow:var(--e3);overflow:hidden}}
.viewer.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s var(--ease),transform .35s var(--spring)}
.viewer-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) var(--s2) var(--s4);border-bottom:1px solid var(--hairline)}
.viewer-head div{flex:1;min-width:0}
.viewer-head b{display:block;font-size:var(--fs-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-head span{font-size:var(--fs-sm);color:var(--ink-3)}
.viewer-body{flex:1;overflow:auto;background:var(--sunken);position:relative}
.viewer-body iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.viewer-body .img-wrap{padding:var(--s4);display:grid;place-items:center;min-height:100%}
.viewer-body .img-wrap img{max-height:calc(100vh - 140px);border-radius:var(--r);box-shadow:var(--e2)}
.viewer-state{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--s5);color:var(--ink-3);font-size:var(--fs)}
.viewer-state .box{max-width:380px;display:grid;gap:var(--s3);justify-items:center}
.viewer-state b{color:var(--ink);font-size:var(--fs-lg)}
@media (max-width:749px){.vh-btn span{display:none}.vh-btn{padding:0 10px;min-width:44px}}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--brand);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.sheet{
  position:fixed;z-index:90;left:0;right:0;bottom:0;max-height:85vh;overflow-y:auto;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e3);
  padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;
  transition:transform .4s var(--spring),visibility 0s linear .4s;
}
.sheet.open{transform:none;visibility:visible;transition:transform .4s var(--spring)}
@media (min-width:990px){.sheet{display:none}}
.sheet .grab{width:40px;height:4px;border-radius:99px;background:var(--line-strong);margin:4px auto var(--s4)}
.sheet .nav a{min-height:48px;padding:0 var(--s3);font-size:var(--fs-md)}
.sheet .help-card{margin-top:var(--s4)}
.sheet .help-card .btn{flex:1}
.signout{margin-top:var(--s3);width:100%}

.toast{position:fixed;z-index:100;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;font-size:var(--fs);font-weight:500;padding:10px 16px;border-radius:var(--r);box-shadow:var(--e3);display:flex;gap:8px;align-items:center;max-width:calc(100vw - 32px);
  transition:opacity .2s var(--ease),transform .3s var(--spring)}
.toast svg.i{width:16px;height:16px;color:var(--brand-bright)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:990px){.toast{bottom:32px;left:calc(50% + var(--rail-w)/2)}}

/* week selector */
.week-select{position:relative;display:inline-flex;align-items:center;min-height:max(32px,var(--tap));border-radius:99px;background:var(--ink);color:#fff;box-shadow:var(--e1);
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.week-select:hover{background:var(--primary-hover)}
.week-select:active{transform:scale(.97)}
.week-select:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.week-select::before{content:"";width:7px;height:7px;border-radius:50%;background:#7D97B3;margin-left:12px;flex-shrink:0}
.week-select.is-current::before{background:var(--brand-bright)}
.week-select select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;font-size:var(--fs-sm);font-weight:600;height:100%;min-height:inherit;padding:0 32px 0 8px;cursor:pointer;outline:none}
.week-select select option,.week-select select optgroup{color:var(--ink);background:#fff}
.week-select svg.i{position:absolute;right:10px;width:14px;height:14px;pointer-events:none}
@media (max-width:989px){.page-head .week-select{display:none}}
.week-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:var(--s4);padding:10px 14px;border-radius:var(--r);background:var(--next-bg);color:var(--next);font-size:var(--fs);line-height:1.5;max-width:760px}
.week-banner svg.i{width:16px;height:16px}
.week-banner span{flex:1;min-width:200px}
.week-banner .link-btn{color:var(--next)}

/* locked / preview weeks */
.blur{filter:blur(5px);user-select:none;opacity:.7}
.item.locked,.later-row.locked{background:var(--sunken);box-shadow:none}
.locked-panel{padding:var(--s12) var(--s5);display:grid;justify-items:center;text-align:center;gap:var(--s3)}
.lock-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--sunken);border:1px solid var(--hairline);color:var(--brand-ink)}
.lock-ico svg.i{width:22px;height:22px}
.locked-panel h2{font-size:var(--fs-h2)}
.locked-panel p{max-width:440px;color:var(--ink-2)}

/* nothing of the app is shown until the server has confirmed the session; a skeleton stands in */
body.booting .app,body.booting .tabbar,body.gated .app,body.gated .tabbar{visibility:hidden}
.boot{position:fixed;inset:0;z-index:300;display:grid;background:var(--canvas)}
body:not(.booting) .boot{display:none}
.boot-side{display:none}
.boot-main{padding:var(--s10) var(--s4);display:grid;gap:var(--s6);align-content:start;max-width:1200px;width:100%}
@media (min-width:750px){.boot-main{padding:var(--s10) var(--s8)}}
@media (min-width:990px){
  .boot{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .boot-side{display:grid;gap:var(--s3);align-content:start;padding:var(--s5) var(--s4);background:var(--sidebar);border-right:1px solid var(--hairline)}
  .boot-main{padding:var(--s10)}
}

/* admin bars and page errors */
.admin-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:#2A1F0B;color:#F6D9A8;font-size:var(--fs-sm);font-weight:500;text-align:center}
.admin-bar svg.i{width:15px;height:15px}
.admin-bar a{color:#fff;font-weight:600}
.preview-bar{background:#14233A;color:#CFE0F5}
.load-error{min-height:80vh;display:grid;place-items:center;padding:var(--s4)}
.load-error .card{max-width:460px}
.dl-missing{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3);padding:8px 10px;border-radius:var(--r);background:var(--surface);border:1px dashed var(--line-strong)}
.dl-missing svg.i{width:15px;height:15px;margin-top:1px}

/* feedback */
.feedback-wrap{display:grid;gap:var(--s4)}
@media (min-width:990px){.feedback-wrap{grid-template-columns:1.5fr 1fr;align-items:start}}
.fb-form{padding:var(--s5);display:grid;gap:var(--s4)}
.fb-form textarea{min-height:160px}
.fb-about{display:flex;gap:8px;align-items:center;font-size:var(--fs);color:var(--ink-2);padding:10px 12px;border-radius:var(--r);background:var(--sunken);border:1px solid var(--hairline)}
.fb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.fb-foot span{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3)}
.fb-foot span svg.i{width:15px;height:15px}
.fb-side{padding:var(--s5)}
.fb-side h3{font-size:var(--fs-h3);margin-bottom:var(--s3)}
.fb-side ol{padding-left:20px;display:grid;gap:8px;font-size:var(--fs);color:var(--ink-2)}
.fb-done{padding:var(--s12) var(--s4);display:grid;justify-items:center;gap:var(--s2);text-align:center}
.fb-done .mark{width:44px;height:44px;border-radius:14px}
.fb-done .mark svg{width:22px;height:22px}
.fb-done h3{font-size:var(--fs-h2);margin-top:var(--s2)}
.fb-done p{color:var(--ink-3);margin-bottom:var(--s3)}
.fb-mini{padding:var(--s4);display:flex;gap:var(--s3)}
.fb-mini>svg.i{color:var(--brand-ink);margin-top:2px}
.fb-mini b{display:block;font-size:var(--fs-md)}
.fb-mini p{font-size:var(--fs);color:var(--ink-3);line-height:1.55;margin:2px 0 var(--s3)}

/* sign-in */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--s4);background:var(--sidebar);transition:opacity .25s var(--ease)}
.gate.out{opacity:0}
.gate-card{width:100%;max-width:400px;padding:var(--s8) var(--s6);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--e3);display:grid;gap:var(--s3);justify-items:center;text-align:center;animation:viewIn .4s var(--ease) both}
.gate-logo{height:24px;width:auto;margin-bottom:var(--s3)}
.gate-card h1{font-size:30px;letter-spacing:-.03em;line-height:1.1}
.gate-card p{font-size:var(--fs);color:var(--ink-3);line-height:1.6;margin-bottom:var(--s2)}
.gate-card input[type=password]{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);font-size:16px;background:var(--surface)}
.gate-card input[type=password]:hover{border-color:var(--line-strong)}
.gate-card input[type=password]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
.gate-card .btn{min-height:48px;font-size:var(--fs-md)}
.gate-err{min-height:18px;font-size:var(--fs-sm);color:var(--you)}
.gate-err:empty{min-height:0}
.gate-foot{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3);margin-top:var(--s2)}
.gate-foot svg.i{width:14px;height:14px}
.auth-page .gate{position:static;min-height:100vh}
.gate-card .field.left{width:100%;text-align:left}
.gate-card .field input{height:48px;font-size:16px}
.gate-card .code{letter-spacing:.4em;text-align:center;font-size:20px;font-variant-numeric:tabular-nums}
.gate-card .link-btn{background:none;border:0;cursor:pointer;justify-self:center}
.gate-card .qr{width:180px;height:180px;border-radius:var(--r);border:1px solid var(--hairline);padding:8px;background:#fff}
.gate-card .secret{font-size:var(--fs-sm);background:var(--sunken);padding:6px 10px;border-radius:var(--r-sm);word-break:break-all;font-family:ui-monospace,Consolas,monospace}
.gate-skel{width:100%;display:grid;gap:var(--s3);justify-items:center}
.steps-mini{text-align:left;font-size:var(--fs);color:var(--ink-2);padding-left:18px;display:grid;gap:4px}
.pw-rules{list-style:none;display:grid;gap:4px;text-align:left;width:100%;font-size:var(--fs-sm);color:var(--ink-3)}
.pw-rules li{display:flex;align-items:center;gap:8px}
.pw-rules li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-4);flex-shrink:0}
.pw-rules li.ok{color:var(--done)}
.pw-rules li.ok::before{background:var(--brand);border-color:var(--brand)}

/* branded header: the client's own artwork behind every page title, as a slow crossfade */
.page-head.hero{isolation:isolate;color:#fff;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:0;background:#0C0906;overflow:hidden}
.page-head.hero.is-home{min-height:340px}
/* readability: a dark base plus a left-to-right and bottom-up gradient keep white text above 4.5:1 on any slide */
.page-head.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,9,6,.9) 0%,rgba(12,9,6,.74) 50%,rgba(12,9,6,.38) 100%),linear-gradient(to top,rgba(12,9,6,.7),rgba(12,9,6,0) 70%)}
.hero-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transform:scale(1.06);
  transition:opacity 1.2s var(--ease),transform 7.2s linear}
.hero-art img.on{opacity:1;transform:scale(1)}
.hero-art::after{content:"";position:absolute;inset:0;background:var(--brand);mix-blend-mode:multiply;opacity:.2}
.page-head.hero h1{color:#fff}
.page-head.hero.is-home h1{font-size:44px}
.page-head.hero p{color:rgba(255,255,255,.88)}
.page-head.hero .chip{background:rgba(12,9,6,.45);border-color:rgba(255,255,255,.24);color:#fff}
.page-head.hero .chip svg.i{color:rgba(255,255,255,.75)}
.page-head.hero .week-select{background:#fff;color:var(--ink)}
.page-head.hero .week-select:hover{background:var(--sunken)}
.page-head.hero .week-banner{background:rgba(12,9,6,.55);color:#fff}
.page-head.hero .week-banner .link-btn{color:#fff}
.page-head.hero :focus-visible{outline-color:#fff}
@media (min-width:750px){.page-head.hero{min-height:260px}.page-head.hero.is-home{min-height:380px}.page-head.hero.is-home h1{font-size:52px}}
@media (min-width:990px){.page-head.hero::before{background:linear-gradient(90deg,rgba(12,9,6,.86) 0%,rgba(12,9,6,.62) 50%,rgba(12,9,6,.2) 100%),linear-gradient(to top,rgba(12,9,6,.6),rgba(12,9,6,0) 70%)}.page-head.hero{min-height:280px}.page-head.hero.is-home{min-height:420px}.page-head.hero.is-home h1{font-size:60px;line-height:1.02}}
@media (prefers-reduced-motion:reduce){.hero-art img{transform:none}}

/* next step (home) */
.next-step{padding:var(--s5);display:grid;gap:var(--s2);justify-items:start;box-shadow:var(--e2)}
.next-step h2{font-size:var(--fs-h2);line-height:1.2}
.next-step p{font-size:var(--fs-md);color:var(--ink-3);line-height:1.6;max-width:640px}
.next-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin-top:var(--s2)}
@media (min-width:750px){.next-step{padding:var(--s6) var(--s8)}}

/* replies typed in the portal (no email app needed) */
.reply-form{display:grid;gap:6px;margin-top:var(--s3);max-width:640px}
.reply-form label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.reply-row{display:flex;gap:var(--s2);align-items:flex-end}
.reply-row textarea,.reply-row input{flex:1;min-width:0;min-height:var(--tap);padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md);line-height:1.5;resize:vertical}
.reply-row textarea:hover,.reply-row input:hover{border-color:var(--line-strong)}
.reply-row textarea:focus,.reply-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
.reply-row textarea[readonly]{background:var(--sunken)}
.reply-msg{font-size:var(--fs-sm);color:var(--ink-3);min-height:0}
.reply-msg:empty{display:none}
.reply-msg.bad{color:var(--you)}
.reply-sent{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s3);padding:10px 12px;border-radius:var(--r);background:var(--done-bg);color:var(--done);font-size:var(--fs);max-width:640px}
.reply-sent svg.i{margin-top:2px}
.reply-sent b{font-weight:600}
.reply-sent span{font-size:var(--fs-xs);opacity:.8}
.reply-sent p{color:var(--ink-2);margin-top:2px;white-space:pre-line;overflow-wrap:anywhere}
.next-reply{width:100%}
.next-reply .reply-form,.next-reply .reply-sent{max-width:none}
@media (max-width:749px){.reply-row{flex-direction:column;align-items:stretch}.reply-row .btn{width:100%}}

/* weekly check-in (star ratings) */
.checkin{padding:var(--s5);display:grid;gap:var(--s4)}
@media (min-width:750px){.checkin{padding:var(--s5) var(--s6)}}
.checkin-rows{display:grid}
.checkin-row{display:grid;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.checkin-row:first-child{padding-top:0}
@media (min-width:750px){.checkin-row{grid-template-columns:1fr auto;align-items:center;gap:var(--s5)}}
.checkin-label b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.4}
.checkin-label span{font-size:var(--fs-sm);color:var(--ink-3)}
.stars{display:flex;align-items:center;gap:2px}
.star{width:max(36px,var(--tap));height:max(36px,var(--tap));display:grid;place-items:center;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--line-strong);
  transition:transform .18s var(--spring),opacity .18s var(--ease)}
.star svg.i{width:24px;height:24px}
.star.on{color:var(--brand)}
.star.on svg.i{fill:currentColor}
.star:hover{transform:scale(1.12);color:var(--brand)}
.star:active{transform:scale(.9)}
.star-word{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3);min-width:72px;padding-left:var(--s2)}
.checkin .opt{font-weight:400;color:var(--ink-3)}
.checkin.done{display:flex;gap:var(--s3);align-items:flex-start}
.checkin.done>svg.i{color:var(--brand)}
.checkin.done b{display:block}
.checkin.done p{font-size:var(--fs);color:var(--ink-3)}

/* client actions (accounts mode) */
.posted-form{display:grid;gap:var(--s2);max-width:560px}
.posted-form label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.posted-form input{flex:1;min-width:220px;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-md)}
.posted-form input:hover{border-color:var(--line-strong)}
.posted-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
.posted-ok{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--done-bg);color:var(--done);font-size:var(--fs);max-width:560px}
.posted-ok a{color:inherit;font-weight:600;display:inline-flex;gap:4px;align-items:center}
.posted-ok a svg.i{width:14px;height:14px}
.settings{display:grid;gap:var(--s4)}
@media (min-width:990px){.settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.set-card{padding:var(--s5);display:grid;gap:var(--s3)}
.set-card h3{font-size:var(--fs-h3)}
.set-card p{font-size:var(--fs);color:var(--ink-3)}
.set-card .row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.colour-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.colour-row input[type=color]{width:48px;height:var(--tap);padding:3px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.colour-row input[type=text],.colour-row input:not([type]){width:110px;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs);text-transform:uppercase;font-variant-numeric:tabular-nums}
.swatches{display:flex;gap:6px}
.swatch{width:max(28px,var(--tap));height:max(28px,var(--tap));border-radius:50%;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;transition:transform .18s var(--spring),opacity .18s var(--ease)}
.swatch:hover{transform:scale(1.1)}
.swatch:active{transform:scale(.92)}
.swatch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* approve posts */
.review-list{display:grid;gap:var(--s4)}
.review{display:grid;overflow:hidden;padding:0}
@media (min-width:900px){.review{grid-template-columns:minmax(240px,36%) minmax(0,1fr)}}
.review-media{display:grid;gap:6px;padding:var(--s3);background:var(--sunken);align-content:start}
.review-media .media{aspect-ratio:4/5;border-radius:var(--r)}
.review-media.multi{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}
/* extra images sit as a row of small thumbnails, so the image column never outgrows the caption form */
.review-media.multi .media:first-child{grid-column:1/-1}
.review-media.multi .media:not(:first-child){aspect-ratio:1}
.review-main{display:grid;align-content:start;min-width:0}
.review-form{display:grid;gap:var(--s3);padding:var(--s4)}
.review-form textarea{font-size:var(--fs-md);line-height:1.6}
.review-form textarea:disabled{background:var(--sunken);color:var(--ink-2)}
.review-form .field label .tag{height:20px;margin-left:6px;vertical-align:middle}
.review-reset{justify-self:start}
.review-actions{gap:8px;flex-wrap:wrap}

/* phones: every tap target at least 44 px, no horizontal scroll */
@media (max-width:749px){
  .page-head,.section{overflow-wrap:anywhere}
  .topbar .week-select{min-height:44px}
  .rail-logo{min-height:44px;display:flex;align-items:center}
  .tab{min-height:56px}
}

/* desktop window: the phone bars are hidden (kept last so it wins over the bar styles above) */
@media (min-width:990px){.topbar,.tabbar{display:none}.app{background:linear-gradient(to right,var(--sidebar) calc(var(--rail-w) - 1px),var(--hairline) calc(var(--rail-w) - 1px),var(--hairline) var(--rail-w),transparent var(--rail-w))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .skel{background:var(--sunken)}
}