/* PARDY HQ — the website's own colours and type (Lucas, 2026-10-24): navy #041423 / #0E2740, gold #C6A15F / #DFC08A,
   button-border gold #D2A773, off-white #F8F6F1, mist #AAB8C4 — and Lexend everywhere (Lucas, 2026-10-25: a dyslexia-friendly font across all of HQ; it replaced Raleway). */
:root {
  color-scheme: dark;
  --bg:#041423; --panel:#0E2740; --panel2:#143351; --line:rgba(170,184,196,.14); --line2:rgba(170,184,196,.28);
  --gold:#C6A15F; --gold-hi:#DFC08A; --gold-border:#D2A773; --gold-dim:rgba(198,161,95,.14);
  --gold-fill:#C6A15F; --gold-fill-hi:#DFC08A;   /* gold as a filled surface (buttons, badges): same as the text gold at night, kept bright by day */
  --nav-bg:rgba(4,20,35,.9); --scrim:rgba(3,16,27,.78); --shadow:rgba(3,16,27,.9); --shadow-soft:rgba(0,0,0,.5); --skel-hi:#1A3D5E; --tip-bg:#F8F6F1; --tip-ink:#132430;
  --dj-zack:#8FC1F0; --dj-travis:#7FD39A; --dj-jaron:#C9AEF5;
  --ink:#F8F6F1; --dim:#AAB8C4; --mute:#7E8F9D; --navy-ink:#041423;
  --ok:#5fb37a; --warn:#e0a63a; --crit:#e2574a; --info:#6aa7e0;
  --r:4px; --r2:8px;
  --ease:cubic-bezier(.16,1,.3,1);      /* arrivals: fast out, long settle */
  --spring:cubic-bezier(.32,.72,0,1);  /* travel and press: a weighted spring */
  --nav-w:224px;
}

