/* YOCTO Studio, the redesign of 24 October 2026 (reports/studio/redesign-2026-10-24, Claude Design's handoff; George:
   "Simple, elegant, effortless. Every screen should feel inevitable."). Graphite dark by default, light on the toggle,
   the YOCTO green as the accent only and never as a tint of a surface. Every component of the design lives here under
   ys-; the pages' own pieces are in public/css/<area>.css, served after this file as one stylesheet. studio/DESIGN.md
   says which class is which. */

/* ---- the tokens: graphite (dark, the default) and light, word for word from the handoff's GRAPHITE and LIGHT ---- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page:#101114; --bar:#101114; --list:#101114; --card:#15161A; --pop:#1B1C21; --field:#0C0D10; --stripe:#131418;
  --toast:#202227; --toast-t:#ECEDEF; --glass:rgba(16,17,20,.86);
  --ink:#E6E7EA; --t1b:#C9CBD0; --t2:#9A9DA5; --t3:#787B83;
  --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.045); --ring:rgba(255,255,255,.11); --ring2:rgba(255,255,255,.2);
  --fill:#23252A; --fill-h:#2A2C32; --soft:rgba(255,255,255,.045); --sel:rgba(255,255,255,.028); --hover:rgba(255,255,255,.04);
  --hover2:rgba(255,255,255,.022); --qh:rgba(255,255,255,.05); --qh2:rgba(255,255,255,.07);
  --btn:rgba(255,255,255,.03); --btn-h:rgba(255,255,255,.06); --btn-a:rgba(255,255,255,.09);
  --kbd:rgba(255,255,255,.06); --kbd-l:rgba(255,255,255,.1); --seg-bg:rgba(255,255,255,.04); --seg-on:rgba(255,255,255,.09);
  --sh-seg:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.4); --foot:rgba(255,255,255,.015);
  --sh-card:0 0 0 1px rgba(255,255,255,.055); --sh-pop:0 0 0 1px rgba(255,255,255,.08),0 16px 40px -12px rgba(0,0,0,.75);
  --sh-frame:0 0 0 1px rgba(255,255,255,.07); --sh-toast:0 0 0 1px rgba(255,255,255,.07),0 16px 40px -12px rgba(0,0,0,.75);
  --g:#4ECB71; --gh:#5FD57F; --ga:#3FB862; --on-g:#06130A; --on-g-a:rgba(6,19,10,.25); --on-g-k:rgba(6,19,10,.14);
  --gt:#5FD57F; --gdot:#4ECB71; --link-h:#8BE3A4; --g-bg:rgba(78,203,113,.1); --g-ring:rgba(78,203,113,.32); --g-glow:rgba(0,0,0,.5);
  --focus:rgba(78,203,113,.55);
  --r:#FF8A80; --r-dot:#F0524A; --r-bg:rgba(240,82,74,.12);
  --a:#F2B655; --a-dot:#F59E0B; --a-bg:rgba(245,158,11,.09); --a-t:#F2C77E; --a-ring:rgba(245,158,11,.3); --a-h:rgba(245,158,11,.12);
  --logo:none;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page:#F3F4F6; --bar:#FFFFFF; --list:#FFFFFF; --card:#FFFFFF; --pop:#FFFFFF; --field:#FFFFFF; --stripe:#F6F7F9;
  --toast:#121315; --toast-t:#F3F4F6; --glass:rgba(244,245,243,.94);
  --ink:#121315; --t1b:#303133; --t2:#4C4D4F; --t3:#6D6E70;
  --line:#E4E5E7; --line2:#EDEEF0; --ring:#CDCED0; --ring2:#B5B6B8;
  --fill:#E4E5E7; --fill-h:#DADBDD; --soft:#F0F1F3; --sel:#F0F1F3; --hover:#F5F6F8; --hover2:rgba(16,17,20,.025);
  --qh:rgba(16,17,20,.05); --qh2:rgba(16,17,20,.06);
  --btn:#FFFFFF; --btn-h:#F5F6F8; --btn-a:#EDEEF0; --kbd:#EBECEE; --kbd-l:#DDDEE0; --seg-bg:#E9EAEC; --seg-on:#FFFFFF;
  --sh-seg:0 0 0 1px rgba(16,17,20,.06),0 1px 2px rgba(16,17,20,.08); --foot:#F9FAFC;
  --sh-card:0 0 0 1px rgba(16,17,20,.06),0 1px 2px rgba(16,17,20,.04); --sh-pop:0 0 0 1px rgba(16,17,20,.08),0 16px 40px -10px rgba(16,17,20,.24);
  --sh-frame:0 0 0 1px rgba(16,17,20,.08),0 4px 16px -6px rgba(16,17,20,.12); --sh-toast:0 16px 40px -12px rgba(16,17,20,.5);
  --g:#4ECB71; --gh:#5FD57F; --ga:#3FB862; --on-g:#06130A; --on-g-a:rgba(6,19,10,.25); --on-g-k:rgba(6,19,10,.14);
  --gt:#1B7A3D; --gdot:#3DBB63; --link-h:#125A2C; --g-bg:#E9F5EC; --g-ring:#BFDCC7; --g-glow:rgba(27,122,61,.3);
  --focus:rgba(27,122,61,.55);
  --r:#B42318; --r-dot:#D94B3F; --r-bg:#FCEEEC;
  --a:#9A5B00; --a-dot:#E9A23B; --a-bg:#FDF3E1; --a-t:#5E3A00; --a-ring:#EBD3A8; --a-h:#FFFBF3;
  --logo:invert(1);
}
:root {
  --font:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --radius:12px;
  /* the names the pages drawn before the redesign use, pointed at the new tokens until each page is rebuilt */
  --text:var(--ink); --text2:var(--t2); --text3:var(--t3); --accent:var(--gt); --good:var(--gt); --goodbg:var(--g-bg);
  --bad:var(--r); --badbg:var(--r-bg); --amber:var(--a); --amberbg:var(--a-bg); --btnbg:var(--g); --btnfg:var(--on-g);
  --shadow:var(--sh-card); --bg:var(--page); --in:var(--field); --fg:var(--ink); --body:var(--ink); --sec:var(--t2); --mu:var(--t3);
  --am:var(--a); --rd:var(--r); --nb:var(--line); --h05:var(--line); --h06:var(--line); --h08:var(--ring); --h12:var(--ring);
  --disp:var(--font); --textf:var(--font); --green:var(--gt);
}

/* ---- base ---- */
html,body{margin:0;background:var(--page);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--ring) transparent}
a{color:var(--gt);text-decoration:none}a:hover{color:var(--link-h);text-decoration:underline}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:rgba(128,131,139,.32)}
[hidden]{display:none!important}
img{max-width:100%}
@keyframes ys-spin{to{transform:rotate(360deg)}}
@keyframes ys-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ys-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ys-pulse{50%{opacity:.3}}
@keyframes ys-page{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ys-shimmer{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ys-fade{from{opacity:0}to{opacity:1}}
/* the old names, for the pages not rebuilt yet */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:var(--ease)}
::view-transition-group(page-title){animation-duration:.32s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}@view-transition{navigation:none}}
.ys-mono{font-family:var(--mono)}.ys-num{font-variant-numeric:tabular-nums}
.ys-t2{color:var(--t2)}.ys-t3{color:var(--t3)}.ys-ink{color:var(--ink)}.ys-red{color:var(--r)}.ys-amber{color:var(--a)}.ys-green{color:var(--gt)}
.ys-small{font-size:13px}.ys-xs{font-size:12px}.ys-strong{font-weight:600}.ys-ell{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the shell: the bar on top, the page under it; on a phone a short bar on top and the tabs at the bottom ---- */
.ys-top{position:sticky;top:0;z-index:20;flex:none;height:56px;display:flex;align-items:center;gap:28px;padding:0 20px;background:var(--bar);box-shadow:inset 0 -1px 0 var(--line)}
.ys-top.menu-open{z-index:35}
.ys-logo{display:flex;align-items:center;gap:10px;text-decoration:none!important}
.ys-logo img{height:14px;width:43px;display:block;filter:var(--logo)}
.ys-logo span{font-size:12px;font-weight:500;color:var(--t3)}
.ys-nav{display:flex;gap:2px}
.ys-nav a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;color:var(--t2);font-size:14px;font-weight:500;text-decoration:none;transition:color .12s ease,background .12s ease}
.ys-nav a:hover{color:var(--ink);background:var(--soft);text-decoration:none}
.ys-nav a.on{color:var(--ink);background:var(--soft)}
.ys-nav .n{font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.ys-nav .n:empty{display:none}
.ys-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ys-rel{position:relative}
.ys-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--t2);transition:background .12s ease,color .12s ease}
.ys-iconbtn:hover{background:var(--qh);color:var(--ink)}
.ys-iconbtn svg{display:block}
:root[data-theme="light"] .ys-sun,:root:not([data-theme="light"]) .ys-moon{display:none}
.ys-searchbtn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:200px;height:32px;padding:0 6px 0 12px;border:0;border-radius:8px;background:var(--btn);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--t3);transition:box-shadow .12s ease,color .12s ease}
.ys-searchbtn:hover{box-shadow:inset 0 0 0 1px var(--ring);color:var(--t2)}
.ys-searchbtn .ys-kbd{font-size:11px;padding:3px 6px;border-radius:5px;background:var(--kbd);color:var(--t2);box-shadow:none}
.ys-newbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--btn);box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.ys-newbtn:hover{background:var(--btn-h);color:var(--ink)}
.ys-newbtn b{font-size:16px;line-height:1;margin-top:-1px;font-weight:400}
.ys-avatar{width:32px;height:32px;border:0;border-radius:50%;background:var(--fill);font-size:12px;font-weight:600;color:var(--t1b);display:grid;place-items:center;flex:none}
button.ys-avatar:hover{background:var(--fill-h)}
.ys-avatar.sm{width:22px;height:22px;font-size:10px}
/* the time control: today's total, or the running timer as a green pill */
.ys-timebtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ys-timebtn:hover,.ys-timebtn[aria-expanded="true"]{background:var(--qh);color:var(--ink)}
.ys-timepill{display:inline-flex;align-items:center;height:32px;border-radius:999px;background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring)}
.ys-timepill .go{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 12px;border:0;border-radius:999px 0 0 999px;background:transparent}
.ys-timepill .dot{width:7px;height:7px;border-radius:50%;background:var(--gdot);animation:ys-pulse 1.6s ease-in-out infinite}
.ys-timepill .clk{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gt);font-variant-numeric:tabular-nums}
.ys-timepill .lbl{max-width:180px;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ys-timepill .stop{display:grid;place-items:center;width:28px;height:28px;margin-right:2px;border:0;border-radius:50%;background:transparent}
.ys-timepill .stop:hover{background:var(--btn-h)}
.ys-timepill .stop i{width:9px;height:9px;border-radius:2px;background:var(--gt)}
/* menus and popovers: one style; a layer behind closes them, and Escape */
.ys-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:220px;padding:6px;border-radius:12px;background:var(--pop);box-shadow:var(--sh-pop);animation:ys-in .14s ease-out}
.ys-pop.left{left:0;right:auto}
.ys-pop.flush{padding:0;overflow:hidden}
.ys-pop a,.ys-pop button.it{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;font-size:14px;color:var(--ink);text-align:left;text-decoration:none}
.ys-pop a:hover,.ys-pop button.it:hover,.ys-pop .it.on{background:var(--btn-h);text-decoration:none;color:var(--ink)}
.ys-pop .who{padding:8px 10px 10px;font-size:12px;color:var(--t3);box-shadow:inset 0 -1px 0 var(--line2);margin-bottom:4px}
.ys-pop .who b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.ys-pop .sep{height:1px;margin:4px 0;background:var(--line2)}
.ys-layer{position:fixed;inset:0;z-index:30}
/* the time overview: today, yesterday, this week; today's entries; the timesheet */
.ys-tm{width:340px;max-width:calc(100vw - 24px)}
.ys-tm .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 16px 12px}
.ys-tm .figs span{display:block;font-size:12px;font-weight:500;color:var(--t3)}
.ys-tm .figs b{display:block;margin-top:2px;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ys-tm .figs div:first-child b{color:var(--ink)}
.ys-tm .ents{box-shadow:inset 0 1px 0 var(--line);max-height:260px;overflow-y:auto;padding:4px 0}
.ys-tm .ent{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:baseline;padding:7px 16px}
.ys-tm .ent .w{min-width:0;font-size:13px;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ys-tm .ent .d{font-size:13px;font-weight:500;color:var(--t2);font-variant-numeric:tabular-nums}
.ys-tm .ent .h{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.ys-tm .ent.now .d{color:var(--gt)}
.ys-tm .none{padding:14px 16px;font-size:13px;line-height:1.45;color:var(--t3);box-shadow:inset 0 1px 0 var(--line)}
.ys-tm .foot{width:100%;display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 16px;border:0;background:var(--foot);box-shadow:inset 0 1px 0 var(--line);font-size:13px;font-weight:500;color:var(--t2);text-decoration:none!important;border-radius:0}
.ys-tm .foot:hover{color:var(--ink);background:var(--hover)}
/* the phone shell */
.ys-ptop,.ys-tabs{display:none}
.ys-ptop{position:sticky;top:0;z-index:20;height:52px;align-items:center;justify-content:space-between;padding:0 8px 0 16px;background:var(--bar);box-shadow:inset 0 -1px 0 var(--line)}
.ys-ptop .ys-logo img{height:13px;width:40px}
.ys-ptop .ys-iconbtn{width:44px;height:44px}
.ys-tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);background:var(--bar);box-shadow:inset 0 1px 0 var(--line)}
.ys-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:58px;font-size:14px;font-weight:500;color:var(--t3);text-decoration:none!important}
.ys-tabs a::before{content:"";width:18px;height:3px;border-radius:2px;background:transparent}
.ys-tabs a.on{color:var(--ink);font-weight:600}.ys-tabs a.on::before{background:var(--g)}
.ys-tabs a .n{font-size:12px;color:var(--t3)}
@media (max-width:759px){
  .ys-top{display:none}
  .ys-ptop{display:flex}
  .ys-tabs{display:grid}
  body.ys{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  body.ys.ys-noTabs{padding-bottom:0}
  body.ys.ys-noTabs .ys-tabs{display:none}
}

/* ---- the page: widths, titles, back links ---- */
.ys-main{padding:28px clamp(16px,3vw,40px) 96px;min-width:0;animation:ys-page .2s var(--ease)}
.ys-main.flush{padding:0;animation:none}
/* the handoff's widths (1200, 840, 1072, 680, 640) include 40px of air each side: its list titles start at 160px on a 1440 screen */
.ys-page{max-width:1120px;margin:0 auto}
.ys-page.read{max-width:760px}.ys-page.wide{max-width:992px}.ys-page.settings{max-width:600px}.ys-page.narrow{max-width:560px}
.ys-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.ys-head h1{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;view-transition-name:page-title}
.ys-head h1 .ys-count{margin-left:8px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--t3);font-variant-numeric:tabular-nums}
.ys-head .ys-sub{margin-top:4px;font-size:13px;color:var(--t3)}
.ys-head .ys-sub b{color:var(--t2);font-weight:500}
.ys-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ys-back{display:inline-flex;align-items:center;gap:4px;height:28px;margin:-6px 0 6px -8px;padding:0 8px;border-radius:7px;font-size:13px;font-weight:500;color:var(--t3);text-decoration:none!important}
.ys-back:hover{color:var(--ink);background:var(--qh)}
.ys-back::before{content:"\2039";font-size:16px;line-height:1;margin-top:-2px}
.ys-h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 10px}
.ys-h2 h2{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.ys-h2 h2 .ys-count{margin-left:6px;font-size:13px;font-weight:500;color:var(--t3)}
.ys-h2 .r{font-size:13px;color:var(--t3)}
.ys-h2:first-child{margin-top:0}
.ys-group{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:600;color:var(--ink);margin:24px 2px 8px}
.ys-group .n{font-weight:500;color:var(--t3)}

/* ---- buttons: primary (green, the one next step), secondary (outlined), quiet (words) ---- */
.ys-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:8px;background:var(--btn);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none!important;transition:background .12s ease,box-shadow .12s ease,color .12s ease,transform .08s ease}
.ys-btn:hover{background:var(--btn-h);box-shadow:inset 0 0 0 1px var(--ring2);color:var(--ink)}
.ys-btn:active{background:var(--btn-a)}
.ys-btn.p{background:var(--g);color:var(--on-g);box-shadow:none}
.ys-btn.p:hover{background:var(--gh);color:var(--on-g)}
.ys-btn.p:active{background:var(--ga);transform:translateY(1px)}
.ys-btn.q{background:transparent;box-shadow:none;color:var(--t2);padding:0 12px}
.ys-btn.q:hover{background:var(--qh);color:var(--ink)}
.ys-btn.danger{color:var(--r)}
.ys-btn.sm{height:32px;padding:0 12px;font-size:13px}
.ys-btn.xs{height:30px;padding:0 10px;font-size:13px;border-radius:7px}
.ys-btn.lg{height:44px;padding:0 18px;border-radius:10px}
.ys-btn.full{width:100%}
.ys-btn .ext{opacity:.55}.ys-btn.p .ext{opacity:.75}
.ys-btn .ys-kbd{font-size:11px;font-weight:500;line-height:1;padding:3px 5px;border-radius:4px;background:var(--kbd);box-shadow:none}
.ys-btn.p .ys-kbd{background:var(--on-g-k);color:var(--on-g)}
.ys-btn.busy{pointer-events:none}
.ys-btn.busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--ring);border-top-color:var(--ink);animation:ys-spin .7s linear infinite;flex:none}
.ys-btn.p.busy::before{border-color:var(--on-g-a);border-top-color:var(--on-g)}
.ys-btn.busy .ys-kbd,.ys-btn.busy .ext{display:none}
.ys-btn:disabled{opacity:.5;cursor:default}
.ys-link{display:inline-flex;align-items:center;gap:4px;border:0;padding:0;background:transparent;font-size:inherit;font-weight:500;color:var(--gt)}
.ys-link:hover{color:var(--link-h);text-decoration:underline}
.ys-link.quiet{color:var(--t2)}.ys-link.quiet:hover{color:var(--ink)}
.ys-kbd{display:inline-block;font-family:var(--mono);font-size:11px;line-height:1.2;padding:2px 5px;border-radius:4px;background:var(--soft);box-shadow:inset 0 -1px 0 var(--kbd-l);color:var(--t2)}
.ys-keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--t3)}
.ys-keys span{display:inline-flex;align-items:center;gap:5px}
.ys-spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--ring);border-top-color:var(--ink);animation:ys-spin .7s linear infinite;vertical-align:-1px}

/* ---- surfaces: a card, its rows, a notice, figures ---- */
.ys-card{background:var(--card);border-radius:12px;box-shadow:var(--sh-card);overflow:hidden}
.ys-card.pad{padding:20px}
.ys-card+.ys-card{margin-top:12px}
.ys-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line)}
.ys-card-h .r{font-weight:500;color:var(--t3)}
.ys-card-f{padding:12px 20px;background:var(--foot);box-shadow:inset 0 1px 0 var(--line);font-size:13px;color:var(--t3)}
.ys-rows>*{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.ys-rows>*:last-child{box-shadow:none}
.ys-rows>a{color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.ys-rows>a:hover{background:var(--hover)}
.ys-rows .grow{flex:1;min-width:0}
.ys-rows .t{font-size:14px;font-weight:500;color:var(--ink)}
.ys-rows .s{font-size:13px;color:var(--t3)}
.ys-rows .r{flex:none;font-size:13px;font-weight:500;color:var(--t2);font-variant-numeric:tabular-nums}
.ys-rows .chev{flex:none;color:var(--t3);font-size:15px}
.ys-rows .ext{flex:none;color:var(--t3);font-size:13px}
.ys-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 16px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--ink);margin:0 0 16px}
.ys-notice.amber{background:var(--a-bg);box-shadow:inset 0 0 0 1px var(--a-ring);color:var(--a-t)}
.ys-notice.red{background:var(--r-bg);box-shadow:inset 0 0 0 1px rgba(240,82,74,.25);color:var(--ink)}
.ys-notice.green{background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring)}
.ys-notice .grow{flex:1;min-width:0}
.ys-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:var(--card);border-radius:12px;box-shadow:var(--sh-card);overflow:hidden}
.ys-fig{padding:18px 20px;box-shadow:inset -1px 0 0 var(--line)}
.ys-fig:last-child{box-shadow:none}
.ys-fig .k{font-size:12px;font-weight:500;color:var(--t3)}
.ys-fig .v{margin-top:4px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ys-fig .v.amber{color:var(--a)}.ys-fig .v.red{color:var(--r)}.ys-fig .v.green{color:var(--gt)}
.ys-fig .l{margin-top:4px;font-size:13px;color:var(--t2)}
.ys-fig .l a{margin-left:6px;font-weight:500}
.ys-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:56px 24px;text-align:center;color:var(--t2)}
.ys-empty .ok{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);color:var(--gt);font-size:20px;font-weight:600}
.ys-empty b{font-size:17px;font-weight:600;color:var(--ink)}
.ys-none{padding:16px 20px;font-size:14px;color:var(--t3)}

