/* The 10-4 look (13 Oct): the radio's front and back, the home readout, and the packet skins.
   Loaded after style.css. Every colour is a token here; none of them is final, so change them in this block only. */
:root{
  /* palette, round 2 (leading, not final): apricot leads; each companion means one thing only */
  --c-apricot:#FFDD00;   /* the main action, Scout */
  --c-peacock:#1CB5C4;   /* links, directions, calendar, "updated" */
  --c-green:#4CC27F;     /* going, in, done */
  --c-coral:#F06E68;     /* needs you, urgent, cancelled */
  --c-base:#121314;--c-raise:var(--surface-1);--c-deep:#0C0D0E;--c-cream:#F6F5F1;
  --c-cream-2:rgba(var(--fg-rgb),.7);--c-cream-3:rgba(var(--fg-rgb),.55);--c-line:rgba(var(--fg-rgb),.14);--c-line-2:rgba(var(--fg-rgb),.08);
  /* each tool's colour line on its back */
  --tool-section:#6FB8F0;--tool-tools:var(--c-apricot);
  /* roles */
  --lead:var(--c-apricot);--lead-ink:#17140A;--link:var(--c-peacock);--going:var(--c-green);--needs:var(--c-coral);
  --lead-text:var(--lead);--link-text:var(--link);--going-text:var(--going);--needs-text:var(--needs);   /* role colours used as text */
}

/* ---------- the app sits on the dark base */
body.tf.look{--paper:var(--c-base);--ink:var(--c-cream);--card:var(--c-raise);--line:var(--c-line);--soft:rgba(var(--fg-rgb),.07);--mute:rgba(var(--fg-rgb),.62);
  --accent:var(--lead);--accent-ink:var(--lead-ink);--accent-text:var(--lead);--ok:var(--going);color-scheme:dark;background:var(--paper);color:var(--ink)}
body.look.menuopen{overflow:hidden}
main.lk{min-height:100vh;padding-bottom:calc(100px + env(safe-area-inset-bottom))}

/* header: the name (wordmark on hold, plain text) and your profile; on a back, FRONT and the tool's name over its colour line */
.lk-head{padding-top:env(safe-area-inset-top)}
.lk-headrow{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lk-head.back .lk-headrow{display:grid;grid-template-columns:1fr auto 1fr}
.lk-name{font:400 12px var(--title);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--lead-text);min-height:44px;display:inline-flex;align-items:center}   /* the name, plain; room for a radio icon later */
.lk-tag{font:400 9px var(--title);letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--fg-rgb),.6);border:1px solid rgba(var(--fg-rgb),.25);padding:5px 8px;white-space:nowrap}
.lk-me{width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:15px;text-decoration:none}
.lk-me[aria-current=page]{box-shadow:inset 0 0 0 1.5px var(--c-cream)}
.lk-rule{height:1px;background:var(--c-line)}
.lk-tint{height:2px}
.lk-front{justify-self:start;min-height:44px;padding:0 16px;border-radius:22px;background:var(--lead);color:var(--lead-ink);font:400 11px var(--title);letter-spacing:.08em;display:inline-flex;align-items:center;text-decoration:none}
.lk-toolname{font:400 14px var(--title);letter-spacing:.16em;text-transform:uppercase;text-align:center}

/* the locked bar: HOME · PACKETS · Scout · PEOPLE · MENU. Active is brighter text only: no badges, no glow, no fills */
.lkbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--c-deep);border-top:1px solid var(--c-line);padding:4px 8px calc(4px + env(safe-area-inset-bottom))}
.lk-slots{display:flex;align-items:center;max-width:560px;margin:0 auto}
.lk-tab{flex:1 1 0;min-width:0;min-height:56px;display:flex;align-items:center;justify-content:center;padding:0 2px;border:0;background:none;cursor:pointer;
  font:400 9px var(--title);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--c-cream-3);text-decoration:none}
.lk-tab:hover{color:var(--c-cream-2)}
.lk-tab[aria-current=page],.lk-tab[aria-expanded=true]{color:var(--c-cream)}
.lk-tab.gap{pointer-events:none}
.lk-ring{flex:0 0 72px;height:60px;display:grid;place-items:center;color:var(--lead-text);border-radius:50%}
.lk-ring svg{width:54px;height:54px;display:block}

