/* liister's own light theme (tools/lemons_lister/static/tokens.css), so the
   couple's page and the app are one product (the DJ, 2026-11-03). Each name
   here says which liister token it is. One step lighter than the app:
   the page is liister's --content and the cards white, because the app's
   own --bg read too dark for a couple's phone (the DJ, 2026-11-03). Teal and red words take the deeper
   ink: liister's #2f7d74 is 3.6:1 on this ground and the marker red 4.05:1
   on its own tint, both under 4.5:1. */
:root{--bg:#f1eee9;--card:#fff;--ink:rgba(30,28,26,.9);--dim:rgba(30,28,26,.7);
  --rule:rgba(30,28,26,.15);--ctledge:rgba(30,28,26,.58);
  --accent:#2f7d74;--accentsoft:rgba(47,125,116,.15);--accentink:#1f5c55;
  --no:#c62828;--nosoft:rgba(198,40,40,.12);--noink:#a31f1f;
  --maybe:#6b4711;--maybesoft:rgba(176,126,48,.2);--r:6px;
  --segtrack:rgba(30,28,26,.07);--segshadow:0 1px 2px rgba(30,28,26,.14),0 0 0 .5px rgba(30,28,26,.08)}
/* Light only (the DJ, 2026-11-03): a couple's page, in the DJ's colours, and
   the same on every phone. color-scheme stops the phone darkening the fields. */
:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 120px}
header{padding:28px 0 18px;text-align:center}
.logo{display:block;margin:0 auto 14px;max-height:48px;max-width:220px}
.powered{margin-top:40px;text-align:center;font-size:12px;color:var(--dim)}
.powered a{color:inherit;font-weight:600;text-decoration:none}
h1{font-size:28px;margin:6px 0 2px;font-weight:650;letter-spacing:-.01em}
.when{color:var(--dim)}
nav{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;gap:6px;
  padding:10px 0;overflow-x:auto;border-bottom:1px solid var(--rule)}
nav a{flex:none;padding:6px 12px;border-radius:999px;color:var(--ink);text-decoration:none;
  font-size:13px;background:var(--card);border:1px solid var(--rule)}
nav a .n{color:var(--accentink);font-weight:600;margin-left:4px}
section{margin-top:26px;scroll-margin-top:64px} /* clear of the sticky chips */
h2{font-size:18px;margin:0 0 10px;font-weight:650}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.slot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--rule)}
.slot:first-child{border-top:0}
.slot .lbl{width:92px;flex:none;font-size:13px;color:var(--dim)}
.slot .val{flex:1;min-width:0}
/* Top-aligned, not centred: the badge under a playing track makes the row
   taller, and centring moved the cover, the × and Must/Nice on every play. */
.pick{display:flex;align-items:flex-start;gap:10px;min-width:0}
.art{display:block;width:38px;height:38px;border-radius:6px;object-fit:cover;background:var(--rule)}
dialog{border:1px solid var(--rule);border-radius:14px;background:var(--card);color:var(--ink);
  width:min(560px,calc(100vw - 32px));padding:20px}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog p{color:var(--dim);margin:0 0 14px}
dialog summary{cursor:pointer;font-size:13px;color:var(--dim);margin-bottom:8px}
dialog pre{white-space:pre-wrap;font-size:12px;line-height:1.5;background:var(--bg);border-radius:8px;
  padding:12px;max-height:50vh;overflow:auto;margin:0 0 14px}
.ex{display:inline-block;margin-left:6px;padding:0 4px;border-radius:3px;font-size:10px;line-height:15px;
  vertical-align:2px;background:var(--dim);color:var(--card);font-weight:700}
.t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx{min-width:0}
.note{display:block;margin-top:4px;font-size:12px;color:var(--accentink)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.add{color:var(--accentink);font-weight:600;padding:6px 0}
.x{color:var(--dim);padding:6px;font-size:18px;line-height:1}
.row{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-top:1px solid var(--rule)}
.row:first-child{border-top:0}
.row .pick{flex:1}
/* liister's .seg (app.css): a soft well, the lit pill raised inside it and
   gliding to the choice (the DJ, 2026-11-03). liister moves the pill with
   CSS anchor positioning, which iPhones before iOS 26 lack; with two equal
   halves a translate does the same glide on every phone. */
.seg{display:grid;grid-template-columns:1fr 1fr;flex:none;position:relative;isolation:isolate;
  background:var(--segtrack);border-radius:10px;padding:3px;gap:2px}
.seg::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:3px;bottom:3px;left:3px;
  width:calc(50% - 4px);background:var(--accentsoft);border-radius:7px;box-shadow:var(--segshadow);
  transition:transform .24s cubic-bezier(.3,.7,.2,1),background-color .24s}
