/* The Stokehouse skin (skin-v1): one type system, one spacing, radius and elevation scale, one set of components, on every
   screen of the app. Loaded last; packets keep their own designs (packet.css). Colours come from the tokens in look.css.
   Type: Fredoka for the wordmark and big headings, Sora for reading, Michroma for labels and the bar.
   Elevation: one rule. A raised surface is one step lighter than what it sits on, with a hairline; only sheets cast a shadow. */
@font-face{font-family:Fredoka;src:url(/fonts/fredoka-latin-wght-normal.woff2) format('woff2');font-weight:300 700;font-display:swap}
:root{
  --f-word:Fredoka,Nunito,"Helvetica Neue",Arial,sans-serif;--f-ui:Sora,"Helvetica Neue",Arial,sans-serif;--f-label:Michroma,"Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-s:10px;--r-m:14px;--r-l:20px;--r-pill:999px;
  --fg-rgb:246,245,241;--surface-deep:#0B0C0D;   /* the text colour as r,g,b, for faint lines and muted text */
  --surface-0:#121314;--surface-1:#1C1D1F;--surface-2:#26272A;--hair:rgba(var(--fg-rgb),.12);--hair-strong:rgba(var(--fg-rgb),.24);
  --sheet-shadow:0 -12px 40px rgba(0,0,0,.5);
}
body.look{font:400 15px/1.5 var(--f-ui);background:var(--surface-0)}
body.look b:not(.op *),body.look strong:not(.op *){font-weight:600}

/* ---------- type */
.wordmark,body.look .lk-name{font:600 24px/1 var(--f-word);letter-spacing:-.01em;text-transform:lowercase;color:var(--lead-text);text-decoration:none}
body.look h1:not(.op *),body.look .whead h1,body.look .lk-h1,body.look .lk-title,body.look .qcard h2,body.look .center h1{font-family:var(--f-word);font-weight:600;letter-spacing:-.01em;text-transform:none;line-height:1.12}
body.look .lk-h1,body.look .whead h1{font-size:30px;margin:var(--s1) 0 var(--s2)}
body.look .lk-title{font-size:26px}
body.look h2:not(.op *){font:600 20px/1.2 var(--f-word);letter-spacing:0}
body.look h3:not(.op *),body.look h4:not(.op *){font:600 16px/1.3 var(--f-ui);letter-spacing:0}
body.look .sec>h2,body.look .kick,body.look .whead .kick,body.look .lk-sech,body.look label.l,body.look .pmenu-who,body.look .p-gh{font:400 10px/1.3 var(--f-label)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--c-cream-3)}
body.look .whead .kick,body.look .lk-sech{color:var(--lead-text)!important}
body.look label.l{display:block;margin:var(--s4) 0 var(--s2)}
body.look .mute:not(.op *){color:var(--c-cream-3)}body.look .small{font-size:14px}body.look .tiny{font-size:12.5px}
body.look .fine{font-size:13px;color:var(--c-cream-3);line-height:1.45}
body.look .sec{margin-top:var(--s6)}
body.look .whead{padding:var(--s5) 0 var(--s2)}
body.look .whead p{font-size:15px}