/* ---------- by day (Lucas, 2026-10-25: light when the sun is up, dark when it is down, or his own pick). theme.js sets data-theme
   before the first paint. Text gold darkens so it still reads on cream; filled gold (buttons, badges) keeps the website's shade. ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg:#F4F1EA; --panel:#FFFFFF; --panel2:#EEE9DE; --line:rgba(4,20,35,.10); --line2:rgba(4,20,35,.20);
  --gold:#8A6B2E; --gold-hi:#A8843D; --gold-border:#B8955A; --gold-dim:rgba(198,161,95,.18);
  --gold-fill:#C6A15F; --gold-fill-hi:#D4B274;
  --ink:#041423; --dim:#4A5B6B; --mute:#76858F;
  --ok:#2E8B50; --warn:#A8720E; --crit:#C43D30; --info:#2F6FA8;
  --nav-bg:rgba(244,241,234,.92); --scrim:rgba(4,20,35,.55); --shadow:rgba(4,20,35,.22); --shadow-soft:rgba(4,20,35,.16); --skel-hi:#F7F4EE; --tip-bg:#132430; --tip-ink:#F8F6F1;
  --dj-zack:#2F6FA8; --dj-travis:#2E7D4A; --dj-jaron:#6F4BB5;
}
html[data-theme="light"] body { background: radial-gradient(1200px 500px at 50% -10%, rgba(198,161,95,.16), transparent 60%), var(--bg); }
html[data-theme="light"] .chart .grid { stroke:rgba(4,20,35,.10); }
html[data-theme="light"] .cal .d .ev.dj-zack { box-shadow:inset 3px 0 0 var(--dj-zack); } html[data-theme="light"] .cal .d .ev.dj-travis { box-shadow:inset 3px 0 0 var(--dj-travis); } html[data-theme="light"] .cal .d .ev.dj-jaron { box-shadow:inset 3px 0 0 var(--dj-jaron); }
html[data-theme="light"] #welcome { background: radial-gradient(900px 500px at 50% 30%, rgba(198,161,95,.22), transparent 60%), var(--bg); }
html.theming, html.theming * { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease) !important; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
/* On a phone, anything wider than the screen widens the whole page, and the fixed bottom menu with it (Lucas, 2026-10-27: no menu on land, cut off when scrolled). html takes the clip; body alone is not enough on Android. */
html { overflow-x:hidden; }
body { background: radial-gradient(1200px 500px at 50% -10%, rgba(198,161,95,.08), transparent 60%), var(--bg); color:var(--ink); font-family:'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.01em; font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--gold); text-decoration:none; } a:hover { color:var(--gold-hi); }
button { font-family:inherit; }
::selection { background:var(--gold-fill); color:var(--navy-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- gate (sign in) ---------- */
#gate { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:var(--bg); z-index:50; }
#gate[hidden] { display:none; }
.gatecard { width:100%; max-width:380px; animation:rise .5s var(--ease) both; }
.wordmark { text-align:center; margin-bottom:28px; }
.wordmark .mark { font-family:'Cinzel',Georgia,serif; font-size:28px; letter-spacing:.5em; font-weight:400; color:var(--gold-fill); margin-right:-.5em; }
.pmark.gate { height:40px; margin:0 auto 14px; } .wordmark .ring { width:92px; height:92px; border-radius:50%; border:1px solid var(--gold-fill); display:grid; place-items:center; margin:0 auto 14px; } .wordmark .ring .pmark { height:44px; margin:0; }
.wordmark .rule { width:56px; height:1px; background:var(--gold); margin:12px auto 10px; }
.wordmark .pagename { font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.gatecard p { color:var(--dim); font-size:13px; text-align:center; margin:0 0 16px; }
input, select, textarea { width:100%; padding:13px 12px; border-radius:var(--r); border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font-size:16px; font-family:inherit; transition:border-color .2s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); }
textarea { min-height:120px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border:1px solid var(--gold-fill); border-radius:20px; background:var(--gold-fill); color:var(--navy-ink); font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; transition:transform .35s var(--spring), background .2s, opacity .2s, border-color .2s; }
.btn:hover { background:var(--gold-fill-hi); transform:translateY(-1px); } .btn:active { transform:scale(.96); transition-duration:.08s; } .btn:disabled { opacity:.4; cursor:default; transform:none; }
.btn.ghost { background:transparent; border-color:var(--gold-border); color:var(--ink); } .btn.ghost:hover { background:var(--gold-dim); color:var(--gold-hi); }
.btn.sm { padding:8px 12px; font-size:10px; letter-spacing:.18em; }
.btn.danger { border-color:var(--crit); color:var(--crit); background:transparent; } .btn.danger:hover { background:rgba(226,87,74,.12); }
.btn.block { width:100%; margin-top:14px; }
.msg { min-height:20px; font-size:12px; color:var(--crit); text-align:center; margin-top:10px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(4,20,35,.25); border-top-color:var(--navy-ink); border-radius:50%; animation:spin .7s linear infinite; }
.ghost .spin, .dimspin { border-color:rgba(198,161,95,.25); border-top-color:var(--gold); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes rise { from { opacity:0; transform:translateY(18px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes riseRow { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes settle { from { transform:scale(1.06); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes pop { 0% { transform:scale(.5); opacity:0; } 60% { transform:scale(1.12); opacity:1; } 100% { transform:none; } }
@keyframes breathe { 0%,100% { box-shadow:0 0 0 3px rgba(95,179,122,.15); } 50% { box-shadow:0 0 0 7px rgba(95,179,122,.04); } }
@keyframes grow { from { transform:scaleY(0); } to { transform:none; } }
@keyframes materialize { from { opacity:0; transform:translateY(14px) scale(.96); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes dematerialize { to { opacity:0; transform:translateY(10px) scale(.97); filter:blur(6px); } }
@keyframes sheen { 0%, 88% { transform:translateX(-120%) skewX(-18deg); } 100% { transform:translateX(220%) skewX(-18deg); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes shimmer { from { background-position:-400px 0; } to { background-position:400px 0; } }

/* ---------- app frame ---------- */
#app { display:none; min-height:100%; }
#app.on { display:grid; grid-template-columns:var(--nav-w) 1fr; }
/* Grid and flex children default to min-width:auto, so one long unbreakable line (a subject, a file name, the month strip)
   widened the whole page on phones and the iPad. These three lines are what stop the sideways scroll. */
#app.on > main, .grid > *, .split > *, .months, .row > .t { min-width:0; }
nav.side { position:sticky; top:0; height:100vh; border-right:1px solid var(--line); padding:22px 14px; display:flex; flex-direction:column; gap:4px; background:var(--nav-bg); backdrop-filter:blur(8px); }
nav.side .brand { padding:4px 10px 18px; }
nav.side .brand .mark { font-family:'Cinzel',Georgia,serif; font-size:16px; letter-spacing:.42em; font-weight:500; color:var(--gold-fill); margin-right:-.42em; display:flex; align-items:center; }
nav.side .brand .pagename { font-size:9px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; font-weight:600; margin-top:3px; }
nav.side a.item, nav.bottom a.item { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--r); color:var(--dim); font-size:12.5px; font-weight:600; letter-spacing:.02em; position:relative; transition:background .2s, color .2s; }
nav.side a.item:hover { background:var(--panel); color:var(--ink); }
nav.side a.item.on { background:var(--gold-dim); color:var(--gold); }
nav.side .ind { position:absolute; left:14px; top:0; width:2px; height:20px; background:var(--gold); border-radius:2px; transition:transform .5s var(--spring), height .5s var(--spring); pointer-events:none; }
nav.side a.item:active, nav.bottom a.item:active { transform:scale(.96); } nav.side a.item, nav.bottom a.item { transition:background .2s, color .2s, transform .3s var(--spring); }
nav.bottom .ind { position:absolute; top:0; left:0; height:2px; width:52px; background:var(--gold); border-radius:0 0 2px 2px; transition:transform .5s var(--spring), width .5s var(--spring); pointer-events:none; }
.item svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--gold-fill); color:var(--navy-ink); font-size:10px; font-weight:800; display:grid; place-items:center; }
.badge.crit { background:var(--crit); color:#fff; }
.badge { animation:pop .5s var(--spring) both; }
nav.side .foot { margin-top:auto; padding:10px; font-size:10.5px; color:var(--mute); line-height:1.6; }
nav.side .foot b { color:var(--dim); font-weight:600; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mute); margin-right:6px; vertical-align:middle; }
.dot.ok { background:var(--ok); box-shadow:0 0 0 3px rgba(95,179,122,.15); animation:breathe 2.8s ease-in-out infinite; } .dot.warn { background:var(--warn); } .dot.crit { background:var(--crit); animation:pulse 1.4s infinite; } .dot.busy { background:var(--gold); animation:pulse .9s infinite; }

main { padding:26px 30px 90px; max-width:1240px; width:100%; animation:riseRow .35s var(--ease) both; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.topbar h1 { font-size:22px; margin:0; letter-spacing:-.01em; font-weight:700; }
.topbar .sub { color:var(--dim); font-size:12.5px; margin-top:4px; }
.topbar .tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.grid { display:grid; gap:14px; grid-template-columns:repeat(12, 1fr); }
.c3 { grid-column:span 3; } .c4 { grid-column:span 4; } .c6 { grid-column:span 6; } .c8 { grid-column:span 8; } .c12 { grid-column:span 12; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); padding:16px 18px; position:relative; animation:rise .7s var(--ease) both; animation-delay:calc(var(--i, 0) * 55ms); transition:border-color .25s, transform .5s var(--spring), box-shadow .5s var(--spring); }
.card:hover { border-color:var(--line2); box-shadow:0 18px 40px -24px var(--shadow); }
.card.wait { animation:none; opacity:0; }   /* below the fold: waits until scrolled into view, then arrives */
.card h3 { margin:0 0 12px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card h3 .more { margin-left:auto; font-size:10px; letter-spacing:.1em; color:var(--dim); font-weight:600; text-transform:none; }
.stat .n { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; margin:2px 0 6px; font-variant-numeric:tabular-nums; animation:settle .9s var(--ease) both; animation-delay:calc(var(--i, 0) * 55ms + 120ms); transform-origin:left center; }
.stat .n small { font-size:14px; color:var(--dim); font-weight:600; letter-spacing:0; }
.stat .l { color:var(--dim); font-size:12px; }
.bar { height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-top:10px; }
.bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--gold-fill), var(--gold-fill-hi)); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease); border-radius:3px; }
.list { display:flex; flex-direction:column; }
.row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); animation:riseRow .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 35ms + 80ms); }
.row:first-child { border-top:0; }
.row .t { flex:1; min-width:0; } .row .t b { display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .row .t span { display:block; color:var(--dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .when { color:var(--dim); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 86px; }  /* fixed width so names line up down the list */
.row.clickable { cursor:pointer; border-radius:var(--r); margin:0 -8px; padding:10px 8px; transition:background .2s, transform .4s var(--spring); } .row.clickable:hover { background:var(--panel2); transform:translateX(3px); }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--line2); border-radius:999px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:700; white-space:nowrap; }
.chip.gold { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.chip.ok { border-color:rgba(95,179,122,.5); color:var(--ok); } .chip.warn { border-color:rgba(224,166,58,.5); color:var(--warn); } .chip.crit { border-color:rgba(226,87,74,.6); color:var(--crit); background:rgba(226,87,74,.08); } .chip.info { border-color:rgba(106,167,224,.5); color:var(--info); }
.chip.sel { background:var(--gold-fill); color:var(--navy-ink); border-color:var(--gold-fill); }
/* One colour per DJ, everywhere a DJ is named. Lucas gold, Zack blue, Travis green, Jaron violet. */
.chip.dj-lucas { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.chip.dj-zack { border-color:rgba(106,167,224,.6); color:var(--dj-zack); background:rgba(106,167,224,.12); }
.chip.dj-travis { border-color:rgba(95,179,122,.6); color:var(--dj-travis); background:rgba(95,179,122,.12); }
.chip.dj-jaron { border-color:rgba(177,138,230,.6); color:var(--dj-jaron); background:rgba(177,138,230,.12); }
.chip.dj-tbd { border-style:dashed; }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
/* one dropdown that looks like a chip: the chip is what you see, the native select sits on top and takes the tap */
.pick { position:relative; display:inline-flex; margin-left:auto; } .pick .chip { cursor:pointer; padding-right:7px; } .pick .chip i { font-style:normal; margin-left:5px; opacity:.7; } .pick select { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; font-size:16px; }
.cal .d .ev.blk { background:var(--panel); color:var(--mute); border:1px dashed var(--line2); }
.who { margin:0 0 14px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel2); } .who h4 { margin:0 0 4px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); font-weight:700; } .who .row { padding:7px 0; } .who .row .t span { white-space:normal; }
.morelist { display:grid; gap:4px; } .morelist a { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--r); color:var(--ink); } .morelist a.on, .morelist a:active { background:var(--gold-dim); } .morelist .ic { width:22px; height:22px; color:var(--gold); flex:none; } .morelist .ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .morelist b { display:block; font-size:14px; } .morelist small { display:block; color:var(--dim); font-size:11.5px; line-height:1.3; } .morelist .badge { margin-left:auto; }
.modal.sheet { align-self:end; width:100%; max-width:100%; border-radius:16px 16px 0 0; margin:0; max-height:86vh; overflow:auto; animation:sheetUp .45s var(--spring) both; } @keyframes sheetUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.chips .chip { cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .3s var(--spring); } .chips .chip:active { transform:scale(.94); } .chips .chip:hover { border-color:var(--gold); color:var(--gold); } .chips .chip.sel:hover { color:var(--navy-ink); }
.alert { display:flex; gap:12px; align-items:flex-start; min-width:0; overflow-wrap:anywhere; padding:12px 14px; border-radius:var(--r2); border:1px solid var(--line); background:var(--panel2); margin-bottom:8px; animation:riseRow .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 45ms + 80ms); }
.alert.crit { border-color:rgba(226,87,74,.5); background:rgba(226,87,74,.06); } .alert.warn { border-color:rgba(224,166,58,.4); }
.alert .t { min-width:0; } .alert .t span { overflow-wrap:anywhere; } .alert .ic { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--info); } .alert.crit .ic { background:var(--crit); animation:pulse 1.4s infinite; } .alert.warn .ic { background:var(--warn); }
.alert .t { flex:1; min-width:0; } .alert .t b { display:block; font-size:13.5px; } .alert .t span { color:var(--dim); font-size:12px; }
.alert .acts { display:flex; gap:6px; flex:none; }
.x { background:none; border:0; color:var(--mute); cursor:pointer; font-size:16px; padding:2px 6px; line-height:1; border-radius:4px; } .x:hover { color:var(--ink); background:var(--panel2); }
.empty { padding:26px 10px; text-align:center; color:var(--dim); font-size:13px; }
.empty .big { font-size:28px; margin-bottom:6px; filter:grayscale(1) opacity(.6); }
.errbox { padding:16px; border:1px dashed rgba(226,87,74,.5); border-radius:var(--r2); color:var(--dim); font-size:13px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.errbox b { color:var(--crit); display:block; font-size:13px; margin-bottom:2px; }
.banner { display:flex; gap:12px; align-items:center; padding:10px 14px; border:1px solid var(--gold); background:var(--gold-dim); border-radius:var(--r2); margin-bottom:18px; font-size:12.5px; animation:rise .4s var(--ease) both; }
.banner b { color:var(--gold); } .banner .btn { margin-left:auto; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; } .kv dt { color:var(--dim); } .kv dd { margin:0; font-weight:600; }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.money { font-variant-numeric:tabular-nums; font-weight:700; }
.pos { color:var(--ok); } .neg { color:var(--crit); }
table.tbl { width:100%; border-collapse:collapse; font-size:12.5px; } .tbl th { text-align:left; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:8px 10px; border-bottom:1px solid var(--line2); font-weight:700; } .tbl td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } .tbl tbody tr { animation:riseRow .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 22ms + 60ms); } .tbl tr:hover td { background:var(--panel2); } .tbl td.r, .tbl th.r { text-align:right; }
.scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* skeletons: exact shapes of the real thing, shimmering */
.skel { background:linear-gradient(90deg, var(--panel2) 25%, var(--skel-hi) 50%, var(--panel2) 75%); background-size:800px 100%; animation:shimmer 1.4s linear infinite; border-radius:4px; display:block; }
.skel.t { height:13px; width:60%; margin-bottom:8px; } .skel.s { height:10px; width:40%; } .skel.n { height:30px; width:50%; margin:4px 0 8px; } .skel.row { height:44px; margin:6px 0; border-radius:var(--r); }

/* ---------- tooltips ---------- */
[data-tip] { position:relative; }
#tip { position:fixed; z-index:200; pointer-events:none; background:var(--tip-bg); color:var(--tip-ink); font-size:12px; font-weight:500; padding:7px 10px; border-radius:6px; max-width:260px; line-height:1.4; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s var(--ease); box-shadow:0 10px 30px var(--shadow-soft); }
#tip.on { opacity:1; transform:none; }
#tip::after { content:''; position:absolute; left:var(--ax, 50%); bottom:-5px; width:10px; height:10px; background:var(--tip-bg); transform:translateX(-50%) rotate(45deg); }
.help { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; border:0; background:var(--gold-dim); color:var(--gold); font-size:10px; font-weight:700; font-style:normal; font-family:inherit; text-transform:none; flex:none; cursor:help; margin-left:6px; vertical-align:middle; opacity:.75; transition:opacity .15s; } .help:hover { opacity:1; }

/* ---------- toasts / modals / palette ---------- */
#toasts { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:300; width:min(520px, calc(100vw - 32px)); }
.toast { background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--gold); padding:12px 14px; border-radius:var(--r2); font-size:13px; animation:materialize .5s var(--spring) both; box-shadow:0 12px 40px var(--shadow-soft); display:flex; gap:10px; align-items:center; transition:opacity .3s, transform .3s var(--ease); }
.toast.leaving { opacity:0; transform:translateY(10px) scale(.97); }
.toast.err { border-left-color:var(--crit); } .toast.ok { border-left-color:var(--ok); } .toast .btn { margin-left:auto; }
.modal-bg { position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(4px); z-index:150; display:grid; place-items:center; padding:20px; animation:fade .25s both; transition:opacity .22s; }
.modal { width:100%; max-width:560px; max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--line2); border-radius:12px; padding:22px; animation:materialize .45s var(--ease) both; }
.modal-bg.closing { opacity:0; } .modal-bg.closing .modal { animation:dematerialize .22s var(--ease) both; }
.modal h2 { margin:0 0 6px; font-size:17px; } .modal .sub { color:var(--dim); font-size:12.5px; margin-bottom:16px; }
.modal label { display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:12px 0 6px; font-weight:700; }
.modal .acts { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
#palette .modal { max-width:620px; padding:10px; } #palette input { border:0; background:transparent; font-size:18px; padding:14px 12px; } #palette .res { max-height:50vh; overflow:auto; }
#palette .res .row { padding:10px 12px; margin:0; border-radius:6px; cursor:pointer; border-top:0; } #palette .res .row.on, #palette .res .row:hover { background:var(--gold-dim); }
kbd { font-family:inherit; font-size:10px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--dim); }