/* ---- small parts: a status dot, chips, pills, the segmented switch, fields, tables ---- */
.ys-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t3);flex:none}
.ys-dot.g{background:var(--gdot)}.ys-dot.a{background:var(--a-dot)}.ys-dot.r{background:var(--r-dot)}.ys-dot.o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--t3)}
.ys-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap}
.ys-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:500;color:var(--t1b);white-space:nowrap}
.ys-chip.g{background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);color:var(--gt)}
.ys-chip.a{background:var(--a-bg);box-shadow:inset 0 0 0 1px var(--a-ring);color:var(--a)}
.ys-chip.r{background:var(--r-bg);box-shadow:none;color:var(--r)}
.ys-chips{display:flex;flex-wrap:wrap;gap:6px}
.ys-seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--seg-bg)}
.ys-seg a,.ys-seg button{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--t2);text-decoration:none!important;white-space:nowrap}
.ys-seg a:hover,.ys-seg button:hover{color:var(--ink)}
.ys-seg .on{background:var(--seg-on);box-shadow:var(--sh-seg);color:var(--ink)}
.ys-field,.ys-select,.ys-area{width:100%;height:38px;padding:0 12px;border:0;border-radius:8px;background:var(--field);box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;color:var(--ink);transition:box-shadow .12s ease}
.ys-field::placeholder,.ys-area::placeholder{color:var(--t3)}
.ys-field:hover,.ys-select:hover,.ys-area:hover{box-shadow:inset 0 0 0 1px var(--ring2)}
.ys-field:focus,.ys-select:focus,.ys-area:focus{outline:0;box-shadow:inset 0 0 0 1px var(--g-ring),0 0 0 3px var(--g-bg)}
.ys-area{height:auto;min-height:88px;padding:10px 12px;line-height:1.5;resize:vertical}
.ys-field.sm,.ys-select.sm{height:32px;font-size:13px}
.ys-select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ys-label{display:block;margin:0 0 6px;font-size:12px;font-weight:500;color:var(--t3)}
.ys-form{display:grid;gap:16px}
.ys-table{width:100%;border-collapse:collapse;font-size:14px}
.ys-table th{padding:10px 20px;text-align:left;font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line)}
.ys-table td{padding:12px 20px;vertical-align:middle;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line2)}
.ys-table tr:last-child td{box-shadow:none}
.ys-table tbody tr.link{cursor:pointer;transition:background .12s ease}
.ys-table tbody tr.link:hover td{background:var(--hover)}
.ys-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ys-table .sub{display:block;font-size:13px;color:var(--t3)}
.ys-table-wrap{overflow-x:auto}

/* ---- the email as built: phone and laptop frames ---- */
.ys-frames{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.ys-frames figure{margin:0;display:flex;flex-direction:column;gap:8px}
.ys-frames figcaption{font-size:12px;font-weight:500;color:var(--t3)}
.ys-frame{display:block;border:0;border-radius:10px;background:#fff;box-shadow:var(--sh-frame)}
.ys-frames[data-show="phone"] .laptop,.ys-frames[data-show="laptop"] .phone{display:none}
@media (max-width:759px){.ys-frames .laptop{display:none}.ys-frames[data-show="laptop"] .laptop{display:flex}.ys-frames[data-show="laptop"] .phone{display:none}}

/* ---- the toast, with Undo; the receipt in a pane; Search and go ---- */
#ys-toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
#ys-toast .in{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:9px 9px 9px 16px;border-radius:12px;background:var(--toast);color:var(--toast-t);font-size:14px;line-height:1.4;box-shadow:var(--sh-toast);animation:ys-rise .28s var(--ease)}
#ys-toast .ck{flex:none;font-weight:600;color:#7FE0A0}
#ys-toast .ck.bad{color:#FF8A80}
#ys-toast .msg{min-width:0}
#ys-toast button{flex:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#7FE0A0;font-size:14px;font-weight:600}
#ys-toast button:hover{background:rgba(255,255,255,.14)}
#ys-toast button .k{font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(244,245,243,.6)}
#ys-toast .pad{width:2px}
@media (max-width:759px){#ys-toast{bottom:calc(72px + env(safe-area-inset-bottom))}body.ys-noTabs #ys-toast{bottom:84px}}
.ys-receipt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);font-size:14px;color:var(--ink);animation:ys-in .18s ease-out}
.ys-receipt .ck{font-weight:600;color:var(--gt)}
.ys-receipt .grow{flex:1;min-width:0}
#ys-cmd{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(0,0,0,.45);animation:ys-fade .12s ease-out}
#ys-cmd .box{width:100%;max-width:620px;max-height:64vh;display:flex;flex-direction:column;border-radius:14px;background:var(--pop);box-shadow:var(--sh-pop);overflow:hidden;animation:ys-rise .2s var(--ease)}
#ys-cmd input{flex:none;height:56px;padding:0 20px;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line)}
#ys-cmd input::placeholder{color:var(--t3)}
#ys-cmd .res{flex:1;min-height:0;overflow-y:auto;padding:6px}
#ys-cmd .gl{padding:10px 12px 4px;font-size:12px;font-weight:600;color:var(--t3)}
#ys-cmd .it{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:14px;color:var(--ink);text-align:left;text-decoration:none!important}
#ys-cmd .it.on{background:var(--btn-h)}
#ys-cmd .it .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ys-cmd .it .h{flex:none;font-size:12px;color:var(--t3)}
#ys-cmd .none{padding:20px 12px;font-size:14px;color:var(--t2)}
#ys-cmd .keys{flex:none;display:flex;gap:16px;padding:10px 16px;font-size:12px;color:var(--t3);box-shadow:inset 0 1px 0 var(--line)}

/* ---- "Something wrong or missing?" at the foot of an output ---- */
.ys-fb{display:flex;align-items:center;gap:8px;margin-top:24px;padding:6px 6px 6px 18px;border-radius:12px;background:var(--card);box-shadow:var(--sh-card)}
.ys-fb-in{flex:1;min-width:0;height:36px;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
.ys-fb-in::placeholder{color:var(--t3)}
.ys-fb:focus-within{box-shadow:var(--sh-card),0 0 0 3px var(--g-bg)}
.ys-fb.sent{padding:14px 18px;font-size:14px;color:var(--t2)}
.ys-fb.sent .ck{color:var(--gt);font-weight:600;margin-right:6px}

/* ---- the bare pages: sign in, the door closed, the error, page not found ---- */
.ys-bare{min-height:100vh;display:flex;flex-direction:column}
.ys-bare .ys-bare-top{display:flex;justify-content:flex-end;padding:12px 16px}
.ys-bare .ys-bare-in{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px 12vh}
.ys-bare .col{width:100%;max-width:380px}
.ys-bare .col>img{height:16px;width:49px;display:block;filter:var(--logo)}
.ys-bare .col h1{margin:28px 0 6px;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
.ys-bare .col p{margin:0;font-size:14px;color:var(--t2)}
.ys-bare .col .acts{display:grid;gap:10px;margin-top:24px}
.ys-bare .col .foot{margin-top:24px;padding-top:20px;box-shadow:inset 0 1px 0 var(--line);font-size:13px;color:var(--t3)}

/* ---- Track time on the thing open ---- */
.ys-track{display:inline-flex;margin:0}
.ys-track button{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 8px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap}
.ys-track button:hover{background:var(--qh);color:var(--ink)}
.ys-track i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--t3)}
.ys-track button.on{color:var(--gt)}
.ys-track button.on i{box-shadow:none;background:var(--gdot);animation:ys-pulse 1.6s ease-in-out infinite}

/* ---- a thing pressed with Undo leaves at once (studio.js data-gone), and comes back on Undo ---- */
.ys-leaving{overflow:hidden;max-height:0!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;opacity:0;transition:max-height .26s var(--ease),opacity .2s ease,padding .26s var(--ease),margin .26s var(--ease)}

/* ---- a tip on hover or keyboard focus, for a control whose effect its name cannot say in full (data-tip) ---- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);z-index:50;width:max-content;max-width:280px;padding:8px 11px;border-radius:8px;background:var(--toast);color:var(--toast-t);font:400 12.5px/1.45 var(--font);text-align:left;white-space:normal;box-shadow:var(--sh-toast);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s var(--ease)}
[data-tip]:hover::after,[data-tip]:focus-within::after{opacity:1;transform:translate(-50%,0);transition-delay:.35s}
@media (hover:none){[data-tip]::after{display:none}}
form[data-tip]{display:inline-flex!important}

/* The pages drawn before the redesign of 24 October 2026, on the new tokens until each is rebuilt (studio/DESIGN.md). Nothing
   new goes in here; a rebuilt page's own styles live in its area's file beside this one. */
/* YOCTO Studio, 23 October 2026: the analytics app's "Headline" look (reports/analytics/design-2026-10-21), which
   George called "100x better": calm, readable, confident; light cards on a flat grey page; one accent; colour carries
   meaning only (green good, red late or failing, amber to look at). Every page answers its question from the top. */
button,input,textarea,select{font:inherit;color:inherit}button{white-space:nowrap;cursor:pointer}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text3)}
details summary::-webkit-details-marker{display:none}
*:focus-visible{outline:2px solid rgba(0,91,211,.35);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}

/* the shell: one bar on top, the page under it */
.shell{min-height:100vh}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;height:56px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--line)}
.top .logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.top .logo:hover{text-decoration:none}
.top .logo img{height:13px;width:auto;display:block;filter:invert(1)}
.top .logo span{font:500 13px/1 var(--font);color:var(--text2)}
.top nav{display:flex;gap:2px}
.top nav a{padding:7px 12px;border-radius:8px;color:var(--text2);font:500 14px/1 var(--font)}
.top nav a:hover{background:var(--soft);color:var(--text);text-decoration:none}
.top nav a.on{background:var(--soft);color:var(--text);font-weight:600}
.top .r{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--text2)}
.top .r a:not(.b){color:var(--text2)}
main{padding:28px 24px 80px;max-width:1440px;margin:0 auto;width:100%;min-width:0}
.shell.bare main{max-width:1040px}

/* type and page heads */
h1{margin:0;font:600 20px/1.3 var(--font);color:var(--text)}
h1.big,h1.wrap{font-size:20px;line-height:1.3;overflow-wrap:anywhere}
h2,h3{margin:0;font:600 14px/1.4 var(--font);color:var(--text)}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 24px}
.ph.c{align-items:center}
.sub{margin-top:6px;font-size:13px;color:var(--text2);max-width:760px}
.back{display:inline-block;font-size:13px;color:var(--text2);margin-bottom:10px}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lab{font:500 12px/1.3 var(--font);color:var(--text2);margin-bottom:6px}
.sec{color:var(--text2)}.mu{color:var(--text3)}.small{font-size:13px}.fg{color:var(--text)}

/* buttons: primary dark, the rest quiet */
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:0;background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2);font:500 13px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
.b:hover{background:var(--soft);text-decoration:none;color:var(--text)}
.b.p{background:var(--btnbg);color:var(--btnfg);box-shadow:none}.b.p:hover{background:#111;color:#fff}
.b.go{background:var(--good);color:#fff;box-shadow:none}.b.go:hover{background:#05603a;color:#fff}
.b.q{box-shadow:none;background:transparent;color:var(--text2)}.b.q:hover{background:var(--soft);color:var(--text)}
.b.am{background:var(--amberbg);color:var(--amber);box-shadow:none}
.b.sm{height:28px;padding:0 10px;font-size:12px}
.b[disabled],.b.off{opacity:.45;cursor:not-allowed;pointer-events:none}
.b.wide{width:100%}

/* status: a dot and a word */
.st{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font);white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st.o i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text3);flex:none}

/* cards and the things inside them */
.panel,.side,.answer,.prog,.card,.act,.needs,.reader,.strippanel,.produce,.notice{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:0}
.panel{padding:20px 24px}
.side{padding:16px 20px;font-size:13px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.notice{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:20px;background:var(--amberbg);box-shadow:none;color:var(--text)}
.notice b{color:var(--amber)}
.notice.first{background:var(--goodbg)}.notice.first b{color:var(--good)}
.notice.sm{padding:10px 14px;font-size:13px;margin:0;justify-content:flex-start}
.panel h2,.side h2{margin:0 0 12px}
.grp{margin:0 0 24px}

/* rows */
.row,.need{display:grid;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)}
a.row{color:var(--text)}a.row:hover{background:var(--soft);text-decoration:none}
.row .nm{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .wh{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row .ac{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.need{grid-template-columns:110px minmax(0,1fr) auto}
.needs{overflow:hidden}.needs .need:last-child{border-bottom:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips.right{justify-content:flex-end}
.cnt{font-size:12px;color:var(--text2);white-space:nowrap}.cnt b{color:var(--good);font-weight:500}
.bn{font:600 15px/1.2 var(--font);color:var(--text)}.bn.s{font-size:14px}
details.fold,details.gate{margin-top:12px}
details.fold summary,details.gate summary{cursor:pointer;color:var(--text2);font-size:13px;list-style:none}
details.gate pre{white-space:pre-wrap;font:12px/1.5 var(--mono);background:var(--soft);padding:10px;border-radius:8px;max-height:320px;overflow:auto;margin:8px 0 0}
.tbl{display:grid;column-gap:18px;align-items:center}
.tbl .th{display:contents;font:500 12px/1 var(--font);color:var(--text2)}
.tbl .th>span{padding:0 0 10px;border-bottom:1px solid var(--line)}
.tbl .tr{display:contents}
.tbl .tr>span{padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;min-width:0}
.tbl.brands{grid-template-columns:minmax(90px,.9fr) minmax(0,1fr) minmax(80px,1.6fr) auto 70px}
.tbl.accounts{grid-template-columns:minmax(90px,1fr) minmax(0,1.3fr) 150px 110px 80px}

/* inputs */
.ta{width:100%;min-height:96px;padding:12px 14px;border-radius:8px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card);font-size:14px;line-height:1.55;outline:none}
.ta:focus,.in:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.ta.tall{min-height:220px}.ta.short{min-height:72px}
.in{width:100%;height:36px;padding:0 12px;border-radius:8px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card);font-size:14px;outline:none}
.in.sm{height:28px;font-size:12px;padding:0 8px;width:auto}
.search{width:280px;max-width:100%;height:36px;padding:0 12px;border-radius:8px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card);font-size:14px;outline:none}
.field{margin-bottom:16px}.field:last-child{margin-bottom:0}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:10px 0;font-size:13px;max-height:220px;overflow:auto}
.checks label,.pick label{display:flex;gap:8px;align-items:center}
.pick{display:flex;flex-direction:column;gap:6px}
.pick summary{cursor:pointer;color:var(--text2);list-style:none}

/* the progress of a job */
.prog{max-width:760px;padding:20px 24px;margin-bottom:20px}
.prog-h{display:flex;align-items:center;gap:12px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--text);animation:spin .9s linear infinite;flex:none}
.spin.sm{width:12px;height:12px}
.prog.ended .spin{animation:none;border-color:var(--good)}
.prog-t{font:600 15px/1.2 var(--font)}
.prog-c{margin-left:auto;font-size:12px;color:var(--text3)}
.prog-n{margin:8px 0 14px 28px;font-size:13px;color:var(--text2)}
.prog-log{margin:0 0 0 28px;font-size:13px;max-height:360px;overflow:auto}
.prog-log div{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);animation:rise .3s ease-out;white-space:pre-wrap;word-break:break-word}
.prog-log div::before{content:"\2713";color:var(--good);font-size:12px;flex:none;line-height:1.6}