/* ---------- buttons: primary (apricot, one per screen), secondary (raised), quiet (outline); all 44 px or more */
body.look .btn{min-height:48px;padding:0 var(--s5);border-radius:var(--r-pill);border:1px solid transparent;background:var(--surface-2);color:var(--ink);font:600 15px var(--f-ui);letter-spacing:0;box-shadow:none;transform:none}
body.look .btn:hover{transform:none;filter:brightness(1.12)}
body.look .btn.accent{background:var(--lead);color:var(--lead-ink)}
body.look .btn.accent:hover{background:#FFE433}
body.look .btn.ghost{background:transparent;border-color:var(--hair-strong);color:var(--ink)}
body.look .btn.ghost:hover{background:rgba(var(--fg-rgb),.05)}
body.look .btn.small{min-height:44px;padding:0 var(--s4);font-size:14px}
body.look .btn.big{min-height:64px;font-size:22px}
body.look .linkbtn{min-height:44px;display:inline-flex;align-items:center;background:none;border:0;padding:0 var(--s1);color:var(--c-cream-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
body.look .btn[disabled]{opacity:.45}

/* ---------- inputs */
body.look .field,body.look select.field{min-height:48px;padding:var(--s3) var(--s4);border-radius:var(--r-m);border:1px solid var(--hair-strong);background:var(--surface-1);color:var(--ink);font:400 16px var(--f-ui)}
body.look textarea.field{line-height:1.45}
body.look .field::placeholder{color:rgba(var(--fg-rgb),.4)}
body.look .field:focus{border-color:var(--lead);box-shadow:0 0 0 3px rgba(255,221,0,.22)}
body.look :focus-visible:not(.op *):not([tabindex="-1"]){outline:2px solid var(--lead);outline-offset:2px}
body.look input[type=checkbox]:not(.op *){width:20px;height:20px;flex:none;accent-color:var(--lead)}
body.look .err:not(.op *){color:var(--needs-text);font-size:14px;min-height:0}
body.look .err:empty{display:none}

/* ---------- surfaces: cards (r-l), rows and items (r-m), chips (pill) */
body.look .card,body.look .panel,body.look .acard,body.look .bstep,body.look .piece,body.look .chat,body.look .lk-make,body.look .opt,body.look .rg-card,body.look .learn-stage{background:var(--surface-1);border:1px solid var(--hair);border-radius:var(--r-l);box-shadow:none}
body.look .card,body.look .panel{padding:var(--s4)}
body.look .item,body.look .job{background:var(--surface-1);border:1px solid var(--hair);border-radius:var(--r-m);box-shadow:none;transform:none}
body.look .item{min-height:56px;padding:var(--s3) var(--s4)}
body.look .item:hover,body.look .job:hover{border-color:var(--hair-strong);transform:none;box-shadow:none}
body.look .list{display:grid;gap:var(--s2)}
body.look .chip{min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--hair-strong);background:transparent;color:var(--ink);font:500 14px var(--f-ui);transform:none}
body.look .chip.sm{min-height:44px;font-size:13.5px}
body.look .chip.on,body.look .chip[aria-pressed=true]{background:var(--c-cream);color:var(--surface-0);border-color:var(--c-cream)}
body.look .tag{font:400 9px var(--f-label);letter-spacing:.12em;border-radius:var(--r-pill);padding:4px 9px}
body.look .badge.new{background:none;color:var(--link-text);border:1px solid var(--link);border-radius:var(--r-pill);font:400 9px var(--f-label);letter-spacing:.1em;padding:3px 8px}
body.look .note,body.look .said,body.look .bubble{background:var(--surface-2);border-radius:var(--r-m);color:var(--ink)}
body.look .kv{gap:var(--s2) var(--s4)}
body.look table td,body.look table th{border-top:1px solid var(--hair);padding:var(--s2)}
body.look .code.mono{font:500 13px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em}

/* toasts tell you something changed (peacock); errors are coral */
body.look .toast{background:var(--surface-2);color:var(--ink);border-radius:var(--r-m);border-left:3px solid var(--link);padding:var(--s3) 40px var(--s3) var(--s4);font-size:14.5px}

/* sheets: the one surface with a shadow */
body.look .lk-panel,body.look .op-panel{box-shadow:var(--sheet-shadow)}

/* empty states: a quiet dashed box, one line, often a way forward */
body.look .section-empty,body.look .lk-quiet,body.look #section-empty,body.look #rg-empty{display:block;padding:var(--s4);border:1px dashed var(--hair-strong);border-radius:var(--r-m);color:var(--c-cream-3);font-size:14px;text-align:center;background:none}
body.look .section-empty a{color:var(--lead-text)}

/* loading: the Scout bars pulse while the first screen comes in (still under Reduce Motion) */
body.look #app:empty{min-height:100vh;display:grid;place-items:center}
body.look #app:empty::before{content:'';width:46px;height:28px;background:linear-gradient(var(--lead),var(--lead)) 0 50%/4px 12px no-repeat,linear-gradient(var(--lead),var(--lead)) 10px 50%/4px 20px no-repeat,linear-gradient(var(--lead),var(--lead)) 20px 50%/4px 28px no-repeat,linear-gradient(var(--lead),var(--lead)) 30px 50%/4px 20px no-repeat,linear-gradient(var(--lead),var(--lead)) 40px 50%/4px 12px no-repeat;animation:skPulse 1.1s ease-in-out infinite}
@keyframes skPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){body.look #app:empty::before{animation:none}}
body.look .making{padding:var(--s6) 0}
body.look .making h2{font-size:26px}
body.look .phase{min-height:32px;font-size:15px}
body.look .phase.done i{background:var(--going);border-color:var(--going);color:var(--surface-0)}
body.look .phase.run i{border-color:var(--lead);border-top-color:transparent}

/* ---------- sign-in */
body.look .hero{border-radius:0 0 var(--r-l) var(--r-l)}
body.look .hero .brand{gap:0}
body.look .hero .brand .markline,body.look .brand .markline{display:none}
body.look .hero .brand span,body.look .center .brand span{font:600 30px/1 var(--f-word);letter-spacing:-.01em;text-transform:lowercase;color:var(--lead-text)}
body.look .hero h1{font:600 clamp(30px,8.6vw,44px)/1.08 var(--f-word);text-transform:none;letter-spacing:-.01em;margin-top:var(--s4)}
body.look .hero p.lead{font-size:16px;color:var(--c-cream-2);opacity:1}
body.look .hero::before{display:none}
body.look .gate .card{margin-top:-24px;padding:var(--s5)}
body.look .gate .card h2{font-size:24px;margin-bottom:var(--s1)}
body.look .hero .pause{min-height:44px;border-radius:var(--r-pill);font:500 13px var(--f-ui)}
body.look .appfoot{font:400 10px var(--f-label);letter-spacing:.14em;text-transform:lowercase;color:var(--c-cream-3)}

/* ---------- the making flow */
body.look .qcard{padding-top:var(--s5)}
body.look .qcard h2{font-size:26px;margin:var(--s3) 0}
body.look .dots i{background:var(--hair-strong)}body.look .dots i.on{background:var(--lead)}
body.look .bs-head{min-height:60px}
body.look .bs-head .lb{font:500 16px var(--f-ui)}
body.look .bs-head .tk{font:400 11px var(--f-label);border-color:var(--hair-strong)}
body.look .bars{display:grid;gap:var(--s2)}
body.look .ph h3{font:600 16px var(--f-ui)}
body.look .rcpt dt{font:600 12px var(--f-ui);color:var(--c-cream-3)}
body.look .acard .ac-head b{font:600 18px var(--f-word)}
body.look .ac-list li{min-height:44px}

/* ---------- Scout */
body.look .chat{overflow:hidden}
body.look .msg{font-size:15px;line-height:1.45;border-radius:var(--r-l);padding:var(--s2) var(--s3)}
body.look .msg.out{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:var(--s1)}
body.look .msg.in{background:var(--lead);color:var(--lead-ink);border-bottom-right-radius:var(--s1)}
body.look .chat form{border-top:1px solid var(--hair);padding:var(--s2)}
body.look .chat form .field{min-height:48px;border-radius:var(--r-pill)}
body.look .chat form .btn{min-height:48px}

/* ---------- owner and other stand-alone pages */
body.look .center{padding:var(--s6) var(--gut)}
body.look .center .brand{display:flex;margin-bottom:var(--s4)}
body.look .center h1{font-size:30px}

/* ---------- the bar, the readout and the back use Michroma labels already (look.css); tighten to the scale */
body.look .lk-readout,body.look .lk-card{border-radius:var(--r-l)}
body.look .lk-tile{border-radius:var(--r-s)}
body.look .lk-chip{border-radius:var(--r-pill)}
body.look .lk-hi{font-size:15px}

/* the maker wears the shared header; its title row carries Send */
.pk-titlerow{box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:10px}.pk-titlerow .lk-title{margin:0}.pk-titlerow .pk-send{min-height:44px;flex:none}
body.look .field:focus-visible{outline:none}   /* the field draws its own focus: apricot border and glow */

/* ---------- the 10-4 front: one glance. A ticket, four tiles, one bar */
body.look .lk-home{padding-top:var(--s4)}
.lk-hero{border-radius:var(--r-l);overflow:hidden;background:var(--pk-sheet);color:var(--pk-ink);border-top:4px solid var(--pk-btn)}
.lk-hero[data-design=receipt]{border-top:2px dashed #111}
.lk-herolink{display:flex;flex-direction:column;gap:6px;padding:var(--s4) var(--s4) var(--s3);text-decoration:none;color:inherit}
.lk-herolink small{font:600 10px var(--pk-label);letter-spacing:.14em;text-transform:uppercase;color:var(--pk-a)}
.lk-herolink b{font-family:var(--pk-title);font-weight:var(--pk-title-w);font-size:clamp(26px,8vw,34px);line-height:1;letter-spacing:var(--pk-title-ls);text-transform:var(--pk-title-case);color:var(--pk-title-ink);text-shadow:var(--pk-shadow);overflow-wrap:anywhere}
.lk-herolink span{font:500 15px var(--pk-body);color:var(--pk-ink2)}
.lk-herofoot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-top:var(--pk-perf);background:var(--pk-stub)}
.lk-herobtn{min-height:44px;padding:0 var(--s5);display:inline-flex;align-items:center;border-radius:var(--pk-pill-r);background:var(--pk-btn);color:var(--pk-btn-ink);font:800 13px var(--pk-label);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.lk-hero .lk-face{background:var(--pk-a);color:var(--pk-sheet);border-color:var(--pk-stub)}
.lk-hero.empty{background:var(--surface-1);border:1px dashed var(--hair-strong);border-top:1px dashed var(--hair-strong);padding:var(--s5) var(--s4);display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
body.look .lk-makebig{min-height:56px;width:100%;max-width:320px;font-size:17px}
.lk-ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
body.look .lk-ideas .job.chip{display:inline-flex;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);font:500 14px var(--f-ui)}
.lk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}
.lk-w{all:unset;box-sizing:border-box;cursor:pointer;min-height:118px;padding:var(--s4);border-radius:var(--r-l);background:var(--surface-1);border:1px solid var(--hair);display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-items:end;gap:var(--s2);text-decoration:none;color:var(--c-cream)}
.lk-w:hover{border-color:var(--hair-strong)}
.lk-w:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
.lk-wart{grid-column:1 / -1;align-self:start;display:flex;align-items:center;min-height:36px}
.lk-wnum{font:600 34px/1 var(--f-word);color:var(--c-cream)}
.lk-wnum.alert{color:var(--needs-text)}
.lk-w small{grid-column:1 / -1;font:400 9.5px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--c-cream-3)}
.lk-w .lk-wnum+small{grid-column:1 / -1}
.lk-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--c-cream-3)}
.lk-dot.on{background:var(--needs);border-color:var(--needs)}
.lk-thumbs{display:flex;gap:4px}
.lk-thumbs i{width:22px;height:30px;border-radius:4px;background:var(--pk-sheet);border-top:3px solid var(--pk-btn)}
.lk-thumbs i.empty{background:none;border:1px dashed var(--hair-strong)}
.lk-faces{display:flex;align-items:center}
.lk-face{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--f-word);background:var(--surface-2);color:var(--c-cream);border:2px solid var(--surface-1)}
.lk-faces.stack .lk-face+.lk-face{margin-left:-10px}
.lk-face.f0{background:var(--lead);color:var(--lead-ink)}.lk-face.f1{background:var(--link);color:#062226}.lk-face.f2{background:var(--going);color:#0B2615}.lk-face.f3{background:var(--needs);color:#2A0D0C}
.lk-face.add{background:none;border:1.5px dashed var(--hair-strong);color:var(--c-cream-3)}
.lk-face.more{background:var(--surface-2);font-size:11px}
.lk-hero .lk-faces .lk-face+.lk-face{margin-left:-8px}
.lk-wring{color:var(--lead-text);display:block;width:44px;height:44px}.lk-wring svg{width:44px;height:44px;display:block}
.lk-saybar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:4px 4px 4px var(--s4);border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--hair-strong)}
.lk-saybar:focus-within{border-color:var(--lead);box-shadow:0 0 0 3px rgba(255,221,0,.18)}
.lk-sayin{flex:1;min-width:0;min-height:48px;border:0;background:none;color:var(--c-cream);font:400 16px var(--f-ui);outline:none}
.lk-sayin::placeholder{color:rgba(var(--fg-rgb),.42)}
.lk-saygo{all:unset;cursor:pointer;width:48px;height:48px;border-radius:50%;background:var(--lead);color:var(--lead-ink);display:grid;place-items:center;flex:none}
.lk-saygo svg{width:20px;height:20px}
.lk-saygo:focus-visible{outline:2px solid var(--c-cream);outline-offset:2px}
/* the front's sheet (Needs you) */
.lk-sheet{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end}
.lk-sheetscrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.6);cursor:pointer}
.lk-sheetpanel{position:relative;width:100%;max-width:560px;margin:0 auto;max-height:80vh;overflow:auto;padding:var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface-1);box-shadow:var(--sheet-shadow);display:flex;flex-direction:column;gap:var(--s2)}
.lk-grab{align-self:center;width:40px;height:5px;border-radius:3px;background:rgba(var(--fg-rgb),.25)}
.lk-sheethead{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:48px}
body.sheetopen{overflow:hidden}
/* Scout: what it knows, one quiet line above the chat */
.lk-knows{margin:var(--s2) 0 var(--s3);font-size:13px;color:var(--c-cream-3)}
.lk-knowsk{font:400 9px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--lead-text);margin-right:var(--s2)}
/* a section on offer: one line, Add */
.lk-offer{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) var(--s2) var(--s2) var(--s4);margin-bottom:var(--s3);border-radius:var(--r-m);background:var(--surface-1);border:1px solid var(--hair)}
.lk-offert{flex:1;display:flex;flex-direction:column;min-width:0}
.lk-offert b{font:600 16px var(--f-word)}.lk-offert small{font-size:12.5px;color:var(--c-cream-3)}
.lk-saybar{margin-top:var(--s3)}
.lk-w{min-height:104px}
.lk-fine{margin:var(--s2) var(--s2) 0;text-align:center}