/* ---------- walkthrough ---------- */
#tour { position:fixed; inset:0; z-index:400; pointer-events:none; }
#tour .tap { position:absolute; inset:0; pointer-events:auto; }
#tour .hole { position:absolute; border-radius:10px; box-shadow:0 0 0 9999px var(--scrim); transition:all .55s var(--spring); pointer-events:none; outline:1px solid var(--gold); }
#tour .box { position:absolute; width:min(340px, calc(100vw - 32px)); background:var(--panel); border:1px solid var(--gold); border-radius:12px; padding:18px; pointer-events:auto; transition:all .55s var(--spring); box-shadow:0 20px 60px var(--shadow-soft); }
#tour .box .step { font-size:10px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; font-weight:700; } #tour .box h4 { margin:6px 0 6px; font-size:16px; } #tour .box p { margin:0 0 14px; color:var(--dim); font-size:13px; }
#tour .box .acts { display:flex; gap:8px; justify-content:space-between; align-items:center; }

/* ---------- inbox detail / split ---------- */
.split { display:grid; grid-template-columns:minmax(300px, 1fr) 1.4fr; gap:14px; }
.thread .m { padding:12px 0; border-top:1px solid var(--line); } .thread .m:first-child { border-top:0; } .thread .m .h { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--dim); margin-bottom:6px; } .thread .m .h b { color:var(--ink); } .thread .m pre { white-space:pre-wrap; font-family:inherit; font-size:13px; margin:0; color:var(--ink); line-height:1.5; max-height:260px; overflow:auto; }

/* ---------- calendar grid ---------- */
.cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; } .cal .d .cnt { display:none; } .cal .d { min-height:84px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px; font-size:11px; color:var(--dim); position:relative; transition:border-color .15s; } .cal .d:hover { border-color:var(--gold); } .cal .d.today { border-color:var(--gold); } .cal .d.sel { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); cursor:pointer; } .cal .d[data-day] { cursor:pointer; } .cal .d .n { font-weight:700; color:var(--ink); } .cal .d.off { opacity:.35; } .cal .d .ev { margin-top:4px; padding:2px 5px; border-radius:3px; background:var(--gold-dim); color:var(--gold); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; } .cal .d .ev.wed { background:rgba(95,179,122,.14); color:var(--ok); } .cal .d .ev.dj-lucas { box-shadow:inset 3px 0 0 var(--gold); } .cal .d .ev.dj-zack { box-shadow:inset 3px 0 0 #6aa7e0; } .cal .d .ev.dj-travis { box-shadow:inset 3px 0 0 #5fb37a; } .cal .d .ev.dj-jaron { box-shadow:inset 3px 0 0 #b18ae6; }
.months { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; margin-bottom:10px; scrollbar-width:thin; } .months .chip { flex:none; } .months .chip b { font-weight:800; margin-left:4px; } .cal .d .ev.mg { background:rgba(106,167,224,.14); color:var(--info); } .cal .d .ev.sale { background:rgba(226,87,74,.14); color:var(--crit); } .cal .hd { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); padding:4px 6px; font-weight:700; }