/* Nice keeps its own amber (the DJ, 2026-11-03): the pill changes colour
   as it glides, so Must and Nice still read apart at a glance. */
.seg[data-on="nice"]::before{transform:translateX(calc(100% + 2px));background:var(--maybesoft)}
@media (prefers-reduced-motion:reduce){.seg::before{transition:none}}
.seg button{padding:5px 12px;font-size:13px;color:var(--dim);border-radius:7px;transition:color .24s}
.seg button.on{color:var(--accentink);font-weight:600}
.seg button.on[data-v="nice"]{color:var(--maybe)}
.empty{padding:14px;color:var(--dim);font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border-top:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--card);font-size:14px}
.chip[data-s="love"]{background:var(--accentsoft);border-color:var(--accent);color:var(--accentink);font-weight:600}
.chip[data-s="no"]{background:var(--nosoft);border-color:var(--no);color:var(--noink);text-decoration:line-through}
.legend{font-size:12px;color:var(--dim);margin:0 0 4px}
.ggroup{margin-top:14px}
h3{font-size:13px;font-weight:600;color:var(--dim);margin:0 0 8px}
.ownchip{display:inline-flex;align-items:center}
.ownchip .x{padding:4px 6px}
.addstyle{margin-top:14px}
.no .t{color:var(--no)}
input[type=text],input[type=url],textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--ctledge);border-radius:4px;padding:10px 12px}
textarea{min-height:84px;resize:vertical}
textarea.cmt{min-height:44px;margin-top:10px;font-size:14px}
.mt{display:flex;align-items:flex-start;gap:6px}
.row>.x,.mt>.x,.row>.seg{margin-top:4px}
.mt+.mt{margin-top:8px}
.mt .pick{flex:1}
.newm{display:flex;gap:8px;flex:1}
.newm input{padding:7px 10px}
.newm button{flex:none;color:var(--accentink);font-weight:600}
.custom .lbl{color:var(--ink);font-weight:600}
/* A moment with three songs read as floating when its name sat centred. */
.slots .slot{align-items:flex-start}
.slots .lbl{padding-top:9px;overflow-wrap:anywhere}
.rm{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--dim);padding:0;text-decoration:underline}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.plists{margin-bottom:10px}
.plists:empty{display:none}
/* Each chip in its service's colour (the DJ, 2026-11-03). The edge is the
   brand colour itself; the words are a deeper shade of it, because Spotify
   green on white is 2.4:1 and Apple's pink 3.7:1, both under 4.5:1. */