/* ---------- Light: the same layout and roles as a token set. Apricot stays the main action (a fill, with dark text);
   wherever a role colour is text it uses its darker *-text token so it passes 4.5:1 on the light paper. */
html[data-appearance=light]{--fg-rgb:20,21,23;--surface-0:#F6F5F1;--surface-1:#FFFFFF;--surface-2:#ECEAE4;--surface-deep:#FFFFFF;
  --c-base:#F6F5F1;--c-deep:#FFFFFF;--c-cream:#141517;--lead-text:#7A5F00;--link-text:#0A6F78;--going-text:#1D7442;--needs-text:#B83A33;
  --sheet-shadow:0 -12px 40px rgba(20,21,23,.18);color-scheme:light}
html[data-appearance=light] body.tf.look{--paper:#F6F5F1;--ink:#141517;--card:#FFFFFF;--line:rgba(20,21,23,.12);--soft:rgba(20,21,23,.06);--mute:rgba(20,21,23,.62);--accent-text:#7A5F00;color-scheme:light}
html[data-appearance=light] .lk-ddpanel{box-shadow:0 18px 50px rgba(20,21,23,.18)}
html[data-appearance=light] .lk-ring,html[data-appearance=light] .lk-wring{color:var(--lead-text)}
/* Settings */
.lk-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);padding:var(--s1);border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--hair)}
.lk-seg button{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;border-radius:var(--r-pill);display:grid;place-items:center;text-align:center;font:500 14px var(--f-ui);color:var(--c-cream-2);padding:0 var(--s2)}
.lk-seg button[aria-pressed=true]{background:var(--c-cream);color:var(--surface-0);font-weight:600}
.lk-seg button:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
/* dictation: the mic sits at the left of the box; while it listens, it and the Scout ring pulse */
.lk-mic{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--c-cream-2);background:var(--surface-2)}
.lk-mic svg{width:20px;height:20px}
.lk-mic:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
.lk-mic.on{background:var(--needs);color:#fff;animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{50%{box-shadow:0 0 0 8px rgba(240,110,104,.18)}}
body.dictating .lk-ring svg,body.dictating .lk-wring svg{animation:ringPulse 1.2s ease-in-out infinite}
@keyframes ringPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.lk-mic.on,body.dictating .lk-ring svg,body.dictating .lk-wring svg{animation:none}}
.lk-saybar.has-mic{padding-left:4px}
.lk-boxmic{display:flex;align-items:flex-start;gap:var(--s2)}
.lk-boxmic .field{flex:1;min-width:0}
body.look .chat form{align-items:center}
.lk-sayin:focus-visible{outline:none}   /* the bar draws the focus */