/* ---------- charts (plain SVG; colours validated for the navy card: this year #AE8A3A, last year #4F96D6) ---------- */
.chart { width:100%; height:auto; display:block; overflow:visible; }
.chart .grid { stroke:rgba(170,184,196,.16); stroke-width:1; }
.chart .ax { fill:var(--dim); font-size:10px; font-family:inherit; }
.chart .cbar { shape-rendering:crispEdges; transform-box:fill-box; transform-origin:bottom; animation:grow .8s var(--ease) both; animation-delay:calc(var(--i, 0) * 22ms + 120ms); }
.chart .cline { fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1600; stroke-dashoffset:1600; animation:draw 1.4s var(--ease) forwards; animation-delay:calc(var(--i, 0) * 180ms + 100ms); }
.chart .carea { opacity:.09; }
.chart .cpt { transform-box:fill-box; transform-origin:center; animation:pop .5s var(--spring) both; animation-delay:calc(var(--i, 0) * 30ms + 500ms); }
@keyframes draw { to { stroke-dashoffset:0; } }
@media (max-width: 920px) { .chart .ax { font-size:17px; } }  /* the 640-wide drawing is scaled down on a phone; keep the axis text readable */
.chart .hit { fill:transparent; cursor:default; }
.leg { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--dim); margin:6px 0 4px; }
.leg i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.yoy { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); margin:0 0 10px; } .yoy b { color:var(--ink); font-size:16px; display:block; }
.yoy .up { color:var(--ok); } .yoy .down { color:var(--crit); }

/* ---------- couples journey strip ---------- */
.steps { display:flex; align-items:center; gap:0; margin-top:8px; }
.steps .st { position:relative; flex:1; height:22px; display:flex; align-items:center; }
.steps .st::before { content:''; position:absolute; left:0; right:0; top:10px; height:2px; background:var(--line2); }
.steps .st.done::before { background:var(--gold); }
.steps .st i { position:relative; z-index:1; width:12px; height:12px; border-radius:50%; background:var(--panel); border:2px solid var(--line2); margin:0 auto; }
.steps .st.done i { background:var(--gold); border-color:var(--gold); }
.steps .st.now i { border-color:var(--gold-hi); box-shadow:0 0 0 4px var(--gold-dim); animation:pulse 1.6s infinite; }
.steps .st.skip i { border-style:dashed; opacity:.5; }
.steps .st span { position:absolute; top:20px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.04em; color:var(--mute); white-space:nowrap; }
.steps .st.done span, .steps .st.now span { color:var(--dim); }
.couple { padding:12px 0 22px; border-top:1px solid var(--line); }
.couple:first-child { border-top:0; }
.couple .head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.couple .head b { font-size:14px; }
.couple .next { font-size:12.5px; color:var(--dim); margin-top:2px; }
.couple .next b { color:var(--gold); font-weight:600; }
@media (max-width: 920px) { .steps .st span { display:none; } .couple { padding-bottom:12px; } }