/* the flip: about 0.3 s, both sides; nothing moves under Reduce Motion */
@keyframes lkFlipA{from{transform:perspective(1400px) rotateY(80deg);opacity:.2}to{transform:none;opacity:1}}
@keyframes lkFlipB{from{transform:perspective(1400px) rotateY(-80deg);opacity:.2}to{transform:none;opacity:1}}
.flip-a{animation:lkFlipA .3s ease-out}
.flip-b{animation:lkFlipB .3s ease-out}
@media (prefers-reduced-motion:reduce){.flip-a,.flip-b{animation:none}}

[tabindex="-1"]:focus{outline:none}
/* ---------- the 10-4 front: the readout window, then 01 needs you · 02 packets · 03 Scout · 04 say it */
.lk-readout{margin-top:12px;border-radius:14px;background:var(--surface-deep);border:1px solid var(--c-line);padding:12px 14px 4px}
.lk-rdhead{display:flex;justify-content:space-between;gap:10px;padding-bottom:8px;font:400 9px var(--title);letter-spacing:.12em;text-transform:uppercase;color:var(--c-cream-3)}
.lk-on{color:var(--going-text)}
.lk-rd{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:baseline;gap:8px;min-height:44px;padding:9px 0;border-top:1px solid rgba(var(--fg-rgb),.1);text-decoration:none;color:var(--ink)}
.lk-rdk{font:400 8.5px var(--title);letter-spacing:.12em;text-transform:uppercase}
.lk-rdk.lead{color:var(--lead-text)}.lk-rdk.needs{color:var(--needs-text)}.lk-rdk.link{color:var(--link-text)}.lk-rdk.going{color:var(--going-text)}
.lk-rdv{font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.lk-rds{font:400 7.5px var(--title);letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--fg-rgb),.4)}
.lk-sec{padding:12px 0;border-top:1px solid var(--c-line)}
.lk-readout+.lk-sec{margin-top:14px}
.lk-sech{margin:0 0 8px;font:400 9.5px var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--lead-text)}
.lk-quiet{font-size:14px;color:var(--c-cream-2)}
.lk-needs{display:flex;flex-direction:column}
.lk-need{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px}
.lk-needt{font-size:14px;color:var(--ink);text-decoration:none;min-width:0;min-height:44px;display:flex;align-items:center;gap:4px}
.lk-make .btn.small{min-height:44px}
.lk-needt b{font-weight:600}
.lk-chip{flex:none;min-height:44px;min-width:64px;padding:0 14px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.3);display:inline-flex;align-items:center;justify-content:center;font:400 10px var(--title);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.lk-chip.on{background:var(--lead);border-color:var(--lead);color:var(--lead-ink)}
.lk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lk-tile{min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 8px;background:var(--pk-sheet);color:var(--pk-title-ink);border-top:3px solid var(--pk-btn);text-decoration:none;font:400 8.5px var(--title);letter-spacing:.06em;text-transform:uppercase;overflow:hidden}
.lk-tile b{font-weight:400;overflow-wrap:anywhere}.lk-tile small{font:inherit;color:var(--pk-ink2)}
.lk-tile[data-design=receipt]{border-top-style:dashed;border-top-color:#111}
.lk-home .lk-make{margin-top:0}
/* ---------- the back: one card per tool */
.lk-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
@media (min-width:760px){.lk-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lk-card{min-height:104px;box-sizing:border-box;border-radius:12px;background:var(--c-raise);border-top:3px solid var(--tint);padding:10px 12px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.lk-cardtop{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.lk-cardtop b{font:400 10.5px var(--title);letter-spacing:.06em;text-transform:uppercase;color:var(--tint)}
.lk-cardtop small{font:400 7.5px var(--title);letter-spacing:.08em;color:rgba(var(--fg-rgb),.45)}
.lk-cardline{font-size:12px;line-height:1.35;color:rgba(var(--fg-rgb),.8)}
.lk-cardtag{margin-top:auto;font:400 7.5px var(--title);letter-spacing:.08em;text-transform:uppercase;color:var(--lead-text)}
/* page titles */
.whead .lk-h1,.lk-h1{margin:4px 0 6px;font:400 22px/1.25 var(--title);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.lk-title{margin:20px 0 4px;font:400 clamp(18px,5.4vw,24px)/1.25 var(--title);text-transform:uppercase;overflow-wrap:anywhere}

/* ---------- Home: next first, then make, then the readout rows */
.lk-hi{margin:18px 0 0;font-size:15px;color:var(--c-cream-2)}
.lk-make{margin-top:16px;padding:16px;border:1px solid var(--c-line);border-radius:22px}
.lk-make-h{margin:0 0 10px;font:500 16px/1.35 var(--display);letter-spacing:0}
.lk-make .field{background:var(--c-raise)}
.lk-make-go{margin-top:12px}
.lk-jobs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lk-jobs .job.chip.sm{display:inline-flex;min-height:44px;padding:0 14px;border-radius:99px;background:none;font-size:14px;font-weight:500}
.lk-make .err{min-height:0}
.lk-make .err:empty{display:none}
.lk-make .fine{margin-top:12px}
.lk-rows{margin-top:20px;border-top:1px solid var(--c-line)}
.lk-row{width:100%;min-height:68px;display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 4px;border:0;border-bottom:1px solid var(--c-line-2);
  background:none;color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.lk-row.plain{grid-template-columns:minmax(0,1fr) auto}
.lk-row:hover{background:rgba(var(--fg-rgb),.03)}
.lk-n{font:400 11px var(--title);color:var(--lead-text)}
.lk-rl{display:flex;flex-direction:column;gap:3px;min-width:0}
.lk-rl b{font:400 12px var(--title);letter-spacing:.12em;text-transform:uppercase}
.lk-rl small{font-size:13px;color:var(--c-cream-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lk-count{font:400 18px var(--title)}
.lk-count.alert{color:var(--needs-text)}
.lk-arrow{color:rgba(var(--fg-rgb),.4)}
body.look .ac-skin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
body.look .ac-skin .chip.sm{min-height:44px}
body.look .chip.on{background:var(--c-cream);color:var(--c-base);border-color:var(--c-cream)}
body.look .tag.on{background:none;color:var(--going-text);box-shadow:inset 0 0 0 1px var(--going)}
body.look .whead{padding:20px 0 6px}

.lk-jobs .job:hover{transform:none;box-shadow:none}

/* ---------- New packet: a live preview, then KIND · DETAILS · DESIGN · WHO; DESIGN opens filter-style tiles */
.pk{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--c-base);color:var(--c-cream)}
.pk-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:56px;padding:env(safe-area-inset-top) 12px 0;border-bottom:1px solid var(--c-line-2)}
.pk-cancel{all:unset;cursor:pointer;justify-self:start;min-height:44px;display:inline-flex;align-items:center;padding:0 6px;font-size:14px;color:var(--c-cream-2)}
.pk-h{font:400 11px var(--title);letter-spacing:.14em;text-transform:uppercase;margin:0}
.pk-top .pk-send{justify-self:end;min-height:44px}
.pk-stage{flex:1 0 auto;display:flex;justify-content:center;align-items:flex-start;padding:14px 0}
.pk-frame{--s:.6;width:calc(390px * var(--s));height:calc(844px * var(--s));overflow:hidden;border-radius:18px;border:1px solid var(--c-line);flex:none}
@media (min-width:760px){.pk-frame{--s:.8}}
.pk-preview{width:390px;transform:scale(var(--s));transform-origin:0 0;pointer-events:none}
.pk-preview .op{min-height:844px}
.pk-preview .op-dots{right:-80px}
.pk-strip{width:100%;max-width:560px;margin:0 auto;padding:6px 18px 8px;border-top:1px solid var(--c-line-2)}
.pk-strip[hidden]{display:none}
.pk-striphead{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;font:400 9px var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--c-cream-3)}
.pk-done{all:unset;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:flex-end;font:600 13px var(--display);letter-spacing:0;text-transform:none;color:var(--lead-text)}
.pk-tiles{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}
.pk-tile{all:unset;cursor:pointer;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px}
.pk-tile.soon{cursor:default}
.pk-swatch{width:62px;height:78px;box-sizing:border-box;border-radius:10px;background:var(--pk-sheet);border:var(--pk-sheet-border);display:flex;flex-direction:column;justify-content:space-between;padding:7px 6px 6px;overflow:hidden}
.pk-swatch b{font-family:var(--pk-title);font-weight:var(--pk-title-w);font-size:20px;line-height:1;color:var(--pk-title-ink);text-align:center}
.pk-swatch[data-family=overprint] b{text-shadow:1.5px 1px 0 var(--pk-dot)}
.pk-sw-stripes{height:8px;visibility:hidden;background:linear-gradient(#E2625E 0 2px,transparent 2px 3px,#FFC93C 3px 5px,transparent 5px 6px,#00838A 6px 8px)}
.pk-swatch[data-design=sunday] .pk-sw-stripes{visibility:visible}
.pk-sw-spot{height:8px;background:var(--pk-btn);border-radius:var(--pk-pill-r)}
.pk-swatch[data-design=receipt] .pk-sw-spot{background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px)}
.pk-swatch.yours{background:transparent;border:1.5px dashed rgba(var(--fg-rgb),.35);align-items:center;justify-content:center}
.pk-swatch.yours b{font-family:var(--display);color:var(--c-cream-3)}
.pk-tile[aria-pressed=true] .pk-swatch{outline:2px solid var(--lead);outline-offset:2px}
.pk-tile small{font-size:11px;color:var(--c-cream-2);text-align:center;line-height:1.2}
.pk-tile[aria-pressed=true] small{color:var(--lead-text);font-weight:600}
.pk-themes{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 6px}
.pk-themes .chip.sm{min-height:44px}
.pk-note{font-size:14px;color:var(--c-cream-2);margin:2px 0 8px}
.pk-note a{color:var(--link-text)}
.pk-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}
.pk-check input{width:20px;height:20px;accent-color:var(--lead)}
.pk-strip .ac-fallback{margin-top:8px}
.pk-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--c-line);background:var(--c-deep);padding-bottom:env(safe-area-inset-bottom)}
.pk-tool{all:unset;cursor:pointer;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 8px var(--title);letter-spacing:.1em;text-transform:uppercase;color:var(--c-cream-3)}
.pk-tool span{width:22px;height:22px}.pk-tool svg{width:22px;height:22px;display:block}
.pk-tool[aria-pressed=true]{color:var(--lead-text)}
.pk .linkbtn{color:#F6F5F1;min-height:44px}

/* ---------- the header: the centred wordmark (or, on the back, the tool's name) with a chevron; it opens the menu */
.lk-head{position:relative;z-index:12}
.lk-head .lk-headrow,.lk-head.back .lk-headrow{display:flex;justify-content:center;min-height:76px}
.lk-nav{all:unset;box-sizing:border-box;cursor:pointer;min-height:64px;min-width:160px;padding:6px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px}
.lk-nav:focus-visible{outline:2px solid var(--lead);outline-offset:2px}
.lk-nav .lk-name{display:block;line-height:0;min-height:0}
.lk-word{display:block;height:24px;width:auto}
.lk-navtool{font:600 24px/1 Fredoka,Nunito,sans-serif;color:var(--c-cream);letter-spacing:-.01em}
.lk-chev{width:14px;height:9px;color:var(--c-cream-3);transition:transform .2s}
.lk-chev svg{width:14px;height:9px;display:block}
.lk-nav[aria-expanded=true] .lk-chev{transform:scaleY(-1)}
@media (prefers-reduced-motion:reduce){.lk-chev{transition:none}}
.lk-dd{position:absolute;left:0;right:0;top:100%;z-index:30}
.lk-dd[hidden]{display:none}
.lk-ddscrim{position:fixed;inset:0;border:0;background:rgba(0,0,0,.55);cursor:pointer}
.lk-ddpanel{position:relative;width:min(380px,calc(100vw - 32px));margin:6px auto 0;padding:6px;border-radius:20px;background:var(--surface-1);border:1px solid rgba(var(--fg-rgb),.12);box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column}
.lk-dditem{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:6px 14px;border-radius:14px;text-decoration:none;color:var(--c-cream)}
.lk-dditem:hover,.lk-dditem:focus-visible{background:rgba(var(--fg-rgb),.06);outline:none}
.lk-dditem i{width:10px;height:10px;border-radius:50%;background:var(--tint)}
.lk-dditem span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lk-dditem b{font:600 17px/1.2 Fredoka,Nunito,sans-serif}
.lk-dditem small{font-size:12.5px;color:var(--c-cream-3)}
.lk-ddhere{font:400 9px var(--title);letter-spacing:.12em;text-transform:uppercase;color:var(--lead-text)}
.lk-ddgo{color:var(--c-cream-3);font-size:16px}
.lk-dditem[aria-current=page]{background:rgba(255,221,0,.08)}
.lk-rdgo{color:rgba(var(--fg-rgb),.4);font-size:18px;line-height:1}
.lk-rd:hover{background:rgba(var(--fg-rgb),.03)}