/* ---------- the header: a small brand mark at the left, the place pill at the right ("10-4 ▾") that opens the menu */
.lk-head .lk-headrow,.lk-head.back .lk-headrow{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.lk-mark{display:flex;align-items:center;min-height:44px;text-decoration:none}
.lk-mark .lk-word{height:20px;width:auto}.lk-mark .lk-word[data-logo=black]{height:27px}
.lk-place{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 14px 0 16px;display:inline-flex;align-items:center;gap:8px;border-radius:10px;background:var(--lead);color:var(--lead-ink);box-shadow:var(--place-shadow,none)}
.lk-place .lk-navtool{font:600 16px/1 var(--f-word);color:inherit;letter-spacing:0}
.lk-place .lk-chev{color:inherit;width:12px;height:8px}.lk-place .lk-chev svg{width:12px;height:8px}
.lk-place:focus-visible{outline:2px solid var(--c-cream);outline-offset:2px}
.lk-place[aria-expanded=true] .lk-chev{transform:scaleY(-1)}
/* Back: top-left on every step of a flow and every drill-in (where the mark sits on a top-level page). One step back, in the theme. */
.lk-back{all:unset;box-sizing:border-box;flex:none;white-space:nowrap;cursor:pointer;min-height:44px;min-width:44px;padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-m,10px);border:1.5px solid var(--hair-strong);color:var(--c-cream);font:600 15px/1 var(--f-ui);-webkit-tap-highlight-color:transparent}
.lk-back .lk-backchev{display:block;width:9px;height:15px;color:var(--lead-text)}.lk-back .lk-backchev svg{width:9px;height:15px;display:block}
.lk-back:hover{border-color:var(--lead-text)}.lk-back:active{transform:translateY(1px)}
.lk-back:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
.gate{position:relative}.gate>.lk-back{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 12px);left:16px;background:var(--surface-1)}
html[data-themed] .lk-back{border-radius:var(--th-pill);font-family:var(--th-display);text-transform:var(--th-btn-case);letter-spacing:.02em;font-size:14px}
@media (prefers-reduced-motion:reduce){.lk-back:active{transform:none}}
.lk-ddpanel{margin-right:max(16px,calc((100vw - 1040px) / 2 + 16px));margin-left:auto}
.lk-by{text-align:center;font:400 8px var(--f-label);letter-spacing:.24em;text-transform:lowercase;color:rgba(var(--fg-rgb),.38);padding-top:2px}
main.lk{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.lk-seg{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-l)}
.lk-seg button{border-radius:var(--r-m)}
@media (min-width:520px){#appearance.lk-seg{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- the plan, for its host: facts up top (like the packet), one main action always in view, detail closed */
.wk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s3);border:1px solid var(--hair-strong);border-radius:var(--r-m);overflow:hidden;background:var(--surface-1)}
.wk-cell{padding:var(--s3);display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.wk-cell+.wk-cell{border-left:1px solid var(--hair-strong)}
.wk-cell small{font:400 9px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--lead-text)}
.wk-cell b{font:600 15px/1.25 var(--f-ui)}
.wk-main{margin-top:var(--s4);display:flex;flex-direction:column;align-items:stretch;gap:var(--s2)}
body.look .wk-main .btn.big{min-height:60px;font-size:20px;width:100%}
.wk-note{font-size:13px;color:var(--c-cream-3);text-align:center}
.wk-seconds{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s3)}
.wk .changebar{margin-top:var(--s3)}
.wk-change{display:flex;gap:var(--s2)}
.wk .bars{margin-top:var(--s5)}
.wk-sec .bs-head{min-height:56px}
.wk-done{color:var(--going-text);font-weight:700}

/* ---------- Overprint, the app theme: the packet's look on every screen. Cream newsprint, blue print ink, orange spot ink
   for the one main action, Unbounded headings with the offset second colour, square ruled cards, grain and halftone dots. */
html[data-themed]{--fg-rgb:var(--th-ink-rgb);--surface-0:var(--th-paper);--surface-1:var(--th-card);--surface-2:var(--th-stub);--surface-deep:var(--th-card);
  --c-base:var(--th-paper);--c-deep:var(--th-paper);--c-cream:var(--th-ink);--hair:var(--th-hair);--hair-strong:var(--th-a);
  --lead:var(--th-btn);--lead-ink:var(--th-btn-ink);--lead-text:var(--th-a);--link:var(--th-a);--link-text:var(--th-a);--going-text:var(--th-going);--needs:var(--th-needs);--needs-text:var(--th-needs);
  --f-word:var(--th-display);--f-ui:var(--th-body);--f-label:var(--th-display);--title:var(--th-display);--display:var(--th-body);
  --r-s:var(--th-r);--r-m:var(--th-r);--r-l:var(--th-r-l);--place-shadow:var(--th-pill-shadow);--sheet-shadow:0 -10px 30px rgba(var(--th-ink-rgb),.18)}