/* ---------- Ask HQ drawer ---------- */
#askBtn { position:fixed; right:22px; bottom:22px; z-index:45; display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; border:1px solid var(--gold-border); background:var(--panel); color:var(--ink); font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 30px var(--shadow-soft); }
#askBtn:hover { background:var(--gold-dim); color:var(--gold-hi); transform:translateY(-1px); } #askBtn:active { transform:scale(.95); } #askBtn { overflow:hidden; transition:background .2s, color .2s, transform .35s var(--spring); }
#askBtn::after { content:''; position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, transparent, rgba(223,192,138,.28), transparent); animation:sheen 7s var(--ease) infinite; pointer-events:none; }   /* a slow light passes over the helper every few seconds */
#ask { position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); background:var(--panel); border-left:1px solid var(--line2); z-index:160; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .55s var(--spring); box-shadow:-20px 0 60px var(--shadow-soft); }
#ask.on { transform:none; }
#ask .hd { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
#ask .hd b { font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
#ask .hd .x { margin-left:auto; }
#ask .log { flex:1; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
#ask .m { max-width:92%; padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; animation:materialize .4s var(--ease) both; }
#ask .m.me { align-self:flex-end; background:var(--gold-fill); color:var(--navy-ink); border-bottom-right-radius:4px; }
#ask .m.hq { align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:4px; }
#ask .m.sys { align-self:center; color:var(--dim); font-size:12px; text-align:center; }
#ask .m .acts { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
#ask form { display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
#ask form textarea { height:46px; min-height:46px; max-height:140px; resize:none; padding:12px 44px 12px 12px; font-size:15px; line-height:1.4; overflow-y:auto; }   /* one clean line; grows as Lucas types; room on the right for a spell-check icon */
@media (max-width: 920px) { #askBtn { bottom:78px; right:14px; padding:11px 14px; } }

/* ---------- mobile ---------- */
nav.bottom { display:none; }
@media (max-width: 920px) {
  #app.on { grid-template-columns:1fr; }
  nav.side { display:none; }
  main { padding:18px 14px 92px; }
  .c4, .c6, .c8 { grid-column:span 12; } .c3 { grid-column:span 6; } .c3 .n { font-size:22px; }
  .c3.dj { grid-column:span 12; }   /* a DJ card holds names, venues and buttons: two to a phone width squished them (Lucas, 2026-10-27) */
  .split { grid-template-columns:1fr; }
  .cal .d { min-height:58px; } .cal .d .ev { display:none; } .cal .d .cnt { display:grid; position:absolute; right:6px; bottom:6px; min-width:16px; height:16px; border-radius:8px; background:var(--gold-fill); color:var(--navy-ink); font-size:9px; font-weight:800; place-items:center; padding:0 4px; }
  nav.bottom { display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--nav-bg); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:40; justify-content:space-around; }
  nav.bottom a.item { flex-direction:column; gap:3px; font-size:9px; letter-spacing:.06em; padding:6px 4px; color:var(--mute); min-width:52px; } nav.bottom a.item.on { color:var(--gold); } nav.bottom .item svg { width:20px; height:20px; } nav.bottom .badge { position:absolute; top:0; right:4px; margin:0; min-width:16px; height:16px; font-size:9px; }
  .topbar h1 { font-size:19px; }
  .stat .n { font-size:26px; }
}
@media (min-width: 921px) and (max-width: 1180px) { .c3 { grid-column:span 6; } .c4 { grid-column:span 6; } .c8 { grid-column:span 12; } }
@media print { nav, .topbar .tools, #toasts, .banner { display:none !important; } body { background:#fff; color:#000; } .card { border-color:#ccc; background:#fff; } }

/* Walkthrough on phones: a fixed sheet above the bottom nav, no computed coordinates. */
@media (max-width: 920px) {
  #tour .box { position:fixed !important; left:16px !important; right:16px !important; top:auto !important; bottom:calc(96px + env(safe-area-inset-bottom)) !important; width:auto !important; max-height:60vh; overflow:auto; }
}

/* Files, grouped. */
.fgroup { margin-top:4px; } .fgroup + .fgroup { margin-top:18px; } .fgroup h3 { margin-bottom:4px; } .fsub { font-size:12px; color:var(--dim); margin:0 0 4px; }
.chip.new { background:var(--gold-fill); color:var(--navy-ink); border-color:var(--gold-fill); font-size:9px; padding:1px 6px; vertical-align:2px; animation:pulse 1.6s 3; }
.row .t .acts { display:flex; gap:6px; margin-top:6px; white-space:normal; overflow:visible; flex-wrap:wrap; }
.btn.xs { padding:5px 10px; font-size:9.5px; letter-spacing:.16em; border-radius:14px; }
/* Motion with a purpose: lists arrive one row after another; a button that needs a tap breathes once. */
.btn.danger { box-shadow:0 0 0 0 rgba(224,96,96,.35); animation:ring 1.8s 2; } @keyframes ring { 0% { box-shadow:0 0 0 0 rgba(224,96,96,.35); } 70% { box-shadow:0 0 0 8px rgba(224,96,96,0); } 100% { box-shadow:0 0 0 0 rgba(224,96,96,0); } }
.row.clickable:active { transform:scale(.99) translateX(3px); transition-duration:.08s; }
/* Reduced motion: arrivals become plain cross-fades, nothing travels or breathes. */
@media (prefers-reduced-motion: reduce) { .card, .row, .alert, .tbl tbody tr, .stat .n, .chart .cbar, .modal, .toast, #ask .m { animation:fade .01ms both !important; transform:none !important; filter:none !important; } .card.wait { opacity:1; } .dot.ok, #askBtn::after, .badge { animation:none !important; } }


/* ---------- Today: one hero number, the rest a quiet row (Lucas, 2026-10-25: "build it") ---------- */
.hero { grid-column:span 12; padding:22px 24px 20px; display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:end; overflow:hidden; }
.hero .eyebrow { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:700; display:flex; align-items:center; }
.hero .big { font-size:84px; font-weight:800; letter-spacing:-.04em; line-height:.95; margin:10px 0 4px; font-variant-numeric:tabular-nums; animation:settle 1s var(--ease) both; animation-delay:.15s; transform-origin:left center; }
.hero .big small { font-size:22px; color:var(--dim); font-weight:600; letter-spacing:0; margin-left:8px; }
.hero .what { color:var(--dim); font-size:14px; }
.hero .rail { height:4px; margin:16px 0 10px; position:relative; max-width:520px; overflow:visible; background:var(--panel2); border-radius:2px; }
.hero .rail i { border-radius:2px; transition-duration:1.4s; }
.hero .rail b { position:absolute; top:-5px; width:14px; height:14px; border-radius:50%; background:var(--gold-hi); box-shadow:0 0 0 4px var(--gold-dim); transform:translateX(-50%); animation:pop .6s var(--spring) both; animation-delay:1.2s; }
.hero .delta { font-size:13px; color:var(--dim); } .hero .delta b.up { color:var(--ok); } .hero .delta b.down { color:var(--crit); }
.hero .side { border-left:1px solid var(--line); padding-left:24px; display:grid; gap:14px; align-self:stretch; align-content:end; min-width:0; }
.hero .side .k { font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px; }
.hero .side .v { font-size:13.5px; line-height:1.55; color:var(--dim); } .hero .side .v b { color:var(--ink); font-weight:700; }
.quiet { grid-column:span 12; display:grid; grid-template-columns:repeat(4, 1fr); padding:0; }
.quiet > div { padding:14px 22px 14px 0; margin-right:22px; border-right:1px solid var(--line); border-top:1px solid var(--line); min-width:0; animation:riseRow .6s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms + 250ms); }
.quiet > div:last-child { border-right:0; margin-right:0; }
.quiet .go { cursor:pointer; border-radius:var(--r); transition:transform .4s var(--spring), background .2s; } .quiet .go:hover { transform:translateY(-2px); } .quiet .go:active { transform:scale(.98); transition-duration:.08s; }
.quiet .k { font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.quiet .n { font-size:24px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.quiet .l { font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quiet .n.neg { color:var(--crit); }
@media (max-width:920px) {
  /* Lucas, 2026-10-25: an approval's email was squeezed into half the width beside its buttons. Text first, buttons under it. */
  .alert { flex-wrap:wrap; } .alert .t { flex:1 1 calc(100% - 24px); } .alert .acts { width:100%; justify-content:flex-end; padding-left:20px; }
  .card h3 { letter-spacing:.18em; } .modal-bg { align-items:end; padding:0; } .modal-bg .modal:not(.sheet) { margin:20px; }
  .hero { grid-template-columns:1fr; gap:16px; padding:18px 16px; } .hero .big { font-size:64px; } .hero .side { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
  .quiet { grid-template-columns:1fr 1fr; } .quiet > div { padding:12px 14px 12px 0; margin-right:14px; } .quiet > div:nth-child(2) { border-right:0; margin-right:0; }
}

/* A write in flight: a gold line runs along the top until HQ answers (the pressed button spins too, see api()). */
#busyline { position:fixed; top:0; left:0; right:0; height:2px; z-index:500; pointer-events:none; opacity:0; transition:opacity .2s; }
#busyline::before { content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:linear-gradient(90deg, transparent, var(--gold-fill-hi), transparent); animation:busyrun 1.1s var(--ease) infinite; }
#busyline.on { opacity:1; }
@keyframes busyrun { to { transform:translateX(350%); } }

/* ---------- welcome: the curtain that opens HQ (Lucas, 2026-10-25: "an animated welcome screen, be creative") ---------- */
#welcome { position:fixed; inset:0; z-index:450; background:radial-gradient(900px 500px at 50% 30%, rgba(198,161,95,.14), transparent 60%), var(--bg); display:grid; place-items:center; align-content:center; gap:0; text-align:center; cursor:pointer; user-select:none; transition:transform .7s var(--spring), opacity .5s; will-change:transform; padding:24px; }
#welcome.leave { animation:curtain .8s cubic-bezier(.6,0,.2,1) forwards; } @keyframes curtain { 0% { transform:none; } 20% { transform:translateY(1.6%); } 100% { transform:translateY(-104%); } }
#welcome.fly { transition:opacity .55s var(--ease) .1s; opacity:0; pointer-events:none; }
#welcome.still.leave { transform:none; opacity:0; }
/* The needle drop (Lucas, 2026-10-25: "what would a Disney animator do"). A spark winds up (anticipation), paints the mark in three
   brush strokes with a glowing head, whips between them, and lands on the arrow's tip: the beat. Ripple, gold dust, a flash, the clean
   mark pops in with a spring, and from then on it breathes. The strokes are the gesture; the traced mark is the clean-up. */
.pmark { display:block; height:1em; width:auto; overflow:visible; } .pmark .mp { fill:var(--gold-fill); stroke:none; }
.pmark.sm { height:17px; display:inline-block; vertical-align:-2px; margin-right:9px; transition:transform .5s var(--spring); } .pmark.sm.landed { animation:land .7s var(--spring) both; }
@keyframes land { 0% { transform:scale(1.9) rotate(-6deg); } 55% { transform:scale(.88); } 100% { transform:none; } }
.pmark.flown .mp { fill-opacity:1; stroke:none; } .pmark.flown { filter:drop-shadow(0 0 10px rgba(223,192,138,.35)); }
#welcome .flash { position:absolute; inset:0; background:radial-gradient(600px 400px at 50% 38%, rgba(223,192,138,.55), transparent 65%); opacity:0; pointer-events:none; }
#welcome.beat .flash { animation:flash .9s var(--ease) both; } @keyframes flash { 0% { opacity:0; } 12% { opacity:1; } 100% { opacity:0; } }
#welcome .logo { position:relative; height:clamp(110px, 18vw, 170px); display:grid; place-items:center; transform:translateY(34px) scale(1.25); transition:transform .9s var(--spring), height .9s var(--spring), margin .9s var(--spring); }
#welcome .logo > * { grid-area:1 / 1; } #welcome .logo .pmark { height:100%; }
#welcome .logo .gesture { transition:opacity .28s; } #welcome .logo .clean { opacity:0; }
#welcome .logo .st { fill:none; stroke:var(--gold-fill); stroke-width:28; stroke-linejoin:miter; stroke-linecap:butt; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
#welcome .logo .s0 { --len:426; } #welcome .logo .s1 { --len:172; } #welcome .logo .s2 { --len:276; }
#welcome .logo .whip { stroke:var(--gold-hi); stroke-width:3; stroke-linecap:round; stroke-dasharray:46 600; stroke-dashoffset:46; opacity:0; }
#welcome .logo .spark { fill:#FFF3D6; opacity:0; offset-distance:0%; offset-rotate:0deg; filter:drop-shadow(0 0 5px #FFE9B8) drop-shadow(0 0 14px rgba(223,192,138,.85)); transform-box:fill-box; transform-origin:center; }
/* timeline (seconds): spark winds up .05-.45 · stroke 1 .45-1.0 · whip · stroke 2 1.1-1.35 · whip · stroke 3 1.45-1.95 · beat at 2.05 */
#welcome.draw .s0 { animation:draw .55s cubic-bezier(.3,0,.2,1) .45s forwards; } #welcome.draw .s1 { animation:draw .25s cubic-bezier(.3,0,.2,1) 1.1s forwards; } #welcome.draw .s2 { animation:draw .5s cubic-bezier(.3,0,.2,1) 1.45s forwards; }
#welcome.draw .k0 { animation:windup .45s cubic-bezier(.4,0,.2,1) .05s both, travel .55s cubic-bezier(.3,0,.2,1) .45s both, die .14s 1s forwards; }
#welcome.draw .k1 { animation:born .1s 1.02s both, travel .25s cubic-bezier(.3,0,.2,1) 1.1s both, die .12s 1.35s forwards; }
#welcome.draw .k2 { animation:born .1s 1.37s both, travel .5s cubic-bezier(.3,0,.2,1) 1.45s both, land2 .45s cubic-bezier(.2,.8,.2,1) 1.95s forwards; }
#welcome.draw .w0 { animation:whip .14s linear .98s both; } #welcome.draw .w1 { animation:whip .16s linear 1.32s both; }
@keyframes travel { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes windup { 0% { opacity:0; transform:scale(0); } 40% { opacity:1; transform:scale(1.5) translateY(-7px); } 72% { transform:scale(.8) translateY(9px); } 100% { opacity:1; transform:scale(1) translateY(0); } }
@keyframes born { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:scale(1); } }
@keyframes die { to { opacity:0; transform:scale(.2); } }
@keyframes land2 { 0% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(4.5); } }
@keyframes whip { 0% { opacity:.95; stroke-dashoffset:46; } 100% { opacity:0; stroke-dashoffset:-600; } }
/* the beat */
#welcome.beat .logo .gesture { opacity:0; } #welcome.beat .logo .clean { opacity:1; animation:drop .75s var(--spring) both; filter:drop-shadow(0 0 16px rgba(223,192,138,.5)); }
@keyframes drop { 0% { transform:scale(1.28); } 100% { transform:none; } }
#welcome .ripple { position:absolute; left:50%; top:50%; width:140px; height:140px; margin:-70px 0 0 -70px; border-radius:50%; border:1.5px solid var(--gold-hi); opacity:0; pointer-events:none; }
#welcome.beat .ripple { animation:ripple 1s cubic-bezier(.2,.7,.2,1) both; } #welcome.beat .ripple.r2 { animation-delay:.16s; animation-duration:1.2s; border-width:1px; }
@keyframes ripple { 0% { transform:scale(.3); opacity:.9; } 100% { transform:scale(3.2); opacity:0; } }
#welcome .dust { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; } #welcome .dust i { position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2); border-radius:50%; background:#FFE9B8; opacity:0; box-shadow:0 0 6px rgba(255,233,184,.9); }
#welcome.beat .dust i { animation:burst 1.3s cubic-bezier(.15,.7,.2,1) var(--t) both; }
@keyframes burst { 0% { opacity:1; transform:translate(0, 0) scale(0); } 25% { opacity:1; transform:translate(calc(var(--x) * .55), calc(var(--y) * .55)) scale(1.1); } 100% { opacity:0; transform:translate(var(--x), calc(var(--y) - 22px)) scale(.3); } }
#welcome.letters .logo { transform:none; height:clamp(64px, 10vw, 96px); margin-bottom:26px; } #welcome.letters .logo .clean { animation:drop .75s var(--spring) both, breathe2 3.4s ease-in-out .9s infinite alternate; }
@keyframes breathe2 { from { transform:translateY(-2px); filter:drop-shadow(0 0 10px rgba(223,192,138,.28)); } to { transform:translateY(3px); filter:drop-shadow(0 0 18px rgba(223,192,138,.5)); } }
#welcome .word { display:flex; gap:.1em; font-family:'Cinzel',Georgia,serif; font-size:clamp(44px, 9vw, 96px); font-weight:400; letter-spacing:.46em; line-height:1; color:var(--gold-fill); padding-left:.46em; }
#welcome .word span { display:block; overflow:hidden; padding:.08em .02em 0; } #welcome .word span b { display:block; font-weight:400; transform:translateY(112%); }
#welcome.letters .word span b { animation:lift .8s var(--spring) forwards; animation-delay:calc(var(--i) * 85ms); background:linear-gradient(100deg, var(--gold-fill) 38%, #FFF1D0 50%, var(--gold-fill) 62%); background-size:260% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; }
#welcome.chrome .word span b { animation:lift .8s var(--spring) forwards, gleam 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i) * 85ms), calc(.25s + var(--i) * 70ms); }
@keyframes gleam { to { background-position:0% 0; } }
@keyframes lift { to { transform:none; } }
#welcome .rule { width:72px; height:1px; background:var(--gold); margin:18px auto 12px; transform:scaleX(0); transition:transform .8s var(--ease); }
#welcome .hq { font-size:11px; letter-spacing:.8em; text-transform:uppercase; color:var(--gold); font-weight:600; opacity:0; transition:opacity .6s, letter-spacing 1.2s var(--ease); padding-left:.8em; }
#welcome.chrome .rule { transform:none; } #welcome.chrome .hq { opacity:1; letter-spacing:.42em; padding-left:.42em; }
#welcome .greet { margin-top:34px; font-size:clamp(20px, 3vw, 28px); font-weight:600; color:var(--ink); opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
#welcome .date { color:var(--dim); font-size:13px; margin-top:4px; opacity:0; transition:opacity .6s .1s; }
#welcome.greet .greet { opacity:1; transform:none; } #welcome.greet .date { opacity:1; }
#welcome .line { margin-top:22px; font-size:clamp(15px, 2vw, 18px); color:var(--gold-hi); max-width:34ch; min-height:1.4em; opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
#welcome .stats { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--dim); opacity:0; transition:opacity .6s .15s; }
#welcome .stats b { color:var(--ink); font-size:16px; font-weight:800; margin-right:4px; font-variant-numeric:tabular-nums; }
#welcome.data .line, #welcome.data .stats { opacity:1; transform:none; }
#welcome .skip { position:absolute; bottom:calc(22px + env(safe-area-inset-bottom)); left:0; right:0; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); opacity:0; animation:fade .6s 1.4s both; }
/* reduced motion: everything is simply there, then it fades */
#welcome.still .logo { transform:none; height:clamp(64px, 10vw, 96px); margin-bottom:26px; } #welcome.still .gesture, #welcome.still .dust, #welcome.still .ripple, #welcome.still .flash { display:none; } #welcome.still .clean { opacity:1; } #welcome.still .word span b { color:var(--gold-fill); -webkit-background-clip:border-box; background:none; } #welcome.still .word span b { transform:none; } #welcome.still .rule { transform:none; } #welcome.still .hq, #welcome.still .greet, #welcome.still .date { opacity:1; transform:none; } #welcome.still .skip { animation:none; opacity:1; }
@media (max-width:920px) { #welcome .word { letter-spacing:.3em; padding-left:.3em; } #welcome .greet { margin-top:26px; } }

.tbl.heat th { white-space:nowrap; font-size:9px; letter-spacing:.08em; } .tbl.heat td.r { font-variant-numeric:tabular-nums; min-width:52px; }

/* a chart's key: a dot and a few words per line */
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--dim); } .legend span { display:inline-flex; align-items:center; gap:6px; } .legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* the Saturday planner */
.tbl.season td, .tbl.season th { padding:5px 6px; font-size:11.5px; } .tbl.season tr.full td { background:var(--gold-dim); } .tbl.season .chip { font-size:9px; padding:2px 6px; }

/* ---------- Icon motion (Lucas, 2026-10-27: "little animations to the icons") ----------
   Motion marks a change of state, never idling: the tab just picked moves once in its own way, a count that grew bumps,
   the mark glows while a sync runs, a new warning dot arrives. Hover is a small nudge, on pointers only.
   The reduce-motion rule at the top of this file switches all of it off. */
nav.side a.item svg, nav.bottom a.item svg { transform-origin:50% 50%; transition:transform .25s var(--spring); }
@media (hover:hover) { nav.side a.item:hover svg, nav.bottom a.item:hover svg { transform:translateY(-1px) scale(1.08); } }
a.item.just[data-nav="today"] svg { animation:navHop .55s var(--spring) both; }
a.item.just[data-nav="inbox"] svg { animation:navOpen .6s var(--spring) both; }
a.item.just[data-nav="calendar"] svg { animation:navFlip .6s var(--spring) both; }
a.item.just[data-nav="bookings"] svg { animation:navTilt .55s var(--spring) both; }
a.item.just[data-nav="couples"] svg { animation:navHug .6s var(--spring) both; }
a.item.just[data-nav="website"] svg { animation:navSpin .7s var(--ease) both; }
a.item.just[data-nav="files"] svg { animation:navRustle .55s var(--ease) both; }
a.item.just[data-nav="djs"] svg { animation:navHop .55s var(--spring) both; }
a.item.just[data-nav="approvals"] svg path { stroke-dasharray:1; stroke-dashoffset:1; animation:navDraw .7s var(--ease) forwards; }
a.item.just[data-nav="growth"] svg path { stroke-dasharray:1; stroke-dashoffset:1; animation:navDraw .8s var(--ease) forwards; }
a.item.just[data-nav="paper"] svg { animation:navTurn .6s var(--spring) both; }
a.item.just[data-nav="settings"] svg { animation:navSpin .7s var(--spring) both; }
a.item.just[data-nav="more"] svg { animation:navHop .5s var(--spring) both; }
@keyframes navHop { 0% { transform:none; } 35% { transform:translateY(-4px) scale(1.1); } 100% { transform:none; } }
@keyframes navTilt { 0% { transform:none; } 30% { transform:rotate(-10deg) scale(1.08); } 65% { transform:rotate(6deg); } 100% { transform:none; } }
@keyframes navFlip { 0% { transform:perspective(60px) rotateX(0); } 45% { transform:perspective(60px) rotateX(-70deg); } 100% { transform:perspective(60px) rotateX(0); } }
@keyframes navHug { 0% { transform:none; } 40% { transform:scaleX(.82) scaleY(1.1); } 100% { transform:none; } }
@keyframes navSpin { from { transform:rotate(0) scale(1.05); } to { transform:rotate(360deg) scale(1); } }
@keyframes navOpen { 0% { transform:none; } 40% { transform:translateY(2px) scaleY(.85); } 70% { transform:translateY(-2px) scaleY(1.08); } 100% { transform:none; } }
@keyframes navDraw { to { stroke-dashoffset:0; } }
@keyframes navRustle { 0%,100% { transform:none; } 25% { transform:rotate(-7deg); } 50% { transform:rotate(6deg); } 75% { transform:rotate(-3deg); } }
@keyframes navTurn { 0% { transform:none; } 45% { transform:perspective(60px) rotateY(-60deg); } 100% { transform:none; } }
.badge.bump { animation:bump .5s var(--spring) both; }
@keyframes bump { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:none; } }
.brand.syncing .pmark.sm { animation:markGlow 1.4s ease-in-out infinite; }
@keyframes markGlow { 0%,100% { filter:drop-shadow(0 0 0 rgba(223,192,138,0)); transform:none; } 50% { filter:drop-shadow(0 0 8px rgba(223,192,138,.6)); transform:scale(1.06); } }
.x { transition:transform .25s var(--spring), color .15s, background .15s; } .x:hover { transform:rotate(90deg); }
.help { transition:opacity .15s, transform .25s var(--spring); } .help:hover { transform:scale(1.2); }
.alert.warn .ic { animation:icArrive .6s var(--spring) both; } @keyframes icArrive { 0% { transform:scale(0); } 60% { transform:scale(1.4); } 100% { transform:none; } }

/* ---------- Side-nav footer (Lucas, 2026-10-30: "it feels thrown in there") ---------- */
nav.side .foot { padding:12px 6px 4px; margin-top:auto; display:grid; gap:2px; border-top:1px solid var(--line); line-height:1.25; }
nav.side .foot button { display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:0; background:none; border-radius:var(--r); color:var(--dim); font:inherit; font-size:11.5px; text-align:left; cursor:pointer; transition:background .2s, color .2s; }
nav.side .foot button:hover { background:var(--panel2); color:var(--ink); }
nav.side .foot .st { display:flex; flex-direction:column; } nav.side .foot .st b { font-weight:600; color:var(--dim); } nav.side .foot .st small { font-size:10.5px; color:var(--mute); }
nav.side .foot button:hover .st b { color:var(--ink); }
nav.side .foot .jump kbd { font:inherit; font-size:10px; padding:2px 6px; border:1px solid var(--line2); border-radius:5px; color:var(--mute); background:var(--panel2); }
nav.side .foot .jump span { font-size:11px; }
/* ---------- Attention: a new alert arrives with a gold edge that settles; nothing blinks forever (Lucas, 2026-10-30) ---------- */
.alert .ic { position:relative; } .alert.crit .ic { animation:none; box-shadow:0 0 0 3px rgba(226,87,74,.18); }
.alert.fresh { animation:arriveEdge 10s var(--ease) both; }
@keyframes arriveEdge { 0% { box-shadow:inset 3px 0 0 var(--gold-fill); } 40% { box-shadow:inset 3px 0 0 var(--gold-fill); } 100% { box-shadow:inset 3px 0 0 transparent; } }
.alert.fresh .ic::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--gold-fill); animation:ripple 1.6s var(--ease) 2 both; }
@keyframes ripple { 0% { transform:scale(.4); opacity:1; } 100% { transform:scale(1.7); opacity:0; } }
/* ---------- PARDY is thinking: a four-bar beat in gold, not a spinner (Lucas, 2026-10-30) ---------- */
#ask .m.think { padding:10px 14px; } #ask .beat { display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
#ask .beat b { width:3px; height:4px; border-radius:2px; background:var(--gold-fill); animation:beatBar 1s ease-in-out infinite; }
#ask .beat b:nth-child(2) { animation-delay:.15s; } #ask .beat b:nth-child(3) { animation-delay:.3s; } #ask .beat b:nth-child(4) { animation-delay:.45s; }
@keyframes beatBar { 0%,100% { height:4px; opacity:.6; } 50% { height:16px; opacity:1; } }
/* ---------- Card payments: room between the tiles and the chart (Lucas, 2026-10-30: "crammed") ---------- */
.yoy { gap:14px 24px; margin:8px 0 18px; } .yoy > div { min-width:150px; line-height:1.45; }
/* ---------- A reply HQ wrote, waiting on the thread (Lucas, 2026-10-30: one click, not four) ---------- */
.draftbox { margin-top:14px; padding:12px 14px; border:1px solid var(--gold-dim); border-left:3px solid var(--gold-fill); border-radius:var(--r2); background:var(--panel2); }
.draftbox .k { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px; }
.draftbox pre { margin:0; white-space:pre-wrap; font:inherit; font-size:13.5px; line-height:1.5; }
/* ---------- Ask HQ: chats that stay, and a chat box built for a thumb (Lucas, 2026-10-30) ---------- */
#ask .hd { gap:8px; padding:10px 12px; }
#ask .hd .who { display:flex; flex-direction:column; min-width:0; flex:1; } #ask .hd .who b { font-size:11px; }
#ask .hd .title { font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ask .hd .chats, #ask .hd .newchat { border:1px solid var(--line2); background:var(--panel2); color:var(--dim); border-radius:var(--r); padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; flex:none; transition:background .2s, color .2s; }
#ask .hd .chats { font-size:15px; line-height:1; padding:6px 10px; } #ask .hd .chats.on, #ask .hd .chats:hover, #ask .hd .newchat:hover { background:var(--gold-dim); color:var(--gold-hi); }
#ask .hd .x { margin-left:0; font-size:20px; padding:4px 8px; }
#ask .chatlist { border-bottom:1px solid var(--line); background:var(--panel); max-height:46%; overflow:auto; padding:6px 8px; display:grid; gap:2px; animation:riseRow .3s var(--ease) both; }
#ask .chatlist .row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r); cursor:pointer; color:var(--ink); background:none; border:0; width:100%; text-align:left; font:inherit; }
#ask .chatlist .row:hover, #ask .chatlist .row.on { background:var(--panel2); } #ask .chatlist .row .t { min-width:0; flex:1; } #ask .chatlist .row .t b { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ask .chatlist .row .t span { display:block; font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ask .chatlist .row small { color:var(--mute); font-size:10.5px; flex:none; } #ask .chatlist .newrow b { color:var(--gold); font-size:13px; }
#ask form { align-items:flex-end; }
#ask form .send { width:42px; height:42px; padding:0; border-radius:50%; font-size:18px; line-height:1; flex:none; display:grid; place-items:center; }
@media (max-width: 920px), (hover: none) {
  #ask { width:100vw; height:100dvh; border-left:0; }
  #ask .log { padding:12px 12px; gap:8px; } #ask .m { max-width:88%; font-size:15px; }
  #ask form { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:8px; }
  #ask form textarea { font-size:16px; height:44px; min-height:44px; padding:11px 12px; border-radius:22px; }   /* 16px: the phone does not zoom in on focus */
  #ask .hd .newchat { padding:8px 10px; } #ask .hd .chats { padding:8px 11px; font-size:17px; } #ask .hd .x { font-size:24px; padding:4px 10px; }
  body.askopen #askBtn, body.askopen nav.bottom { display:none; }
}
.banner.off { border-color:rgba(223,192,138,.5); background:rgba(223,192,138,.08); }
/* ---------- Couples: the ones whose wedding has happened sit back (Lucas, 2026-10-30) ---------- */
.couple.past { opacity:.62; } .couple.past .head b { color:var(--dim); } .couple.past:hover { opacity:1; }
.chip.stars { font-weight:800; letter-spacing:.02em; }
/* ---------- The safety net on the Expenses tab (Lucas, 2026-10-30) ---------- */
.reserve { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px; margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r2); background:var(--panel2); }
.reserve .t { flex:1; min-width:220px; } .reserve .t b { display:block; font-size:13px; } .reserve .t span { font-size:12.5px; color:var(--dim); } .reserve .bar { margin-top:8px; }
.reserve .acts { display:flex; gap:8px; flex-wrap:wrap; }
/* ---------- From the Home Screen: the welcome starts on Android's own splash picture, the app icon, then the spark takes over (Lucas, 2026-10-31) ---------- */
#welcome.splash { background:#041423; }
#welcome .splashpic { position:absolute; left:50%; top:50%; width:44vw; max-width:200px; min-width:150px; transform:translate(-50%, -50%); opacity:1; transition:opacity .5s ease; pointer-events:none; }
#welcome .splashpic svg { width:100%; height:auto; display:block; }
#welcome.splash .logo { opacity:0; transition:opacity .5s ease .1s; }
#welcome.splash.draw .splashpic { opacity:0; } #welcome.splash.draw .logo { opacity:1; }
/* ---------- The monthly card to a DJ, previewed in HQ (Lucas, 2026-10-30) ---------- */
.djcard { margin-top:12px; padding:18px 20px; border:1px solid var(--line2); border-radius:var(--r2); background:var(--panel2); font-size:14px; line-height:1.55; }
.djcard .brand { display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; }
.djcard .brand .mark { font-family:'Cinzel',Georgia,serif; letter-spacing:.42em; color:var(--gold-fill); font-size:15px; } .djcard .brand .sub { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.djcard h4 { margin:14px 0 4px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); } .djcard ul { margin:0; padding-left:18px; } .djcard li { margin:2px 0; } .djcard p { margin:6px 0; } .djcard .dim { color:var(--dim); font-size:12.5px; }