.plchip{--brand:#1db954;--brandink:#0d7a37;--brandsoft:#e7f7ed}
.plchip[data-src="Apple Music"]{--brand:#fa243c;--brandink:#c4102a;--brandsoft:#feeaec}
.plchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 6px 6px 12px;border-radius:999px;
  border:1px solid var(--brand);background:var(--brandsoft);color:var(--brandink);font-size:14px;font-weight:600}
.plchip a{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plchip .src{font-weight:400;opacity:.75}
.plchip .x{color:var(--brandink);padding:2px 6px}
.plchip.wait a{opacity:.6}
.plerr{margin:6px 0 0;font-size:13px;color:var(--noink)}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--rule);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.bar .in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px}
.saved{flex:1;font-size:13px;color:var(--dim)}
.saved b{color:var(--ink);font-weight:600}
.send{background:var(--accent);color:#fff;font-weight:600;padding:11px 18px;border-radius:999px}
/* search sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:86vh;background:var(--card);
  border-radius:16px 16px 0 0;display:none;flex-direction:column;z-index:11}
.open .scrim{display:block}.open .sheet{display:flex}
.sheet .hd{padding:14px 16px 10px;border-bottom:1px solid var(--rule)}
.sheet .hd .ttl{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet .hd b{font-size:16px}
.res{overflow:auto;padding:4px 0 20px;max-width:560px;width:100%;margin:0 auto}
.res .row{cursor:pointer}
.res .row:hover{background:var(--bg)}
.artw{position:relative;flex:none}
/* Always shown, never on hover only: couples are on phones, which have none. */
.play{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;padding:0;
  background:rgba(0,0,0,.28);transition:background .12s}
.play:hover{background:rgba(0,0,0,.42)}
.play svg{width:13px;height:13px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.play.on{background:rgba(0,0,0,.5)}
.play.wait svg{opacity:.5}
.play:disabled{background:rgba(0,0,0,.08);cursor:default}
.play:disabled svg{opacity:.35}
/* Under the track, not beside it: beside, a phone cut the title to "L.". */
.am{display:inline-block;line-height:0;margin-top:6px}
.am[hidden]{display:none}
.am img{height:32px;width:auto}
.srcl{color:inherit}
.saved[hidden],.sheetcredit[hidden]{display:none}
.sheetcredit{padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);font-size:13px;color:var(--dim)}
.notein{margin-top:10px;display:none}
.sheet.slotmode .notein{display:block}
@media (min-width:700px){.sheet{left:50%;width:560px;transform:translateX(-50%)}}
/* One link per job, a home list of the questionnaires the DJ added to it in
   Prep (the DJ, 2026-11-03). Views switch in code, never by #fragment: the
   fragment is the answers' key. */
#home[hidden],#qview[hidden]{display:none}
body[data-q="home"] .bar{display:none}
body.dj :is(.back,#saved){visibility:hidden}
.fcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 14px;border-top:1px solid var(--rule)}
.fcard:first-child{border-top:0}
.fcard:hover{background:var(--bg)}
.fcard b{font-weight:600;font-size:16px}
.st{margin-left:auto;flex:none;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--segtrack);color:var(--dim)}
.st[data-st="part"]{background:var(--maybesoft);color:var(--maybe)}
.st[data-st="sent"]{background:var(--accentsoft);color:var(--accentink);font-weight:600}
.chev{width:8px;height:12px;flex:none;fill:none;stroke:var(--dim);stroke-width:1.6}
.back{color:var(--accentink);font-weight:600;padding:6px 0;display:inline-flex;align-items:center;gap:6px}
.back .chev{stroke:var(--accentink);transform:scaleX(-1)}
.vt{font-size:22px;margin:2px 0 6px}
/* Reception checklist questions (the DJ's Studio Ninja form, 2026-11-03). */
.fq{padding:14px;border-top:1px solid var(--rule)}
.req{color:var(--no);margin-left:3px}
.fq.miss :is(input[type=text],textarea){border-color:var(--no);box-shadow:0 0 0 1px var(--no)}
.fq.miss .q,.slot.miss .lbl,.slot.miss .add{color:var(--noink)}
.slot.miss{background:var(--nosoft)}
.fq:first-child{border-top:0}
.fq .q{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nrow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
.nrow+.nrow{margin-top:8px}
.names+.add{margin-top:4px}
.two span{display:block;font-size:12px;color:var(--dim);margin-bottom:4px}
input[data-time]{cursor:pointer;caret-color:transparent}
/* The clock: one tap for the hour, a second for the minute. */
#clock{padding:0;width:min(320px,calc(100vw - 32px));overflow:hidden}
.ckhead{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:18px 22px;background:var(--accent);color:#fff}
.ckhead button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;opacity:.6;border-radius:6px;padding:2px 6px}
.ckhead button.on{opacity:1}
.cktime{font-size:52px;font-weight:300;line-height:1;display:flex;align-items:center}
.ckampm{display:flex;flex-direction:column;gap:4px}
.ckampm button{font-size:16px;font-weight:600}
.ckampm button.on{background:rgba(0,0,0,.18)}
#dial{display:block;width:100%;padding:18px;box-sizing:border-box;cursor:pointer;touch-action:manipulation}
#dial .face{fill:var(--bg)}
#dial .hand{stroke:var(--accent);stroke-width:2}
#dial .hub,#dial .tip{fill:var(--accent)}
#dial text{font-size:15px;fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
#dial text.sel{fill:#fff}
.ckno{padding:11px 18px;border-radius:999px;border:1px solid var(--rule)}
.ckfoot{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 18px}
input[type=file]{font-size:13px;max-width:100%}
</style>
/* What the hosted page adds to the reference design. */
.fq .cl{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:15px}
.fq .cl input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.fq .val{margin-top:2px}
.flist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.flist:empty{display:none}
.fitem{display:flex;align-items:center;gap:8px;font-size:14px}
.fitem span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ferr{color:var(--noink);font-size:13px;margin:6px 0 0}
.gone{text-align:center;padding:80px 0;color:var(--dim)}
.saved.err b{color:var(--noink)}