html[data-themed] body.tf.look{--paper:var(--th-paper);--ink:var(--th-ink);--card:var(--th-card);--line:var(--th-hair);--soft:var(--th-soft);--mute:var(--th-ink2);--accent-text:var(--th-a);color-scheme:light;font-family:var(--f-ui)}
html[data-family=overprint] body.look::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.12;mix-blend-mode:var(--th-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
html[data-themed] main.lk,html[data-themed] .lkbar{position:relative;z-index:1}
html[data-themed] .lkbar{position:fixed;background:var(--th-paper);border-top:var(--th-rule)}
html[data-themed] .lk-home{position:relative}
html[data-family=overprint] .lk-home::before{content:'';position:absolute;right:-90px;top:-20px;width:260px;height:260px;border-radius:50%;z-index:-1;pointer-events:none;opacity:.85;background-image:radial-gradient(var(--th-dot) 2.2px,transparent 2.6px);background-size:8px 8px}
html[data-themed] main.lk{overflow-x:clip}
html[data-themed] body.look h1:not(.op *),html[data-themed] body.look .lk-h1,html[data-themed] body.look .lk-title,html[data-themed] body.look .whead h1{font-family:var(--th-display);font-weight:var(--th-h-w);text-transform:var(--th-h-case);letter-spacing:var(--th-h-ls);color:var(--th-a);text-shadow:var(--th-h-shadow);line-height:.95}
html[data-themed] body.look h2:not(.op *){font-family:var(--th-display);font-weight:var(--th-h2-w);letter-spacing:-.01em;color:var(--th-a)}
html[data-themed] body.look .sec>h2,html[data-themed] body.look label.l,html[data-themed] body.look .lk-sech{font:700 9px var(--th-display)!important;letter-spacing:.12em!important;color:var(--th-a)!important}
html[data-themed] body.look .sec{border-top:var(--th-rule);padding-top:10px}
html[data-themed] body.look .card,html[data-themed] body.look .panel,html[data-themed] body.look .acard,html[data-themed] body.look .bstep,html[data-themed] body.look .piece,html[data-themed] body.look .chat,html[data-themed] body.look .lk-make,html[data-themed] body.look .item,html[data-themed] body.look .job,html[data-themed] body.look .lk-w,html[data-themed] body.look .lk-saybar,html[data-themed] .lk-ddpanel,html[data-themed] .lk-offer{border:var(--th-rule);border-radius:var(--r-l);background:var(--th-card)}
html[data-themed] body.look .btn{border-radius:var(--th-pill);font-family:var(--th-display);font-weight:var(--th-btn-w);font-size:13px;letter-spacing:.04em;text-transform:var(--th-btn-case);background:transparent;border:var(--th-rule);color:var(--th-ink)}
html[data-themed] body.look .btn.accent{background:var(--th-btn);border-color:var(--th-btn);color:var(--th-btn-ink);box-shadow:var(--th-pill-shadow)}
html[data-themed] body.look .chip{border:var(--th-rule);border-radius:var(--th-r);font-family:var(--th-body)}
html[data-themed] body.look .chip.on,html[data-themed] body.look .chip[aria-pressed=true]{background:var(--th-a);color:var(--th-paper);border-color:var(--th-a)}
html[data-themed] body.look .field{border:var(--th-rule);border-radius:var(--th-r);background:var(--th-card)}
html[data-themed] .lk-tab{font-family:var(--th-display);font-weight:600;font-size:8px;letter-spacing:.1em;color:var(--th-ink2)}
html[data-themed] .lk-tab[aria-current=page]{color:var(--th-a)}
html[data-themed] .lk-ring,html[data-themed] .lk-wring{color:var(--th-a)}
html[data-themed] .lk-saygo{background:var(--th-btn);color:var(--th-btn-ink);box-shadow:var(--th-pill-shadow)}
html[data-themed] .lk-wnum{font-family:var(--th-display);font-weight:var(--th-h-w);color:var(--th-a);text-shadow:var(--th-n-shadow)}
html[data-themed] .lk-w small{font:700 9px var(--th-display);letter-spacing:.12em;color:var(--th-a)}
html[data-themed] .lk-face{border-radius:var(--th-face-r);border-color:var(--th-card);font-family:var(--th-display);font-size:11px}
html[data-themed] .lk-face.f0{background:var(--th-a);color:var(--th-paper)}.lk-face.f1{}
html[data-themed] .lk-face.f1{background:var(--th-btn);color:var(--th-ink)}html[data-themed] .lk-face.f2{background:var(--th-ink);color:var(--th-paper)}html[data-themed] .lk-face.f3{background:var(--th-ink2);color:var(--th-paper)}
html[data-themed] .lk-dot.on{background:var(--th-btn);border-color:var(--th-btn)}
html[data-themed] .lk-dditem b{font-family:var(--th-display);font-weight:var(--th-h2-w);font-size:14px;text-transform:var(--th-btn-case);color:var(--th-a)}
html[data-themed] .lk-dditem[aria-current=page]{background:var(--th-stub)}
html[data-themed] .lk-place{font-family:var(--th-display)}
html[data-themed] .lk-place .lk-navtool{font:var(--th-btn-w) 13px var(--th-display);text-transform:var(--th-btn-case);letter-spacing:.04em}
html[data-themed] .lk-tint{height:1.5px}
html[data-themed] body.look .msg.out{background:var(--th-stub);color:var(--th-ink);border-radius:var(--th-r)}
html[data-themed] body.look .msg.in{background:var(--th-a);color:var(--th-paper);border-radius:var(--th-r)}
html[data-themed] body.look .toast{background:var(--th-stub);border-left-color:var(--th-a)}
html[data-themed] .lk-sheetpanel{background:var(--th-paper);border-top:var(--th-rule);border-radius:var(--th-r)}
html[data-themed] .lk-seg button[aria-pressed=true]{background:var(--th-a);color:var(--th-paper)}
html[data-themed] .lk-by{font-family:var(--th-display);color:var(--th-ink2)}
html[data-themed] .tag.on{color:var(--going-text);box-shadow:inset 0 0 0 1px var(--going-text)}

html[data-themed] .wk-facts{border:var(--th-rule);border-radius:var(--th-r);background:var(--th-card)}
html[data-themed] .wk-cell+.wk-cell{border-left:var(--th-rule)}
html[data-themed] .wk-cell small{font:700 9px var(--th-display);color:var(--th-a)}
/* the Packets tile: a tiny ticket per open packet, in its own design (title letter in the packet's title type and ink) */
.lk-thumbs i{width:28px;height:36px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-family:var(--pk-title);font-weight:var(--pk-title-w);font-size:17px;line-height:1;color:var(--pk-title-ink);text-shadow:1.5px 1px 0 var(--pk-dot,transparent);background:var(--pk-sheet);border-top:3px solid var(--pk-btn)}
.lk-thumbs i[data-design=receipt]{border-top:2px dashed #111;text-shadow:none}
.lk-thumbs i:not([data-family=overprint]){text-shadow:none}

/* ---------- the app themes: each is only a token set (plus its one signature detail). Overprint has four inks;
   Sunday, Letterpress and Receipt are designs of their own. They mirror the packet designs. */
html[data-themed]{--th-going:#1D6B45;--th-needs:#B4321F;--th-r:2px;--th-r-l:4px;--th-face-r:0;--th-pill:10px;--th-pill-shadow:2px 2px 0 var(--th-a);
  --th-h-w:900;--th-h2-w:800;--th-btn-w:800;--th-h-case:uppercase;--th-btn-case:uppercase;--th-h-ls:-.03em;--th-h-shadow:3px 2px 0 var(--th-shadow-c);--th-n-shadow:2px 1px 0 var(--th-shadow-c);
  --th-rule:1.5px solid var(--th-a);--th-display:Unbounded,"Arial Black",sans-serif;--th-body:Onest,"Helvetica Neue",Arial,sans-serif;--th-blend:multiply}
html[data-appearance=club],html[data-appearance=overprint]{--th-paper:#EFEBE1;--th-card:#F6F3EB;--th-stub:#E4DED0;--th-ink:#10213F;--th-ink-rgb:16,33,63;--th-ink2:#46526A;--th-a:#0A5AA8;--th-btn:#FF6C2F;--th-btn-ink:#10213F;--th-dot:#FF6C2F;--th-shadow-c:rgba(255,108,47,.8);--th-hair:rgba(10,90,168,.35);--th-soft:rgba(10,90,168,.08);color-scheme:light}
html[data-appearance=sunshine]{--th-paper:#F3EEE0;--th-card:#F9F5EA;--th-stub:#E9E2CF;--th-ink:#10292B;--th-ink-rgb:16,41,43;--th-ink2:#4A5A5B;--th-a:#00666C;--th-btn:#FFDD00;--th-btn-ink:#17140A;--th-dot:#FFDD00;--th-shadow-c:rgba(255,221,0,.95);--th-hair:rgba(0,102,108,.35);--th-soft:rgba(0,102,108,.08);color-scheme:light}
html[data-appearance=garden]{--th-paper:#F1ECE2;--th-card:#F7F3EB;--th-stub:#E6DFD2;--th-ink:#0E2A26;--th-ink-rgb:14,42,38;--th-ink2:#4B5E5A;--th-a:#004F46;--th-btn:#E2625E;--th-btn-ink:#1A0F0E;--th-dot:#E2625E;--th-shadow-c:rgba(226,98,94,.85);--th-hair:rgba(0,79,70,.35);--th-soft:rgba(0,79,70,.08);color-scheme:light}
html[data-appearance=night]{--th-paper:#121314;--th-card:#1C1D1F;--th-stub:#26272A;--th-ink:#F6F5F1;--th-ink-rgb:246,245,241;--th-ink2:#A9A8A4;--th-a:#FFDD00;--th-btn:#FFDD00;--th-btn-ink:#17140A;--th-dot:#1CB5C4;--th-shadow-c:rgba(28,181,196,.85);--th-hair:rgba(255,221,0,.3);--th-soft:rgba(255,221,0,.08);--th-going:#4CC27F;--th-needs:#F06E68;--th-blend:screen;color-scheme:dark}
html[data-appearance=sunday]{--th-paper:#FFF1C9;--th-card:#FFF8E2;--th-stub:#FFE5A0;--th-ink:#1F3B3D;--th-ink-rgb:31,59,61;--th-ink2:#4F6566;--th-a:#00666C;--th-btn:#00666C;--th-btn-ink:#FFF1C9;--th-dot:transparent;--th-shadow-c:transparent;--th-hair:rgba(0,102,108,.3);--th-soft:rgba(0,102,108,.1);
  --th-r:14px;--th-r-l:18px;--th-face-r:50%;--th-pill:999px;--th-pill-shadow:none;--th-h-w:600;--th-h2-w:600;--th-btn-w:600;--th-h-case:none;--th-btn-case:none;--th-h-ls:-.01em;--th-h-shadow:none;--th-n-shadow:none;
  --th-rule:2px solid rgba(0,102,108,.35);--th-display:Fredoka,Nunito,sans-serif;--th-body:Nunito,"Helvetica Neue",Arial,sans-serif;color-scheme:light}
html[data-appearance=letterpress]{--th-paper:#F4EEE3;--th-card:#F8F3EA;--th-stub:#EDE4D4;--th-ink:#2A1A17;--th-ink-rgb:42,26,23;--th-ink2:#6D5A52;--th-a:#8E2A2E;--th-btn:#8E2A2E;--th-btn-ink:#F4EEE3;--th-dot:transparent;--th-shadow-c:transparent;--th-hair:rgba(142,42,46,.3);--th-soft:rgba(142,42,46,.08);
  --th-r:2px;--th-r-l:2px;--th-face-r:0;--th-pill:2px;--th-pill-shadow:none;--th-h-w:400;--th-h2-w:400;--th-btn-w:600;--th-h-case:none;--th-btn-case:none;--th-h-ls:0;--th-h-shadow:none;--th-n-shadow:none;
  --th-rule:1px solid #8E2A2E;--th-display:"DM Serif Display",Georgia,serif;--th-body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;color-scheme:light}
html[data-appearance=receipt]{--th-paper:#FFFFFF;--th-card:#FFFFFF;--th-stub:#F2F2EF;--th-ink:#111111;--th-ink-rgb:17,17,17;--th-ink2:#555555;--th-a:#111111;--th-btn:#FFDD00;--th-btn-ink:#111111;--th-dot:transparent;--th-shadow-c:transparent;--th-hair:rgba(17,17,17,.3);--th-soft:rgba(17,17,17,.06);
  --th-r:0;--th-r-l:0;--th-face-r:0;--th-pill:0;--th-pill-shadow:none;--th-h-w:700;--th-h2-w:700;--th-btn-w:700;--th-h-case:uppercase;--th-btn-case:uppercase;--th-h-ls:-.02em;--th-h-shadow:none;--th-n-shadow:none;
  --th-rule:1px dashed #111;--th-display:"JetBrains Mono Packet",ui-monospace,monospace;--th-body:"JetBrains Mono Packet",ui-monospace,monospace;color-scheme:light}
/* signatures: Sunday's three stripes over the header; Letterpress's double keyline under it; Receipt's dashed rules (in its tokens) */
html[data-appearance=sunday] .lk-head{border-top:0;background:linear-gradient(#E2625E 0 6px,transparent 6px 9px,#FFC93C 9px 15px,transparent 15px 18px,#00838A 18px 24px,transparent 24px) top/100% 24px no-repeat;padding-top:24px}
html[data-appearance=letterpress] .lk-rule{height:4px;background:none;border-top:1px solid #8E2A2E;border-bottom:1px solid #8E2A2E}
/* Settings → Themes: one tile per design, the packet's own swatch */
.lk-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.lk-themetile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px}
.lk-themetile .pk-swatch{width:100%;max-width:72px}
.lk-themetile small{font-size:12px;color:var(--c-cream-2);text-align:center}
.lk-themetile[aria-pressed=true] .pk-swatch{outline:2px solid var(--lead-text);outline-offset:2px}
.lk-themetile[aria-pressed=true] small{color:var(--c-cream);font-weight:600}
.lk-themetile:focus-visible{outline:2px solid var(--lead-text);outline-offset:4px;border-radius:8px}
html[data-themed] .lk-place{border-radius:var(--th-pill)}

/* a screen on its way: a thin bar along the top (after 150 ms, so a quick screen shows nothing) */
body.busy::after{content:'';position:fixed;z-index:60;top:0;left:0;height:3px;width:40%;background:var(--lead);border-radius:0 3px 3px 0;animation:skBusy 1s ease-in-out infinite}
@keyframes skBusy{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){body.busy::after{animation:none;width:100%;opacity:.6}}

/* the host's own packet: a slim bar above it (the app's look, not the packet's) */
.op-hostbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 4px;background:#141517;color:#F4F1EA;font:500 14px/1 var(--f-ui)}
.op-hostlbl{flex:1 0 100%;padding:0 10px 2px;font:400 10px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:#FFDD00;white-space:nowrap}
.op-hostbar button,.op-hostbar a{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 10px;display:inline-flex;align-items:center;gap:4px;border-radius:10px;white-space:nowrap;color:inherit}
.op-hostbar button:hover,.op-hostbar a:hover{background:rgba(255,255,255,.08)}
.op-hostbar :focus-visible{outline:2px solid #FFDD00;outline-offset:1px}
.op-hostbar b{font-weight:700}
#p-host-off{margin-left:auto;color:#FF8A80}

/* pages reached by a link, with no app around them (invitee, expired link, unsubscribe): the wordmark on top, then the page */
.lk-public{min-height:100vh;min-height:100svh}
.lk-pubhead .lk-mark{pointer-events:none}
.lk-pubbody{padding-top:var(--s6,28px);padding-bottom:var(--s8,48px)}
.lk-public.wide .lk-pubbody{max-width:760px}
.lk-pubbody h1{font-size:30px;margin:6px 0 10px}.lk-pubbody>h2:first-child{margin-top:0}
/* the connect page (its markup is Scout's): the same wordmark header, drawn in CSS */
body.look .center:has(> #conn){display:block;padding:0;text-align:left}
body.look .center:has(> #conn)::before{content:'';display:block;min-height:64px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--c-line,var(--hair));margin-bottom:var(--s6,28px);background:var(--logo-url,url(/brand/themes/black.svg)) no-repeat var(--gut,16px) calc(50% + env(safe-area-inset-top)/2)/auto 22px}
body.look #conn{padding-bottom:var(--s8,48px)}body.look #conn h1{font-size:30px;margin:0 0 10px}

/* the packet card under a Scout reply: the hero ticket, smaller, with Open · Change look · Send */
.lk-pcard{box-sizing:border-box;width:100%;max-width:420px;flex:none;align-self:stretch;margin:var(--s2,8px) 0 var(--s3,12px)}
.lk-pcard .lk-herolink b{font-size:clamp(22px,6.4vw,28px)}
.lk-pcfoot{flex-wrap:wrap}
.lk-pcbtns{display:flex;flex-wrap:wrap;gap:6px;width:100%}.lk-pcbtns>:last-child{margin-left:auto}
.lk-pcgoing{display:flex;align-items:center;gap:8px;margin-top:4px}.lk-pcard .lk-face{background:var(--pk-a);color:var(--pk-sheet);border-color:var(--pk-sheet)}
.lk-pcbtn{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--pk-pill-r);border:1.5px solid var(--pk-a);color:var(--pk-a);font:700 12px var(--pk-label);letter-spacing:.04em;text-transform:uppercase}
.lk-pcbtn:focus-visible,.lk-pcard .lk-herobtn:focus-visible{outline:2px solid var(--pk-a);outline-offset:2px}
.lk-pcbtn[disabled]{opacity:.5}
.lk-pcerr{margin:0;padding:0 var(--s4,16px);font:500 13px var(--pk-body);color:var(--needs-text,#B83A33)}.lk-pcerr:empty{display:none}
button.lk-herobtn{border:0;cursor:pointer}button.lk-herobtn[disabled]{opacity:.6}
.lk-pcard .lk-herobtn{padding:0 16px}.lk-pcard .lk-pcbtn{padding:0 10px}.lk-pcard .lk-herofoot{padding-left:var(--s3,12px);padding-right:var(--s3,12px)}

/* what came back on a packet: a "+2" badge, a line on the card, first in Needs you, and "New" on the plan */
.lk-new{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;margin-left:8px;border-radius:10px;background:var(--needs,#E5484D);color:#fff;font:700 11px/1 var(--f-ui);letter-spacing:0;vertical-align:middle;text-transform:none}
.ac-news{margin:4px 0 0;font:600 13px var(--f-ui);color:var(--going-text,#1D7442)}
.lk-need.news .lk-needt b{color:var(--going-text,#1D7442)}.lk-need.news .lk-needt small{display:block;margin-top:2px;font:500 12px var(--f-ui);color:var(--mute)}
.lk-w.fresh .lk-wnum::after{content:'';display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--needs,#E5484D);vertical-align:middle}
.wk-news{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 var(--s3,12px);padding:10px 14px;border-radius:var(--r-m,10px);background:var(--surface-1);border:1px solid var(--hair);font:600 14px var(--f-ui);color:var(--going-text,#1D7442)}
.wk-news small{font:400 10px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--needs-text,#B83A33)}

/* the page you tapped, at once: a quiet outline until its content arrives (no shimmer: nothing moves) */
.lk-skel{display:flex;flex-direction:column;gap:12px;padding-top:var(--s5,20px)}
.lk-skel .sk{display:block;border-radius:var(--r-s,8px);background:var(--surface-1);border:1px solid var(--hair)}
.lk-skel .sk.card{height:92px;border-radius:var(--r-l,14px)}.lk-skel .sk.card.short{height:56px}
/* front to back: the bar's tabs fade in, once */
@keyframes lkSideswap{from{opacity:.35}to{opacity:1}}
.lk-sideswap{animation:lkSideswap .16s ease-out}
@media (prefers-reduced-motion:reduce){.lk-sideswap{animation:none}}

/* offline, showing what was kept */
.lk-offline{position:fixed;z-index:55;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 70px);padding:8px 14px;border-radius:999px;background:var(--surface-2,#2A2B2E);color:var(--c-cream);border:1px solid var(--hair-strong);font:600 13px var(--f-ui);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* the theme's own logo: all seven are in the page (loaded once), the theme shows its own, so switching never flashes */
.lk-logo .lk-word{display:none}
html[data-logo=club] .lk-logo .lk-word[data-logo=club]{display:block}
html[data-logo=sunshine] .lk-logo .lk-word[data-logo=sunshine]{display:block}
html[data-logo=garden] .lk-logo .lk-word[data-logo=garden]{display:block}
html[data-logo=sunday] .lk-logo .lk-word[data-logo=sunday]{display:block}
html[data-logo=letterpress] .lk-logo .lk-word[data-logo=letterpress]{display:block}
html[data-logo=receipt] .lk-logo .lk-word[data-logo=receipt]{display:block}
html[data-logo=black] .lk-logo .lk-word[data-logo=black]{display:block}
html:not([data-logo]) .lk-logo .lk-word[data-logo=black]{display:block}
html[data-logo=club]{--logo-url:url(/brand/themes/club.svg)}
html[data-logo=sunshine]{--logo-url:url(/brand/themes/sunshine.svg)}
html[data-logo=garden]{--logo-url:url(/brand/themes/garden.svg)}
html[data-logo=sunday]{--logo-url:url(/brand/themes/sunday.svg)}
html[data-logo=letterpress]{--logo-url:url(/brand/themes/letterpress.svg)}
html[data-logo=receipt]{--logo-url:url(/brand/themes/receipt.svg)}
html[data-logo=black]{--logo-url:url(/brand/themes/black.svg)}

/* ---- the radio's controls (HOW-STOKEHOUSE-WORKS §3, §4): the logo is the switch, You sits top right, a tool's sections are top tabs */
.lk-headl{display:flex;align-items:center;gap:10px;min-width:0}
button.lk-mark{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;min-width:44px;padding:0 4px;display:flex;align-items:center;border-radius:var(--r-s,8px);-webkit-tap-highlight-color:transparent}
button.lk-mark:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
button.lk-mark:active{transform:scale(.97)}
.lk-you{box-sizing:border-box;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-1);border:1.5px solid var(--hair-strong);color:var(--c-cream);font:700 16px/1 var(--f-ui);text-decoration:none}
.lk-you[aria-current=page]{border-color:var(--lead);color:var(--lead-text)}
.lk-you:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
html[data-themed] .lk-you{border-radius:var(--th-pill)}
.lk-ttabs{border-bottom:1px solid var(--hair)}
.lk-ttabrow{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.lk-ttabrow::-webkit-scrollbar{display:none}
.lk-ttab{flex:none;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;font:400 11px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#9a9a9a);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.lk-ttab[aria-current=page]{color:var(--c-cream);border-bottom-color:var(--lead)}
.lk-ttab:focus-visible{outline:2px solid var(--lead);outline-offset:-2px}
/* the flip: 0.3 s, the page only (header, tabs and bar stay still); none under Reduce Motion */
@keyframes lkInB{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@keyframes lkInF{from{transform:translateX(-28px);opacity:.5}to{transform:none;opacity:1}}
main.lk-flip-b>:not(.lk-head):not(.lk-ttabs){animation:lkInB .3s ease-out}
main.lk-flip-f>:not(.lk-head):not(.lk-ttabs){animation:lkInF .3s ease-out}
@media (prefers-reduced-motion:reduce){main.lk-flip-b>*,main.lk-flip-f>*{animation:none!important}}
/* the tool list (the back's first screen) and a tool that is coming */
.lk-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:var(--s6,28px)}
.lk-tool{box-sizing:border-box;min-height:96px;padding:14px;border-radius:var(--r-l,14px);background:var(--surface-1);border:1px solid var(--hair);color:var(--c-cream);text-decoration:none;display:flex;flex-direction:column;gap:6px}
.lk-tool:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
.lk-tooln{display:flex;align-items:center;justify-content:space-between;gap:6px}.lk-tooln b{font:600 16px/1.2 var(--f-word)}
.lk-tool small{font:500 13px/1.35 var(--f-ui);color:var(--mute,#9a9a9a)}
.lk-tool.soon{background:transparent;border-style:dashed}
.lk-soon{flex:none;padding:3px 7px;border-radius:999px;border:1px solid var(--hair-strong);font:400 9px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#9a9a9a)}
.lk-soon.big{display:inline-block;font-size:10px;margin:4px 0 12px}
.lk-soonpage{padding-bottom:var(--s6,28px)}.lk-soonwhat{font:500 17px/1.5 var(--f-ui);margin:0 0 20px;max-width:34em}

/* the front's hero ticket (spec §2): tell Scout what you want, in the packet's own Overprint, with one big Let's go! */
.lk-sayhero .lk-herolink{gap:10px}
.lk-sayhero .lk-saybar{background:var(--pk-sheet);border:1.5px solid var(--pk-a);box-shadow:none}
.lk-sayhero .lk-saybar:focus-within{border-color:var(--pk-btn);box-shadow:0 0 0 3px rgba(255,108,47,.18)}
.lk-sayhero .lk-sayin{color:var(--pk-ink);font:500 17px var(--pk-body)}.lk-sayhero .lk-sayin::placeholder{color:var(--pk-ink2)}
.lk-sayhero .lk-mic{background:transparent;color:var(--pk-a);border:1.5px solid var(--pk-a)}
.lk-sayhero .lk-herofoot{justify-content:stretch}
.lk-go{flex:1;justify-content:center;min-height:52px;font-size:15px;border:0;cursor:pointer}

/* The back's tool pages (public/tools.js) and People's lists */
.tl-form{margin:6px 0 18px}.tl-fields{display:grid;gap:8px;margin-bottom:10px}
.tl-x{flex:none;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;border-radius:10px}
.tl-x:hover,.tl-x:focus-visible{color:var(--ink);background:var(--line)}
.tl-week{display:grid;gap:10px}
.tl-day{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px 14px}
.tl-day.today{border-color:var(--ink)}.tl-day h3{margin:0 0 8px;font-size:15px}
.tl-item{display:flex;gap:10px;align-items:baseline;padding:8px 0;text-decoration:none;color:inherit;min-height:44px;box-sizing:border-box}
.tl-item+.tl-item{border-top:1px solid var(--line)}
.tl-kind{flex:none;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);min-width:56px}
.tl-free{margin:0;color:var(--mute);font-size:14px}
.tl-nudge{margin-top:16px}
.tl-link{padding:12px 14px;overflow-wrap:anywhere;margin:10px 0}.tl-link code{font-size:13px}
.tl-row{flex-wrap:wrap;gap:8px}
.tl-check{width:24px;height:24px;flex:none;accent-color:var(--ink)}
.tl-note.done b{text-decoration:line-through;color:var(--mute)}
.tl-acts{display:flex;gap:4px;align-items:center;flex:none}
.tl-edit{width:100%}
.tl-log{margin:0;padding-left:18px;color:var(--mute);font-size:14px}
.tl-help{display:grid;gap:10px}
.tl-helpbtn{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:inherit;text-decoration:none}
.tl-helpbtn b{font-size:18px}
.tl-plist{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 14px;margin-bottom:10px}
.tl-plhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tl-person{display:inline-flex;align-items:center;gap:2px;padding-right:2px}.tl-person .tl-x{min-width:32px;min-height:32px;font-size:18px}
.tl-helpbtn{justify-content:flex-start;gap:16px}.tl-helpbtn b{min-width:44px}.tl-helpbtn span{display:flex;flex-direction:column;gap:2px}.tl-helpbtn small{color:var(--mute)}
.tl-note>span,.tl-journal>span,[data-mem]>span:first-child,[data-conv]>span{flex:1;min-width:0}

/* the front's personal tiles: Today (Health & Strength) and This week (Planner) */
.lk-wtoday{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}.lk-wtoday b{font:900 16px/1.1 Unbounded,"Arial Black",sans-serif;color:var(--lead-text,#FF6C2F);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.lk-wweek{display:grid;grid-template-columns:repeat(7,8px);gap:4px;align-items:end;height:28px}.lk-wweek i{height:10px;border-radius:2px;background:var(--hair)}.lk-wweek i.on{height:26px;background:var(--lead-text,#FF6C2F)}