/* numbered cards: a plan's emails, a playbook, decisions */
.list{display:flex;flex-direction:column;gap:10px}
.card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px 20px}
.card .ct{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.card .ct b{font:600 15px/1.3 var(--font)}
.card .ct span{font-size:12px;color:var(--text2)}
.card p{margin:6px 0 0}
.card.pb{grid-template-columns:36px minmax(0,1fr) minmax(200px,230px);align-items:start}
.card.pb img{width:100%;border-radius:8px;display:block;background:#fff;box-shadow:var(--shadow)}

/* the email as it reads, and its pieces */
.seg{display:inline-flex;padding:2px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2)}
.seg a,.seg button{padding:6px 12px;border-radius:6px;border:0;font:500 12px/1 var(--font);background:transparent;color:var(--text2);cursor:pointer;text-decoration:none}
.seg .on{background:var(--soft);color:var(--text);font-weight:600}
.reader{display:flex;flex-wrap:wrap;overflow:hidden;min-height:60vh}
.reader.one{display:block;max-width:820px}
.canvas{background:var(--soft);padding:28px 20px;min-height:400px}
.canvas .inbox{display:none}
.frame{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2);margin-bottom:8px}
.frame code{font:12px/1.4 var(--mono);word-break:break-all}
.email{display:none}.email.on{display:block}
.dnote{background:#fff7d6;border-left:3px solid #e9b44c;color:#5c4a14;font:12px/1.45 var(--font);padding:7px 12px;margin:0 16px 10px;border-radius:4px}
.dlabel{font:600 10px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#8a958e;padding:10px 16px 0}
.tag{background:#eaf6ee;color:#1f6b3a;border:1px solid #b9dfc6;border-radius:4px;padding:0 4px;font:11.5px var(--mono)}
.sms-path{font-size:11px;color:#6c7a71;margin:0 0 4px 6px}
.bubble{max-width:340px;background:#e9e9eb;color:#111;border-radius:18px;padding:10px 14px;font:14px/1.4 var(--font)}
.bubble .optout{color:#6c6c70;font-size:12px}
.big{font:600 22px/1.1 var(--font);margin-bottom:6px}
.foot{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--text2);font-size:12px;line-height:1.6}

/* the steps of writing a flow */
.stepper{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:10px;background:var(--card);box-shadow:var(--shadow);margin:16px 0 24px;list-style:none}
.stepper li{flex:1 1 140px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font:500 13px/1 var(--font);color:var(--text3)}
.stepper li b{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 11px/1 var(--font);box-shadow:inset 0 0 0 1px var(--line2)}
.stepper li.done{color:var(--text2)}.stepper li.done b{background:var(--good);color:#fff;box-shadow:none}
.stepper li.now{color:var(--text);background:var(--soft)}.stepper li.now b{background:var(--text);color:#fff;box-shadow:none}
.stepper li a{color:inherit;display:flex;align-items:center;gap:8px}
.own{margin:16px 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.opts button{padding:6px 10px;border-radius:8px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card);color:var(--text2);font-size:12px;text-align:left;white-space:normal;line-height:1.4}
.opts button:hover{color:var(--text);background:var(--soft)}
.gl{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.gl i{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;margin-top:7px}.gl.am i{background:var(--amber)}
.said .qa{padding:8px 0;border-top:1px solid var(--line)}
.said .qa div:first-child{color:var(--text2);font-size:12px}

/* markdown */
.md p{margin:0 0 12px}.md h2,.md h3,.md h4,.md h5{margin:20px 0 8px;font:600 15px/1.3 var(--font)}
.md table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:13px}
.md th{text-align:left;color:var(--text2);font:500 12px/1.4 var(--font);border-bottom:1px solid var(--line);padding:7px 8px}
.md td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
.md ul,.md ol{margin:0 0 12px;padding-left:20px}.md li{margin-bottom:4px}
.md blockquote{border-left:3px solid var(--line2);margin:0 0 12px;padding:2px 14px;color:var(--text2)}
.md pre{background:var(--soft);border-radius:8px;padding:12px;overflow:auto;font:12px/1.5 var(--mono)}
.md code{font-family:var(--mono);font-size:12.5px;background:var(--soft);padding:1px 5px;border-radius:4px}
.md pre code{background:none;padding:0}
.md hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.md .tablewrap{overflow-x:auto}

/* a draft checked in the Studio */
.clist{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:6px}
.clist li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.clist li i{flex:0 0 8px;height:8px;border-radius:50%;margin-top:6px;background:var(--good)}
.clist li.warn i{background:var(--amber)}.clist li.fail i{background:var(--bad)}
.clist li.fail span{font-weight:500}
.renders{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.renders figure{margin:0;display:flex;flex-direction:column;gap:6px}
.renders figcaption{font-size:12px;color:var(--text2)}
iframe.mail{border:0;box-shadow:var(--shadow);border-radius:8px;background:#fff;height:900px;max-width:100%}
pre.sms{white-space:pre-wrap;background:var(--soft);border-radius:8px;padding:12px 14px;font:13px/1.5 var(--mono);max-width:420px}

/* the brand book and older pieces still drawn on some pages */
.strip{display:flex;gap:2px;align-items:center}.strip i{flex:1;height:4px;border-radius:2px;min-width:2px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--text2)}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%;flex:none}
.act{padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-height:110px;color:var(--text)}
a.act:hover{text-decoration:none;box-shadow:0 0 0 1px var(--line2),0 4px 12px rgba(0,0,0,.06)}
.act b{font:600 15px/1.3 var(--font)}
.act p{margin:0;font-size:13px;color:var(--text2);flex:1}
.act .meta{font-size:12px;color:var(--text3)}
.ask{display:flex;gap:8px;align-items:center;border-radius:10px;padding:6px 6px 6px 14px;background:var(--card);box-shadow:var(--shadow)}
.ask input{flex:1;background:transparent;border:0;outline:0;font-size:15px;padding:8px 0;min-width:0}
.answer{padding:20px 24px}
#invite-out{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}#invite-out code{font:12px/1.4 var(--mono);word-break:break-all}
.ctx p{margin:6px 0 4px;font-size:14px;line-height:1.55;max-width:760px}

/* ---- Today: one figure, one list of what needs you, the selected one beside it ---- */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 4px 24px;flex-wrap:wrap}
.hero .hl{font:500 13px/1.4 var(--font);color:var(--text2)}
.queue{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:20px;align-items:start}
.qdetail{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);min-height:60vh;min-width:0;overflow:hidden}
.qbody{padding:20px 24px}
.qbody>p:first-child{margin-top:0}
.keys{margin-top:12px;font-size:12px;color:var(--text3)}
.keys kbd{font:11px var(--mono);padding:1px 5px;border-radius:4px;background:var(--card);box-shadow:var(--shadow)}

/* a brand on one page */

/* the brands, and making something */

@media(max-width:1000px){.two{grid-template-columns:1fr}.card.pb{grid-template-columns:36px minmax(0,1fr)}}
@media(max-width:900px){.queue{grid-template-columns:1fr}.need{grid-template-columns:1fr}}
@media(max-width:700px){main{padding:16px 16px 60px}.top{gap:12px;padding:0 16px}.top .logo span,.top .r .who{display:none}.tbl.brands,.tbl.accounts{grid-template-columns:1fr}.tbl .th{display:none}}

/* feedback, under every output: always open, saying where it goes */
/* what a button does, under the buttons */

/* the designer, picked with the copy's yes (studio/pages-today.mjs) */

/* a brand's sends and flows: every row opens in Klaviyo; YOCTO's or not (studio/pages-main.mjs) */
.seg.sm a{padding:5px 10px;font-size:12px}
[hidden]{display:none!important}

/* a link in a rendered email with no full address: it shows (studio/render.mjs hrefAttrs) */
a[data-nolink]{outline:2px dashed var(--bad);outline-offset:2px}

/* the brand book on one page (studio/pages.mjs bookPage) */

/* Make something: a card per thing the Studio can make (studio/pages-main.mjs newPage) */

/* a brand's sitting: its emails in a row (studio/pages-today.mjs) */
.sit{border-top:1px solid var(--line);padding:14px 0 6px}
.sit:first-child{border-top:0}
.reply textarea{width:100%;min-height:110px}

/* Today on a phone (George, 23 October 2026, "5. Implement"): the list, or one item over the whole screen */
@media (max-width:760px){
  .queue{display:block}
  .queue .qdetail{display:none}
  .qdetail .canvas{max-width:100%;overflow-x:auto}
  .qdetail .renders{display:block}
  .qdetail .renders figure+figure{display:none}
  .qdetail .renders iframe{max-width:100%}
}

/* the two presses that schedule (studio/schedule.mjs): the first opens what will happen, the second commits */
details.confirm{display:inline-block}
details.confirm>summary{list-style:none;cursor:pointer}
details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]{display:block;width:100%;margin:6px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
details.confirm[open]>summary{margin-bottom:10px}
details.confirm .lab{display:block;margin-bottom:8px}
details.confirm .in{display:block;margin-top:4px}

/* the client's page: the plan's rows, a row's change, and the page printed as a PDF */
@media print{.portal form,.portal details,.portal .b{display:none!important}}

/* time, as on ClickUp (studio/time.mjs, studio/pages-time.mjs): the clock in the bar, Today's bar for work on no task,
   a task's strip, its entries, the timesheet */
.clock{display:inline-flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}
.clock.on{padding:2px 2px 2px 10px;border-radius:999px;background:var(--goodbg)}
.clock.on>i{width:8px;height:8px;border-radius:50%;background:var(--good);animation:tpulse 1.6s ease-in-out infinite;flex:none}
.top .r .clock .ct{font:600 13px/1 var(--mono);color:var(--good);font-variant-numeric:tabular-nums}
.top .r .clock .cw{max-width:260px;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.clock form{margin:0;display:inline-flex}
.clock .b.sm{height:24px;border-radius:999px}
@keyframes tpulse{50%{opacity:.3}}
@media(max-width:700px){.top .r .clock .cw{display:none}}

/* Today (studio/pages-today.mjs) and a draft's check (studio/view-check.mjs): the redesign of 24 October 2026, the
   handoff's 6.2 and YOCTO Studio.dc.html (the list 368px on the left, the open item on the right, every item kind). */

/* ---- the frame: the list and the pane, each scrolling on its own under the bar ---- */
.td{display:flex;height:calc(100vh - 56px);height:calc(100dvh - 56px);min-height:0}
.td-list{flex:0 0 368px;min-width:0;display:flex;flex-direction:column;background:var(--list);box-shadow:inset -1px 0 0 var(--line);overflow-y:auto;overscroll-behavior:contain;position:relative}
.td-pane{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;background:var(--page);position:relative}
.td-in{max-width:840px;margin:0 auto;padding:28px clamp(16px,3vw,32px) 96px}
.td-in.wide{max-width:1072px}
.td-grow{flex:1}

/* ---- the list's head: the date, whose day, the count, the brand filter ---- */
.td-lhead{padding:20px 24px 12px}
.td-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.td-date{font-size:12px;font-weight:500;color:var(--t3)}
.td-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 5px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:500;color:var(--ink);transition:background .12s ease}
button.td-pill:hover,.td-pill[aria-expanded="true"]{background:var(--soft)}
.td-pill.static{padding-right:5px}
.td-pill .ys-avatar.sm{width:22px;height:22px;font-size:10px}
.td-pill .car,.td-bpick .car,.td-dpick .car{font-size:9px;color:var(--t3)}
.td-sum{display:flex;align-items:flex-end;gap:12px;margin-top:12px}
.td-n{font-size:46px;line-height:.86;font-weight:600;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.td-for{display:flex;flex-direction:column;gap:2px;min-width:0}
.td-for b{font-size:16px;font-weight:600;line-height:1.2;color:var(--ink)}
.td-rest{font-size:12px;line-height:1.3;color:var(--t3);white-space:nowrap}
.td-rest .late{color:var(--r);font-weight:600}
.td-bwrap{margin-left:auto}
.td-bpick{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:500;color:var(--t2);white-space:nowrap;transition:background .12s ease,color .12s ease}
.td-bpick:hover,.td-bpick[aria-expanded="true"]{background:var(--soft);color:var(--ink)}
.td-brands{width:240px}
.td-brands a.on,.td-people a.td-pr.on{background:var(--sel)}
.td-brands .n{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.td-people{width:320px;max-width:calc(100vw - 32px);right:-8px}
.td-people .none{padding:10px;font-size:13px;color:var(--t3);display:flex;align-items:center;gap:8px}
.td-ph{display:flex;justify-content:space-between;padding:8px 10px;font-size:12px;font-weight:600;color:var(--t3)}
.td-ph .c{display:flex;gap:18px}
.ys-pop a.td-pr{display:grid;grid-template-columns:24px minmax(0,1fr) 34px 34px;gap:10px;align-items:center;padding:7px 10px}
.td-pr .ys-avatar.sm{width:24px;height:24px;font-size:10px}
.td-pr .nm{min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-pr .aw{display:block;font-size:11px;font-weight:400;color:var(--t3)}
.td-pr .l,.td-pr .d{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--t2)}
.td-pr .l.late{color:var(--r);font-weight:600}
.td-other{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border-radius:10px;background:var(--a-bg)}
.td-other span{font-size:12px;color:var(--a-t)}
.td-other .ys-btn{height:28px;background:transparent;box-shadow:inset 0 0 0 1px var(--a-ring);color:var(--ink)}
.td-other .ys-btn:hover{background:var(--a-h)}
.td-reading{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3)}

/* ---- the groups and their rows ---- */
.td-gh{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;padding:14px 24px 6px;background:var(--list)}
.td-gh span{font-size:12px;font-weight:600;color:var(--ink)}
.td-gh.late span{color:var(--r)}
.td-gh.done{position:static;padding-top:18px}
.td-gh.done span{color:var(--t2)}
.td-gh i{font-style:normal;font-size:12px;font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums}
.td-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:baseline;padding:10px 24px 11px;max-height:96px;overflow:hidden;color:var(--ink);text-decoration:none!important;cursor:pointer;transition:max-height .26s var(--ease),opacity .18s ease,padding .26s var(--ease),background .12s ease}
.td-row:hover{background:var(--hover2);color:var(--ink)}
.td-row.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--gt)}
.td-row .v{min-width:0;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-row .d{font-size:12px;font-weight:500;line-height:20px;color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums}
.td-row .d.late{color:var(--r);font-weight:600}
.td-row .d.now{color:var(--t2)}
.td-row .n{min-width:0;font-size:14px;line-height:20px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-row .fl{font-weight:500}
.td-row .fl.r{color:var(--r)}.td-row .fl.a{color:var(--a)}.td-row .fl.g{color:var(--gt)}
.td-row .br{max-width:150px;font-size:12px;line-height:20px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.td-row.leaving{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.td-row.arrive,.td-drow.arrive{animation:ys-in .2s var(--ease)}
.td-none{padding:24px;font-size:14px;color:var(--t2)}
.td-drow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:9px 24px 10px;color:var(--t2);text-decoration:none!important;transition:background .12s ease}
.td-drow:hover{background:var(--hover2);color:var(--t2)}
.td-drow.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--gt)}
.td-drow .t{min-width:0;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-drow .t b{color:var(--gt);font-weight:600}
.td-drow .at{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.td-keys{display:flex;flex-wrap:wrap;gap:6px 14px;padding:20px 24px 22px;font-size:12px;color:var(--t3)}
.td-keys span{display:inline-flex;align-items:center;gap:5px}
.td-keys .ys-kbd{min-width:18px;text-align:center}

/* ---- the open item: line 1, the title, the facts, the actions ---- */
.td-item{display:flex;flex-direction:column;gap:6px;animation:ys-in .2s ease-out}
.td-l1{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.td-bn{min-width:0;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-bn b{font-weight:500;color:var(--t2)}
.td-l1 .ys-track{flex:none;margin-right:-8px}
.td-title{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.td-meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:14px;line-height:1.5;color:var(--t2)}
.td-meta .sep{color:var(--ring2)}
.td-meta .late{color:var(--r);font-weight:600}
.td-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.td-acts form{display:contents}
.td-acts .td-grow{flex:1 1 0;min-width:0}
.td-acts .ys-btn.q .ys-kbd{color:var(--t3)}
.td-gap{margin-top:20px}
.td-src{margin-top:12px;font-size:12px;color:var(--t3)}
.td-h2{margin:28px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.td-h2 h2{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.td-md{margin-top:12px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.td-md .md>:first-child{margin-top:0}.td-md .md>:last-child{margin-bottom:0}
.td-fold{margin-top:20px}
.td-fold summary{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;list-style:none}
.td-fold summary::-webkit-details-marker{display:none}
.td-fold summary::after{content:"\203A";font-size:16px;color:var(--t3);transition:transform .12s ease}
.td-fold[open] summary::after{transform:rotate(90deg)}
.td-item .ys-fb{margin-top:28px}
.td-item .ys-notice{margin-bottom:0}
.td-checked{padding:10px 10px 10px 16px;box-shadow:none}
.td-checked form{display:contents}
.td-checked .ys-btn.q{color:var(--t1b)}

/* the compact head once the pane is scrolled past its actions */
.td-compact{position:sticky;top:0;z-index:6;height:0}
.td-compact .in{height:56px;display:flex;align-items:center;gap:16px;padding:0 32px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 var(--line);animation:ys-in .16s ease-out}
.td-compact .t{flex:1;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-compact .a{display:flex;gap:8px}
.td-compact .ys-btn{height:32px;padding:0 12px}
.td-compact .ys-kbd{display:none}

/* the receipt after it is done, and nothing left */
.td-receipt{margin-top:12vh;max-width:560px;animation:ys-in .2s ease-out}
.td-receipt .k{font-size:14px;font-weight:600;color:var(--gt)}
.td-receipt .t{margin-top:6px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.td-receipt .s{margin-top:6px;font-size:14px;color:var(--t2)}
.td-receipt .ys-btn{margin-top:22px}
.td-clear{min-height:62vh;display:grid;place-items:center;text-align:center;animation:ys-in .3s ease-out}
.td-clear .ok{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--g-bg);display:grid;place-items:center;font-size:22px;font-weight:600;color:var(--gt)}
.td-clear b{display:block;font-size:30px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.td-clear span{display:block;margin-top:6px;font-size:16px;color:var(--t2)}
.td-loading{min-height:40vh;display:grid;place-items:center}

/* ---- an alert: three figures, the range, what to do next ---- */
.td-alert{margin-top:24px}
.td-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 28px;padding:24px 28px 12px}
.td-figs .v{font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.td-figs .v.red{color:var(--r)}
.td-figs .l{margin-top:6px;font-size:12px;line-height:1.4;color:var(--t2)}
.td-alert-t{padding:22px 28px 6px;font-size:15px;line-height:1.5;color:var(--ink)}
.td-chart{position:relative;height:66px;margin:6px 28px 22px}
.td-chart .axis{position:absolute;left:0;right:0;top:32px;height:2px;border-radius:1px;background:var(--fill)}
.td-chart .bar{position:absolute;top:27px;height:12px;border-radius:6px;background:var(--r-dot);min-width:12px}
.td-chart .bl{position:absolute;top:6px;font-size:12px;font-weight:600;color:var(--r);white-space:nowrap}
.td-chart .mk{position:absolute;top:21px;width:2px;height:24px;border-radius:1px;background:var(--ink)}
.td-chart .ml{position:absolute;top:2px;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.td-chart .tk{position:absolute;top:50px;transform:translateX(-50%);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.td-chart .tk.first{transform:none}
.td-chart .tk.last{transform:translateX(-100%)}
.td-next{display:flex;gap:16px;align-items:baseline;padding:16px 28px 18px;box-shadow:inset 0 1px 0 var(--line2);background:var(--foot)}
.td-next b{flex:none;font-size:12px;font-weight:600;color:var(--ink)}
.td-next span{font-size:14px;line-height:1.5;color:var(--ink)}

/* ---- the Monday review's cards, a brand lesson ---- */
.td-cards{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.td-cards .ys-card+.ys-card{margin-top:0}
.td-card .in{padding:20px 24px;animation:ys-in .18s ease-out}
.td-ck{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--t3)}
.td-ck span:first-child{font-weight:500}
.td-ct{margin-top:4px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.td-cc{margin-top:6px;font-size:14px;line-height:1.5;color:var(--t2)}
.td-notes{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.td-notes.ruled{margin-top:0;padding:16px 24px 18px;box-shadow:inset 0 1px 0 var(--line2)}
.td-lesson>.td-notes:first-child{margin-top:0;padding:18px 24px}
.td-note{display:grid;grid-template-columns:3px minmax(0,1fr);gap:12px}
.td-note .bar{border-radius:2px;background:var(--fill)}
.td-note .q{font-size:14px;line-height:1.5;color:var(--ink)}
.td-note .w{margin-top:1px;font-size:12px;color:var(--t3)}
.td-cacts{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.td-cacts form{display:contents}
.td-decided{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 24px;animation:ys-in .18s ease-out}
.td-decided b{flex:none;font-size:14px;font-weight:600;color:var(--t2)}
.td-decided b.yes{color:var(--gt)}
.td-decided .t{flex:1;min-width:0;font-size:14px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-lesson{margin-top:24px}
.td-words{padding:22px 24px 20px}
.td-words .k{font-size:12px;font-weight:500;color:var(--t3)}
.td-words .g{margin-top:14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 16px;align-items:center}
.td-words .w{font-size:16px;font-weight:600;color:var(--ink)}
.td-words .w.sec{color:var(--t2)}
.td-words .track{display:block}
.td-words .track span{display:block;height:10px;min-width:8px;border-radius:5px;background:var(--gdot)}
.td-words .track span.sec{background:var(--ring2)}
.td-words .c{font-size:14px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.td-words .c.sec{color:var(--t2)}

/* ---- a client's words and the answer; a promise, a brief ---- */
.td-client{margin-top:24px}
.td-msg{padding:20px 24px 22px}
.td-msg .who{display:flex;align-items:center;gap:10px}
.td-msg .who .ys-avatar.sm{width:30px;height:30px;font-size:12px;background:var(--soft)}
.td-msg .who b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.td-msg .who span{display:block;font-size:12px;color:var(--t3)}
.td-msg .said{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-wrap}
.td-link{margin-top:16px;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:var(--hover)}
.td-link .g{min-width:0;flex:1}
.td-link .t{font-size:14px;font-weight:500;color:var(--ink)}
.td-link .s{font-size:12px;color:var(--t3)}
.td-link .ys-link{flex:none;font-size:14px}
.td-answerbox{padding:16px 24px 22px;box-shadow:inset 0 1px 0 var(--line2)}
.ys-card.td-answerbox{margin-top:24px;box-shadow:var(--sh-card)}
.td-answerbox .lab{font-size:12px;font-weight:500;color:var(--t2);margin-bottom:8px}
.td-answer{min-height:92px;font-size:14px;line-height:1.55}
.td-drafting{display:flex;align-items:center;gap:8px;height:92px;padding:0 14px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--ring);background:var(--field);font-size:14px;color:var(--t3)}
.td-quote{margin-top:24px;padding:18px 24px}
.td-quote .q{font-size:15px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.td-quote .w{margin-top:6px;font-size:12px;color:var(--t3)}
.td-brief{margin:24px 0 0;padding:18px 20px;border-radius:12px;background:var(--card);box-shadow:var(--sh-card);font:13px/1.6 var(--mono);color:var(--t1b);white-space:pre-wrap;overflow-wrap:anywhere}
.td-deliver{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.td-deliver .ys-field{flex:1 1 320px;min-width:0}
.td-deliver .ys-btn{height:38px}

/* ---- facts tables: a campaign's, a need's, the decisions ---- */
.td-facts{margin-top:16px}
.td-fact{display:grid;grid-template-columns:minmax(88px,128px) minmax(0,1fr);gap:16px;padding:11px 20px;box-shadow:inset 0 -1px 0 var(--line2);align-items:baseline}
.td-fact:last-child{box-shadow:none}
.td-fact .k{font-size:12px;font-weight:500;line-height:22px;color:var(--t3)}
.td-fact .v{min-width:0;font-size:14px;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.td-fact .ys-chips{padding:1px 0}
.td-fact .ys-chip{height:auto;min-height:20px;line-height:18px;padding:1px 8px;white-space:normal;box-shadow:none}
.td-decs{margin-top:24px}
.td-dec{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.td-dec:last-child{box-shadow:none}
.td-dec .i{font-size:12px;font-weight:600;line-height:22px;color:var(--t3);font-variant-numeric:tabular-nums}
.td-dec .q{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.td-dec .a{margin-top:2px;font-size:14px;line-height:1.5;color:var(--t2)}

/* ---- the audit's problems, a row each ---- */
.td-audit{margin-top:24px}
.td-ar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;gap:4px 16px;align-items:baseline;padding:13px 20px;box-shadow:inset 0 1px 0 var(--line2);font-size:14px}
.td-ar.head{padding:10px 20px;background:var(--foot);box-shadow:none;font-size:12px;font-weight:600;color:var(--t3)}
.td-ar .f{font-weight:500;color:var(--ink)}
.td-ar .e{color:var(--t2)}
.td-ar .p{line-height:1.45;color:var(--ink)}
.td-ar .dt{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--t3);overflow-wrap:anywhere}
.td-ar .a{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.td-ar .a .ys-link{font-size:14px}
.td-ar .ok,.td-ar .un{display:none}
.td-ar .ok{font-size:12px;font-weight:600;color:var(--gt)}
.td-ar.fixed .f,.td-ar.fixed .e,.td-ar.fixed .p{color:var(--t3)}
.td-ar.fixed .ys-link,.td-ar.fixed [data-td-row]{display:none}
.td-ar.fixed .ok,.td-ar.fixed .un{display:inline-flex}

/* ---- a draft's check: the verdict, each thing on its line with its fix, what passed ---- */
.td-verdict{margin-top:24px}
.td-vh{display:flex;align-items:center;gap:10px;padding:15px 20px;font-size:16px;font-weight:600;color:var(--ink)}
.td-vdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--t3)}
.td-vdot.r{background:var(--r-dot)}.td-vdot.a{background:var(--a-dot)}.td-vdot.g{background:var(--gdot)}
.td-vdot.spin{width:14px;height:14px;background:none;border:2px solid var(--line);border-top-color:var(--ink);animation:ys-spin .7s linear infinite}
.td-issue{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 20px;box-shadow:inset 0 1px 0 var(--line2);transition:opacity .2s ease}
.td-issue>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--a-dot)}
.td-issue.fail>i{background:var(--r-dot)}
.td-issue .t{flex:1 1 280px;min-width:0;font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.td-issue .ys-link{flex:none;font-size:14px;white-space:nowrap}
.td-issue form{display:contents}
.td-issue.done{opacity:.45}
.td-verdict.checking .td-issue{opacity:.45}
.td-pass{display:flex;align-items:baseline;gap:12px;padding:12px 20px;background:var(--foot);box-shadow:inset 0 1px 0 var(--line2)}
.td-pass>b{flex:none;font-weight:600;color:var(--gt)}
.td-pass>span{font-size:14px;line-height:1.5;color:var(--t2);overflow-wrap:anywhere}
.td-slow{display:inline-flex;align-items:center;gap:8px;color:var(--t3)}
.td-pass .sep{color:var(--t3)}

/* the emails as built: Both, Phone, Laptop */
.td-mails{margin-top:28px}
.td-mails .td-h2{margin-top:0}
.td-mail{margin-top:16px}
.td-mhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px}
.td-mhead .n{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}
.td-mhead .s{font-size:14px;font-weight:600;color:var(--ink)}
.td-mhead .x{font-size:12px;color:var(--t3)}
.td-frames{justify-content:center}
.td-frames .ys-frame{max-width:100%;border-radius:12px}
.td-frames figure{max-width:100%}
.td-pending{padding:22px 24px;border-radius:12px;background:repeating-linear-gradient(135deg,var(--stripe) 0 10px,var(--soft) 10px 20px);box-shadow:inset 0 0 0 1px var(--line)}
.td-pending b{display:block;font-size:14px;font-weight:600;color:var(--a)}
.td-pending span{display:block;margin-top:2px;font-size:14px;color:var(--t2)}
.td-sms{margin:0;padding:14px 16px;max-width:375px;border-radius:12px;background:var(--card);box-shadow:var(--sh-card);font:14px/1.5 var(--font);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- scheduling: what will happen, the day and the time, the button that names it ---- */
.td-sched{margin-top:20px;padding:22px 24px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1.5px var(--g),0 18px 48px -18px var(--g-glow);animation:ys-in .2s ease-out}
.td-sched-k{font-size:12px;font-weight:600;color:var(--gt)}
.td-sched-what{margin-top:8px;font-size:clamp(17px,1.5vw,19px);line-height:1.45;font-weight:500;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.td-sched-pick{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.td-sched-pick .ys-label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:12px;font-weight:500;color:var(--t2)}
.td-sched-pick .ys-select{min-width:150px;font-weight:500}
.td-sched-pick .ys-field{width:96px;font-weight:500;font-variant-numeric:tabular-nums}
.td-sched-pick .ys-field.bad{box-shadow:inset 0 0 0 1.5px var(--r-dot)}
.td-sched-go{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.td-sched-go .ys-btn.lg{height:40px;padding:0 16px;border-radius:8px;font-weight:600}
.td-sched-form{display:block}

/* ---- copy to approve: the progress, the list, the email, the designer ---- */
.td-dpick b{font-weight:500;color:var(--ink)}
.td-designers{width:260px}
.td-designers .it{display:grid!important;grid-template-columns:minmax(0,1fr) 16px}
.td-designers .nm{display:block;font-size:14px;font-weight:500}
.td-designers .nt{display:block;font-size:12px;color:var(--t3)}
.td-designers .ck{visibility:hidden;color:var(--gt);font-weight:600}
.td-designers .it.on .ck{visibility:visible}
.td-prog{margin-top:22px;display:flex;align-items:center;gap:14px}
.td-prog .c{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.td-prog .segs{flex:1;display:grid;gap:4px}
.td-prog .segs button{height:8px;padding:0;border:0;border-radius:4px;background:var(--kbd-l);cursor:pointer;transition:background .25s ease}
.td-prog .segs button.cur{background:var(--t2)}
.td-prog .segs button.ok{background:var(--gdot)}
.td-prog .segs button.ok.cur{box-shadow:inset 0 0 0 1.5px var(--gt)}
.td-sgrid{margin-top:16px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:20px;align-items:start}
.td-sgrid.one{grid-template-columns:minmax(0,1fr)}
.td-slist{position:sticky;top:72px}
.td-si{display:block;width:100%;white-space:normal;padding:10px 14px 11px;border:0;background:transparent;text-align:left;box-shadow:inset 0 -1px 0 var(--line2);transition:background .12s ease}
.td-si:hover{background:var(--hover2)}
.td-si.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--gt),inset 0 -1px 0 var(--line2)}
.td-si .r1{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:16px}
.td-si .r1 b{font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}
.td-si .r1 .k{color:var(--t3)}
.td-si .r1 .ok{display:none;font-weight:600;color:var(--gt)}
.td-si.ok .r1 .k{display:none}
.td-si.ok .r1 .ok{display:inline}
.td-si .r2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.td-si.ok:not(.on) .r2{color:var(--t3)}
.td-smain{min-width:0}
.td-mtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 20px 0;font-size:12px;color:var(--t3)}
.td-mtop b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.td-mfacts{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 12px;padding:12px 20px 16px;font-size:14px;line-height:1.45}
.td-mfacts .k{font-size:12px;color:var(--t3)}
.td-mfacts .v{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.td-mfacts .v.none{color:var(--t3);font-weight:400}
.td-mfacts .v.miss{color:var(--a);font-weight:400}
.td-mfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 20px;background:var(--foot);box-shadow:inset 0 1px 0 var(--line2)}
.td-mok{display:inline-flex;align-items:center;gap:6px}
.td-mok b{display:inline-flex;align-items:center;height:36px;font-size:14px;font-weight:600;color:var(--gt)}
.td-mfoot .td-grow{flex:1}
.td-mframe{margin-top:16px;display:flex;justify-content:center}
.td-mframe .ys-frame{display:block;width:375px;max-width:100%;height:640px;border-radius:12px;transition:width .25s var(--ease)}
.td-mframe.laptop .ys-frame{width:600px}
.td-mnone{width:100%;padding:40px 24px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.td-mnone b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.td-mnone span{display:block;margin-top:4px;font-size:14px;color:var(--t2)}
.td-mnone .ys-btn{margin-top:16px}
.td-mnav{margin-top:14px;display:flex;justify-content:space-between;gap:12px}

/* ---- a draft's own page ---- */
.td-solo-in{max-width:1072px;margin:0 auto}
.td-solo .td-in{max-width:none;padding:0}

/* ---- the phone's back header and its action bar (only on a phone, with an item open) ---- */
.td-phead,.td-pbar{display:none}

@media (max-width:999px){
  .td-sgrid{grid-template-columns:minmax(0,1fr)}
  .td-slist{display:none}
}
@media (max-width:759px){
  .td{display:block;height:auto}
  .td-list{overflow:visible;box-shadow:none}
  .td-lhead{padding:20px 16px 12px}
  .td-gh{top:52px;padding:14px 16px 6px}
  .td-row{padding:12px 16px 13px}
  .td-drow{padding:11px 16px}
  .td-keys{display:none}
  .td-pane{display:none;overflow:visible}
  .td-in{padding:20px 16px 32px}
  body.td-open .td-list{display:none}
  body.td-open .td-pane{display:block}
  body.td-open .ys-ptop{display:none}
  .td-phead{position:sticky;top:0;z-index:8;height:52px;align-items:center;justify-content:space-between;gap:8px;padding:0 6px;background:var(--bar);box-shadow:inset 0 -1px 0 var(--line)}
  body.td-open .td-phead{display:flex}
  .td-back,.td-ptom{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 10px;border:0;background:transparent;font-size:14px;font-weight:500;color:var(--gt)}
  .td-back span{font-size:22px;line-height:1;margin-top:-2px}
  .td-ptom{color:var(--t2);min-width:72px;justify-content:flex-end}
  .td-phead .pos{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
  .td-pbar{position:sticky;bottom:0;z-index:8;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bar);box-shadow:inset 0 1px 0 var(--line)}
  body.td-open .td-pbar:not([hidden]){display:flex}
  .td-pbar .ys-btn{height:48px;border-radius:10px;font-size:14px}
  .td-pbar .ys-btn.p{flex:1 1 auto;font-weight:600}
  .td-pbar .ys-btn:not(.p){flex:0 1 auto}
  .td-pbar .ys-kbd{display:none}
  .td-item .ys-kbd{display:none}
  body.td-open .td-acts [data-act="p"],body.td-open .td-acts [data-act="s"]{display:none}
  .td-acts .td-tom{display:none}
  .td-compact{display:none!important}
  .td-l1 .ys-track{display:none}
  .td-figs{grid-template-columns:minmax(0,1fr);padding:22px 24px 8px}
  .td-chart{margin:8px 24px 20px}
  .td-next{padding:16px 24px 18px}
  .td-ar.head{display:none}
  .td-ar{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .td-ar .a{justify-content:flex-start;margin-top:4px}
  .td-ar .a .ys-btn{height:44px}
  .td-fact{grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 16px}
  .td-issue{padding:12px 16px}
  .td-issue .ys-link{min-height:44px;display:inline-flex;align-items:center}
  .td-vh,.td-pass{padding-left:16px;padding-right:16px}
  .td-msg,.td-answerbox{padding-left:16px;padding-right:16px}
  .td-card .in,.td-words{padding:18px 16px}
  .td-decided{padding:10px 8px 10px 16px}
  .td-cacts .ys-btn{height:48px;flex:1 1 auto}
  .td-mfacts{grid-template-columns:minmax(0,1fr);gap:0 12px}
  .td-mfacts .k{margin-top:6px}
  .td-mfoot [data-td-approve]{display:none}
  .td-mfoot .td-seg{display:none}
  .td-mframe .ys-frame,.td-mframe.laptop .ys-frame{width:100%}
  .td-sched-go .ys-btn.lg{height:48px;flex:1 1 auto}
  .td-sched-pick .ys-label{flex:1 1 140px}
  .td-sched-pick .ys-select,.td-sched-pick .ys-field{width:100%;height:44px;font-size:16px}
  .td-deliver .ys-field{height:48px;font-size:16px}
  .td-deliver .ys-btn{height:48px;flex:1 1 auto}
  .td-mails .td-seg{display:none}
  .td-solo-in .td-acts [data-act]{display:inline-flex;height:48px}
}
@media (prefers-reduced-motion:reduce){.td-row{transition:none}}

/* The brands area (studio/pages-main.mjs; the handoff 6.3 to 6.5): Brands, a brand's page, its set-up, its account
   audit, Produce and a Klaviyo account with no folder yet. Served after the design system; every colour is a token. */

/* ---- Brands: the list ---- */
.br-search{width:300px;max-width:100%;height:38px;border-radius:9px}
.ys-head:has(.br-search){align-items:center;margin-bottom:0}
.br-group{margin-top:28px}
.br-gh{display:flex;align-items:baseline;gap:8px;margin:0 0 10px 2px;font-size:14px;font-weight:600;color:var(--ink)}
.br-gh .n{font-weight:400;color:var(--t3);font-variant-numeric:tabular-nums}
.br-list{background:var(--card);border-radius:12px;box-shadow:var(--sh-card);overflow:hidden}
.br-th,.br-row:not(.off){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,1.35fr) 104px minmax(0,1.1fr);column-gap:16px;align-items:center}
.br-list.su .br-th,.br-list.su .br-row:not(.off){grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.7fr) 120px}
.br-th{padding:11px 20px;font-size:12px;font-weight:600;color:var(--t3);box-shadow:inset 0 -1px 0 var(--line2)}
.br-th .r{text-align:right}
.br-row{position:relative;padding:14px 20px;row-gap:10px;box-shadow:inset 0 -1px 0 var(--line2);transition:background .12s ease}
.br-row:last-child{box-shadow:none}
.br-row:hover{background:var(--hover2)}
.br-b{min-width:0}
.br-name{display:block;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.br-name:hover{color:var(--ink)}
.br-name::after{content:"";position:absolute;inset:0;z-index:0}
.br-name:focus-visible{outline:0}
.br-name:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px}
.br-sub{margin-top:1px;font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-who{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--t2)}
.br-cell{min-width:0;font-size:14px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.br-camp{min-width:0}
.br-camp-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.br-camp-t b{font-weight:600;color:var(--ink)}
.br-short{font-weight:600;color:var(--a)}
.br-bar{position:relative;margin-top:8px;height:6px;border-radius:3px;background:var(--kbd)}
.br-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.br-bar .p{background:var(--ring2)}
.br-bar .s{background:var(--gdot)}
.br-bar .t{top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--ink)}
.br-wait{font-size:16px;font-weight:600;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.br-wait span{display:none}
.br-flags{display:flex;flex-wrap:wrap;gap:4px 14px;min-width:0}
.br-flag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--t2)}
.br-flag i{width:7px;height:7px;border-radius:50%;background:var(--t3)}
.br-flag.r{color:var(--r)}
.br-flag.r i{background:var(--r-dot)}
.br-row.off{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 20px}
.br-row.off .br-b{flex:1 1 200px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.br-row.off .br-name{display:inline;white-space:normal}
.br-offw{font-size:12px;color:var(--t3)}
.br-go{position:relative;z-index:1}
.br-none{margin-top:28px;padding:28px 20px;border-radius:12px;background:var(--card);box-shadow:var(--sh-card);font-size:14px;color:var(--t2)}

/* ---- a brand: the head, the notice, the figures ---- */
.br-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 24px}
.br-tl{min-width:0}
.br-h1{margin:0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;view-transition-name:page-title}
.br-facts{margin-top:2px;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:13px;line-height:1.45;color:var(--t3)}
.br-facts span+span::before{content:"\00B7";margin-right:8px}
.br-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.br-acts form{display:inline-flex;margin:0}
.br-notice{margin:20px 0 0;flex-wrap:wrap;gap:10px 16px;line-height:1.5}
.br-notice,.br-notice.amber,.br-notice.red{color:var(--ink)}
.br-notice .grow{flex:1 1 320px}
.br-notice form{margin:0}
.br-ndot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--t2)}
.br-notice.amber .br-ndot{background:var(--a-dot)}
.br-notice.red .br-ndot{background:var(--r-dot)}
.br-figs{margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.br-figs .ys-fig,.br-figs .ys-fig:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:inset -1px 0 0 var(--line2),inset 0 -1px 0 var(--line2)}
.br-figs .ys-fig .k{font-weight:600}
.br-figs .ys-fig .v{line-height:1.1}
.br-figs .ys-fig .l{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:14px;color:var(--t2)}
.br-figs .ys-fig .l a,.br-figs .ys-fig .l .ys-link{margin:0;font-size:14px;font-weight:500}
.br-inline{display:inline;margin:0}

/* ---- a brand: two columns, the 14 moments and the sends ---- */
.br-cols{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px 20px;align-items:start}
@media (min-width:1100px){.br-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.br-sec{min-width:0}
.br-sec2{margin-top:28px}
.br-sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 12px 2px}
.br-sh h2{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.br-sh h2 .ys-count{margin-left:8px;font-size:14px;font-weight:400;color:var(--t3);font-variant-numeric:tabular-nums}
.br-sh>span{font-size:14px;font-variant-numeric:tabular-nums}
.ys-none.br-pad,.br-pad{padding:24px 20px;color:var(--t2)}
.br-mcard{padding:16px 18px 14px}
.br-segs,.br-seglab{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.br-seg{display:block;height:28px;border-radius:4px;transition:transform .12s var(--ease)}
.br-seg:hover{transform:translateY(-2px)}
.br-seg.o,.br-sw.o{background:var(--gdot)}
.br-seg.w,.br-sw.w{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gdot)}
.br-seg.b,.br-sw.b{background:var(--ring2)}
.br-seg.e,.br-sw.e{background:repeating-linear-gradient(135deg,var(--a-dot) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--a-ring)}
.br-seg.u{background:var(--kbd);animation:ys-shimmer 1.4s ease-in-out infinite}
.br-seg.x{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.br-seglab{margin-top:6px;font-size:12px;color:var(--t3);white-space:nowrap}
.br-seglab span:last-child{text-align:right}
.br-legend{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--t2)}
.br-legend span{display:inline-flex;align-items:center;gap:6px}
.br-sw{display:inline-block;width:10px;height:10px;border-radius:3px}
.br-gaps,.ys-card+.ys-card.br-gaps{margin-top:12px}
.br-gap{display:flex;align-items:center;gap:6px 16px;padding:13px 14px 13px 18px;box-shadow:inset 0 -1px 0 var(--line2);animation:ys-in .2s ease-out}
.br-gap:last-child{box-shadow:none}
.br-gap .grow,.br-brow .grow,.br-find .grow,.br-prow .grow{flex:1;min-width:0}
.br-bn{font-size:14px;font-weight:600;line-height:20px;color:var(--ink)}
.br-why{font-size:14px;line-height:1.45;color:var(--t2);text-wrap:pretty}
.br-mfoot{margin:8px 0 0 -10px;display:flex;flex-wrap:wrap;gap:4px}
.br-board,.ys-card+.ys-card.br-board{margin-top:4px;animation:ys-in .18s ease-out}
.br-brow{display:flex;align-items:center;gap:2px 16px;padding:10px 12px 10px 18px;box-shadow:inset 0 -1px 0 var(--line2);transition:background .4s ease;scroll-margin:80px}
.br-brow:last-child{box-shadow:none}
.br-brow.hl{background:var(--soft)}
.br-bf{font-size:12px;line-height:16px;color:var(--t3);overflow-wrap:anywhere}
.br-br{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.br-st{font-size:14px;color:var(--t3)}
.br-st.w{color:var(--t2)}
.br-st.e{color:var(--a)}
.br-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;font-size:15px;color:var(--t3);text-decoration:none!important}
.br-ic:hover{background:var(--qh);color:var(--ink)}
.br-sg{padding-bottom:8px;box-shadow:inset 0 -1px 0 var(--line2)}
.br-sg:last-child{box-shadow:none}
.br-sgh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:14px 18px 6px;font-size:12px;font-weight:600;color:var(--t3)}
.br-sgh .ys-t2{font-weight:400}
.br-send{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:8px 18px 9px;color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.br-send:hover{background:var(--hover2);color:var(--ink)}
.br-send .d{font-size:14px;line-height:20px;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.br-send .nm{min-width:0}
.br-send .t{display:block;font-size:14px;line-height:20px;text-wrap:pretty;overflow-wrap:anywhere}
.br-send .s{display:block;font-size:12px;line-height:16px;color:var(--t3)}
.br-send .s.ys-amber{color:var(--a)}
.br-send .r{display:inline-flex;gap:10px;font-size:14px;line-height:20px;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.br-send .r i{font-style:normal;color:var(--t3)}
.br-sge{padding:4px 18px 6px;font-size:14px;color:var(--t2)}
.br-more{padding:6px 18px 2px;font-size:12px;color:var(--t3)}

/* ---- the account audit ---- */
.br-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 20px;padding:12px 16px;border-radius:10px;background:var(--soft);font-size:14px;line-height:1.5;color:var(--t1b)}
.br-note i{flex:none;margin-top:7px;width:7px;height:7px;border-radius:50%;background:var(--t3)}
.br-note a{margin-left:4px;font-weight:500}
.br-places{display:flex;flex-direction:column;gap:12px}
.br-places .ys-card+.ys-card{margin-top:0}
.br-ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.br-ph .grow{flex:1 1 220px;min-width:0}
.br-pn{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.br-pk{display:block;font-size:12px;color:var(--t3)}
.br-pr{display:flex;align-items:center;gap:12px}
.br-pc{font-size:14px;color:var(--t2);white-space:nowrap}
.br-pc.r{font-weight:600;color:var(--r)}
.br-pc.g{font-weight:600;color:var(--gt)}
.br-find{display:flex;align-items:center;gap:4px 16px;padding:11px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.br-find:last-child{box-shadow:none}
.br-find .grow{transition:opacity .2s ease}
.br-ft{font-size:14px;line-height:1.5;color:var(--t1b);overflow-wrap:anywhere}
.br-ft.p{font-weight:600;color:var(--ink)}
.br-fw{font-size:12px;line-height:16px;color:var(--t3);overflow-wrap:anywhere}
.br-pg{color:var(--t3);font-weight:400;text-decoration:none!important}
.br-pg:hover{color:var(--ink)}
.br-fa{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.br-fixed,.br-find .br-unfix{display:none}
.br-find.is-fixed .br-fix{display:none}
.br-find.is-fixed .br-fixed{display:inline;font-size:14px;font-weight:600;color:var(--gt);white-space:nowrap}
.br-find.is-fixed .br-unfix{display:inline-flex}
.br-find.is-fixed .grow{opacity:.6}
.br-find.is-fixed .br-ft{color:var(--t3)}
.br-about{margin:20px 0 0;max-width:720px;font-size:14px;line-height:1.6;color:var(--t3)}
.br-skel{display:flex;flex-direction:column;gap:12px}
.br-skel div{border-radius:12px;background:var(--card);box-shadow:var(--sh-card);animation:ys-shimmer 1.4s ease-in-out infinite}

/* ---- set-up ---- */
.br-narrow{max-width:780px}
.br-narrow>.br-sec2:first-child{margin-top:0}
.br-h2{margin:0 0 10px 2px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.ys-card.br-su{overflow:visible}
.br-su>*{box-shadow:inset 0 -1px 0 var(--line2)}
.br-su>*:last-child{box-shadow:none}
.br-su-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 20px}
.br-k{font-size:14px;font-weight:600;color:var(--ink)}
.br-l{font-size:14px;color:var(--t2);text-wrap:pretty}
.br-ctl{justify-self:end}
.br-pick{min-width:180px;justify-content:space-between}
.br-caret{font-size:9px;color:var(--t3)}
.ys-pop.br-menu{top:42px;width:240px;max-height:320px;overflow-y:auto}
.br-menu .ck{color:var(--gt);font-weight:600;visibility:hidden}
.br-menu .it.on .ck{visibility:visible}
.br-step{justify-self:end;display:inline-flex;align-items:center;border-radius:8px;box-shadow:inset 0 0 0 1px var(--ring)}
.br-step button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:16px;transition:background .12s ease}
.br-step button:hover{background:var(--qh)}
.br-step span{min-width:40px;text-align:center;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.br-step.unset span{font-size:14px;font-weight:500;color:var(--t3)}
.br-p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.br-keyacts{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.br-keyacts form{margin:0}
.br-keyform{margin:12px 0 0}
.br-keyform .br-l{margin:0}
.br-keyrow{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.br-keyrow .ys-field{flex:1 1 260px;width:auto;min-width:0}

/* ---- Produce ---- */
.br-read{max-width:840px}
.br-prow{display:flex;align-items:center;gap:14px;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2);cursor:pointer;transition:background .12s ease}
.br-prow:hover{background:var(--hover2)}
.br-prow input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--g)}
.br-prow .br-bn,.br-prow .br-bf{display:block}
.br-prow .br-bf{font-size:13px;line-height:18px}
.br-pgo{margin-top:16px;display:flex;align-items:center;justify-content:flex-end;gap:12px}

/* ---- a phone: one column, names whole, 44px targets ---- */
@media (max-width:759px){
  .ys-head:has(.br-search) .ys-acts{width:100%}
  .br-search{width:100%}
  .br-th{display:none}
  .br-row:not(.off),.br-list.su .br-row:not(.off){display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px 20px}
  .br-name,.br-sub{white-space:normal;overflow:visible}
  .br-cell{white-space:normal}
  .br-cell[data-k]::before{content:attr(data-k) ": ";color:var(--t3)}
  .br-num{text-align:left}
  .br-wait{text-align:left;font-size:15px}
  .br-wait span{display:inline}
  .br-wait:empty,.br-flags:empty{display:none}
  .br-row.off .br-go .ys-btn{height:44px}
  .br-acts{width:100%}
  .br-acts .ys-btn,.br-notice .ys-btn,.br-gap .ys-btn,.br-mfoot .ys-btn,.br-pr .ys-btn,.br-keyacts .ys-btn,.br-keyrow .ys-btn,.br-pgo .ys-btn{min-height:44px}
  .br-step button{width:44px;height:44px}
  .br-ic{width:44px;height:44px}
  .br-seglab{font-size:11px}
  .br-gap,.br-brow{flex-wrap:wrap}
  .br-br{width:100%;justify-content:flex-start}
  .br-send{grid-template-columns:72px minmax(0,1fr) auto;padding:10px 16px}
  .br-su-row{grid-template-columns:minmax(0,1fr)}
  .br-ctl,.br-step{justify-self:start}
  .br-pick{min-height:44px}
  .br-find{flex-wrap:wrap}
  .br-fa{width:100%;justify-content:flex-start;margin-left:-12px}
  .br-fa .ys-btn{min-height:44px}
  .br-pgo .ys-btn{width:100%}
}

/* Making things (studio/pages.mjs, pages-making.mjs, pages-skills.mjs, pages-evals.mjs, ask.mjs), the redesign of
   24 October 2026: Make something, one thing to make, a run, the flow writer, a flow and its designer view, a campaign's
   and a pop-up's copy, the brand book and its decisions, a question, and the library (Playbooks, Skills, Model
   comparisons). Every class starts mk-; the tokens and the ys- pieces are the design system's (public/studio.css). */

/* ---- columns, cards, words ---- */
.mk-narrow{max-width:880px}
.mk-col{max-width:780px;display:flex;flex-direction:column;gap:12px}
.mk-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:24px;align-items:start}
.mk-colw{min-width:0;display:flex;flex-direction:column;gap:12px}
.mk-col>.ys-card+.ys-card,.mk-colw>.ys-card+.ys-card,.mk-colw>*+.ys-card,.mk-two>.ys-card+.ys-card,.mk-decs>.ys-card+.ys-card,.mk-themes>.ys-card+.ys-card,.mk-swatches>.ys-card+.ys-card,.mk-pops>.ys-card+.ys-card,.mk-aside .ys-card+.ys-card,.mk-cmpc>.ys-card+.ys-card{margin-top:0}
.mk-pad{padding:20px}
.mk-ct{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.mk-ct.sm{font-size:15px}
.mk-cs{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--t2);text-wrap:pretty}
.mk-hint{font-size:13px;line-height:1.4;color:var(--t3)}
.mk-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.mk-go form{margin:0}
.mk-lab{font-size:12px;font-weight:600;color:var(--t3)}
.mk-qn{font-size:12px;line-height:16px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}
.mk-qt{margin-top:4px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);text-wrap:pretty}
.mk-over{margin:0 0 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--t3)}
.mk-cardh{padding:16px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-cardf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px 20px}
.mk-cardf form{margin:0}
.mk-emptycard{display:flex;flex-direction:column;gap:6px;padding:22px 20px}
.mk-emptycard b{font-size:15px;font-weight:600;color:var(--ink)}
.mk-emptycard span{font-size:14px;line-height:1.5;color:var(--t2)}
.mk-foot{margin:14px 4px 0;font-size:13px;color:var(--t3)}
.mk-sec{margin-top:28px}
.mk-sec:first-child{margin-top:0}
.mk-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 10px 2px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.mk-gh span{font-size:13px;font-weight:400;color:var(--t3)}
.mk-ghs{justify-content:space-between}
.mk-ghs span{font-size:12px}
.mk-sideh{margin:0 0 10px 2px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.mk-ul{margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:var(--t1b)}
.mk-ul li+li{margin-top:4px}
.mk-ul.warn{color:var(--a)}
.mk-raw{display:block;margin-top:4px;font:12px/1.5 var(--mono);color:var(--t3);white-space:pre-wrap;overflow-wrap:anywhere}
pre.mk-raw{max-height:320px;overflow:auto;margin:8px 0 0;padding:10px 12px;border-radius:8px;background:var(--field)}
.mk-fold{margin-top:4px}
.mk-fold.in{margin-top:12px}
.mk-fold>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:13px;font-weight:500;color:var(--t2);padding:4px 0}
.mk-fold>summary::-webkit-details-marker{display:none}
.mk-fold>summary::before{content:"\203A";display:inline-block;transition:transform .12s var(--ease);color:var(--t3)}
.mk-fold[open]>summary::before{transform:rotate(90deg)}
.mk-fold>summary:hover{color:var(--ink)}
.mk-fold>.mk-md{margin-top:8px}
.mk-md{font-size:14px;line-height:1.6;color:var(--t1b)}
.mk-md .md>*:first-child{margin-top:0}
.mk-md p{margin:0 0 10px}
.mk-md h2,.mk-md h3,.mk-md h4,.mk-md h5{margin:16px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.mk-md ul,.mk-md ol{margin:0 0 10px;padding-left:20px}
.mk-md li+li{margin-top:3px}
.mk-md strong{color:var(--ink);font-weight:600}
.mk-md code{font:12.5px var(--mono);color:var(--t1b)}
.mk-md blockquote{margin:0 0 10px;padding:2px 0 2px 12px;box-shadow:inset 2px 0 0 var(--ring);color:var(--t2)}
.mk-md .tablewrap{overflow-x:auto;margin:0 0 10px}
.mk-md table{border-collapse:collapse;font-size:13px}
.mk-md th,.mk-md td{padding:6px 10px;text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-md th{color:var(--t3);font-weight:500}
.mk-md pre.code{overflow:auto;padding:10px 12px;border-radius:8px;background:var(--field)}
.mk-bn{display:block;font-size:14px;font-weight:600;color:var(--ink)}
a.mk-bn:hover{color:var(--ink)}
.ys-rows .s{display:block}
@media (max-width:999px){.mk-two{grid-template-columns:minmax(0,1fr)}}

/* ---- facts beside the work (a run, one thing to make) ---- */
.mk-facts2>div{display:flex;justify-content:space-between;gap:16px;padding:11px 18px;box-shadow:inset 0 -1px 0 var(--line2);font-size:14px;line-height:1.45}
.mk-facts2>div:last-child{box-shadow:none}
.mk-facts2>div>span{flex:none;color:var(--t3)}
.mk-facts2>div>b{font-weight:400;text-align:right;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.mk-facts2 .mk-facts-f{display:block;padding:8px 10px}

/* ---- something working: a spinner, what it does, its plain steps ---- */
.mk-work{padding:18px 20px}
.mk-work-h{display:flex;align-items:center;gap:10px}
.mk-work-h b{font-size:16px;font-weight:600;line-height:1.3}
.mk-count{margin-left:auto;font-size:14px;color:var(--t3);font-variant-numeric:tabular-nums}
.mk-work>.mk-cs{margin-top:6px}
.mk-plain{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.mk-plain:empty{display:none}
.mk-plain li{display:flex;align-items:center;gap:12px;min-height:30px;font-size:14px;line-height:1.4;color:var(--t2);animation:ys-in .2s ease-out}
.mk-plain li i{flex:none;width:16px;text-align:center;font-style:normal;font-weight:600}
.mk-plain li.done i::before{content:"\2713";color:var(--gt)}
.mk-plain li.now{color:var(--ink);font-weight:500}
.mk-plain li.now i::before{content:"\2022";color:var(--ink)}
.mk-done .mk-ok{font-size:14px;font-weight:600;color:var(--gt)}
.mk-sum{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.mk-made .mk-file{display:block;margin-top:2px;font:11px/1.4 var(--mono);color:var(--t3);overflow-wrap:anywhere}

/* ---- Make something ---- */
.mk-nhead{margin-bottom:28px}
.mk-nhead h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.mk-pickw{display:inline-block}
.mk-pick{display:inline-flex;align-items:baseline;gap:8px;padding:0 2px;border:0;border-radius:0;background:transparent;font:inherit;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.022em;color:var(--gt);box-shadow:inset 0 -2px 0 var(--g-ring);transition:box-shadow .12s ease}
.mk-pick:hover,.mk-pick[aria-expanded="true"]{box-shadow:inset 0 -2px 0 var(--gt)}
.mk-pick span{font-size:12px}
.mk-bmenu{width:260px;max-height:60vh;overflow-y:auto;font-size:14px;letter-spacing:0;font-weight:400}
.mk-bmenu a.on{background:var(--sel)}
.mk-lead{margin-top:6px;font-size:14px;line-height:1.5;color:var(--t2)}
.mk-thing{box-shadow:inset 0 -1px 0 var(--line2)}
.mk-thing:last-child{box-shadow:none}
.mk-thing-r{display:flex;align-items:center;gap:8px 16px;min-height:56px;padding:12px 18px}
.mk-thing-r .grow{flex:1;min-width:0}
.mk-thing .t{font-size:14px;font-weight:600;line-height:20px;color:var(--ink)}
.mk-thing .s{font-size:12px;line-height:18px;color:var(--t3);text-wrap:pretty}
.mk-thing.next .mk-thing-r{padding:14px 18px}
.mk-thing.next .t{font-size:16px;line-height:1.35}
.mk-thing.next .s{margin-top:2px;font-size:14px;line-height:1.45;color:var(--t2)}
.mk-thing-a{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap}
.mk-state{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--t3);text-decoration:none!important}
a.mk-state:hover{color:var(--ink)}
.mk-state.run{font-size:12px;font-weight:500;color:var(--t2)}
.mk-state.need{color:var(--a)}
.mk-start{display:flex;flex-direction:column;gap:10px;padding:0 18px 16px;animation:ys-in .16s ease-out}
.mk-start .mk-go{margin-top:2px}
.mk-start.mk-pad{padding:20px;animation:none}
.mk-start .ys-label{margin:0}
.mk-file{padding:6px 10px;height:auto}
.mk-todo2{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px}
.mk-offcard{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:22px 20px;font-size:14px;color:var(--t2)}

/* ---- the flow writer: the five steps, the brief, the questions, the plan, the review ---- */
.mk-steps{list-style:none;margin:-8px 0 24px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:780px}
.mk-steps li,.mk-steps a{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none!important}
.mk-steps i{display:block;height:4px;border-radius:2px;background:var(--kbd);transition:background .3s ease}
.mk-steps span{font-size:12px;font-weight:600;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-steps li.done i{background:var(--gdot)}
.mk-steps li.done span,.mk-steps li.now span{color:var(--ink)}
.mk-steps li.now i{background:var(--ink)}
.mk-steps a:hover span{color:var(--gt)}
.mk-facts{display:grid;gap:14px;margin:16px 0 18px}
.mk-facts dt{font-size:12px;font-weight:600;color:var(--t3)}
.mk-facts dd{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--ink)}
.mk-q{padding:18px 20px}
.mk-opts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.mk-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 14px;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;line-height:1.45;color:var(--ink);text-align:left;transition:background .12s ease,box-shadow .12s ease}
.mk-opt:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--ring2)}
.mk-opt.on{background:var(--g-bg);box-shadow:inset 0 0 0 1.5px var(--gdot)}
.mk-opt>span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.mk-sug{font-size:11px;font-weight:600;color:var(--gt)}
.mk-own{margin-top:10px;min-height:56px}
.mk-prow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-prow .w{font-size:14px;line-height:1.45;color:var(--t2);font-variant-numeric:tabular-nums}
.mk-prow .t{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.mk-prow .t .n{margin-right:8px;font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums}
.mk-prow .s{font-size:14px;line-height:1.5;color:var(--t2)}
.mk-prow .b{margin-top:4px;font-size:13px;color:var(--t3)}
.mk-prow form{margin:10px 0 0}
.mk-prow.note{background:var(--foot)}
.mk-chg{display:flex;flex-direction:column;gap:8px;margin:0 20px 18px}
.mk-chg .mk-go{margin-top:0}
.mk-chg.in{margin:12px 0 0}
.mk-side .mk-said{margin-top:14px}
.mk-said p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--t1b);overflow-wrap:anywhere}
.mk-big{margin-top:4px;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-side .ys-rows>*{padding:8px 20px;min-height:40px}
.mk-arth{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-artt{display:block;margin-top:2px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.mk-arta{display:flex;align-items:center;gap:8px}
.mk-artn{padding:12px 20px 0}
.mk-art .mk-chg.in{margin:12px 20px 0}
.mk-artb{padding:14px 20px 20px}

/* ---- a flow's emails: the list, the open email, the designer's column ---- */
.mk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.mk-reader{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.mk-rlist{position:sticky;top:76px;padding:8px}
.mk-rlist .mk-lab{padding:6px 10px 8px}
.mk-ri{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--ink);transition:background .12s ease}
.mk-ri:hover{background:var(--hover)}
.mk-ri.on{background:var(--sel);box-shadow:inset 3px 0 0 var(--g)}
.mk-ri .n{flex:none;width:24px;font:500 12px/20px var(--mono);color:var(--t3)}
.mk-ri .grow{min-width:0}
.mk-ri .t{display:block;font-size:14px;font-weight:500;line-height:20px}
.mk-ri .s{display:block;font-size:12px;line-height:16px;color:var(--t3)}
.mk-rmain{min-width:0}
.mk-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:0 0 10px;font-size:13px;color:var(--t3)}
.mk-nav{display:flex;gap:2px}
.mk-nav .ys-iconbtn{font-size:20px;line-height:1}
.mk-rv{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;animation:ys-in .16s ease-out}
.mk-rv.des{grid-template-columns:minmax(0,1fr) 280px}
.mk-rv-main{min-width:0}
.mk-meta{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;margin:0 0 12px;font-size:14px;line-height:1.45}
.mk-meta dt{color:var(--t3)}
.mk-meta dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:anywhere}
.mk-meta dd.sj{font-weight:600}
.mk-meta.pad{margin:0;padding:16px 20px}
.mk-meta.sm{grid-template-columns:60px minmax(0,1fr);margin:12px 0 0}
.mk-canvas{display:flex;justify-content:center;padding:20px;border-radius:12px;background:var(--soft)}
.mk-frame{display:block;width:100%;max-width:600px;height:640px;border:0;border-radius:8px;background:#fff;box-shadow:var(--sh-frame)}
.mk-sized[data-show="phone"] .mk-frame{max-width:375px}
.mk-sized[data-show="laptop"] .mk-frame{max-width:600px}
.mk-wbar{display:flex;justify-content:flex-end}
.mk-sms{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px}
.mk-sms .bubble{max-width:340px;padding:10px 14px;border-radius:18px;background:#e9e9eb;color:#111;font:14px/1.4 var(--font)}
.mk-sms .bubble .optout{color:#6c6c70;font-size:12px}
.mk-sms .sms-path{margin:0 0 4px 6px;font-size:11px;color:var(--t3)}
.mk-sms pre.sms{margin:0;white-space:pre-wrap;padding:12px 14px;border-radius:8px;background:var(--card);font:13px/1.5 var(--mono);color:var(--ink)}
.mk-dside{display:flex;flex-direction:column;gap:18px;font-size:14px}
.mk-dside p{margin:6px 0 0;line-height:1.5;color:var(--t1b)}
.mk-sl{display:flex;gap:10px;padding:5px 0;font-size:14px;line-height:1.45;color:var(--ink)}
.mk-sl span{flex:none;font:500 11px/20px var(--mono);color:var(--t3)}
.mk-fr{display:flex;align-items:center;gap:8px;margin-top:6px}
.mk-fr code{flex:1;min-width:0;font:12px/1.4 var(--mono);color:var(--t1b);overflow-wrap:anywhere}
@media (max-width:999px){
  .mk-reader{grid-template-columns:minmax(0,1fr)}
  .mk-rlist{position:static;display:flex;gap:4px;overflow-x:auto;padding:6px}
  .mk-rlist .mk-lab{display:none}
  .mk-ri{flex:none;width:auto;max-width:240px}
  .mk-rv.des{grid-template-columns:minmax(0,1fr)}
}

/* ---- the designer's link: the reader alone, nothing around it ---- */
.ys-bare .col:has(.mk-view){max-width:1200px}
.ys-bare .ys-bare-in:has(.mk-view){align-items:flex-start;padding:0 clamp(16px,3vw,40px) 96px}
.mk-view-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px}
.mk-view-top .ys-logo img{height:14px;width:43px}

/* ---- the library: Playbooks and Skills rows, one line each on a laptop ---- */
.mk-lrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 150px 12px;gap:4px 20px;align-items:center;padding:14px 20px;box-shadow:inset 0 -1px 0 var(--line2);color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.mk-lrow:last-child{box-shadow:none}
.mk-lrow:hover{background:var(--hover2);color:var(--ink)}
.mk-l1{min-width:0}
.mk-l1 .m{display:block;font-size:12px;line-height:16px;font-weight:600;color:var(--t3)}
.mk-l1 .t{display:block;font-size:14px;font-weight:600;line-height:20px}
.mk-l2{min-width:0;font-size:14px;line-height:20px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-l3{font-size:14px;color:var(--t2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-l3.ys-amber{color:var(--a)}
.mk-lrow .chev{font-size:16px;color:var(--t3)}
.mk-lrow.sk{grid-template-columns:240px minmax(0,1fr) 220px;padding:12px 20px}
.mk-lrow.sk .mk-l3{font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis}
.mk-shead{align-items:center}
.mk-find{width:300px;max-width:100%;flex:0 1 300px}
@media (max-width:759px){
  .mk-lrow,.mk-lrow.sk{grid-template-columns:minmax(0,1fr) 12px;gap:2px 12px}
  .mk-lrow .mk-l1{grid-column:1;grid-row:1}
  .mk-lrow .chev{grid-column:2;grid-row:1}
  .mk-l2{grid-column:1;white-space:normal;overflow:visible}
  .mk-l3,.mk-lrow.sk .mk-l3{grid-column:1;text-align:left}
  .mk-find{width:100%;flex:1 1 100%}
}
.mk-pbe-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mk-pbe .mk-md{margin-top:6px}
.mk-pbe .mk-meta{margin:12px 0 0}
.mk-pbe .ys-link{margin-top:10px;font-size:13px}
.mk-noteb{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--soft);font-size:14px;line-height:1.5;color:var(--t1b)}
.mk-aside{min-width:0;display:flex;flex-direction:column;gap:20px;position:sticky;top:76px}
.mk-when{padding:12px 20px}
.mk-when>div{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:32px;font-size:14px}
.mk-when i{justify-self:center;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--t2)}
.mk-onb>*{padding:10px 12px 10px 18px}
.mk-onb .s{display:block;font-size:14px;color:var(--t2)}
.mk-prop{margin:-8px 0 20px;max-width:780px}
.mk-prop .ys-fb{margin-top:0}
.mk-runs>a{padding:10px 18px}
.mk-runs .s{font-size:12px;color:var(--t3)}
.mk-runst{flex:none;font-size:14px;color:var(--t2)}
.mk-runst.running{color:var(--ink)}
.mk-segwrap{max-width:100%;overflow-x:auto}
.mk-segwrap .ys-seg{flex-wrap:nowrap}
.mk-wiz{margin:0 0 6px}

/* ---- Model comparisons ---- */
.mk-evform{margin-bottom:8px}
.mk-evgrid{display:grid;grid-template-columns:minmax(0,1.6fr) 120px minmax(0,1.4fr);gap:18px 24px;align-items:start}
.mk-models{display:flex;flex-wrap:wrap;gap:6px}
.mk-models label{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;transition:background .12s ease,box-shadow .12s ease,color .12s ease}
.mk-models label.on{background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);color:var(--gt)}
.mk-models label.on span::before{content:"\2713  "}
.mk-models input{position:absolute;opacity:0;pointer-events:none}
.mk-verdict{padding:18px 20px;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink);text-wrap:pretty;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-trow{display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 110px 90px;gap:4px 16px;align-items:center;padding:12px 20px;box-shadow:inset 0 -1px 0 var(--line2);font-size:14px;font-variant-numeric:tabular-nums}
.mk-trow:last-child{box-shadow:none}
.mk-trow>span:not(:first-child){text-align:right}
.mk-thead{padding:10px 20px;font-size:12px;font-weight:600;color:var(--t3)}
.mk-tpick{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.mk-bar6{position:relative;width:44px;height:6px;border-radius:3px;background:var(--kbd);overflow:hidden}
.mk-bar6 i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--gdot)}
.mk-ph{display:none}
.mk-evlist>a{padding:12px 20px}
.mk-evlist .s{font-size:12px;color:var(--t3)}
.mk-evst{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.mk-cmp{display:grid;grid-template-columns:repeat(var(--n,3),minmax(300px,1fr));gap:16px;align-items:start;overflow-x:auto;padding-bottom:8px}
.mk-cmp[data-show="laptop"]{grid-template-columns:repeat(var(--n,3),600px)}
.mk-cmpc{min-width:0;display:flex;flex-direction:column;gap:12px}
.mk-cmpc>.ys-card.best{box-shadow:0 0 0 1.5px var(--gdot)}
.mk-cmph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.mk-cmph form{margin:0}
.mk-cmpc .mk-frame{max-width:none;border-radius:12px}
.mk-finds{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.mk-finds div{display:flex;gap:8px;font-size:14px;line-height:1.45;color:var(--t2)}
.mk-finds i{flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--t3)}
.mk-finds .g{color:var(--gt)}.mk-finds .g i{background:var(--gdot)}
.mk-finds .r{color:var(--r)}.mk-finds .r i{background:var(--r-dot)}
@media (max-width:759px){
  .mk-evgrid{grid-template-columns:minmax(0,1fr)}
  .mk-thead{display:none}
  .mk-trow{grid-template-columns:minmax(0,1fr)}
  .mk-trow>span:not(:first-child){text-align:left}
  .mk-tpick{justify-content:flex-start}
  .mk-ph{display:inline}
  .mk-cmp{grid-template-columns:repeat(var(--n,3),minmax(300px,86vw))}
}

/* ---- the brand book: the index on the side, then each part ---- */
.mk-dnote{margin:-8px 0 0}
.mk-book{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px 40px;align-items:start;margin-top:28px}
.mk-toc{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
.mk-toc a{display:block;padding:6px 10px;border-radius:7px;font-size:14px;color:var(--t2);text-decoration:none}
.mk-toc a:hover{background:var(--qh);color:var(--ink);text-decoration:none}
.mk-bbody{min-width:0;display:flex;flex-direction:column;gap:36px}
.mk-bsec{scroll-margin-top:80px}
.mk-bh{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.mk-bcell{padding:16px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-bcell:last-child{box-shadow:none}
.mk-speaks{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.mk-bwords{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));box-shadow:inset 0 -1px 0 var(--line2)}
.mk-bwords .mk-bcell{box-shadow:none}
.mk-words{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mk-w{padding:2px 10px;border-radius:6px;font-size:14px;line-height:1.5}
.mk-w.ok{background:var(--g-bg);color:var(--gt)}
.mk-w.no{background:var(--r-bg);color:var(--r);text-decoration:line-through;text-decoration-color:var(--r-dot)}
.mk-move{margin-top:10px}
.mk-move b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.mk-move span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--t1b)}
.mk-rule{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 20px;box-shadow:inset 0 -1px 0 var(--line2)}
.mk-rule:last-child{box-shadow:none}
.mk-rule .n{font-size:12px;line-height:22px;color:var(--t3);font-variant-numeric:tabular-nums}
.mk-rule b{display:block;font-size:14px;font-weight:600;line-height:22px;color:var(--ink)}
.mk-rule div>span{display:block;font-size:14px;line-height:1.5;color:var(--t2);text-wrap:pretty}
.mk-code{display:grid;grid-template-columns:130px minmax(0,1.4fr) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:12px 20px;box-shadow:inset 0 -1px 0 var(--line2);font-size:14px;line-height:1.5}
.mk-code:last-child{box-shadow:none}
.mk-code .c{font-family:var(--mono);font-weight:500;color:var(--ink)}
.mk-claims{box-shadow:inset 0 -1px 0 var(--line2)}
.mk-claims:last-child{box-shadow:none}
.mk-claims>summary{display:flex;align-items:center;gap:12px;padding:13px 20px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ink);transition:background .12s ease}
.mk-claims>summary::-webkit-details-marker{display:none}
.mk-claims>summary:hover{background:var(--hover2)}
.mk-claims>summary>span:first-child{flex:1;min-width:0}
.mk-claims>summary>span+span{font-weight:400}
.mk-claims>summary::after{content:"\25BE";font-size:12px;color:var(--t3)}
.mk-claims[open]>summary::after{content:"\25B4"}
.mk-claims>div{padding:0 20px 12px;animation:ys-in .16s ease-out}
.mk-claims>div.mk-in{padding:0}
.mk-claim{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:8px 0;box-shadow:inset 0 1px 0 var(--line2);font-size:14px;line-height:1.5}
.mk-claim .t{flex:1 1 300px;color:var(--ink)}
.mk-claim .v{white-space:nowrap;color:var(--t2)}
.mk-claim.a .v{color:var(--a)}
.mk-claim.x .t{color:var(--t3);text-decoration:line-through}
.mk-claim.x .v{color:var(--r)}
.mk-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.mk-theme{padding:16px 18px}
.mk-theme b{font-size:14px;font-weight:600;color:var(--ink)}
.mk-theme p{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--t1b)}
.mk-theme p span{display:block;margin-top:2px;font-size:12px;color:var(--t3)}
.mk-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:2px 16px;padding:11px 20px;box-shadow:inset 0 -1px 0 var(--line2);font-size:14px;line-height:1.45}
.mk-link:last-child{box-shadow:none}
.mk-link a{overflow-wrap:anywhere}
.mk-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.mk-sw{height:72px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.mk-swl{padding:10px 14px}
.mk-swl b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.mk-swl span{font:12px var(--mono);color:var(--t3)}
@media (max-width:999px){.mk-book{grid-template-columns:minmax(0,1fr)}.mk-toc{display:none}}
@media (max-width:759px){.mk-code{grid-template-columns:minmax(0,1fr)}.mk-link{grid-template-columns:minmax(0,1fr)}}

/* ---- the decisions the brand book took ---- */
.mk-decs{display:flex;flex-direction:column;gap:12px;max-width:780px}
.mk-dec{padding:18px 20px}
.mk-chose{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink)}
.mk-dec-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mk-dec-acts form{margin:0}
.mk-dec-done{display:none;margin-top:12px;font-size:14px}
.mk-dec.is-done .mk-dec-done{display:flex;animation:ys-in .16s ease-out}
.mk-dec.is-done .mk-dec-acts,.mk-dec.is-done .mk-chg{display:none!important}

/* ---- a pop-up's copy, screen by screen, as it shows ---- */
.mk-pops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start;margin-bottom:8px}
.mk-popw{padding:16px 18px}
.mk-popc{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:22px 20px;border-radius:10px;background:#fff;color:#1f1f1f;box-shadow:var(--sh-frame);font-family:Arial,Helvetica,sans-serif}
.mk-popc .h{font-size:20px;font-weight:700;line-height:1.25;text-align:center}
.mk-popc .p{font-size:14px;line-height:1.45;text-align:center;color:#333}
.mk-popc .opt{padding:10px 12px;border:1px solid #d6d6d6;border-radius:8px;font-size:14px;text-align:center}
.mk-popc .fld{padding:10px 12px;border:1px solid #c8c8c8;border-radius:6px;font-size:14px;color:#888}
.mk-popc .cta{padding:12px;border-radius:8px;color:#fff;font-size:15px;font-weight:700;text-align:center}
.mk-popc .no{font-size:12px;color:#777;text-align:center;text-decoration:underline}
.mk-popc .li{position:relative;padding-left:16px;font-size:14px;line-height:1.45}
.mk-popc .li::before{content:"\2022";position:absolute;left:2px}
.mk-popc .blk{padding:10px;border:1px dashed #bbb;border-radius:6px;font:12px ui-monospace,Menlo,monospace;color:#555;text-align:center}
.mk-popc .nt{padding:6px 10px;border-radius:6px;background:#fff7d6;font-size:12px;line-height:1.4;color:#5c4a14}

/* ---- a question about a brand ---- */
.mk-answer .mk-work-h b{font-size:15px}
.mk-askf{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px}
.mk-askin{flex:1;min-width:0;height:36px;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
.mk-askin::placeholder{color:var(--t3)}
.mk-askf:focus-within{box-shadow:var(--sh-card),0 0 0 3px var(--g-bg)}
.mk-col>.ys-fb{margin-top:0}

/* ---- not found ---- */
.mk-404{padding-top:12vh}
.mk-404n{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--t3)}

/* ---- a phone: everything in one column, buttons 48px, targets 44px ---- */
@media (max-width:759px){
  .mk-thing-r{padding:12px 16px}
  .mk-thing-a{flex-wrap:wrap;justify-content:flex-end;gap:6px 10px;white-space:normal}
  .mk-thing-a .ys-btn{height:44px}
  .mk-go .ys-btn,.mk-cardf .ys-btn,.mk-start .ys-btn{height:48px}
  .mk-start .mk-go .ys-btn.p{flex:1 1 100%}
  .mk-todo2{grid-template-columns:minmax(0,1fr)}
  .mk-prow{grid-template-columns:minmax(0,1fr)}
  .mk-meta{grid-template-columns:64px minmax(0,1fr)}
  .mk-canvas{padding:8px}
  .mk-steps{gap:4px}
  .mk-steps span{font-size:11px}
  .mk-ri{min-height:44px}
  .mk-toc a,.mk-claims>summary{min-height:44px}
  .mk-pick{font-size:20px}
  .ys-head .ys-acts .ys-btn{height:44px}
}

/* Production (studio/pages-production.mjs, pages-record.mjs): Design, the designers' queue; a task's own page, the record.
   The redesign of 24 October 2026: the sizes, gaps and colours of the handoff's Design view and of Today's open item. */

/* ---- Design: the switch, the groups, the rows ---- */
.pr-seg{flex:none;max-width:100%;overflow-x:auto}
.pr-seg a{height:30px;font-size:14px}
.pr-design{display:flow-root;margin-top:-24px}
.pr-group{margin-top:28px}
.pr-gh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0 0 10px 2px}
.pr-gh .l{font-size:16px;font-weight:600;color:var(--ink)}
.pr-gh .c{font-size:14px;color:var(--t3);font-variant-numeric:tabular-nums}
.pr-gh .n{font-size:12px;color:var(--t3)}
.pr-gh .n:empty{display:none}
.ys-card.pr-rows{overflow:visible}
.pr-row{box-shadow:inset 0 -1px 0 var(--line2);transition:max-height .26s var(--ease),opacity .2s var(--ease)}
.pr-row:last-child{box-shadow:none}
.pr-row.pr-going{max-height:0!important;opacity:0;overflow:hidden}
.pr-row.pr-arrive{animation:ys-in .2s var(--ease)}
.pr-rowin{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:12px 18px}
.pr-due{font-size:12px;font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-due.late{color:var(--r);font-weight:600}
.pr-due.soon{color:var(--ink);font-weight:600}
.pr-what{min-width:0}
.pr-what .t{display:block;font-size:14px;font-weight:600;line-height:20px;color:var(--ink);overflow-wrap:anywhere;transition:color .12s ease}
.pr-what a.t:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ring2);text-underline-offset:3px}
.pr-what .s{font-size:12px;line-height:18px;color:var(--t3)}
.pr-row:not([data-state="waiting"]) .pr-what .t{color:var(--t2)}
.pr-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px}
.pr-wait{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px}
.pr-acts .ys-btn.pr-b{height:32px;padding:0 10px;font-size:14px}
.pr-acts .ys-btn.q.pr-b{color:var(--t2)}
.pr-acts .ys-btn.q.pr-b:hover{color:var(--ink)}
.pr-building{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--t2);white-space:nowrap}
.pr-built{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pr-built b{font-size:12px;font-weight:600;color:var(--gt)}
.pr-menu{width:240px}
.pr-menu .it .n{font-size:12px;color:var(--t3);white-space:nowrap}
.pr-deliver{padding:0 18px 14px;animation:ys-in .16s var(--ease)}
.pr-deliver .pr-in{display:flex;flex-wrap:wrap;gap:8px}
.pr-deliver .ys-field{flex:1 1 320px;min-width:0}
.pr-deliver .ys-btn{height:38px}
.pr-deliver.bad .ys-field{box-shadow:inset 0 0 0 1.5px var(--r-dot)}
.pr-deliver .err{margin-top:6px;font-size:12px;font-weight:500;color:var(--r)}
.pr-deliver .hint{margin-top:6px;font-size:12px;color:var(--t3)}
.pr-row.open .pr-wait{display:none}
.pr-design[data-read] .pr-rowin{grid-template-columns:112px minmax(0,1fr) auto}
.pr-clear{padding-top:72px}
.pr-foot{margin:24px 2px 0;font-size:13px;color:var(--t3)}

/* ---- a task's page: the pane's language (line 1, the title, the meta line, the line, the actions) ---- */
.pr-rec{min-width:0}
.pr-pbar{display:none}
.pr-l1{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;font-size:13px;color:var(--t3)}
.pr-l1 .w{min-width:0}
.pr-l1 b{font-weight:500;color:var(--t1b)}
.pr-l1 .ys-track{flex:none;margin-right:-8px}
.pr-title{margin:4px 0 0;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere;view-transition-name:page-title}
.pr-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:4px;font-size:14px;color:var(--t2)}
.pr-meta i{font-style:normal;color:var(--t3)}
.pr-meta .late{color:var(--r);font-weight:600}
.pr-line{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
.pr-line li{min-width:0}
.pr-line i{display:block;height:4px;border-radius:2px;background:var(--fill)}
.pr-line span{display:block;margin-top:8px;font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-line li.done i{background:var(--gdot)}
.pr-line li.done span{color:var(--t2)}
.pr-line li.now i{background:var(--ink)}
.pr-line li.now span{color:var(--ink);font-weight:600}
.pr-line.paused li.now i{background:var(--a-dot)}
.pr-actrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.pr-rec .ys-notice{margin:20px 0 0}
.pr-wait-line{margin:16px 0 0;font-size:14px;color:var(--t2)}
.pr-wait-line.ok{color:var(--gt);font-weight:500}
.pr-sec{margin-top:32px}
.pr-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px 2px;font-size:15px;font-weight:600;color:var(--ink)}
.pr-h .ys-count{font-size:13px;font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums}
.pr-h .r{margin-left:auto;font-size:13px;font-weight:500;color:var(--t2);text-decoration:none!important}
.pr-h .r:hover{color:var(--ink)}
.pr-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:12px 18px;box-shadow:inset 0 -1px 0 var(--line2)}
.pr-facts>div:last-child{box-shadow:none}
.pr-facts .k{font-size:13px;color:var(--t3)}
.pr-facts .v{min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.pr-rec .md{font-size:14px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.pr-rec .md p{margin:0 0 8px}
.pr-rec .md>:last-child{margin-bottom:0}
.pr-rec .md pre{white-space:pre-wrap;word-break:break-word}
.pr-rec .md ul,.pr-rec .md ol{margin:0 0 8px}
.pr-time>div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:11px 18px;box-shadow:inset 0 -1px 0 var(--line2);font-size:13px}
.pr-time>div:last-child{box-shadow:none}
.pr-time .who{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-time .when{color:var(--t3);font-variant-numeric:tabular-nums}
.pr-time .d{font-weight:500;color:var(--t1b);font-variant-numeric:tabular-nums}

/* ---- the comments: one under the other, the full width of the card ---- */
.pr-c{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 18px;box-shadow:inset 0 -1px 0 var(--line2)}
.pr-c.pr-arrive{animation:ys-in .2s var(--ease)}
.pr-c .ys-avatar{width:28px;height:28px;font-size:11px}
.pr-c .pr-cb{min-width:0}
.pr-c .h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px}
.pr-c .h b{font-weight:600;color:var(--ink)}
.pr-c .h span{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.pr-c .x{margin-top:4px}
.pr-c.long .x{max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.pr-c.long.open .x{max-height:none;-webkit-mask-image:none;mask-image:none}
.pr-more{margin-top:6px;font-size:13px}
.pr-none{padding:16px 18px;font-size:14px;color:var(--t3);box-shadow:inset 0 -1px 0 var(--line2)}
.pr-clist>:last-child{box-shadow:none}
.pr-cform{padding:14px 18px 16px;background:var(--foot);box-shadow:inset 0 1px 0 var(--line)}
.pr-cform .ys-area{min-height:64px}
.pr-cform .f{display:flex;justify-content:flex-end;margin-top:10px}

/* ---- its changes ---- */
.pr-log summary{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 10px 2px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.pr-log summary::-webkit-details-marker{display:none}
.pr-log summary::after{content:"\203A";font-size:16px;color:var(--t3);transition:transform .12s ease}
.pr-log[open] summary::after{transform:rotate(90deg)}
.pr-log summary .ys-count{font-size:13px;font-weight:500;color:var(--t3)}
.pr-changes>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 16px;align-items:baseline;padding:10px 18px;box-shadow:inset 0 -1px 0 var(--line2);font-size:13px}
.pr-changes>div:last-child{box-shadow:none}
.pr-changes .w{color:var(--ink);min-width:0}
.pr-changes .by,.pr-changes .at{color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- a phone: stacked rows, 44px targets, 48px buttons, nothing wider than the screen ---- */
@media (max-width:759px){
  .pr-rowin{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 16px}
  .pr-design[data-read] .pr-rowin{grid-template-columns:minmax(0,1fr)}
  .pr-acts,.pr-wait{justify-content:flex-start}
  .pr-acts{margin-top:8px;margin-left:-10px}
  .pr-acts .ys-btn.pr-b{height:44px;padding:0 12px}
  .pr-acts .ys-btn.pr-b:not(.q){margin-left:10px}
  .pr-menu{left:0;right:auto;width:min(260px,calc(100vw - 48px))}
  .pr-menu .it{min-height:44px}
  .pr-deliver{padding:0 16px 16px}
  .pr-deliver .ys-field{flex-basis:100%;height:48px;font-size:16px}
  .pr-deliver .ys-btn{height:48px;flex:1 1 auto}
  .pr-line span{font-size:11px}
  .pr-actrow .ys-btn{height:48px;flex:1 1 auto}
  .pr-actrow [data-inbar]{display:none}
  .pr-actrow:not(:has(>:not([data-inbar]))){display:none}
  .pr-rec{padding-bottom:76px}
  .pr-pbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:15;padding:12px 16px;background:var(--bar);box-shadow:inset 0 1px 0 var(--line)}
  .pr-pbar .ys-btn{height:48px;border-radius:10px;flex:1 1 auto;min-width:0}
  .pr-pbar .ys-btn.p{flex-grow:2}
  .pr-facts>div{grid-template-columns:minmax(0,1fr);padding:12px 16px}
  .pr-time>div{grid-template-columns:minmax(0,1fr) auto;padding:11px 16px}
  .pr-time .when{grid-column:1/-1;grid-row:2}
  .pr-c{padding:14px 16px}
  .pr-cform{padding:14px 16px 16px}
  .pr-cform .ys-btn{height:48px;width:100%}
  .pr-changes>div{grid-template-columns:minmax(0,1fr);padding:10px 16px}
  .pr-l1 .ys-track button{height:44px}
}

/* Admin (studio/pages-team.mjs, pages-access.mjs, pages-time.mjs): Settings, Klaviyo accounts, Connect a brand, People,
   the timesheet and the Monday review, to the handoff's YOCTO Studio.dc.html (?v=settings, accounts, connect, people,
   time) and its method-change cards. Tokens only; every class starts ad-. */

/* ---- shared on these pages: a group's label with its count and note, a section, quiet words ---- */
.ad-page .ys-head{align-items:center;min-height:36px;margin-bottom:0}
.ad-page .ys-head .ys-sub{margin-top:2px}
.ad-sect{margin-top:28px}
.ad-gh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px 2px}
.ad-gh b{font-size:16px;font-weight:600;color:var(--ink)}
.ad-gh .n{font-size:14px;color:var(--t3);font-variant-numeric:tabular-nums}
.ad-gh .note{font-size:12px;color:var(--t3)}
.ad-gh .r{margin-left:auto;align-self:center}
.ad-quiet{font-size:12px;color:var(--t3)}
.ad-bad{box-shadow:inset 0 0 0 1px var(--r-dot)!important}
.ad-foot{margin:20px 0 0;max-width:720px;font-size:12px;line-height:1.6;color:var(--t3)}

/* ---- Settings: one column of groups, a row each, its live figure on the right ---- */
.ad-set{margin-top:20px;display:flex;flex-direction:column;gap:24px}
.ad-set-l{margin:0 0 8px 2px;font-size:13px;font-weight:500;color:var(--t3)}
.ad-set-rows>a{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;gap:14px;align-items:center;min-height:48px;padding:0 16px 0 18px;box-shadow:inset 0 -1px 0 var(--line2);color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.ad-set-rows>a:last-child{box-shadow:none}
.ad-set-rows>a:hover{background:var(--hover2);color:var(--ink)}
.ad-set-rows .nm{min-width:0;font-size:14px;font-weight:500}
.ad-set-rows .fig{font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ad-set-rows .fig.a{color:var(--a)}.ad-set-rows .fig.r{color:var(--r)}
.ad-set-rows .chev{font-size:16px;line-height:1;color:var(--t3)}

/* ---- Klaviyo accounts: a table per group; a row opens to what its key reads and builds ---- */
.ad-acc .ad-th,.ad-acc .ad-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 150px 100px 140px;gap:6px 16px;align-items:center}
.ad-acc .ad-th{padding:10px 20px;font-size:12px;font-weight:600;color:var(--t3);box-shadow:inset 0 -1px 0 var(--line2)}
.ad-acc .ad-it{box-shadow:inset 0 -1px 0 var(--line2)}
.ad-acc .ad-it:last-of-type{box-shadow:none}
.ad-acc .ad-r{padding:13px 20px;min-height:58px}
.ad-acc .ad-r.tog{cursor:pointer;transition:background .12s ease}
.ad-acc .ad-r.tog:hover{background:var(--hover2)}
.ad-acc .ad-bn{min-width:0;font-size:14px;font-weight:600}
.ad-acc .ad-bn a{color:var(--ink)}
.ad-acc .ad-an{min-width:0;font-size:14px;color:var(--t2);overflow-wrap:anywhere}
.ad-acc .ad-may{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t2)}
.ad-acc .ad-may .ys-dot{width:7px;height:7px}
.ad-acc .ad-may.a{color:var(--a)}.ad-acc .ad-may.a .ys-dot{background:var(--a-dot)}
.ad-acc .ad-may.r{color:var(--r)}.ad-acc .ad-may.r .ys-dot{background:var(--r-dot)}
.ad-acc .ad-may.o{color:var(--t3)}
.ad-acc .ad-ck{font-size:14px;color:var(--t3);font-variant-numeric:tabular-nums}
.ad-acc .ad-ra{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.ad-ext{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;color:var(--t3);font-size:14px;text-decoration:none!important}
.ad-ext:hover{background:var(--qh);color:var(--ink)}
.ad-chev{width:30px;text-align:center;font-size:10px;color:var(--t3);transition:transform .14s var(--ease)}
.ad-acc .ad-r.open .ad-chev{transform:rotate(180deg)}
.ad-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px 24px;padding:2px 20px 16px;animation:ys-in .16s ease-out}
.ad-det .k{font-size:12px;font-weight:600;color:var(--t3)}
.ad-det .v{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink)}
.ad-det .v.a{color:var(--a)}
.ad-more{width:100%;height:44px;border:0;border-top:1px solid var(--line2);background:transparent;font-size:14px;font-weight:500;color:var(--t2)}
.ad-more:hover{background:var(--hover2);color:var(--ink)}

/* ---- Connect a brand: three steps in one card ---- */
.ad-cx{max-width:720px;margin-top:24px}
.ad-step{box-shadow:inset 0 -1px 0 var(--line2);padding:18px 20px}
.ad-step:last-child{box-shadow:none}
.ad-step-h{display:flex;align-items:flex-start;gap:14px}
.ad-step-h .grow{flex:1;min-width:0}
.ad-step-h .t{font-size:16px;font-weight:600;line-height:24px;color:var(--ink)}
.ad-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--soft);color:var(--t3)}
.ad-step[data-state="now"] .ad-num{background:var(--ink);color:var(--page)}
.ad-step[data-state="done"] .ad-num{background:var(--g-bg);color:var(--gt)}
.ad-step[data-state="next"] .ad-step-h{opacity:.45}
.ad-masked{font-size:14px;color:var(--t2)}
.ad-step-b{padding:6px 0 2px 38px;animation:ys-in .2s ease-out}
.ad-how{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--t1b)}
.ad-how b{font-weight:600;color:var(--ink)}
.ad-open{display:inline-flex;margin-top:10px;font-size:14px}
.ad-open .ext{margin-left:2px}
.ad-lab{display:block;margin:16px 0 6px;font-size:12px;font-weight:500;color:var(--t2)}
.ad-step-b>.ad-lab:first-child,.ad-step-b form>.ad-lab:first-child{margin-top:0}
.ad-keyrow,.ad-brandrow,.ad-heldpick{display:flex;flex-wrap:wrap;gap:8px}
.ad-keyrow .ys-field{flex:1 1 280px;min-width:0}
.ad-keyrow .ys-btn{height:38px}
.ad-brandrow .ys-select{flex:1 1 240px;min-width:0;max-width:360px}
.ad-brandrow .ys-field{flex:1 1 220px;min-width:0}
.ad-heldpick{margin-top:10px}.ad-heldpick .ys-select{flex:1 1 260px;min-width:0;max-width:360px}
.ad-held{display:inline-flex;margin-top:12px;font-size:14px;text-align:left}
.ad-step-b .ad-quiet{margin-top:12px}
.ad-says{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.ad-says .r{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 14px;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-says .r:last-child{box-shadow:none}
.ad-says .k{font-size:12px;line-height:20px;color:var(--t3)}
.ad-says .v{font-size:14px;line-height:20px;color:var(--ink);overflow-wrap:anywhere}
.ad-says .v.g{color:var(--gt)}.ad-says .v.a{color:var(--a)}.ad-says .v.r{color:var(--r)}.ad-says .v.t{color:var(--t2)}
.ad-bname{font-size:16px;font-weight:600;color:var(--ink)}
.ad-app .ad-lab{margin-top:16px}
.ad-segwrap{display:inline-flex;max-width:100%;overflow-x:auto;border-radius:10px}
.ad-segwrap .ys-seg button{height:30px;font-size:14px}
.ad-app.ad-bad .ad-segwrap{box-shadow:0 0 0 1.5px var(--r-dot)}
.ad-app.ad-bad{box-shadow:none!important}
.ad-go{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ad-go .ys-btn{height:40px;padding:0 16px}
.ad-same{margin-top:22px;font-size:14px;color:var(--a)}

/* ---- People: add a person; a group per role; a row per person with their brands, when they were in, the menu ---- */
.ad-add{margin-top:20px;padding:18px 20px;animation:ys-in .16s ease-out;overflow:visible}
.ad-addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px 16px;align-items:end}
.ad-addgrid label,.ad-rolef{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--t2)}
.ad-rolef .ys-seg{align-self:flex-start}
.ad-rolef .ys-seg button{height:30px;font-size:14px}
.ad-addacts{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ad-roleline{font-size:12px;color:var(--t3)}
.ad-people{overflow:visible}
.ad-prow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) 150px 190px;gap:6px 16px;align-items:center;padding:12px 18px;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-prow:last-child{box-shadow:none}
.ad-who{display:flex;align-items:center;gap:12px;min-width:0}
.ad-who .nm{font-size:14px;font-weight:600;color:var(--ink)}
.ad-who .em{font-size:12px;color:var(--t3)}
.ad-chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%;margin:-4px -6px;padding:4px 6px;border:0;border-radius:8px;background:transparent;text-align:left}
.ad-chips:hover{background:var(--qh)}
.ad-chip{font-size:12px;line-height:18px;padding:1px 8px;border-radius:6px;background:var(--soft);color:var(--t1b);white-space:nowrap}
.ad-nob{font-size:12px;line-height:20px;color:var(--t3)}
.ad-seen{display:flex;flex-direction:column;font-size:12px;color:var(--t3);white-space:nowrap}
.ad-seen .a{color:var(--a)}
.ad-seen .s{color:var(--t3)}
.ad-pact{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.ad-dots{display:inline-flex;align-items:center;justify-content:center;width:30px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--t2);font-size:12px;letter-spacing:1px}
.ad-dots:hover,.ad-dots[aria-expanded="true"]{background:var(--qh);color:var(--ink)}
.ad-page .ys-pop .ad-pl{padding:6px 10px 4px;font-size:12px;font-weight:600;color:var(--t3)}
.ad-pmenu{width:230px;top:36px}
.ad-pmenu form{margin:0}
.ad-pmenu .ck{color:var(--gt);font-weight:600}
.ad-pmenu .it.red{color:var(--r)}
.ad-bpop{width:280px;top:calc(100% + 4px)}
.ad-checks{max-height:300px;overflow-y:auto;padding:2px 0}
.ad-checks label{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer}
.ad-checks label:hover{background:var(--qh)}
.ad-checks input{width:15px;height:15px;margin:0;accent-color:var(--g)}
.ad-popf{padding:8px 4px 2px;box-shadow:inset 0 1px 0 var(--line2);margin-top:4px;display:flex;justify-content:flex-end}
.ad-apop{width:300px;top:36px}
.ad-ranges{padding:0 4px}
.ad-range{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:0 6px;font-size:14px;color:var(--ink)}
.ad-none{padding:6px;font-size:13px;color:var(--t3)}
.ad-addrange{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 4px 6px}
.ad-addrange label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--t2)}
.ad-linkout{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:20px;padding:12px 12px 12px 16px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.ad-linkout .ys-field{flex:1 1 320px;min-width:0}

/* ---- the timesheet: the week's grid, the phone's day cards, the entries ---- */
.ad-caret{font-size:9px;color:var(--t3)}
.ad-whopop{width:240px;max-height:340px;overflow-y:auto;top:42px}
.ad-whopop a.on{background:var(--sel)}
.ad-weeknav{display:inline-flex;border-radius:8px;box-shadow:inset 0 0 0 1px var(--ring)}
.ad-wbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none!important;transition:background .12s ease,color .12s ease}
.ad-wbtn:hover{background:var(--qh);color:var(--ink)}
.ad-wbtn.mid{width:auto;padding:0 10px;font-size:14px}
.ad-wbtn.on,.ad-wbtn.off{color:var(--t3)}
.ad-tsgrid{margin-top:24px}
.ad-ts .g{display:grid;grid-template-columns:minmax(0,1fr) repeat(7,64px) 76px;padding:0 8px 0 0;align-items:stretch;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-ts .g.h{align-items:center}
.ad-ts .g.h .c0{padding:12px 18px;font-size:12px;font-weight:600;color:var(--t3)}
.ad-ts .dy{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:4px;padding:12px 0;font-size:12px;line-height:16px;font-weight:500;color:var(--t3);white-space:nowrap}
.ad-ts .dy.now{font-weight:600;color:var(--ink)}
.ad-ts .tot{padding:12px 10px;font-size:12px;font-weight:600;color:var(--t3);text-align:right}
.ad-ts .c0{min-width:0;padding:10px 18px}
.ad-ts .c0 .nm{display:block;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-ts .c0 a.nm:hover{color:var(--ink);text-decoration:underline}
.ad-ts .c0 .s{font-size:12px;line-height:16px;color:var(--t3)}
.ad-ts .cl{display:grid;place-items:center;font-size:13px;color:var(--t1b);font-variant-numeric:tabular-nums}
.ad-ts .now{background:var(--sel)}
.ad-ts .rt{display:grid;align-items:center;justify-items:end;padding:0 10px;font-size:13px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ad-ts .g.f{box-shadow:none;background:var(--foot)}
.ad-ts .g.f .c0{padding:12px 18px;font-size:13px;font-weight:500;color:var(--t2)}
.ad-ts .g.f .cl{font-weight:500;color:var(--ink)}
.ad-ts .g.f .rt{font-weight:600}
.ad-tsdays{display:none;margin-top:20px;flex-direction:column;gap:12px}
.ad-tsdays .dh{display:flex;justify-content:space-between;padding:12px 16px;font-size:12px;font-weight:600;color:var(--ink);box-shadow:inset 0 -1px 0 var(--line2)}
.ad-tsdays .dh.now{background:var(--sel)}
.ad-tsdays .dr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:14px;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-tsdays .dr:last-child{box-shadow:none}
.ad-tsdays .dr .nm{font-size:14px;color:var(--ink)}
.ad-tsdays .dr .s{font-size:12px;color:var(--t3)}
.ad-tsdays .dr>.ys-num{flex:none;color:var(--t2)}
.ad-tsempty{margin-top:24px;padding:28px 20px;font-size:14px;color:var(--t2)}
.ad-tsent{margin-top:32px}
.ad-ent{display:grid;grid-template-columns:170px 64px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:11px 18px;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-ent:last-child{box-shadow:none}
.ad-ent .w{font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ad-ent .d{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ad-ent .x{min-width:0;font-size:14px;line-height:20px;color:var(--ink)}
.ad-ent .x a{color:var(--ink)}
.ad-ent .nt{font-size:12px;line-height:16px;color:var(--t3)}
.ad-ent .a{display:flex;justify-content:flex-end}
.ad-ent .a form{margin:0}
.ad-tsadd{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;box-shadow:inset 0 -1px 0 var(--line2);animation:ys-in .16s ease-out}
.ad-tsadd .ad-dur{width:110px}
.ad-tsadd .ad-tb{width:180px}
.ad-tsadd .ad-what{flex:1 1 220px;min-width:0}
.ad-tsadd .ad-td{width:140px}
.ad-tsadd .ys-btn{height:38px}

/* ---- the Monday review: a card per change, the team's notes, the drafted edit as before and after ---- */
.ad-cards{display:flex;flex-direction:column;gap:12px}
.ad-mc-in{padding:20px 24px;animation:ys-in .18s ease-out}
.ad-mc-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--t3)}
.ad-mc-top .a{font-weight:500}
.ad-mc-t{margin-top:4px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.ad-notes{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ad-note,.ad-dl{display:grid;grid-template-columns:3px minmax(0,1fr);gap:12px}
.ad-note .bar,.ad-dl .bar{border-radius:2px;background:var(--fill)}
.ad-note .q{font-size:14px;line-height:1.5;color:var(--ink)}
.ad-note .by{margin-top:1px;font-size:12px;color:var(--t3)}
.ad-change{margin-top:16px}
.ad-change .lb,.ad-dl .lb{font-size:12px;font-weight:500;color:var(--t3)}
.ad-change .lb span{font-weight:400}
.ad-change .tx{margin-top:4px;font-size:14px;line-height:1.55;color:var(--t1b);white-space:pre-wrap;overflow-wrap:anywhere}
.ad-acts{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ad-acts form{margin:0}
.ad-mc-done{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 24px;animation:ys-in .18s ease-out}
.ad-mc-done .w{flex:none;font-size:14px;font-weight:600;color:var(--t2)}
.ad-mc-done .w.yes{color:var(--gt)}
.ad-mc-done .tt{flex:1;min-width:0;font-size:14px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-said{margin-top:12px;font-size:14px;line-height:1.5;color:var(--t2)}
.ad-diff{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ad-dc{display:flex;flex-direction:column;gap:8px}
.ad-dl .tx{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ad-dl.bf .bar{background:var(--r-dot)}.ad-dl.bf .tx{color:var(--t2)}
.ad-dl.af .bar{background:var(--gdot)}
.ad-two{display:flex;flex-wrap:wrap;gap:8px}
.ad-two form{display:flex;flex-wrap:wrap;gap:8px}
.ad-two.ad-going{opacity:.5;pointer-events:none}
.ad-wait{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--t2)}
.ad-wait.r{color:var(--r)}
.ad-held .ad-mc-in{padding:16px 20px}
.ad-clear{margin-top:24px;display:flex;align-items:center;gap:14px;padding:20px 24px}
.ad-clear .ok{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);color:var(--gt);font-weight:600}
.ad-clear b{font-size:15px;font-weight:600;color:var(--ink)}
.ad-clear .ys-t2{font-size:13px}
.ad-fold{margin-top:28px}
.ad-fold>summary{display:flex;align-items:baseline;gap:8px;list-style:none;cursor:pointer}
.ad-fold>summary::-webkit-details-marker{display:none}
.ad-fold>summary .ad-gh{margin-bottom:0}
.ad-fold>summary .chev{margin-left:auto;color:var(--t3);transition:transform .14s var(--ease)}
.ad-fold[open]>summary{margin-bottom:10px}
.ad-fold[open]>summary .chev{transform:rotate(90deg)}
.ad-lbs{overflow:hidden}
.ad-lb>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;gap:14px;align-items:center;min-height:48px;padding:0 16px 0 18px;list-style:none;cursor:pointer;box-shadow:inset 0 -1px 0 var(--line2);transition:background .12s ease}
.ad-lb>summary::-webkit-details-marker{display:none}
.ad-lb>summary:hover{background:var(--hover2)}
.ad-lb:last-child>summary{box-shadow:none}
.ad-lb[open]>summary{box-shadow:inset 0 -1px 0 var(--line2)}
.ad-lb .nm{font-size:14px;font-weight:500;color:var(--ink)}
.ad-lb .fig{font-size:13px;font-weight:500;color:var(--t2)}
.ad-lb .chev{font-size:16px;line-height:1;color:var(--t3);transition:transform .14s var(--ease)}
.ad-lb[open] .chev{transform:rotate(90deg)}
.ad-lb-in{padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--foot);box-shadow:inset 0 -1px 0 var(--line2)}
.ad-list .ad-row3{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;min-height:48px;padding:10px 18px;box-shadow:inset 0 -1px 0 var(--line2)}
.ad-list .ad-row3:last-child{box-shadow:none}
.ad-row3 .nm{min-width:0;font-size:14px;font-weight:500;color:var(--ink)}
.ad-row3.ad-sub .nm{padding-left:16px;font-weight:400;color:var(--t1b)}
.ad-row3 .s{font-size:13px;color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ad-row3 .r{font-size:13px;color:var(--t2);text-align:right;font-variant-numeric:tabular-nums}

/* ---- a phone: everything in one column, 44px targets, the day cards in place of the grid ---- */
@media (max-width:759px){
  .ad-page .ys-head{align-items:flex-start;gap:12px}
  .ad-page .ys-acts{width:100%}
  .ad-page .ys-acts .ys-btn{height:44px}
  .ad-set-rows>a{min-height:52px}
  .ad-acc .ad-th{display:none}
  .ad-acc .ad-r{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px}
  .ad-acc .ad-r .ad-bn{grid-column:1}
  .ad-acc .ad-r .ad-ra{grid-column:2;grid-row:1 / span 3;align-self:center}
  .ad-acc .ad-r .ad-an,.ad-acc .ad-r .ad-may,.ad-acc .ad-r .ad-ck{grid-column:1;font-size:13px}
  .ad-acc .ad-r .ad-ck:empty{display:none}
  .ad-ext{width:44px;height:44px}
  .ad-det{padding:0 16px 16px}
  .ad-step{padding:16px}
  .ad-step-b{padding-left:0}
  .ad-keyrow .ys-btn,.ad-go .ys-btn{height:48px;flex:1 1 100%}
  .ad-keyrow .ys-field,.ad-brandrow .ys-field,.ad-brandrow .ys-select{height:44px}
  .ad-says .r{grid-template-columns:96px minmax(0,1fr)}
  .ad-prow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 16px}
  .ad-prow .ad-who{grid-column:1}
  .ad-prow .ad-pact{grid-column:2;grid-row:1}
  .ad-prow .ad-bcell,.ad-prow .ad-seen{grid-column:1 / -1;padding-left:44px}
  .ad-dots{width:44px;height:44px}
  .ad-pact .ys-btn{display:none}
  .ad-pmenu,.ad-apop{right:0}
  .ad-bpop{left:0;width:min(300px,calc(100vw - 32px))}
  .ad-addacts .ys-btn{height:48px;flex:1 1 100%}
  .ad-tsgrid{display:none}
  .ad-tsdays{display:flex}
  .ad-weeknav .ad-wbtn{width:44px;height:44px}.ad-weeknav .ad-wbtn.mid{width:auto}
  .ad-ent{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px}
  .ad-ent .w{grid-column:1;grid-row:1}
  .ad-ent .d{grid-column:2;grid-row:1}
  .ad-ent .x{grid-column:1;grid-row:2}
  .ad-ent .a{grid-column:2;grid-row:2}
  .ad-ent .a .ys-btn{height:44px}
  .ad-tsadd{padding:14px 16px}
  .ad-tsadd .ad-dur,.ad-tsadd .ad-tb,.ad-tsadd .ad-td{flex:1 1 40%;width:auto;height:44px}
  .ad-tsadd .ad-what{flex:1 1 100%;height:44px}
  .ad-tsadd .ys-btn{height:48px;flex:1 1 40%}
  .ad-mc-in{padding:18px 16px}
  .ad-acts .ys-btn{height:48px}
  .ad-mc-done{padding:12px 12px 12px 16px}
  .ad-list .ad-row3{grid-template-columns:minmax(0,1fr) auto;padding:12px 16px}
  .ad-row3 .s{grid-column:1;white-space:normal}
  .ad-row3 .r{grid-column:2;grid-row:1 / span 2}
}

/* ---- a time entry's Edit, under its row ---- */
.ad-ent .a{gap:2px}
.ad-tsedit{background:var(--soft)}

/* Client review (studio/pages-portal.mjs; the redesign's 6.9, Client Page.dc.html): the client's page, the review with
   pinned comments, the link that no longer works; and, for the team, the Client link popover, the set-up row and the
   client items' body in Today. Every class starts cl-. */

/* ---- the client's page: the glass bar ---- */
.cl-doc{min-height:100vh;background:var(--page)}
.cl-top{position:sticky;top:0;z-index:20;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--line)}
.cl-top-in{max-width:1120px;margin:0 auto;height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cl-mark{display:flex;align-items:center;gap:10px;min-width:0}
.cl-mark img{height:13px;width:auto;display:block;filter:var(--logo)}
.cl-mark span{font-size:13px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-main{margin:0 auto;animation:ys-in .2s ease-out}

/* ---- the list: "To review 2", one card of rows ---- */
.cl-list{max-width:640px;padding:32px 20px 96px}
.cl-h{display:flex;align-items:baseline;gap:8px;padding:0 4px 12px}
.cl-h h1{margin:0;font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)}
.cl-h .n{font-size:15px;font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums}
.cl-card{border-radius:12px;background:var(--card);box-shadow:var(--sh-card);overflow:hidden}
.cl-none{padding:18px 18px;font-size:14px;color:var(--t2)}
.cl-row{display:grid;grid-template-columns:minmax(0,1fr) auto 12px;gap:4px 16px;align-items:center;padding:14px 18px;box-shadow:inset 0 -1px 0 var(--line2);color:var(--ink);text-decoration:none!important;transition:background .12s ease}
.cl-row:hover{background:var(--hover2);color:var(--ink)}
.cl-row .m{min-width:0}
.cl-row .t{display:block;font-size:15px;font-weight:500;line-height:1.4;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row.done .t{color:var(--t3)}
.cl-row .s{display:block;margin-top:1px;font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row .st{font-size:13px;font-weight:500;color:var(--t3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-row .st.amber{color:var(--a)}.cl-row .st.ok{color:var(--gt)}.cl-row .st.ink{color:var(--ink)}
.cl-row .ch{font-size:16px;line-height:1;color:var(--t3)}
.cl-foot{margin:16px 0 0;padding:0 4px;font-size:13px;color:var(--t3)}

/* ---- the link that no longer works ---- */
.cl-gone{max-width:420px;padding:22vh 20px 96px}
.cl-gone h1{margin:0;font-size:17px;line-height:1.3;font-weight:600;color:var(--ink)}
.cl-gone p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--t2)}

/* ---- one email to review ---- */
.cl-review{max-width:1120px;padding:20px 20px 120px}
.cl-rhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;min-height:40px}
.cl-rhead .l{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:12px}
.cl-backbtn{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:-6px;border-radius:8px;font-size:20px;line-height:1;color:var(--t2);text-decoration:none!important;transition:background .12s ease,color .12s ease}
.cl-backbtn:hover{background:var(--hover);color:var(--ink)}
.cl-rhead .tt{min-width:0}
.cl-rhead h1{margin:0;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.008em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-rhead .ln{margin-top:1px;font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-rhead .due{font-weight:500;color:var(--t2)}
.cl-rhead .due.amber{color:var(--a)}.cl-rhead .due.ok{color:var(--gt)}
.cl-mode{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--ring);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .12s ease,box-shadow .12s ease,color .12s ease}
.cl-mode:hover{background:var(--btn-h)}
.cl-mode .k{font-family:var(--font);font-size:11px;line-height:1.2;padding:2px 5px;border-radius:4px;background:var(--kbd);color:var(--t3)}
.cl-mode[aria-pressed="true"]{background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g);color:var(--gt)}
.cl-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cl-mailcol{min-width:0;display:flex;justify-content:center}
.cl-mailcol>.cl-card{width:100%;max-width:600px}
.cl-mail{position:relative;width:100%;max-width:600px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--sh-frame)}
.cl-frame{display:block;width:100%;height:600px;min-height:200px;border:0;background:#fff}
.cl-canvas{position:absolute;inset:0;border-radius:10px;pointer-events:none;cursor:default;transition:box-shadow .15s ease}
.cl-mail.on .cl-canvas{pointer-events:auto;cursor:crosshair;box-shadow:inset 0 0 0 2px var(--g)}
.cl-pins{position:absolute;inset:0;pointer-events:none}
/* a pin: a 26px green teardrop, white-edged, numbered (on the email, which is always white) */
.cl-pin{position:absolute;transform:translate(-50%,-100%);width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50% 50% 50% 3px;background:var(--g);color:var(--on-g);font-size:11px;font-weight:700;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:auto;animation:cl-pop .16s ease-out}
.cl-pin.lit{box-shadow:0 0 0 3px var(--g-ring),0 4px 12px rgba(0,0,0,.3)}
@keyframes cl-pop{from{opacity:0;transform:translate(-50%,-100%) scale(.6)}to{opacity:1;transform:translate(-50%,-100%)}}
/* the comment being written, where it was clicked */
.cl-draft{position:absolute;z-index:5;width:260px;max-width:calc(100% - 16px);padding:8px;border-radius:12px;background:var(--pop);box-shadow:var(--sh-pop);animation:ys-in .14s ease-out}
.cl-draft textarea{display:block;width:100%;padding:8px 10px;border:0;border-radius:8px;background:var(--field);box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;line-height:1.45;color:var(--ink);resize:none;outline:none}
.cl-draft textarea:focus{box-shadow:inset 0 0 0 1px var(--g-ring),0 0 0 3px var(--g-bg)}
.cl-draft textarea::placeholder{color:var(--t3)}
.cl-draft .b{margin-top:8px;display:flex;justify-content:flex-end;gap:6px}
.cl-draft button{height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;font-size:13px;color:var(--t2)}
.cl-draft button:hover{background:var(--hover)}
.cl-draft button.go{padding:0 12px;background:var(--g);color:var(--on-g);font-weight:600}
.cl-draft button.go:hover{background:var(--gh)}
.cl-draft button.busy{pointer-events:none;opacity:.7}
/* the right column: Approve or Send, what it does, the comments, the hint; after, the receipt */
.cl-aside{position:sticky;top:76px;min-width:0;display:flex;flex-direction:column;gap:12px}
.cl-act{display:flex;flex-direction:column;gap:8px}
.cl-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--g);color:var(--on-g);font-size:15px;font-weight:600;transition:background .12s ease,transform .08s ease}
.cl-primary:hover{background:var(--gh)}
.cl-primary:active{background:var(--ga);transform:translateY(1px)}
.cl-primary.busy{pointer-events:none}
.cl-primary.busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--on-g-a);border-top-color:var(--on-g);animation:ys-spin .7s linear infinite;flex:none}
.cl-note{font-size:13px;line-height:1.45;color:var(--t3);text-align:center}
.cl-receipt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:10px;background:var(--g-bg);animation:ys-in .18s ease-out}
.cl-receipt .w{font-size:14px;line-height:1.45}
.cl-receipt b{display:block;font-weight:600;color:var(--gt)}
.cl-receipt .w span{color:var(--t2)}
.cl-undo{flex:none;height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--t2)}
.cl-undo:hover{background:var(--hover);color:var(--ink)}
.cl-cmts{border-radius:12px;background:var(--card);box-shadow:var(--sh-card);overflow:hidden}
.cl-cmt-row{display:grid;grid-template-columns:20px minmax(0,1fr) 28px;gap:10px;align-items:start;padding:10px 8px 10px 14px;box-shadow:inset 0 -1px 0 var(--line2);animation:ys-in .16s ease-out}
.cl-cmt-row .tx{font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.cl-num{width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--g);color:var(--on-g);display:grid;place-items:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cl-del{width:28px;height:28px;border:0;border-radius:6px;background:transparent;font-size:16px;line-height:1;color:var(--t3)}
.cl-del:hover{background:var(--hover);color:var(--ink)}
.cl-hint{font-size:13px;line-height:1.45;color:var(--t3);text-align:center}
@media (max-width:899px){
  .cl-grid{grid-template-columns:minmax(0,1fr)}
  .cl-aside{position:static}
}
/* a phone: the answer sits in a bar at the bottom, 48px, always in reach */
@media (max-width:759px){
  .cl-review{padding:16px 16px 140px}
  .cl-rhead{gap:10px}
  .cl-rhead .l{flex-basis:100%}
  .cl-mode{height:44px;padding:0 14px}
  .cl-backbtn{width:44px;height:44px;margin-left:-12px}
  .cl-act{position:fixed;left:0;right:0;bottom:0;z-index:15;gap:6px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--line)}
  .cl-primary{height:48px}
  .cl-note{font-size:12px}
  .cl-del{width:44px;height:44px}
  .cl-cmt-row{grid-template-columns:20px minmax(0,1fr) 44px;align-items:center}
  .cl-list{padding:20px 16px 96px}
  .cl-row{padding:14px 16px;grid-template-columns:minmax(0,1fr) 12px}
  .cl-row .t,.cl-row .s{white-space:normal}
  .cl-row .st{grid-column:1;grid-row:2}
  .cl-row .ch{grid-column:2;grid-row:1/span 2}
  .cl-top-in{padding:0 8px 0 16px}
  .cl-top .ys-iconbtn{width:44px;height:44px}
  body.cl-has-act #ys-toast{bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* ---- for the team: the brand page's Client link button and its popover ---- */
.cl-link{display:inline-flex}
.cl-linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--t2);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;transition:background .12s ease,color .12s ease}
.cl-linkbtn:hover,.cl-linkbtn[aria-expanded="true"]{background:var(--qh);color:var(--ink)}
.cl-dot{width:6px;height:6px;border-radius:50%;background:var(--gdot);flex:none}
.cl-pop{top:42px;width:360px;max-width:calc(100vw - 32px);padding:14px}
.cl-pop-h{font-size:14px;font-weight:600;color:var(--ink)}
.cl-pop-t{font-size:13px;line-height:1.45;color:var(--t2)}
.cl-pop-h+.cl-pop-t{margin-top:2px}
.cl-pop-link{margin-top:10px;display:flex;gap:8px}
.cl-field{flex:1;min-width:0;display:flex;align-items:center;height:36px;padding:0 10px;border-radius:8px;background:var(--field);box-shadow:inset 0 0 0 1px var(--ring);font-family:var(--mono);font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;user-select:all}
.cl-pop .cl-copy{flex:none;min-width:76px;font-weight:600}
.cl-pop-acts{margin:10px 0 0 -8px;display:flex;align-items:center;gap:4px}
.cl-f{display:contents}
.cl-q{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;text-decoration:none!important;transition:background .12s ease,color .12s ease}
.ys-pop a.cl-q{display:inline-flex;width:auto;padding:0 8px;font-size:13px;color:var(--t2)}
.cl-q:hover,.ys-pop a.cl-q:hover{background:var(--qh);color:var(--ink)}
.cl-q .ext{opacity:.55}
.cl-q.busy{pointer-events:none;opacity:.7}
.cl-off{margin-left:auto;color:var(--t3)}
.cl-pop .cl-turnon{margin-top:12px}
@media (max-width:759px){
  .cl-pop{position:fixed;left:16px;right:16px;top:auto;bottom:calc(74px + env(safe-area-inset-bottom));width:auto;max-width:none}
  .cl-q{height:44px;padding:0 10px}
}

/* ---- the set-up row: Client review, Off | On, and the link ---- */
.cl-set{box-shadow:inset 0 -1px 0 var(--line2)}
.cl-set-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 20px}
.cl-set-row .t{font-size:14px;font-weight:600;color:var(--ink)}
.cl-set-row .s{font-size:13px;color:var(--t3)}
.cl-seg{justify-self:end;max-width:100%}
.cl-seg button{height:30px;padding:0 12px;font-size:14px}
.cl-seg button.busy{pointer-events:none;opacity:.7}
.cl-set-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:0 20px 14px;animation:ys-in .16s ease-out}
.cl-set-link .cl-field{flex:1 1 260px;padding:0 12px;font-size:13px}
.cl-copy2{min-width:72px}
.cl-q.lg{height:36px;padding:0 10px;font-size:14px}
@media (max-width:759px){
  .cl-set-row{grid-template-columns:minmax(0,1fr)}
  .cl-seg{justify-self:start}
  .cl-seg button{height:44px}
}

/* ---- the client items' body in Today's right pane ---- */
.cl-tp{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.cl-tp-card{padding:20px 24px 22px}
.cl-tp-from{display:flex;align-items:center;gap:10px}
.cl-av{width:30px;height:30px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--t1b);flex:none}
.cl-tp-from .t{font-size:14px;font-weight:600;color:var(--ink)}
.cl-tp-from .s{font-size:12px;color:var(--t3)}
.cl-tp-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-tp-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.cl-tp-list .tx{font-size:15px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.cl-tp-yes{margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink)}
.cl-tp-yes .ck{margin-right:8px;font-weight:600;color:var(--gt)}
.cl-tp-email{margin-top:16px;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:var(--hover)}
.cl-tp-email .grow{flex:1;min-width:0}
.cl-tp-email .t{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-tp-email .s{font-size:12px;color:var(--t3)}
.cl-tp-email .ys-link{flex:none;font-size:14px;gap:4px;text-decoration:none}
.cl-tp-email .ys-link .ext{opacity:.55}
.cl-tp-waits .cl-tp-email:first-child{margin-top:0}
.cl-tp-waits .cl-tp-email+.cl-tp-email{margin-top:8px}
.cl-tp-say{margin-top:18px;padding-top:16px;box-shadow:inset 0 1px 0 var(--line2)}
.cl-tp-msg{margin-bottom:10px;padding:12px 14px;border-radius:8px;background:var(--field);box-shadow:inset 0 0 0 1px var(--ring);font-size:14px;line-height:1.55;color:var(--ink)}
.cl-tp-frame{max-width:100%;overflow:hidden}
.cl-tp-frame iframe{max-width:100%;min-height:200px}
@media (max-width:759px){
  .cl-tp-card{padding:16px}
  .cl-tp-email{flex-wrap:wrap}
  .cl-tp-email .ys-link{min-height:44px}
}

/* Tasks on the way off ClickUp (studio/tasks.mjs): a task's description and comments in Today's pane, Move to the
   Studio, and Add a task in the list's header. Also the welcome page (studio/routes/shell.mjs). */
.tk-wrap{margin-top:24px}
.tk-loading{padding:16px 0;color:var(--t3)}
.tk-detail{display:grid;gap:20px}
.tk-sec{background:var(--card);border-radius:12px;box-shadow:var(--sh-card);padding:16px 20px}
.tk-k{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--t2)}
.tk-k span{font-weight:500;color:var(--t3)}
.tk-desc,.tk-ct{font-size:14px;line-height:1.6;color:var(--t1b);overflow-wrap:anywhere}
.tk-desc .md p,.tk-ct .md p{margin:0 0 8px}.tk-desc .md p:last-child,.tk-ct .md p:last-child{margin-bottom:0}
.tk-desc .md ul,.tk-desc .md ol{margin:0 0 8px;padding-left:20px}
.tk-desc .md h2,.tk-desc .md h3,.tk-desc .md h4{margin:12px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.tk-c{padding:12px 0;box-shadow:inset 0 1px 0 var(--line2)}
.tk-c:first-of-type{box-shadow:none;padding-top:2px}
.tk-cb{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;font-size:13px}
.tk-cb b{font-weight:600;color:var(--ink)}.tk-cb span{color:var(--t3)}
.tk-move{display:inline-flex;margin:0}
.tk-addw{margin-left:auto;margin-right:8px;position:relative}
.tk-addb{height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap}
.tk-addb:hover,.tk-addb[aria-expanded="true"]{background:var(--qh);color:var(--ink)}
.tk-pop{width:340px;max-width:calc(100vw - 32px);padding:14px;top:calc(100% + 6px)}
.tk-pop .ys-form{gap:10px}
.tk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* the welcome page: how the Studio works, in six short parts */
.wl-hero{margin:8px 0 28px}
.wl-hero h1{margin:0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.015em}
.wl-hero p{margin:8px 0 0;font-size:15px;color:var(--t2);max-width:560px}
.wl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.wl-step{background:var(--card);border-radius:12px;box-shadow:var(--sh-card);padding:18px 20px}
.wl-step .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--g-bg);box-shadow:inset 0 0 0 1px var(--g-ring);font-size:12px;font-weight:600;color:var(--gt)}
.wl-step h2{margin:12px 0 6px;font-size:16px;font-weight:600;color:var(--ink)}
.wl-step p{margin:0;font-size:14px;line-height:1.55;color:var(--t2)}
.wl-step .eg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wl-keys{margin-top:24px;padding:16px 20px;background:var(--card);border-radius:12px;box-shadow:var(--sh-card)}
.wl-keys .ys-keys{font-size:13px;color:var(--t2);gap:10px 20px}
.wl-go{display:flex;gap:10px;margin-top:28px}
@media (max-width:759px){.wl-steps{grid-template-columns:1fr}.tk-addb{padding:0 6px}}
.td-top .td-date{white-space:nowrap}

/* a task's words as written: readable line length, paragraphs, lists, labels, short links; long text folds */
.tk-desc,.tk-ct{max-width:68ch;font-size:14.5px;line-height:1.65;color:var(--t1b)}
.tk-desc p,.tk-ct p{margin:0 0 10px}
.tk-desc p:last-child,.tk-ct p:last-child{margin-bottom:0}
.tk-desc ul,.tk-desc ol,.tk-ct ul,.tk-ct ol{margin:0 0 10px;padding-left:20px}
.tk-desc li,.tk-ct li{margin:2px 0}
.tk-desc .tk-h,.tk-ct .tk-h{margin:14px 0 4px;font-weight:600;color:var(--ink)}
.tk-desc .tk-h:first-child,.tk-ct .tk-h:first-child{margin-top:0}
.tk-desc a,.tk-ct a{color:var(--gt);word-break:break-word}
.tk-fold.folded .tk-fold-in{max-height:420px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.tk-more{margin-top:10px;height:30px;padding:0 12px;border:0;border-radius:7px;background:var(--btn);box-shadow:inset 0 0 0 1px var(--ring);font-size:13px;font-weight:500;color:var(--ink)}
.tk-more:hover{background:var(--btn-h)}