/* ---------- DJ HQ (31 Oct 2026): the few pieces HQ did not have ---------- */
.hero.gig .big.name { font-size:46px; letter-spacing:-.025em; line-height:1.05; overflow-wrap:anywhere; }
.hero.gig .eyebrow .chip { margin-left:10px; }
.hero.gig .side .acts { display:flex; gap:8px; flex-wrap:wrap; }
.quiet { grid-template-columns:repeat(3, 1fr); }
.quiet.two { grid-template-columns:repeat(2, 1fr); }
.note { grid-column:span 12; color:var(--dim); font-size:12.5px; line-height:1.55; margin:0 0 10px; }
.card .note:last-child { margin-bottom:0; }
.lbl { display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:12px 0 6px; font-weight:700; }
.btn.snap { display:flex; align-items:center; justify-content:center; gap:10px; padding:22px 16px; font-size:13px; margin-bottom:12px; cursor:pointer; }
.btn.snap svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#snapForm .btn { margin-top:12px; }
.preview { display:grid; place-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r2); padding:8px; min-height:80px; }
.preview img { max-width:100%; max-height:320px; border-radius:var(--r); display:block; }
.row.past { opacity:.62; }
.row .t .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; white-space:normal; overflow:visible; }
.row .t > span:not(.tags):not(.acts):not(.words) { white-space:normal; }
.row .t b { white-space:normal; }
.stages { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.stage { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim); flex-wrap:wrap; }
.stage b { color:var(--ink); font-variant-numeric:tabular-nums; }
.row.money-gig .t b { white-space:normal; }
.row.review .t .words { white-space:normal; color:var(--ink); opacity:.85; margin-top:3px; }
.stars { color:var(--gold); letter-spacing:.05em; margin-right:4px; }
.keyset { display:flex; gap:8px; margin:4px 0 8px; } .keyset input { flex:1; min-width:0; padding:9px 10px; font-size:16px; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.mono { font-family:ui-monospace, Menlo, monospace; font-size:11px !important; overflow-wrap:anywhere; white-space:normal !important; }
.card.paper { padding:0; overflow:hidden; background:#fff; }
.card.paper iframe { width:100%; height:78vh; border:0; display:block; background:#fff; }
.card .btn.block + .btn.block { margin-top:8px; }
@media (max-width:920px) {
  .hero.gig .big.name { font-size:34px; }
  .quiet, .quiet.two { grid-template-columns:1fr 1fr; }
  .quiet > div:nth-child(2n) { border-right:0; margin-right:0; }
  .quiet > div:nth-child(3) { grid-column:span 2; }
  .quiet.two > div:nth-child(3) { grid-column:auto; }
}
.quiet.two .l { white-space:normal; }