/* Our Living Space - phone first, plain and calm. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Karla:wght@400;500;700&family=Poppins:wght@500;800&display=swap');

:root{
  --ground:#E7EBE6;      /* pale ash green-grey */
  --card:#FCFDFB;        /* near white */
  --card-2:#F2F5F0;      /* barely-there green white */
  --ink:#1B2320;         /* almost-black slate */
  --ink-soft:#5B6862;    /* muted grey-green */
  --line:#D2DAD0;        /* soft sage line */
  --notes:#3F6C51;       /* pine green */
  --lists:#2F5D7C;       /* denim blue */
  --photos:#A6543C;      /* clay orange */
  --dates:#9A7420;       /* mustard gold */
  --honey:#6E5288;       /* dusty plum */
  --links:#2B7168;       /* slate teal */
  --notes-wash:#E2EDE5; --lists-wash:#DFE9F1;
  --photos-wash:#F3E2DB; --dates-wash:#F2EAD5;
  --honey-wash:#E9E3F1; --links-wash:#DCEDE9;
  --warn:#8C3A2E;        /* brick red */
  --warn-wash:#F5E1DC;   /* palest brick */
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#121614; --card:#1D2422; --card-2:#242C29;
    --ink:#E9EFEA; --ink-soft:#9BA9A2; --line:#2F3A36;
    --notes:#79AE8D; --lists:#7BAAC9; --photos:#D9917A; --dates:#D6B152;
    --honey:#B49AD1; --links:#5FB3A6;
    --notes-wash:#1F2C25; --lists-wash:#1C2831;
    --photos-wash:#31221D; --dates-wash:#2E2717;
    --honey-wash:#251E33; --links-wash:#16302C;
    --warn:#D98A7B;
    --warn-wash:#33211D;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:86px;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none}

.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:var(--card);
  border-bottom:1px solid var(--line);
}
.bar h1{font-size:21px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back,.back-space{width:30px;display:inline-block;font-size:23px;
  color:var(--ink-soft);line-height:1;text-align:left}
.whoami{font-size:13px;color:var(--ink-soft);white-space:nowrap}

.screen{max-width:560px;margin:0 auto;padding:16px;
  display:flex;flex-direction:column;gap:16px}

.flash{margin:0;padding:12px 14px;border-radius:12px;
  background:var(--dates-wash);border:1px solid var(--line);font-size:15px}

.purpose{background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px}
.purpose .big{font-family:"Fraunces",Georgia,serif;font-size:20px;font-weight:700;display:block}
.purpose .small{font-size:14px;color:var(--ink-soft);display:block;margin-top:3px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 14px;
  display:flex;flex-direction:column;gap:2px;min-height:104px;justify-content:flex-end}
.tile .name{font-family:"Fraunces",Georgia,serif;font-size:20px;font-weight:700}
.tile .count{font-size:13px;color:var(--ink-soft)}
.tile .dot{width:10px;height:10px;border-radius:50%;margin-bottom:auto}
.t-notes{background:var(--notes-wash)} .t-notes .dot{background:var(--notes)}
.t-lists{background:var(--lists-wash)} .t-lists .dot{background:var(--lists)}
.t-photos{background:var(--photos-wash)} .t-photos .dot{background:var(--photos)}
.t-dates{background:var(--dates-wash)} .t-dates .dot{background:var(--dates)}

.sec-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}

.feed{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:12px;align-items:flex-start;
  background:var(--card-2);border:1px solid var(--line);border-left-width:4px;
  border-radius:12px;padding:12px 14px}
.row .body{flex:1;min-width:0}
.row .t{font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m{font-size:14px;color:var(--ink-soft);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .who-tag{font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--ink-soft);flex:0 0 auto;padding-top:3px;text-transform:uppercase}
.b-notes{border-left-color:var(--notes)}
.b-lists{border-left-color:var(--lists)}
.b-photos{border-left-color:var(--photos)}
.b-dates{border-left-color:var(--dates)}

.doc{background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:16px}
.doc h2{font-size:21px;margin-bottom:8px}
.doc .meta{font-size:14px;color:var(--ink-soft);margin:10px 0 0}
.note-body{white-space:normal;word-wrap:break-word}

.form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld > span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
input[type=text],input[type=password],input[type=date],input:not([type]),textarea,input[type=file]{
  font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}
textarea{resize:vertical}

.btn{font:inherit;font-weight:700;cursor:pointer;border-radius:12px;
  padding:13px 16px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);text-align:center;display:inline-block}
.btn.wide{width:100%}
.btn-main{background:var(--notes);border-color:var(--notes);color:#FCFDFB}
body[data-mode="night"] .btn-main{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .btn-main{color:#121614}}
.btn-quiet{color:var(--warn-ink)}
form{margin:0}

.check{background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:4px 14px}
.check .item{display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line)}
.check .item:last-child{border-bottom:0}
.check label{display:flex;gap:12px;align-items:center;
  padding:13px 0;flex:1;cursor:pointer}
.check input[type=checkbox]{width:22px;height:22px;accent-color:var(--lists);
  flex:0 0 auto;margin:0}
.check input:checked + span{text-decoration:line-through;color:var(--ink-soft)}
.check .x button{background:none;border:0;color:var(--ink-soft);
  font-size:20px;cursor:pointer;padding:6px 2px;line-height:1}

.grid-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card-2);display:block}
.shot .img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.shot .cap{display:block;padding:8px 10px 10px;font-size:13px;color:var(--ink-soft)}
.shot .cap b{color:var(--ink);display:block;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bigphoto{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bigphoto .img{width:100%;display:block;background:var(--card-2)}
.bigphoto .cap{display:block;padding:12px 14px;font-size:14px;
  color:var(--ink-soft);background:var(--card-2)}

.more{background:var(--card-2);border:1px solid var(--line);
  border-radius:14px;padding:0 16px}
.more summary{padding:14px 0;font-weight:700;cursor:pointer;color:var(--ink-soft)}
.more[open]{padding-bottom:16px}
.more > *:not(summary){margin-top:12px}

/* games that are over: shut by default, with how many there are on the bar */
.gdone{margin-top:14px;padding:0 12px}
.gdone summary{display:flex;align-items:center;gap:8px;padding:12px 0;
  font-size:14px}
.gdone summary i{font-style:normal;font-size:11px;font-weight:800;
  min-width:20px;padding:1px 6px;border-radius:99px;text-align:center;
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line)}
.gdone .feed{margin-top:4px}
.gdone .row{opacity:.78}

.empty{color:var(--ink-soft);font-size:15px;padding:6px 2px;margin:0}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--card);
  max-width:560px;margin:0 auto}
.tabbar .btn{flex:1}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--card);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 -10px 30px rgba(0,0,0,.18);max-width:560px;margin:0 auto}
.sheet h3{font-size:19px}
.sheet .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
[hidden]{display:none !important}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--lists);outline-offset:2px}

/* ---- Honey Do and Links ---- */
.t-honey{background:var(--honey-wash)} .t-honey .dot{background:var(--honey)}
.t-links{background:var(--links-wash)} .t-links .dot{background:var(--links)}
.b-honey{border-left-color:var(--honey)}
.b-links{border-left-color:var(--links)}

.ver{font-size:12px;color:var(--ink-soft);opacity:.75;letter-spacing:.04em}
.version{margin:4px 0 0;text-align:center;font-size:13px;color:var(--ink-soft)}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:8px 14px;font-size:14px;font-weight:700;color:var(--ink-soft)}
.pill.on{background:var(--honey);border-color:var(--honey);color:#FCFDFB}
body[data-mode="night"] .pill.on{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .pill.on{color:#121614}}

.check.honey input[type=checkbox]{accent-color:var(--honey)}
.check.honey label > span{display:flex;flex-direction:column;gap:2px}
.tagline{font-style:normal;font-size:13px;color:var(--ink-soft)}
.done-row .t{text-decoration:line-through;color:var(--ink-soft)}
.done-row .x button{background:none;border:0;color:var(--ink-soft);
  font-size:18px;cursor:pointer;padding:4px 2px;line-height:1}

.linkrow{align-items:center}
.linkrow .body{display:block}
.linkrow .edit{font-size:12px;text-transform:none;letter-spacing:0;
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--card)}

select{font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%}

/* ---- Passwords ---- */
:root{
  --vault:#7A3B4E;        /* deep wine */
  --vault-wash:#F0E1E6;   /* pale blush */
}
@media (prefers-color-scheme: dark){
  :root{ --vault:#C98CA0; --vault-wash:#2E1B22; }
}
.t-vault{background:var(--vault-wash)} .t-vault .dot{background:var(--vault)}
.b-vault{border-left-color:var(--vault)}
.tile.span2{grid-column:1 / -1;min-height:88px}

.secretrow{align-items:center;gap:10px}
.secretrow .body{min-width:0}
.secretrow .acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.mini{font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:9px;padding:5px 9px;text-align:center;display:block}
.mini:hover{background:var(--card-2)}
.reveal{display:block;margin-top:6px;font-family:ui-monospace,"Cascadia Mono",Menlo,monospace;
  font-size:15px;word-break:break-all;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;color:var(--ink)}

/* ---- "waiting for you" ---- */
.bell{
  flex:0 0 auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:var(--notes);color:#FCFDFB;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
body[data-mode="night"] .bell{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .bell{color:#121614}}

.waiting{
  background:var(--notes);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:12px;color:#FCFDFB}
@media (prefers-color-scheme: dark){ .waiting{color:#0F1412} }
.waiting h2{font-size:21px;font-weight:700;color:inherit}
.waiting .sub{margin:-8px 0 0;font-size:14px;opacity:.85}
.wlist{display:flex;flex-direction:column;gap:8px}
.witem{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(252,253,251,.92);border-radius:12px;padding:11px 13px;color:var(--ink)}
@media (prefers-color-scheme: dark){ .witem{background:var(--card)} }
.witem:hover{background:#FCFDFB}
.wtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wwhat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft)}
.wtitle{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wwhen{font-size:12px;color:var(--ink-soft);flex:0 0 auto;padding-top:14px}
.wclear{display:flex}
.wclear button{
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;width:100%;
  background:transparent;color:inherit;border:1px solid rgba(252,253,251,.5);
  border-radius:12px;padding:10px 14px}
.wclear button:hover{background:rgba(252,253,251,.14)}
@media (prefers-color-scheme: dark){
  .wclear button{border-color:rgba(15,20,18,.45)}
  .wclear button:hover{background:rgba(15,20,18,.14)}
}

/* ---- v1.5: files, trash, search, hitch countdown, version tag ---- */
:root{
  --files:#5A6B2F;        /* olive green */
  --files-wash:#E7EBD9;   /* pale sage */
  --bin:#6B6B6B;          /* plain grey */
  --hitch:#1F4E5F;        /* deep teal blue */
}
@media (prefers-color-scheme: dark){
  :root{ --files:#A9BE7A; --files-wash:#242A18; --bin:#9AA0A0; --hitch:#7FB8CC; }
}
.t-files{background:var(--files-wash)} .t-files .dot{background:var(--files)}
.b-files{border-left-color:var(--files)}
.b-bin{border-left-color:var(--bin)}
.b-search{border-left-color:var(--ink-soft)}

.vtag{display:block;font-size:10px;opacity:.65;letter-spacing:.05em;text-align:right}
.whoami{line-height:1.15}

.hitch{
  display:flex;flex-direction:column;gap:2px;
  background:var(--hitch);color:#FCFDFB;border-radius:16px;padding:16px}
@media (prefers-color-scheme: dark){ .hitch{color:#0F1412} }
.hbig{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:700;line-height:1.1}
.hsub{font-size:14px;opacity:.9}

.filerow{align-items:center}
.filerow .body{display:block;min-width:0}
.filerow .x button{background:none;border:0;color:var(--ink-soft);
  font-size:20px;cursor:pointer;padding:6px 4px;line-height:1}

.b-bin .acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.b-bin .acts form{margin:0}

.check-line{display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.check-line input{width:22px;height:22px;accent-color:var(--notes);flex:0 0 auto;margin:0}
.check-line span{font-size:15px}

.tabbar .btn{padding:13px 10px}

/* ---- v1.6: pins and albums ---- */
.pin{
  font-size:10px;font-weight:700;letter-spacing:.09em;
  background:var(--dates);color:#FCFDFB;border-radius:5px;
  padding:2px 5px;vertical-align:2px;margin-right:2px}
body[data-mode="night"] .pin{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .pin{color:#121614}}

.albumpills .pill.on{background:var(--photos);border-color:var(--photos)}
datalist{display:none}

/* ---- v1.7 ---- */

/* whichever colour the person picked becomes the main accent */
body[data-accent="denim"] { --notes:#2F5D7C; }
body[data-accent="clay"]  { --notes:#A6543C; }
body[data-accent="plum"]  { --notes:#6E5288; }
body[data-accent="teal"]  { --notes:#2B7168; }
body[data-accent="wine"]  { --notes:#7A3B4E; }
@media (prefers-color-scheme: dark){
  body[data-accent="denim"] { --notes:#7BAAC9; }
  body[data-accent="clay"]  { --notes:#D9917A; }
  body[data-accent="plum"]  { --notes:#B49AD1; }
  body[data-accent="teal"]  { --notes:#5FB3A6; }
  body[data-accent="wine"]  { --notes:#C98CA0; }
}

.offbar{margin:0;padding:10px 14px;background:var(--dates);color:#FCFDFB;
  font-size:14px;font-weight:700;text-align:center}
body[data-mode="night"] .offbar{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .offbar{color:#121614}}

.todaybox{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.todaybox h2{font-size:21px;font-weight:700}
.tlist{display:flex;flex-direction:column;gap:8px}
.titem{display:flex;gap:12px;align-items:flex-start;
  background:var(--card-2);border-radius:12px;padding:11px 13px}
.twhen{flex:0 0 74px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
.twhen.late{color:var(--warn)}
.ttxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.twhat{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkind{font-size:13px;color:var(--ink-soft)}

.t-more{background:var(--card-2)} .t-more .dot{background:var(--ink-soft)}
.t-rig{background:var(--files-wash)} .t-rig .dot{background:var(--files)}
.t-places{background:var(--links-wash)} .t-places .dot{background:var(--links)}
.t-history{background:var(--lists-wash)} .t-history .dot{background:var(--lists)}
.t-bin{background:var(--card-2)} .t-bin .dot{background:var(--bin)}
.t-vault{background:var(--photos-wash)} .t-vault .dot{background:var(--photos)}
.t-ot{background:var(--honey-wash)} .t-ot .dot{background:var(--honey)}
.b-rig{border-left-color:var(--files)}
.b-places{border-left-color:var(--links)}
.b-history{border-left-color:var(--ink-soft)}
.b-places .acts, .b-rig .acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}

.calnav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calmon{font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:700}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.caldow{text-align:center;font-size:11px;font-weight:700;color:var(--ink-soft);padding:4px 0}
.calcell{background:var(--card-2);border:1px solid var(--line);border-radius:8px;
  min-height:62px;padding:4px 3px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.calcell.empty{background:transparent;border-color:transparent}
.calcell.today{border-color:var(--notes);border-width:2px}
.caldate{font-size:11px;font-weight:700;color:var(--ink-soft)}
.calev{font-size:10px;line-height:1.25;background:var(--dates-wash);
  border-radius:4px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calev.hitchev{background:var(--hitch);color:#FCFDFB}
body[data-mode="night"] .calev.hitchev{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .calev.hitchev{color:#121614}}

.usualpills .pill.usual{cursor:pointer}
.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.swatch{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.swatch.on{border-color:var(--notes);border-width:2px}
.swatch input{width:18px;height:18px;accent-color:var(--notes);margin:0;flex:0 0 auto}
.chip{width:20px;height:20px;border-radius:50%;flex:0 0 auto}
.sname{font-size:14px}

:root{
  --cs-tile:#F0E3C6;   --cs-tile-ink:#33291A;
  --cs-dl:#DCE9F1;     --cs-tl:#9FC2D8;
  --cs-dw:#F3DFD8;     --cs-tw:#DFA893;
  --cs-star:#E8CE86;   --cs-plain:#E4EAE2;
}
@media (prefers-color-scheme: dark){
  :root{
    --cs-tile:#C9B489; --cs-tile-ink:#241C10;
    --cs-dl:#22323C;   --cs-tl:#37596C;
    --cs-dw:#3A2721;   --cs-tw:#6E4033;
    --cs-star:#7A6634; --cs-plain:#232A27;
  }
}
.b-game{border-left-color:var(--dates)}
:root{
  --cs-tw:#2E7D4F;  --cs-tw-ink:#FFFFFF;   /* triple word - green */
  --cs-tl:#1F5FA8;  --cs-tl-ink:#FFFFFF;   /* triple letter - blue */
  --cs-dw:#C36A1C;  --cs-dw-ink:#FFFFFF;   /* double word - orange */
  --cs-dl:#6B4A9E;  --cs-dl-ink:#FFFFFF;   /* double letter - purple */
  --cs-hole:#9B2226; --cs-hole-ink:#FFFFFF;/* sinkhole - deep red */
  --cs-star:#D4A017; --cs-star-ink:#241C10;
  --cs-good:#1E7A46; --cs-bad:#A8261F;
}
@media (prefers-color-scheme: dark){
  :root{
    --cs-tw:#3E9C66;  --cs-tl:#3B7FCC;  --cs-dw:#D9822B;
    --cs-dl:#8B67C4;  --cs-hole:#C0393D; --cs-star:#C79A2B;
    --cs-tw-ink:#0E1512; --cs-tl-ink:#0E1512; --cs-dw-ink:#241403;
    --cs-dl-ink:#100A18; --cs-hole-ink:#1A0605; --cs-star-ink:#241C10;
    --cs-good:#5FBE87; --cs-bad:#E0736C;
  }
}
.csdim{opacity:.8;font-size:12px}
:root{ --cs-gilt:#C9A227; --cs-gilt-ink:#241C10; }
@media (prefers-color-scheme: dark){ :root{ --cs-gilt:#E0B93A; --cs-gilt-ink:#1A1408; } }
.homeb,.hubb{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:32px;height:32px;border-radius:9px;
  color:var(--ink-soft);border:1px solid var(--line);background:var(--card-2)}
/* an admcard the header can jump straight to sits clear of the sticky bar */
.admcard[id]{scroll-margin-top:76px}
:root{
  --b-felt:#E9EFF7;    /* the surface the squares sit on */
  --b-plain:#DFE4EE;   /* a square with no bonus */
  --b-tw:#E0245E;      /* triple word  - pink   */
  --b-dw:#F5906E;      /* double word  - coral  */
  --b-tl:#17618C;      /* triple letter- deep blue */
  --b-dl:#7FC1EA;      /* double letter- sky    */
  --b-hole:#3F4A54;    /* sinkhole     - slate  */
  --b-star:#E8B33D;    /* the centre            */
  --b-tile:#F7EFD0;    /* your tiles            */
  --b-tile2:#E7EDD2;   /* the other one's tiles */
  --b-last:#F6C445;    /* the word just played  */
  --b-gilt:#D8A81A;    /* a gilded tile         */
  --b-ink:#2B2B2B;     /* the letter on a tile  */
  --b-edge:rgba(0,0,0,.22);
}
.gems{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
  height:32px; padding:0 9px; border-radius:9px;
  border:1px solid var(--line); background:var(--card-2);
  color:var(--ink); font-size:14px; font-weight:700; line-height:1;
}
.gems svg{ color:#4FA3D9; flex:0 0 auto }
.bar{ gap:7px }
.bar h1{ font-size:19px }
/* =======================================================================
   BILLS - laid out by paycheck, not by calendar.
   ======================================================================= */
:root{ --bill:#2E7D5B; --bill-wash:#DFEDE6; --bill-out:#A6543C; }
@media (prefers-color-scheme: dark){
  :root{ --bill:#6DBF97; --bill-wash:#1B2A24; --bill-out:#D9917A; }
}
.t-bills{background:var(--bill-wash)} .t-bills .dot{background:var(--bill)}
.b-bills{border-left-color:var(--bill)}

.paycard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card-2)}
.paycard.now{border-color:var(--bill);box-shadow:inset 0 0 0 1px var(--bill)}

.pcHead{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--card)}
.paycard.now .pcHead{background:var(--bill-wash)}
.pcHead .lft{flex:1;min-width:0}
.pk{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.pd{font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:700;margin-top:2px}
.pw{font-size:12px;color:var(--ink-soft);margin-top:1px}

.takeform{flex:0 0 118px;text-align:right}
.takein{font:inherit;font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:700;
  text-align:right;padding:6px 8px;border-radius:9px;width:100%;
  background:var(--card-2);border:1px solid var(--line);color:var(--ink)}
.tklab{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);margin-top:4px}

.billrow{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-top:1px solid var(--line);margin:0}
.billrow .tick{width:25px;height:25px;flex:0 0 auto;border-radius:8px;cursor:pointer;
  border:2px solid var(--line);background:var(--card);color:var(--ink);
  font-size:15px;font-weight:800;line-height:1;padding:0}
.billrow .tick.on{background:var(--bill);border-color:var(--bill);color:var(--on-accent)}
.billrow .bnm{flex:1;min-width:0}
.billrow .bnm b{display:block;font-size:15px;font-weight:600}
.billrow .bnm > span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.billrow .rep{display:inline-block;font-style:normal;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:800;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:5px}
.billrow .bv{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:700;flex:0 0 auto}
.billrow.done .bnm b{color:var(--ink-soft);text-decoration:line-through}
.billrow.done .bv{color:var(--ink-soft)}

.pcFoot{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--card)}
.pcFoot .c{flex:1}
.pcFoot .c span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.pcFoot .c b{display:block;font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:700;margin-top:2px}
.pcFoot .c.out b{color:var(--bill-out)}
.pcFoot .c.left b{color:var(--bill)}
.pcAdd{display:block;text-align:center;padding:12px 0;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--bill)}
.nothing{padding:14px 16px;margin:0;border-top:1px solid var(--line)}

.paycard.past{display:flex;align-items:center;gap:12px;padding:13px 16px}
.paycard.past .pcm{flex:1;min-width:0}
.paycard.past .pd{font-size:16px}
.paidtag{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;
  color:var(--bill);border:1px solid var(--bill);border-radius:6px;padding:2px 7px;flex:0 0 auto}
.pchev{color:var(--ink-soft);font-size:19px;flex:0 0 auto}

/* =======================================================================
   THE HOME SCREEN. App icons and words, no cards - meant to feel like a
   phone home screen rather than a list of boxes.
   ======================================================================= */
.hdr{display:flex;align-items:center;justify-content:space-between;margin:0}
.hdr b{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.hdr span{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.hdr a{font-size:12.5px;color:var(--notes);font-weight:700;display:flex;align-items:center;gap:4px}
.hdr a svg{width:12px;height:12px}

/* the favourites row */
.dock{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:15px 8px 13px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dock .it{display:flex;flex-direction:column;align-items:center;gap:8px}
.dock .gl{width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.dock .gl svg{width:22px;height:22px}
.dock .lb{font-size:11.5px;font-weight:700;color:var(--ink-soft)}

/* the sections */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 6px}
.apps.two{grid-template-columns:repeat(2,1fr);justify-items:center}
.app{display:flex;flex-direction:column;align-items:center;gap:9px;position:relative}
.app .gl{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  box-shadow:0 6px 14px -7px rgba(0,0,0,.6)}
.app .gl svg{width:26px;height:26px}
.app .lb{font-size:12.5px;font-weight:700;text-align:center;line-height:1.15}
.app .bd{position:absolute;top:-5px;right:12px;min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;background:var(--notes);color:#FCFDFB;font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--ground);z-index:2}
body[data-mode="night"] .app .bd{color:#121614}
@media (prefers-color-scheme: dark){body:not([data-mode]) .app .bd{color:#121614}}

/* the app icon colours */
.gl{color:#FFFFFF}
.g1{background:linear-gradient(160deg,#3E8F63,#2C6B49)}
.g2{background:linear-gradient(160deg,#3F7DA6,#2A5B7C)}
.g3{background:linear-gradient(160deg,#C4715A,#96513E)}
.g4{background:linear-gradient(160deg,#C39A2B,#8E6F19)}
.g5{background:linear-gradient(160deg,#8A6BB0,#644A84)}
.g6{background:linear-gradient(160deg,#2F7F86,#1F5C61)}
.g7{background:linear-gradient(160deg,#B05B6B,#82404D)}
.g8{background:linear-gradient(160deg,#5A6B62,#3E4B45)}
.g9{background:linear-gradient(160deg,#2E7D5B,#1F5740)}

/* Today, cut back to two with the rest behind a tap */
.todaybox h2{display:none}
.todaymore{margin-top:2px}
.todaymore summary{padding:11px 0 3px;text-align:center;font-size:12.5px;
  font-weight:700;color:var(--notes-ink);cursor:pointer;list-style:none}
.todaymore summary::-webkit-details-marker{display:none}
.todaymore .tlist{margin-top:8px}

/* arranging it */
.editlist{display:flex;flex-direction:column;gap:8px}
.editrow{display:flex;align-items:center;gap:12px;background:var(--card-2);
  border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.editrow .gl{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.editrow .gl svg{width:19px;height:19px}
.editrow .nm{flex:1;font-weight:700;font-size:15px}
.editrow .acts{display:flex;gap:6px;flex:0 0 auto}
.editrow .acts form{margin:0}
.editrow .mini{min-width:36px;padding:8px 0;font-size:15px;line-height:1}
.editrow .mini:disabled{opacity:.3}
.editrow .mini.off{color:var(--warn-ink)}
.sparerow{display:flex;flex-wrap:wrap;gap:8px}
.sparerow form{margin:0}

/* ===================== Overtime — Michael's screen ===================== */
.othead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px 15px;margin-bottom:12px}
.othead.on{background:var(--honey-wash);border-color:var(--honey)}
.othead .pk{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.othead.on .pk{color:var(--honey)}
.othead .pd{font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:700}
.othead .pw{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
.othead .rgt{text-align:right;display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.othead .rgt b{font-family:"Fraunces",Georgia,serif;font-size:24px;font-weight:700}
.othead .rgt span{font-size:11px;color:var(--ink-soft)}

.otwk{border-top:1px solid var(--line)}
.owk{display:flex;align-items:baseline;gap:8px;padding:9px 14px;background:var(--card-2)}
.owk b{font-size:13px;flex:0 0 auto}
.owk span{font-size:12px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.owk i{font-style:normal;font-size:13px;font-weight:700;flex:0 0 auto}
.otwk .nothing{padding:10px 14px;margin:0;font-size:13px}

.otadd{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.otday,.otfld{display:flex;flex-direction:column;gap:5px}
.otday span,.otfld span{font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.otday input,.otfld input{font:inherit;font-size:16px;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);width:100%}
.otq{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.otq summary{color:var(--notes-ink)}
.otq .qh{font:inherit;font-weight:700;font-size:16px;padding:14px 0;border-radius:12px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);cursor:pointer}
.otq .qh.on{background:var(--honey);border-color:var(--honey);color:var(--on-accent)}
.ottimes summary{font-size:14px;font-weight:700;color:var(--notes-ink);cursor:pointer;
  padding:4px 0;list-style:none}
.ottimes summary::-webkit-details-marker{display:none}
.ottimes summary::after{content:" ›"}
.ottimes[open] summary::after{content:" ⌄"}
.ottimes .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.ottimes .csdim{font-size:12.5px;margin:7px 0 0}

.otweek{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin-bottom:12px}
.otweek.now{border-color:var(--honey);box-shadow:0 0 0 1px var(--honey) inset}
.owHead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;background:var(--card-2)}
.otweek.now .owHead{background:var(--honey-wash)}
.owHead .pk{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.owHead .pd{font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:700}
.owTot{text-align:right;display:flex;flex-direction:column;gap:1px}
.owTot b{font-family:"Fraunces",Georgia,serif;font-size:22px;font-weight:700}
.owTot span{font-size:11.5px;color:var(--ink-soft)}
.otweek .nothing{padding:14px;margin:0;font-size:14px}

.otday-row{border-top:1px solid var(--line)}
.odh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:9px 14px 4px}
.odh b{font-size:14px}
.odh span{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.otrow{display:flex;align-items:center;gap:10px;padding:7px 14px 9px}
.otrow .ov{flex:0 0 auto;min-width:52px;font-weight:700;font-size:15px;color:var(--honey)}
.otrow .ow{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.otrow .ow b{font-size:14px}
.otrow .ow span{font-size:13px;color:var(--ink-soft);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.otrow .ox{flex:0 0 auto;font:inherit;font-size:19px;line-height:1;width:32px;height:32px;
  border-radius:9px;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink-soft);cursor:pointer}

/* ===================== Potential events + the date checker ============== */
.checker{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 13px;margin-bottom:12px}
.checker.yes{border-color:var(--notes);background:var(--notes-wash)}
.checker.no{border-color:var(--warn);background:var(--warn-wash)}
.ckrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.cklab{grid-column:1 / -1;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.ckrow input[type="date"]{font:inherit;font-size:16px;padding:10px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);
  width:100%;min-width:0}
.ckrow .btn{padding:11px 18px;white-space:nowrap}
.ckout{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.ckout b{font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:700}
.ckout span{font-size:13.5px;color:var(--ink-soft)}

.evtabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;margin-bottom:11px}
.evtabs .tab{flex:0 0 auto;font-size:14px;font-weight:700;padding:9px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  text-decoration:none;white-space:nowrap}
.evtabs .tab.on{background:var(--notes);border-color:var(--notes);color:#fff}
.evtabs .tab i{font-style:normal;font-weight:700;opacity:.6;margin-left:3px}
.evsum{font-size:13.5px;color:var(--ink-soft);margin:11px 2px 4px}
.evsum b{color:var(--ink)}

.evcard{background:var(--card);border:1px solid var(--line);border-left-width:4px;
  border-radius:14px;padding:12px 13px;margin-bottom:11px}
.evcard.can{border-left-color:var(--notes)}
.evcard.cant{border-left-color:var(--warn)}
.evcard.part{border-left-color:var(--dates)}
.evcard.part .evcan{background:var(--dates-wash)}
.evcard.gone{opacity:.55}
.evcard.v-no{opacity:.6}
.evtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  text-decoration:none;color:inherit}
.evname{font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:700;
  flex:1;min-width:0}
.evcost{flex:0 0 auto;text-align:right;font-weight:700;font-size:16px}
.evcost i{display:block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.evmeta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:13.5px;
  color:var(--ink-soft)}
.evwhen{font-weight:700;color:var(--ink)}
.evwhen.dim{font-weight:400;color:var(--ink-soft)}
.evnote{font-size:13.5px;color:var(--ink-soft);margin:6px 0 0}
.evlink{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;
  color:var(--notes)}
.evcan{font-size:13px;margin:8px 0 0;padding:7px 9px;border-radius:9px;
  background:var(--card-2);color:var(--ink-soft)}
.evcard.can .evcan{background:var(--notes-wash)}
.evcard.cant .evcan{background:var(--warn-wash)}
.evcan b{color:var(--ink)}
.evcan.dim{font-style:italic}

.evacts{display:flex;gap:6px;margin-top:10px}
.evacts form{margin:0;flex:1}
.evacts .vb{width:100%;font:inherit;font-size:13px;font-weight:700;padding:9px 4px;
  border-radius:10px;border:1px solid var(--line);background:var(--card-2);
  color:var(--ink-soft);cursor:pointer}
.evacts .vb.on{background:var(--notes);border-color:var(--notes);color:#fff}

:root{
  --sea-1:#123044;      /* deep water */
  --sea-2:#17394F;      /* water, one shade up */
  --sea-3:#1E475F;      /* the square itself */
  --sea-line:#0C2231;   /* the gap between squares */
  --hull:#C9D3D6;       /* brushed steel */
  --hull-2:#9FADB2;
  --ember:#D4694A;      /* a hit */
  --ember-2:#8C3A2E;
  --foam:#7FA9BD;       /* a miss */
  --sonar:#5FB3A6;
}
.gpick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.gp{position:relative;padding:13px 12px;border-radius:15px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);text-decoration:none}
.gp .gpn{display:block;font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:700;
  line-height:1.15}
.gp .gps{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.gp.on{background:var(--sea-1);border-color:var(--sea-1);color:#E8F0F3}
.gp.on .gps{color:var(--foam)}
.gp i{position:absolute;top:8px;right:8px;font-style:normal;font-size:11px;
  font-weight:700;min-width:19px;height:19px;line-height:19px;text-align:center;
  border-radius:999px;background:var(--ember);color:#fff}
:root{ --flare:#E8B44A; --flare-2:#8A6417; }
/* ===================== Jobs, areas and dragging ========================
   The Lists tab is a hub now: On deck, Honey Do, Groceries, Lists. Jobs sit
   in coloured areas that fold away, and anything in a .sortable can be
   dragged by its handle. */

/* ---- an area, and its heading ---- */
.group{margin:10px 0 4px}
.grouphead{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-radius:12px 12px 0 0;background:var(--card);
  border:1px solid var(--line);border-bottom:0}
.group.shut .grouphead{border-radius:12px;border-bottom:1px solid var(--line)}
.gdot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  background:var(--area,var(--ink-soft));
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.3)}
.gname{flex:1;min-width:0;font-weight:800;font-size:13.5px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.gcount{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--ink-soft);
  background:var(--card-2);border-radius:10px;padding:2px 8px}
.fold{flex:0 0 auto;width:28px;height:28px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink-soft);
  position:relative;padding:0}
.fold::before,.fold::after{content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;border-radius:1px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .16s ease}
.fold::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.group.shut .fold::after{opacity:1}
.group.shut .sortable{display:none}

/* ---- the rows ---- */
.sortable{display:flex;flex-direction:column;gap:0}
.group .sortable{border:1px solid var(--line);border-radius:0 0 12px 12px;
  background:var(--card);overflow:hidden}
.sortable .item{display:flex;align-items:center;gap:8px;padding:9px 10px;
  background:var(--card);position:relative;touch-action:pan-x;
  border-top:1px solid var(--line)}
.sortable .item:first-child{border-top:0}
.group .sortable .item{border-left:3px solid var(--area,transparent)}
.sortable .item.dragging{z-index:5;box-shadow:0 8px 20px rgba(0,0,0,.28);
  border-radius:10px;opacity:.97}
.sortable.dragging-on{cursor:grabbing}

/* the handle - big enough to hit with a thumb */
.grip{flex:0 0 auto;width:26px;height:34px;cursor:grab;position:relative;
  touch-action:none;border-radius:7px}
.grip::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:12px;height:16px;
  background-image:radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size:6px 5px;color:var(--ink-soft);opacity:.55}
.grip:active{cursor:grabbing}
.grip:active::before{opacity:.95}

.num{flex:0 0 auto;min-width:20px;font-size:11.5px;font-weight:800;
  color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}

.sortable .item label{flex:1;min-width:0;display:flex;align-items:flex-start;
  gap:9px;cursor:pointer;margin:0}
.jt{flex:1;min-width:0;font-size:14.5px;line-height:1.3;color:var(--ink)}
.sortable .tagline{display:block;font-style:normal;font-size:11px;
  color:var(--ink-soft);margin-top:2px;line-height:1.3}

.jacts{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.jacts form{margin:0}
.star{width:30px;height:30px;border:0;background:none;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink-soft);padding:0}
.star.on{color:#D9A227}
.jacts .x button{width:28px;height:28px;border:0;background:none;
  color:var(--ink-soft);font-size:17px;cursor:pointer;padding:0}

/* ---- areas screen ---- */
.sortable.areas{border:1px solid var(--line);border-radius:13px;
  background:var(--card);overflow:hidden}
.sortable.areas .item{border-left:3px solid var(--area,transparent)}
.anm{flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.anm .t{display:block;font-size:14.5px;font-weight:700}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{cursor:pointer;line-height:0}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{display:block;width:30px;height:30px;border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.25)}
.sw input:checked + span{box-shadow:0 0 0 3px var(--ink),
  inset 0 1px 0 rgba(255,255,255,.35)}

/* the ticked list keeps its own look, just with a handle and a number now */
.check.sortable .item{border-top:1px solid var(--line)}
.check.sortable .item:first-child{border-top:0}

/* ===================== Left for you ===================================
   The banner at the top of home when something is waiting, and the cards on
   the For you screen. The banner is the voicemail light: it is the first
   thing on the page and it goes quiet the moment it is opened. */
.dropbar{display:flex;align-items:center;gap:11px;margin:0 0 11px;padding:12px 13px;
  border-radius:14px;text-decoration:none;
  background:linear-gradient(150deg,#C4711F,#96520E);color:#FFF6EA;
  box-shadow:0 5px 14px rgba(150,82,14,.30),inset 0 1px 0 rgba(255,255,255,.28);
  animation:dropwake .5s ease}
@keyframes dropwake{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.dropbar:active{transform:translateY(1px)}
.dbicon{flex:0 0 auto;width:36px;height:36px;border-radius:50%;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dbtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dbwhat{font-weight:800;font-size:14px;line-height:1.2;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.dbwhen{font-size:11px;opacity:.85}
.dbgo{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.20);border-radius:9px;padding:6px 10px}
@media (prefers-color-scheme: dark){
  .dropbar{background:linear-gradient(150deg,#8E520F,#5E340A)}
}

/* ---- the cards ---- */
.leave{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.snapfld{position:relative}
.snapfld input[type=file]{position:absolute;inset:0;opacity:0;width:100%;
  height:100%;cursor:pointer}
/* the camera button is a span sitting over a file input, so it has to be
   told what a main button looks like - it cannot inherit the button rules */
.fld span.snapbtn{display:block;text-align:center;pointer-events:none;
  background:var(--notes);border-color:var(--notes);color:#FCFDFB;
  font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;
  padding:13px 14px;border-radius:var(--r)}
body[data-mode="night"] .fld span.snapbtn{color:#121614}
/* the quiet twin sits on the card, not on the accent, so it keeps the
   ordinary ink. Needs the same prefix or it loses on weight. */
body[data-mode="night"] .fld span.snapbtn.alt{color:var(--ink)}
@media (prefers-color-scheme: dark){body:not([data-mode]) .fld span.snapbtn.alt{color:var(--ink)}}
@media (prefers-color-scheme: dark){body:not([data-mode]) .fld span.snapbtn{color:#121614}}
.snapfld:active .snapbtn{transform:translateY(1px)}

.drop{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:11px 12px;margin-bottom:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.08)}
.drop.unheard{border-color:#C4711F;box-shadow:0 0 0 2px rgba(196,113,31,.22),
  0 3px 8px rgba(0,0,0,.12)}
.dhead{display:flex;align-items:baseline;justify-content:space-between;gap:9px;
  margin-bottom:5px}
.dwho{font-weight:800;font-size:12.5px;color:var(--ink)}
.dwhen{font-size:11px;color:var(--ink-soft)}
.dnote{margin:0 0 7px;font-size:13.5px;color:var(--ink);line-height:1.35}
.drop .playhere{margin-top:0}
.dpic{display:block;border-radius:11px;overflow:hidden;background:var(--card-2)}
.dpic img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain}
.dacts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px}
.dacts form{margin:0}
.dgot{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft)}
.b-drop{border-left-color:#C4711F}

/* ---- what you are about to send ---- */
.snapprev{margin:10px 0 4px;border-radius:12px;overflow:hidden;
  background:#111;position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.25)}
.snapprev img{display:block;width:100%;height:auto;max-height:56vh;
  object-fit:contain;background:#111}
.snapmeta{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(0,0,0,.55);border-radius:7px;padding:3px 7px;
  letter-spacing:.03em}

/* the bar, so a slow send never looks like nothing happening */
.snapbar{height:8px;border-radius:5px;background:var(--card-2);overflow:hidden;
  margin:9px 0 4px;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.snapbar span{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#C4711F,#E0A94A);
  transition:width .18s ease}
.snapbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.snapbtns .btn{width:100%}
.snapbtns .btn:only-child{grid-column:1 / -1}
#snapsend:disabled{opacity:.5;cursor:default}

/* ---- replying ---- */
.replyto{display:flex;align-items:center;justify-content:space-between;gap:9px;
  background:var(--dates-wash);border:1px solid var(--dates);
  border-radius:11px;padding:8px 11px;font-size:12.5px;font-weight:700;
  color:var(--ink)}
.dans{margin:0 0 6px;font-size:11px;font-style:italic;color:var(--ink-soft)}
.mini.go{background:var(--notes);border-color:var(--notes);color:#fff}

/* ===================== Our own words ===================================
   The card on the games tab that says where the book is, the form for
   putting a word in, and the line you write a meaning on inside a game. */
.wcard{display:flex;align-items:center;gap:11px;margin:9px 0;padding:13px 14px;
  border-radius:15px;text-decoration:none;position:relative;
  background:linear-gradient(150deg,#7A5CA8,#4E3579);color:#F6F0FF;
  box-shadow:0 5px 14px rgba(78,53,121,.32),inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -3px 8px rgba(0,0,0,.22)}
.wcard:active{transform:translateY(1px)}
.wc-i{flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wc-t{font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:700;
  line-height:1.15}
.wc-s{font-size:11.5px;line-height:1.35;opacity:.82}
.wc-n{flex:0 0 auto;font-style:normal;font-size:12px;font-weight:800;
  min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:12px;
  background:#F0C978;color:#3A2A12;padding:0 6px;
  box-shadow:0 2px 4px rgba(0,0,0,.25)}
@media (prefers-color-scheme: dark){
  .wcard{background:linear-gradient(150deg,#5A4180,#372352);
    box-shadow:0 5px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)}
}

/* putting one in from the words page */
.wadd{margin:0 0 12px}
.wfields{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:8px}
.wword{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.wedit{background:var(--card-2);border:1px solid var(--line);border-radius:13px;
  padding:10px 11px;margin:-4px 0 9px;display:flex;flex-direction:column;gap:8px}
.wbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wbtns .btn{width:100%;text-align:center}

/* the meaning under each word in the list */
.wmean{display:block;font-size:12.5px;color:var(--ink);line-height:1.35;
  margin:1px 0 2px}
.wmean.none{color:var(--warn);font-style:italic}
.row.nomeaning{border-left-color:var(--warn)}
.mini.off{color:var(--warn-ink)}

/* writing a meaning inside a game */
.cswrow{display:flex;flex-direction:column;gap:6px;margin-bottom:7px}
.cswsay{display:flex;gap:7px;align-items:center}
.cswsay .in{flex:1;min-width:0;font-size:14px;padding:8px 10px}
.cswsay .mini.go{flex:0 0 auto}
.cswout{font-size:12px;color:var(--ink-soft)}

:root{
  --yz-felt:#F0BC62;      /* the tan board */
  --yz-felt-2:#E3A94D;    /* the darker band */
  --yz-edge:#B77E2E;
  --yz-rim:#8C5C1C;
  --yz-tile:#F0604B;      /* red category tile */
  --yz-tile-2:#C7382A;
  --yz-box:#FDF6E4;       /* the cream score box */
  --yz-box-2:#EFE2C4;
  --yz-ink:#5A3A12;
}
@media (prefers-color-scheme: dark){
  :root{
    --yz-felt:#6A4E2A; --yz-felt-2:#5A4122; --yz-edge:#3E2C14; --yz-rim:#2A1D0C;
    --yz-tile:#C9503E; --yz-tile-2:#8E2E22;
    --yz-box:#332C1E; --yz-box-2:#241E14; --yz-ink:#F0E4C8;
  }
}
:root{
  --fk-felt:#7E2B2B;     /* the board the panels sit on */
  --fk-felt-2:#5A1B1B;
  --fk-panel:#8E3535;    /* a raised panel */
  --fk-panel-2:#5E1E1E;
  --fk-gold:#F0C978;
  --fk-key:#8A6234;      /* the scoring table */
  --fk-key-2:#5E4020;
  --fk-tray:#D9CCBA;     /* the sunken tray */
  --fk-tray-2:#C0AF99;
  --fk-slot:rgba(0,0,0,.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --fk-felt:#4B1919; --fk-felt-2:#2E0D0D;
    --fk-panel:#5A2020; --fk-panel-2:#360F0F;
    --fk-gold:#E0B860;
    --fk-key:#5C4123; --fk-key-2:#38240F;
    --fk-tray:#2C2620; --fk-tray-2:#1E1915;
    --fk-slot:rgba(0,0,0,.34);
  }
}
.gpick.four{grid-template-columns:1fr 1fr;gap:6px}
.nm{width:100%;font-size:5.4px;line-height:1.16;font-weight:700;
  letter-spacing:.006em;text-transform:uppercase;text-align:center;
  overflow-wrap:anywhere}
@media (max-width:360px){
  .nm{font-size:4.9px}
  .nm.lng{font-size:4.4px}
  .nm.lng2{font-size:3.9px}
  .prc{font-size:4.1px}
  .s-b.hp{padding-bottom:5.6px} .s-t.hp{padding-top:5.6px}
  .s-l.hp{padding-left:5.6px}   .s-r.hp{padding-right:5.6px}
  .esic{width:9.5px;height:9.5px}
  .cnr .esic{width:14px;height:14px}
  .k-go .esic{width:17px;height:17px}
  .k-go .nm{font-size:9.5px}
  .tk{width:9px;height:9px;font-size:4.8px}
  .esdice svg{width:29px;height:29px}
  .espurse .p{font-size:10.5px;padding:4px 8px}
  .espurse .p b{font-size:11px}
}
/* ===================== What is waiting, sorted =========================
   One long run of everything in the order it happened was hard to read -
   a shot, a bill, a shot, a picture, a note. It comes in groups now, one
   per app, each with its own stripe and its own way of being cleared. */
.wgroup{margin:0 0 12px}
.wgroup:last-of-type{margin-bottom:4px}
.wghead{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 14px;
  border-radius:11px 11px 4px 4px;background:var(--card-2);
  border:1px solid var(--line);box-shadow:inset 4px 0 0 var(--ink-soft)}
.wgname{flex:1;min-width:0;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wgn{flex:0 0 auto;min-width:20px;padding:1px 7px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:#fff;background:var(--ink-soft);
  text-align:center}
.wgclear{display:flex}
.wgclear button{border:0;background:none;padding:2px 0 2px 4px;cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--ink-soft);text-decoration:underline}
.wgclear button:active{transform:translateY(1px)}
.wgroup .wlist{display:flex;flex-direction:column;gap:3px;margin-top:3px}

/* the stripe and the pill take the app's own colour */
.wghead.b-drop{box-shadow:inset 4px 0 0 #A6543C}   .wghead.b-drop  .wgn{background:#A6543C}
.wghead.b-game{box-shadow:inset 4px 0 0 #3F6C51}   .wghead.b-game  .wgn{background:#3F6C51}
.wghead.b-honey{box-shadow:inset 4px 0 0 #6E5288}  .wghead.b-honey .wgn{background:#6E5288}
.wghead.b-lists{box-shadow:inset 4px 0 0 #2F5D7C}  .wghead.b-lists .wgn{background:#2F5D7C}
.wghead.b-notes{box-shadow:inset 4px 0 0 #3F6C51}  .wghead.b-notes .wgn{background:#3F6C51}
.wghead.b-photos{box-shadow:inset 4px 0 0 #A6543C} .wghead.b-photos .wgn{background:#A6543C}
.wghead.b-dates{box-shadow:inset 4px 0 0 #9A7420}  .wghead.b-dates .wgn{background:#9A7420}
.wghead.b-bills{box-shadow:inset 4px 0 0 #2B7168}  .wghead.b-bills .wgn{background:#2B7168}
.wghead.b-places{box-shadow:inset 4px 0 0 #8C6B2A} .wghead.b-places .wgn{background:#8C6B2A}
.wghead.b-links{box-shadow:inset 4px 0 0 #2B7168}  .wghead.b-links .wgn{background:#2B7168}
.wghead.b-vault{box-shadow:inset 4px 0 0 #5B6862}  .wghead.b-vault .wgn{background:#5B6862}
.wghead.b-rig{box-shadow:inset 4px 0 0 #8C3A2E}    .wghead.b-rig   .wgn{background:#8C3A2E}

/* the title leads now, and what it was second - the other way round meant
   reading "MK took a shot" twelve times before finding the one that mattered */
.witem .wtitle{display:block;font-size:14px;line-height:1.3;color:var(--ink)}
.witem .wwhat{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}

/* ===================== Lists - four tabs, four colours ==================
   One blue box for all four made them impossible to tell apart at a glance.
   Each one now carries its own colour and its own picture. */
.gpick.four .lp{display:flex;align-items:center;gap:9px;padding:11px 10px 11px 9px;
  border-left:4px solid var(--tab);min-height:0}
.lp .lpe{flex:0 0 auto;font-size:19px;line-height:1}
.lp .lpt{flex:1;min-width:0}
.lp .gpn{font-size:14.5px}
.lp .gps{font-size:10.5px}
.lp-deck {--tab:#9A7420}   /* mustard gold */
.lp-jobs {--tab:#6E5288}   /* dusty plum */
.lp-shop {--tab:#3F6C51}   /* pine green */
.lp-lists{--tab:#2F5D7C}   /* denim blue */
.gpick.four .lp.on{background:var(--tab);border-color:var(--tab);color:#FCFDFB}
.gpick.four .lp.on .gps{color:rgba(252,253,251,.86)}
.gpick.four .lp.on i{background:#FCFDFB;color:var(--tab)}

/* Storm, chosen or inherited. Written twice so picking Mist on a phone set to dark keeps the Mist colours instead of near-black on a pale tab. */
body[data-mode="night"] .lp-deck {--tab:#D6B152}  /* pale gold */
body[data-mode="night"] .lp-jobs {--tab:#B49AD1}  /* light plum */
body[data-mode="night"] .lp-shop {--tab:#79AE8D}  /* sage green */
body[data-mode="night"] .lp-lists{--tab:#7BAAC9}  /* pale denim */
body[data-mode="night"] .gpick.four .lp.on{color:#121614}
body[data-mode="night"] .gpick.four .lp.on .gps{color:rgba(18,22,20,.75)}
body[data-mode="night"] .gpick.four .lp.on i{background:#121614;color:var(--tab)}
@media (prefers-color-scheme: dark){
  body:not([data-mode]) .lp-deck {--tab:#D6B152}  /* pale gold */
  body:not([data-mode]) .lp-jobs {--tab:#B49AD1}  /* light plum */
  body:not([data-mode]) .lp-shop {--tab:#79AE8D}  /* sage green */
  body:not([data-mode]) .lp-lists{--tab:#7BAAC9}  /* pale denim */
  body:not([data-mode]) .gpick.four .lp.on{color:#121614}
  body:not([data-mode]) .gpick.four .lp.on .gps{color:rgba(18,22,20,.75)}
  body:not([data-mode]) .gpick.four .lp.on i{background:#121614;color:var(--tab)}
}

/* ===================== Lists - cards, not rows =========================
   A row of names told you nothing about what was in a list. A card shows
   the first few lines through a fade, the way a notes app does, so the
   right list can be picked out without opening any of them. */
.ngh{margin:14px 0 -4px;font-family:"Fraunces",Georgia,serif;
  font-size:17px;font-weight:700;color:var(--ink)}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:11px 9px}

.ncard{display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--ink)}
.npv{position:relative;display:block;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:9px 9px 16px;aspect-ratio:1 / 1.08;
  font-size:10.5px;line-height:1.5;color:var(--ink)}
/* the fade at the foot says there is more without a scrollbar or an ellipsis */
.npv::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:34px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(to bottom,rgba(252,253,251,0) 0%,var(--card) 82%)}
@media (prefers-color-scheme: dark){
  .npv::after{background:linear-gradient(to bottom,rgba(29,36,34,0) 0%,var(--card) 82%)}
}
.npl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npl + .npl{margin-top:3px}
.npl.done{color:var(--ink-soft);text-decoration:line-through}
.npl.quiet{color:var(--ink-soft);font-style:italic}
.npv.none::after{display:none}

.nnm{font-size:12.5px;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.nmt{font-size:10.5px;color:var(--ink-soft);line-height:1.2}
.ncard:active .npv{transform:translateY(1px)}

/* the round button in the corner, so a new list is always one tap away */
.fab{position:fixed;right:16px;z-index:35;
  bottom:calc(86px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#2F5D7C;color:#FCFDFB;                 /* denim blue */
  font-size:30px;font-weight:400;line-height:1;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.fab:active{transform:translateY(1px)}

/* Same again for the round add button. */
body[data-mode="night"] .fab{background:#7BAAC9;color:#121614}            /* pale denim */
@media (prefers-color-scheme: dark){
  body:not([data-mode]) .fab{background:#7BAAC9;color:#121614}            /* pale denim */
}
/* the grid must not end under the round button */
.newlist ~ .ngrid:last-of-type{margin-bottom:56px}

/* =======================================================================
   STORM AND MIST. Two themes, one app.

   Mist is the day one: pale sage ground, white boxes, deep plum for
   anything you press. Storm is the night one: gunmetal ground, slate
   boxes, coral for anything you press.

   Nothing above this block sets a chrome colour any more. The games keep
   their own worlds - the Shuffle board, the Yahtzee card, the Farkle
   felt, the Estates table, the Phase 10 cards - because they are meant
   to look like real things, not like the app.

   Which theme is on:
     body[data-mode="day"]   - Mist, whatever the phone is set to
     body[data-mode="night"] - Storm, whatever the phone is set to
     no attribute            - follow the phone
   ======================================================================= */

/* ---- Mist, the day one ---- */
body[data-mode="day"]{
  --ground:#EDF0EA;      /* pale sage grey */
  --card:#FFFFFF;        /* white */
  --card-2:#F6F8F4;      /* barely-there sage */
  --ink:#1C221C;         /* near-black green */
  --ink-soft:#636D5B;    /* muted grey-green, a shade deeper so the small
                            print on a tinted card clears 4.5:1 */
  --line:#CBD4C6;        /* soft sage line */

  --notes:#7A3B7E;       /* deep plum - the one you press */
  --lists:#2C5F94;       /* denim blue */
  --photos:#B4601C;      /* burnt orange */
  --dates:#8A6A14;       /* dark mustard */
  --honey:#6A4BA8;       /* violet */
  --links:#3F4FA0;       /* indigo */
  --vault:#8E3357;       /* wine */
  --files:#4C7A24;       /* olive green */
  --bin:#7C857A;         /* grey-green */
  --hitch:#2E7D53;       /* forest green */
  --bill:#2E7D53;        /* forest green */
  --bill-out:#B4601C;    /* burnt orange */
  --warn:#A32E22;        /* brick red */
  /* what an accent looks like as TEXT on a card, and what sits ON
     an accent. Mist's accents are dark, so: itself, and near-white. */
  --notes-ink:var(--notes); --warn-ink:var(--warn); --on-accent:#FCFDFB;

  --notes-wash:#F1E6F2;  --lists-wash:#E1EAF3;
  --photos-wash:#F6E7DA; --dates-wash:#F3EDD8;
  --honey-wash:#EBE5F6;  --links-wash:#E3E6F5;
  --vault-wash:#F6E4EB;  --files-wash:#E8F0DE;
  --bill-wash:#E1F0E8;   --warn-wash:#F7E3E0;

  --lift:rgba(255,255,255,.95);            /* the light edge on a box */
  --drop:0 2px 6px rgba(30,40,28,.10);     /* the shadow under it */
  --drop-2:0 6px 16px -8px rgba(30,40,28,.30);
}

/* ---- Storm, the night one ---- */
body[data-mode="night"]{
  --ground:#2C2E33;      /* gunmetal grey */
  --card:#3A3D44;        /* slate grey */
  --card-2:#454951;      /* slate, one shade up */
  --ink:#F5F6F8;         /* near-white */
  --ink-soft:#B5B9C2;    /* cool grey, a shade lighter so the small print
                            on the raised card clears 4.5:1 */
  --line:#575C66;        /* steel line */

  --notes:#F2724E;       /* coral - the one you press */
  --lists:#7FB6EA;       /* sky blue */
  --photos:#E8A04C;      /* amber orange */
  --dates:#EFC15C;       /* pale gold */
  --honey:#A98FE0;       /* lilac */
  --links:#8FA8EE;       /* periwinkle */
  --vault:#EF8FB0;       /* pink */
  --files:#9BCE6B;       /* lime green */
  --bin:#8A9099;         /* grey */
  --hitch:#5FC28D;       /* mint green */
  --bill:#5FC28D;        /* mint green */
  --bill-out:#E8A04C;    /* amber orange */
  --warn:#EA5A6B;        /* rose red */
  /* Storm's accents are light, so as text they need a lift, and
     anything sitting on them needs dark ink rather than white. */
  --notes-ink:#F48C6F;   /* coral, 4.6:1 on the card */
  --warn-ink:#F08C98;    /* rose red, 4.6:1 on the card */
  --on-accent:#17251C;   /* near-black, 7.3:1 on the mint tick */

  --notes-wash:#43261E;  --lists-wash:#25333F;
  --photos-wash:#3D2E1B; --dates-wash:#3B3320;
  --honey-wash:#31293F;  --links-wash:#282E40;
  --vault-wash:#3C2630;  --files-wash:#2A331F;
  --bill-wash:#233529;   --warn-wash:#3B2126;

  --lift:rgba(255,255,255,.09);
  --drop:0 2px 5px rgba(0,0,0,.42);
  --drop-2:0 8px 20px -10px rgba(0,0,0,.75);
}

/* before the switch has ever been touched, the app still follows the phone */
body:not([data-mode]){ --lift:rgba(255,255,255,.9);
  --drop:0 2px 6px rgba(30,40,28,.10);
  --drop-2:0 6px 16px -8px rgba(30,40,28,.30) }
@media (prefers-color-scheme: dark){
  body:not([data-mode]){ --lift:rgba(255,255,255,.08);
    --drop:0 2px 5px rgba(0,0,0,.42);
    --drop-2:0 8px 20px -10px rgba(0,0,0,.75) }
}

/* =======================================================================
   THE FINISH. Every box gets an edge, a light line along the top and a
   shadow under it, so it sits ON the page rather than in it. Anything you
   can press gets the same plus a dip when it is touched.
   ======================================================================= */
.purpose,.doc,.check,.more,.tile,.row,.todaybox,.titem,.paycard,.checker,
.evcard,.drop,.escard,.esdeed,.plrow,.gsrow,.grow,.otadd,.otweek,.othead,
.shr,.group .sortable,.grouphead,.sortable.areas,.npv,.dock,.wghead,.witem,
.rulebox,.esbuy,.esdraw,.shpu,.phcard{
  box-shadow:var(--drop),inset 0 1px 0 var(--lift);
}
.tile,.row,.paycard,.evcard,.drop,.npv,.escard,.grow,.gsrow{
  background-image:linear-gradient(180deg,var(--lift),transparent 34%);
}

/* the app icons on home - lit from the top left, with a shadow beneath */
.app .gl,.dock .gl,.editrow .gl{
  box-shadow:0 5px 12px -5px rgba(0,0,0,.55),
             inset 0 1.5px 0 rgba(255,255,255,.40),
             inset 0 -3px 7px rgba(0,0,0,.22);
}
.g1{background:linear-gradient(160deg,#4E9C6E,#2E6B49)}   /* green  */
.g2{background:linear-gradient(160deg,#4C8CBE,#2A5B7C)}   /* blue   */
.g3{background:linear-gradient(160deg,#D08154,#96513E)}   /* orange */
.g4{background:linear-gradient(160deg,#D2A83A,#8E6F19)}   /* gold   */
.g5{background:linear-gradient(160deg,#9679C4,#644A84)}   /* violet */
.g6{background:linear-gradient(160deg,#4C8F97,#255F66)}   /* pine   */
.g7{background:linear-gradient(160deg,#C0687A,#82404D)}   /* rose   */
.g8{background:linear-gradient(160deg,#69796F,#3E4B45)}   /* stone  */
.g9{background:linear-gradient(160deg,#3B8E68,#1F5740)}   /* forest */

/* buttons: a real edge, and they press down */
.btn,.mini,.pill,.gtab,.evtabs .tab,.shtabs .st,.fold{
  box-shadow:var(--drop),inset 0 1px 0 var(--lift);
}
.btn:active,.mini:active,.pill:active{transform:translateY(1px);box-shadow:none}
.btn-main,.mini.go,.csbtns .btn.go{
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,.10));
  box-shadow:var(--drop-2),inset 0 1.5px 0 rgba(255,255,255,.42);
}

/* the bar at the top and the bar at the bottom */
.bar{box-shadow:0 1px 0 var(--line),0 4px 14px -10px rgba(0,0,0,.5)}
.tabbar{box-shadow:0 -4px 16px -10px rgba(0,0,0,.55)}

/* the round add button follows the theme's accent */
.fab{background:var(--notes)}
body[data-mode="night"] .fab{color:#2A0E05}
body[data-mode="day"] .fab{color:#FCF4FC}

/* the day / night switch, sitting in the top bar */
.modeb{flex:0 0 auto;width:32px;height:32px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);
  font-size:15px;line-height:1;padding:0;
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.modeb:active{transform:translateY(1px);box-shadow:none}

/* a dropdown was white text on a white list once the theme changed */
select option{background:var(--card);color:var(--ink)}


/* ---- the two flooded panels ----
   "Waiting for you" and the hitch card used to be a solid block of the
   accent with white text, and the white was switched to near-black by the
   phone's dark setting. Once the theme is chosen by hand those two can
   disagree - a coral block with black text on it. Both are cards now with
   the colour on the edge instead, which reads better and cannot clash. */
.waiting,.hitch{
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-left:5px solid var(--notes);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift);
}
.hitch{border-left-color:var(--hitch)}
.waiting h2,.hitch .hbig{color:var(--ink)}
.waiting .sub,.hitch .hsub{color:var(--ink-soft);opacity:1}
.wclear button{border:1px solid var(--line);color:var(--ink);background:var(--card-2)}
.wclear button:hover{background:var(--card)}
.witem{background:var(--card-2);color:var(--ink)}
.witem:hover{background:var(--card)}


/* =======================================================================
   THE BELL. Today and What is waiting used to sit in the middle of the
   home page. They drop out of the bar now, on every screen.
   ======================================================================= */
.bellb{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);
  font-size:15px;line-height:1;padding:0;
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.bellb:active{transform:translateY(1px);box-shadow:none}
.bellb.on{background:var(--notes);border-color:var(--notes);color:var(--on-accent)}
.bbadge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--warn);color:var(--on-accent);font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--card);
  font-family:"Karla","Helvetica Neue",Arial,sans-serif}

.bellpanel{position:sticky;top:60px;z-index:19;max-width:560px;margin:0 auto;
  padding:12px 14px 14px;border-radius:0 0 18px 18px;
  background:var(--card);border:1px solid var(--line);border-top:0;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:9px;max-height:74vh;overflow-y:auto}
.bhead{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin:2px 0 -2px}
.bhead b{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.bhead span{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.bellpanel .tlist,.bellpanel .wlist{display:flex;flex-direction:column;gap:6px}
.bellpanel .wgroup{margin:0}
.bellpanel .hitch{margin:2px 0}
.bempty{margin:0;font-size:14px;color:var(--ink-soft);text-align:center;padding:6px 0}


/* =======================================================================
   THE VIEW behind the app. Fixed, so it never scrolls with the page, and
   sat at the very back. Every colour on it is a class rather than a fixed
   value, so the same drawing works in Mist and in Storm.
   ======================================================================= */
.scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
body{position:relative}
/* NOTE: these used to be forced to position:relative to sit above the view.
   They must not be - the sheet, the round add button, the tile picker and
   the rules sheet are all position:fixed, and making them relative dropped
   them to the bottom of the page where nothing could see them. The view is
   at z-index -1, so everything paints over it without any help. */
.bar{background:var(--card)}

/* ---- Mist: a soft daylight range ---- */
.sky-a{stop-color:#DCE6E4} .sky-b{stop-color:#E6EBE4} .sky-c{stop-color:#EDF0EA}
.sun-a{stop-color:#F6E7C8;stop-opacity:.75} .sun-b{stop-color:#F6E7C8;stop-opacity:0}
.orb{fill:#F7EBD2;opacity:.85}
.r1-a{stop-color:#C3D0D2} .r1-b{stop-color:#D3DCDA}
.r2-a{stop-color:#AFC0C1} .r2-b{stop-color:#C4D0CD}
.r3-a{stop-color:#93A9A6} .r3-b{stop-color:#AEBFB9}
.r4-a{stop-color:#6E8479} .r4-b{stop-color:#8A9C90}
.snow{fill:#F4F8F6;opacity:.9} .snow2{fill:#EDF3F0;opacity:.75}
.shade{fill:#7C918C;opacity:.55}
.fd-a{stop-color:#EDF0EA;stop-opacity:0}
.fd-b{stop-color:#EDF0EA;stop-opacity:.72}
.fd-c{stop-color:#EDF0EA;stop-opacity:1}

/* ---- Storm: the same range at dusk ---- */
body[data-mode="night"] .sky-a{stop-color:#1E2126} body[data-mode="night"] .sky-b{stop-color:#272A30}
body[data-mode="night"] .sky-c{stop-color:#2C2E33}
body[data-mode="night"] .sun-a{stop-color:#F2724E;stop-opacity:.30}
body[data-mode="night"] .sun-b{stop-color:#F2724E;stop-opacity:0}
body[data-mode="night"] .orb{fill:#F7D9C6;opacity:.55}
body[data-mode="night"] .r1-a{stop-color:#3B424B} body[data-mode="night"] .r1-b{stop-color:#333941}
body[data-mode="night"] .r2-a{stop-color:#333941} body[data-mode="night"] .r2-b{stop-color:#2C3138}
body[data-mode="night"] .r3-a{stop-color:#2A2F36} body[data-mode="night"] .r3-b{stop-color:#242830}
body[data-mode="night"] .r4-a{stop-color:#1E2228} body[data-mode="night"] .r4-b{stop-color:#191C21}
body[data-mode="night"] .snow{fill:#D8E2E6;opacity:.55}
body[data-mode="night"] .snow2{fill:#C7D3D8;opacity:.35}
body[data-mode="night"] .shade{fill:#151A1F;opacity:.55}
body[data-mode="night"] .fd-a{stop-color:#2C2E33;stop-opacity:0}
body[data-mode="night"] .fd-b{stop-color:#2C2E33;stop-opacity:.72}
body[data-mode="night"] .fd-c{stop-color:#2C2E33;stop-opacity:1}

/* before the switch is touched, follow the phone */
@media (prefers-color-scheme: dark){
  body:not([data-mode]) .sky-a{stop-color:#1E2126} body:not([data-mode]) .sky-b{stop-color:#272A30}
  body:not([data-mode]) .sky-c{stop-color:#2C2E33}
  body:not([data-mode]) .sun-a{stop-color:#F2724E;stop-opacity:.30}
  body:not([data-mode]) .orb{fill:#F7D9C6;opacity:.55}
  body:not([data-mode]) .r1-a{stop-color:#3B424B} body:not([data-mode]) .r1-b{stop-color:#333941}
  body:not([data-mode]) .r2-a{stop-color:#333941} body:not([data-mode]) .r2-b{stop-color:#2C3138}
  body:not([data-mode]) .r3-a{stop-color:#2A2F36} body:not([data-mode]) .r3-b{stop-color:#242830}
  body:not([data-mode]) .r4-a{stop-color:#1E2228} body:not([data-mode]) .r4-b{stop-color:#191C21}
  body:not([data-mode]) .snow{fill:#D8E2E6;opacity:.55}
  body:not([data-mode]) .snow2{fill:#C7D3D8;opacity:.35}
  body:not([data-mode]) .shade{fill:#151A1F;opacity:.55}
  body:not([data-mode]) .fd-a{stop-color:#2C2E33;stop-opacity:0}
  body:not([data-mode]) .fd-b{stop-color:#2C2E33;stop-opacity:.72}
  body:not([data-mode]) .fd-c{stop-color:#2C2E33;stop-opacity:1}
}

/* the ground under the app has to let the view through */
body[data-mode="day"],body[data-mode="night"],body:not([data-mode]){background:transparent}


/* =======================================================================
   Before anyone has touched the switch, the app still has to be Mist or
   Storm - not the old colours. This is the same two palettes again, hung
   off "no choice made yet" and the phone's own setting.
   ======================================================================= */
body:not([data-mode]){
  --ground:#EDF0EA; --card:#FFFFFF; --card-2:#F6F8F4;
  --ink:#1C221C; --ink-soft:#636D5B; --line:#CBD4C6;
  --notes:#7A3B7E; --lists:#2C5F94; --photos:#B4601C; --dates:#8A6A14;
  --honey:#6A4BA8; --links:#3F4FA0; --vault:#8E3357; --files:#4C7A24;
  --bin:#7C857A; --hitch:#2E7D53; --bill:#2E7D53; --bill-out:#B4601C;
  --warn:#A32E22;
  /* what an accent looks like as TEXT on a card, and what sits ON
     an accent. Mist's accents are dark, so: itself, and near-white. */
  --notes-ink:var(--notes); --warn-ink:var(--warn); --on-accent:#FCFDFB;
  --notes-wash:#F1E6F2; --lists-wash:#E1EAF3; --photos-wash:#F6E7DA;
  --dates-wash:#F3EDD8; --honey-wash:#EBE5F6; --links-wash:#E3E6F5;
  --vault-wash:#F6E4EB; --files-wash:#E8F0DE; --bill-wash:#E1F0E8;
  --warn-wash:#F7E3E0;
}
@media (prefers-color-scheme: dark){
  body:not([data-mode]){
    --ground:#2C2E33; --card:#3A3D44; --card-2:#454951;
    --ink:#F5F6F8; --ink-soft:#B5B9C2; --line:#575C66;
    --notes:#F2724E; --lists:#7FB6EA; --photos:#E8A04C; --dates:#EFC15C;
    --honey:#A98FE0; --links:#8FA8EE; --vault:#EF8FB0; --files:#9BCE6B;
    --bin:#8A9099; --hitch:#5FC28D; --bill:#5FC28D; --bill-out:#E8A04C;
    --warn:#EA5A6B;
  /* Storm's accents are light, so as text they need a lift, and
     anything sitting on them needs dark ink rather than white. */
  --notes-ink:#F48C6F;   /* coral, 4.6:1 on the card */
  --warn-ink:#F08C98;    /* rose red, 4.6:1 on the card */
  --on-accent:#17251C;   /* near-black, 7.3:1 on the mint tick */
    --notes-wash:#43261E; --lists-wash:#25333F; --photos-wash:#3D2E1B;
    --dates-wash:#3B3320; --honey-wash:#31293F; --links-wash:#282E40;
    --vault-wash:#3C2630; --files-wash:#2A331F; --bill-wash:#233529;
    --warn-wash:#3B2126;
  }
}


/* =======================================================================
   POPOUTS. A tracker, a total or a guide belongs behind a small button,
   not down the middle of the page. Same shape as the bell panel.
   ======================================================================= */
.pop{position:sticky;top:60px;z-index:19;max-width:560px;margin:0 auto;
  padding:12px 14px 14px;border-radius:0 0 18px 18px;
  background:var(--card);border:1px solid var(--line);border-top:0;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:9px;max-height:70vh;overflow-y:auto}
.popbal{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:14px;
  background:var(--card-2);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--lift)}
.pbn{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:700;line-height:1.05;color:var(--lists)}
.pbl{font-size:12.5px;color:var(--ink-soft)}
.poplist{display:flex;flex-direction:column;gap:5px}
.poprow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;
  text-decoration:none;color:inherit;background:var(--card-2);border:1px solid var(--line);
  border-left:4px solid var(--bill);box-shadow:var(--drop)}
.poprow.out{border-left-color:var(--bill-out)}
.pamt{flex:0 0 auto;min-width:32px;text-align:center;font-size:15px;font-weight:800;
  color:var(--bill);font-variant-numeric:tabular-nums}
.poprow.out .pamt{color:var(--bill-out)}
.pbody{flex:1;min-width:0}
.pbody b{display:block;font-size:13.5px;line-height:1.3}
.pbody span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.popfoot{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--notes);
  border-top:1px solid var(--line);padding-top:10px;text-decoration:none}
button.gems{font:inherit;cursor:pointer}
button.gems.on{background:var(--notes);border-color:var(--notes);color:#fff}


/* =======================================================================
   THE BAR ALONG THE BOTTOM, rebuilt. Five small things instead of three
   big ones, stuck to the bottom of the screen on every page, games
   included. Home is the raised one in the middle.
   ======================================================================= */
.tabbar.oldbar{display:none !important}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:0;
  height:62px;padding:0 6px calc(4px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -10px rgba(0,0,0,.5)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:0;background:none;font:inherit;cursor:pointer;padding:6px 0;
  color:var(--ink-soft);text-decoration:none;-webkit-tap-highlight-color:transparent}
.tb:active{transform:translateY(1px)}
.tbi{display:block;width:21px;height:21px}
.tbi svg{width:100%;height:100%;display:block}
.tbl{font-size:10px;font-weight:700;letter-spacing:.01em}
.tb.on{color:var(--notes-ink)}

/* Home: the raised key in the middle */
.tb.home{width:46px;height:46px;border-radius:15px;margin:0 auto;padding:0;gap:0;
  color:#fff;background:var(--notes);
  box-shadow:0 5px 14px -5px rgba(0,0,0,.6),inset 0 1.5px 0 rgba(255,255,255,.38)}
.tb.home .tbi{width:23px;height:23px}
.tb.home.on{color:#fff}
body[data-mode="night"] .tb.home{color:#2A0E05}
body[data-mode="day"] .tb.home{color:#FCF4FC}

/* the page must not end underneath it */
body{padding-bottom:78px}
body.nobar{padding-bottom:78px}
.fab{bottom:calc(76px + env(safe-area-inset-bottom))}


/* =======================================================================
   THE BLURB AT THE TOP OF A PAGE. Most pages explain themselves, and the
   explanation was pushing the thing you came for below the fold. The
   screen is a flex column, so giving the blurb a later order sends it to
   the foot of the page without a single page having to be rewritten. It
   is small and quiet down there, for the two or three pages that need it.
   ======================================================================= */
.screen > .purpose{order:9;margin-top:4px;padding:10px 12px;border-radius:12px;
  background:transparent;border:1px dashed var(--line);box-shadow:none}
.screen > .purpose .big{font-family:"Karla","Helvetica Neue",Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}
.screen > .purpose .small{font-size:12.5px;color:var(--ink-soft);margin-top:2px}

/* the Settings button on Us sits after its tiles, not after the blurb */
.screen > .btn.wide{order:8}


/* =======================================================================
   THE THREE VIEWS. List, Small tiles, Large tiles. The control sits above
   the grid; the grid wears v-list, v-small or v-large.
   ======================================================================= */
.viewbar{display:flex;align-items:center;gap:8px;margin:0}
.vlab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
/* 16px, not 14 - iOS zooms the whole page in when you tap a field smaller
   than that, and then you have to pinch back out. Every other field in the
   app is already pinned to 16 for the same reason. */
.vsel{width:auto;flex:0 0 auto;padding:8px 10px;font-size:16px;font-weight:700;
  border-radius:11px;box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.vsel option{background:var(--card);color:var(--ink)}

/* ---- the home apps grid ---- */
.apps.v-small{grid-template-columns:repeat(4,1fr);gap:20px 6px}
.apps.v-large{grid-template-columns:repeat(3,1fr);gap:22px 8px}
.apps.v-large .gl{width:64px;height:64px;border-radius:19px}
.apps.v-large .gl svg{width:30px;height:30px}
.apps.v-large .lb{font-size:13.5px}
.apps.v-list{grid-template-columns:1fr;gap:7px}
.apps.v-list .app{flex-direction:row;align-items:center;gap:12px;padding:8px 11px;
  border-radius:13px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.apps.v-list .gl{width:38px;height:38px;border-radius:12px;flex:0 0 auto}
.apps.v-list .gl svg{width:19px;height:19px}
.apps.v-list .lb{font-size:15px;text-align:left;flex:1}
.apps.v-list .bd{top:50%;right:12px;transform:translateY(-50%);border-width:0}

/* ---- the tile grids on Us ---- */
.tiles.v-large{grid-template-columns:1fr 1fr}
.tiles.v-small{grid-template-columns:1fr 1fr 1fr;gap:9px}
.tiles.v-small .tile{min-height:78px;padding:11px 9px 10px}
.tiles.v-small .name{font-size:15px}
.tiles.v-small .count{font-size:11px}
.tiles.v-list{grid-template-columns:1fr;gap:7px}
.tiles.v-list .tile{min-height:0;flex-direction:row;align-items:center;gap:11px;
  padding:11px 13px;justify-content:flex-start}
.tiles.v-list .dot{margin-bottom:0;flex:0 0 auto}
.tiles.v-list .name{font-size:16px;flex:1}
.tiles.v-list .count{font-size:12.5px;flex:0 0 auto}


/* ---- For you: a picture icon rather than a line drawing ----
   The heart fills its tile edge to edge, so the tile drops its own colour
   and its inner shadow and just holds the picture. */
.gl:has(.glimg){background:none !important;box-shadow:none !important}
.glimg{width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.dock .gl:has(.glimg),.app .gl:has(.glimg),.editrow .gl:has(.glimg){padding:0}


/* =======================================================================
   HOLD TO MOVE. Everything wobbles while the grid is being rearranged, so
   it is obvious the taps have stopped being taps.
   ======================================================================= */
.vgear{margin-left:auto;width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);text-decoration:none;
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.vgear:active{transform:translateY(1px);box-shadow:none}

.apps.arranging{touch-action:none}
.apps.arranging .app{animation:wobble .32s ease-in-out infinite alternate}
.apps.arranging .app:nth-child(even){animation-delay:.16s}
@keyframes wobble{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.apps.arranging .app.lifted{animation:none;transform:scale(1.12);z-index:5;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
@media (prefers-reduced-motion:reduce){
  .apps.arranging .app{animation:none}
  .apps.arranging .app.lifted{transform:scale(1.08)}
}
body.arranging{-webkit-user-select:none;user-select:none}

.arrbar{position:fixed;left:12px;right:12px;z-index:36;
  bottom:calc(84px + env(safe-area-inset-bottom));max-width:536px;margin:0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:var(--card);border:1px solid var(--notes);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.7)}
.arrbar span{flex:1;font-size:13px;font-weight:700;color:var(--ink)}
.arrbar button{font:inherit;font-size:13px;font-weight:800;cursor:pointer;
  border:0;border-radius:10px;padding:8px 16px;color:#fff;background:var(--notes);
  box-shadow:var(--drop),inset 0 1px 0 rgba(255,255,255,.35)}
body[data-mode="night"] .arrbar button{color:#2A0E05}
body[data-mode="day"] .arrbar button{color:#FCF4FC}


/* =======================================================================
   SNAPTALK. One box with a dropdown instead of three tall boxes stacked
   down the page. Camera and library sit side by side, so both ways of
   sending a picture or a clip are one tap.
   ======================================================================= */
.snapbox{display:flex;flex-direction:column;gap:12px}
.stpick .fld > span{font-size:13px}
.stpick select{font-size:16px;font-weight:700}
.stpane{display:flex;flex-direction:column;gap:12px;margin:0}
.stpane[hidden]{display:none !important}
.sttwo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sttwo .fld{gap:0}
.fld span.snapbtn.alt{background:var(--card-2);border:1px solid var(--line);
  color:var(--ink);box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
#st-video video,#st-video .snapprev{border-radius:12px}
.drop video.playhere{width:100%;max-height:60vh;background:#000;border-radius:10px}

/* Left for you folds away once it has been read, the same as what you sent */
#forme > summary{font-size:15px;font-weight:700;color:var(--ink)}
#forme[open] > summary{margin-bottom:4px}


/* =======================================================================
   A LIST, TIGHTENED UP. The name was the size of a headline, the "started
   by" line sat between you and the list itself, every row carried more
   padding than text, and everything you might want to do to the list was
   a long scroll away at the bottom. Name is small, the line about who
   started it is at the foot, the rows are the height of their words, and
   the settings live behind the gear beside the name.
   ======================================================================= */
.pagehead{display:flex;align-items:center;gap:10px;margin:0 2px}
.ptitle{font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:700;
  line-height:1.2;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagefoot{order:9;margin:0;font-size:11.5px;color:var(--ink-soft);text-align:center;
  padding-top:4px;border-top:1px solid var(--line)}

/* the rows: as tall as the words in them */
.check.sortable{padding:0 10px}
.check.sortable .item{padding:0 0 0 2px;gap:6px}
.check.sortable .item label{padding:6px 0;gap:9px;align-items:center}
.check.sortable .item .jt,.check.sortable .item label > span{line-height:1.3}
.check .item .grip{width:22px;height:28px}
.check input[type=checkbox]{width:19px;height:19px}
.check .num{min-width:16px;font-size:11px}
.check .x button{padding:2px 2px;font-size:17px}

/* a popout that is not tied to where it sits in the page */
.pop.popfixed{position:fixed;top:58px;left:12px;right:12px;z-index:35;
  max-width:536px;margin:0 auto}
.pophead{font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-bottom:2px}

/* inside a popout, everything is on a diet */
.pop form{margin:0}
.pop .btn{padding:9px 12px;border-radius:10px;font-size:14px}
.pop .btn.wide{width:100%}
.pop .fld{gap:4px}
.pop .fld > span{font-size:11px}
.pop input[type=text],.pop input:not([type]),.pop select{padding:8px 10px;border-radius:10px}
.pop .form{gap:7px}


/* =======================================================================
   HISTORY FOLDS AWAY. Latest, What has happened, Who did what - all of it
   is a record of what already went on rather than something to do, so it
   sits shut with a count until it is wanted, and the rows inside are the
   height of their words.
   ======================================================================= */
.foldsec{margin:0}
.foldsec > summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 2px;list-style:none;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.foldsec > summary::-webkit-details-marker{display:none}
.foldsec > summary::before{content:"›";font-size:17px;line-height:1;
  transition:transform .16s ease;color:var(--ink-soft);
  letter-spacing:0;display:inline-block}
.foldsec[open] > summary::before{transform:rotate(90deg)}
.foldsec > summary span{flex:1;min-width:0}
.foldsec > summary i{font-style:normal;font-size:11px;letter-spacing:0;
  color:var(--ink-soft);background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:1px 8px;font-weight:700}
.foldsec[open] > .feed{margin-top:2px}

/* the rows themselves, without the extra air */
.feed{gap:5px}
.feed .row{padding:7px 11px;border-radius:10px;gap:9px;align-items:center}
.feed .row .t{font-size:14px;line-height:1.25}
.feed .row .m{font-size:11.5px;line-height:1.25}
.feed .row .who-tag{font-size:10px;padding-top:0}
.eslog .row{padding:6px 11px}


/* the Add sheet has to clear the bar along the bottom and sit over it */
.sheet{z-index:41;bottom:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.sheet .opts{gap:8px}
.sheet .opts .btn{padding:11px 10px}
.sheet h3{font-size:17px}


/* =======================================================================
   THE HEADINGS COME OFF THE HOME SCREEN

   "Favourites" and "Everything we share" were labelling things that need
   no label - you can see what they are. The Favourites row keeps its Edit
   link on its own, and the tiles below now start straight away.

   The View chooser has moved off the page and into the gear, so the page
   opens with the app icons rather than with a settings row.
   ======================================================================= */
.hdr.hdr-bare{min-height:0;margin:2px 0 4px;justify-content:flex-end}
.hdr.hdr-bare b{display:none}

/* the gear sits on its own, pushed to the right, with nothing beside it */
.viewbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin:-11px 0 -13px}
.viewbar .vgear{margin-left:0}

/* inside the popout: the label, then the dropdown, then the edit link */
.viewform{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.viewform .vsel{flex:1 1 auto;width:auto}
.pop .btn.wide{margin:0}


/* =======================================================================
   NOTES IS THE ONE PLACE FOR ANYTHING WRITTEN DOWN

   Four tabs across one line - Notes, On deck, Honey Do, Lists - instead of
   a 2x2 block of cards taking up half the screen before you have read a
   word. The picture carries the meaning, the name sits under it, and the
   number rides in the corner.
   ======================================================================= */
.gpick.tabrow{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
  margin-bottom:10px}
.gpick.tabrow .lp{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  padding:8px 3px 7px;border-radius:13px;text-align:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.gpick.tabrow .lpe{font-size:17px;line-height:1}
.gpick.tabrow .lpt{display:block;min-width:0}
.gpick.tabrow .gpn{font-size:11.5px;font-weight:800;letter-spacing:.005em;
  white-space:nowrap}
.gpick.tabrow .gps{display:none}          /* no room, and no need */
.gpick.tabrow .lp i{position:absolute;top:3px;right:3px;font-style:normal;
  font-size:9.5px;font-weight:800;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;display:grid;place-items:center;
  background:var(--notes);color:var(--card)}
.gpick.tabrow .lp:active{transform:translateY(1px);box-shadow:none}

/* each tab keeps its own colour when it is the one you are on */
.gpick.tabrow .lp-notes{--tab:var(--notes)}
.gpick.tabrow .lp-deck{--tab:var(--dates)}
.gpick.tabrow .lp-jobs{--tab:var(--honey)}
.gpick.tabrow .lp-lists{--tab:var(--lists)}
.gpick.tabrow .lp.on{background:var(--tab);border-color:var(--tab);color:#FCFDFB}
.gpick.tabrow .lp.on i{background:#FCFDFB;color:var(--tab)}
body[data-mode="night"] .gpick.tabrow .lp.on{color:#121614}
body[data-mode="night"] .gpick.tabrow .lp.on i{background:#121614;color:var(--tab)}

/* =======================================================================
   THE LIST PAGE

   The name is a field, not a heading, so it can be fixed where it sits.
   It looks like the heading it replaced until you touch it.
   ======================================================================= */
.titleform{flex:1;min-width:0;margin:0}
input.ptitle{width:100%;margin:0;padding:2px 6px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  font-family:"Fraunces","Georgia",serif;font-size:20px;font-weight:700;
  line-height:1.25}
input.ptitle:hover{border-color:var(--line)}
input.ptitle:focus{border-color:var(--notes);background:var(--card);
  outline:none}

/* a list with the tick boxes turned off is just lines in order */
.check.noticks .item label{cursor:default}
.check.noticks .item label span{padding-left:2px}

/* the round + is a button now, because it makes the list on the spot */
.fabform{margin:0}
button.fab{border:0;font:inherit;cursor:pointer}


/* =======================================================================
   THE TOP OF THE HOME SCREEN

   One thin row holds both controls - the gear on the left, Edit on the
   right - and the tiles begin immediately under it. The favourites row
   has moved to the bottom, above Latest, where a thumb already is.
   ======================================================================= */
.hdr.hdr-bare{justify-content:space-between;gap:10px;margin:0 0 6px}
.hdr.hdr-bare .viewbar{margin:0;flex:0 0 auto}
.hdr.hdr-bare .vgear{margin:0}

/* the favourites row in its new place */
.screen > .dock{margin-top:2px}


/* =======================================================================
   SNAPTALK: REPLY, AND A FACE

   Reply asks what kind first - a snap, words, or a video - instead of
   guessing. Beside it sits a face, for when there is nothing to write
   back. One face per drop, tapped on and tapped off.
   ======================================================================= */

/* the face already on a drop, sitting just under it */
.drx{display:flex;align-items:center;gap:6px;margin:6px 0 0}
.drxe{font-size:19px;line-height:1}
.drxw{font-size:11.5px;font-weight:700;color:var(--ink-soft)}

/* the button that opens the faces */
.mini.emo{font-size:15px;line-height:1;padding:5px 10px;min-width:38px}

/* the faces themselves, big enough to hit */
.emopop .emorow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:8px}
.emopop .emorow form{margin:0}
.emob{width:100%;padding:10px 0;font-size:24px;line-height:1;cursor:pointer;
  border-radius:13px;border:1px solid var(--line);background:var(--card-2);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.emob:active{transform:translateY(1px);box-shadow:none}
.emob.on{border-color:var(--notes);background:var(--notes-wash)}

/* a drop that is only words - the words are the message, so they lead */
.dsaid{margin:4px 0 0;padding:11px 13px;border-radius:13px;
  background:var(--card-2);border:1px solid var(--line);
  font-size:16px;line-height:1.45;color:var(--ink);
  box-shadow:inset 0 1px 0 var(--lift)}

/* the Reply chooser stacks its three, with room between */
#snapbox + .pop .btn.wide,.pop .btn.wide + .btn.wide{margin-top:8px}


/* =======================================================================
   ONE PLACE FOR EVERYTHING WRITTEN DOWN

   A note, a list and a Honey Do job sit in the same grid. What tells them
   apart is a small word in the corner and the colour of the edge, not a
   tab you had to go and find.
   ======================================================================= */
.gpick.tabrow.two{grid-template-columns:1fr 1fr;gap:7px}
.gpick.tabrow.two .lp{flex-direction:row;gap:8px;padding:10px 12px;
  justify-content:flex-start;text-align:left}
.gpick.tabrow.two .lpe{font-size:19px}
.gpick.tabrow.two .gpn{font-size:14px}
.gpick.tabrow.two .gps{display:block;font-size:10.5px;color:var(--ink-soft)}
.gpick.tabrow.two .lp.on .gps{color:rgba(252,253,251,.86)}
body[data-mode="night"] .gpick.tabrow.two .lp.on .gps{color:rgba(18,22,20,.75)}
.gpick.tabrow .lp-next{--tab:var(--dates)}

/* the little word in the corner of a card */
.ncard{position:relative}
.kflag{position:absolute;top:6px;left:8px;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:7px;
  background:var(--card);color:var(--ink-soft);border:1px solid var(--line)}
.kstar{position:absolute;top:5px;right:7px;z-index:2;font-size:13px;
  color:var(--dates)}
.ncard.k-note .npv{border-left:3px solid var(--notes)}
.ncard.k-list .npv{border-left:3px solid var(--lists)}
.ncard.k-job  .npv{border-left:3px solid var(--honey)}
.ncard.isdone{opacity:.55}
.ncard.isdone .nnm{text-decoration:line-through}

/* a job's own words, above its lines */
.jobnote{margin:0 0 8px;padding:10px 12px;border-radius:12px;
  background:var(--card-2);border:1px solid var(--line);
  font-size:14.5px;line-height:1.45;color:var(--ink-soft)}

/* a note is a page of writing */
.bodyform textarea{width:100%;min-height:240px;line-height:1.55;font-size:16px}

/* the star on a single line, and the one on an Up next row */
.linestar{margin:0;flex:0 0 auto}
.linestar button{background:none;border:0;padding:2px 6px;cursor:pointer;
  font-size:15px;line-height:1;color:var(--ink-soft)}
.linestar button.on{color:var(--dates)}
.unstar{margin:0;flex:0 0 auto;display:flex;align-items:center}
.unstar button{background:none;border:0;padding:4px 10px;cursor:pointer;
  font-size:17px;line-height:1;color:var(--dates)}
.row.b-deck{border-left:3px solid var(--dates)}
.row.b-deck .body{flex:1;min-width:0}

/* the kind chooser sits at the top of the gear */
.kindform{margin:0 0 10px}
.kindform select{width:100%}


/* the card's preview starts below the corner word, not behind it */
.ncard .npv{padding-top:28px}
.kflag{max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}


/* =======================================================================
   PICKING SEVERAL AT ONCE

   Hold a card down and it offers to bin that one or start picking. While
   picking, every card wears an empty circle in the corner and a tap fills
   it in rather than opening the card.
   ======================================================================= */
.ptick{display:none}
#notegrid.picking .ptick{display:block;position:absolute;z-index:3;
  top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);background:var(--card)}
#notegrid.picking .ncard.picked .ptick{background:var(--notes);
  border-color:var(--notes)}
#notegrid.picking .ncard.picked .ptick::after{content:"";position:absolute;
  left:6px;top:2px;width:6px;height:11px;border:solid var(--card);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#notegrid.picking .kstar{display:none}
#notegrid.picking .ncard{cursor:pointer}
#notegrid.picking .ncard.picked{outline:2px solid var(--notes);
  outline-offset:1px}

/* the bar along the bottom while picking */
.pickbar{position:fixed;left:0;right:0;bottom:0;z-index:42;margin:0;
  display:flex;align-items:center;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -10px rgba(0,0,0,.6)}
.pickn{flex:1;font-size:14px;font-weight:800;color:var(--ink)}
.pickbar .btn{margin:0;flex:0 0 auto;padding:9px 14px}
.pickbar .btn[disabled]{opacity:.5}

/* the little menu the long press opens */
#pop-card .btn.wide + .btn.wide{margin-top:8px}


/* holding a card down is our gesture, so the phone must not treat it as
   selecting text or as a link to preview */
#notegrid .ncard{-webkit-touch-callout:none;-webkit-user-select:none;
  user-select:none}


/* the type sits beside the name, not under it and not in the gear */
.pagehead{display:flex;align-items:center;gap:8px}
.kindpick{margin:0;flex:0 0 auto}
.kindpick select{width:auto;min-width:96px;max-width:120px;margin:0;
  padding:7px 8px;font-size:13.5px;font-weight:800;border-radius:11px;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.kindpick select option{background:var(--card);color:var(--ink)}

/* the name gives up whatever room the other two need */
.titleform{flex:1 1 auto;min-width:0}
input.ptitle{font-size:19px}

/* the three buttons that briefly lived under the title are not used */
.kpb{display:none}

/* ===================== room for a thumb ================================
   Measured on a 390px phone across every screen: the bell and the day/night
   switch are 32x32 and sit on ALL of them, in the top corner - the hardest
   place to reach one-handed. The back arrow is 30x23 and the paid tick on
   Bills is 25x25. A fingertip is about 44px.

   Nothing here changes what anything LOOKS like. Each control keeps its own
   size and shape, and gains an invisible pad around it that catches the tap.
   That way the header stays as tight as it is and the buttons stop being
   fiddly.                                                                */

.bellb, .modeb, .gems, .homeb, .back, .vgear, .billrow .tick, .star, .fold{
  position:relative}

.bellb::after, .modeb::after, .gems::after, .homeb::after, .vgear::after{
  content:"";position:absolute;inset:-6px;border-radius:14px}

/* the back arrow is short as well as narrow, so it needs more height */
.back::after{content:"";position:absolute;inset:-11px -14px;border-radius:12px}

/* row controls: the tick, the star and the fold arrow */
.billrow .tick::after{content:"";position:absolute;inset:-10px;border-radius:12px}
.star::after, .fold::after{content:"";position:absolute;inset:-7px;border-radius:12px}

/* the pill rows are 39px tall - two pixels of padding either side is enough
   and does not move anything, because they are laid out on their own line */
.pill, .gpick .lp{padding-top:2px;padding-bottom:2px}

/* ===================== give ============================================
   Everything in here is about how the app FEELS to press, not how it looks.
   Nothing changes size, colour or position at rest.

   The panels animate off :not([hidden]) rather than a class, because that is
   how they are already shown and hidden - no JavaScript had to change.

   Game boards are deliberately excluded. They have their own movement.   */

/* --- the press has give --- */
.btn, .mini, .tb, .app .gl, .it .gl, .pill, .gp, .lp, .tick,
.star, .fold, .bellb, .modeb, .gems, .vgear, .fab, .ncard .npv, .row{
  transition:transform .09s ease, box-shadow .09s ease,
             background-color .14s ease, border-color .14s ease, color .14s ease}

.app:active .gl, .it:active .gl{transform:translateY(1px) scale(.965)}
.row:active{transform:translateY(1px)}
.fab:active{transform:translateY(1px) scale(.96)}
.tb:active .tbi{transform:scale(.92)}
.tbi{transition:transform .09s ease}

/* --- panels arrive instead of appearing --- */
@keyframes olsPop{from{opacity:0;transform:translateY(-7px)}
                  to{opacity:1;transform:none}}
@keyframes olsRise{from{opacity:0;transform:translateY(14px)}
                   to{opacity:1;transform:none}}
@keyframes olsFade{from{opacity:0} to{opacity:1}}

.pop:not([hidden]), .bellpanel:not([hidden]), #pop-card:not([hidden]){
  animation:olsPop .15s ease-out}
.sheet:not([hidden]){animation:olsRise .17s ease-out}
.dropbar:not([hidden]), .offbar:not([hidden]){animation:olsFade .2s ease-out}

/* --- a card that was just opened settles rather than snapping --- */
.feed .row, .ncard{animation:olsFade .18s ease-out}

@media (prefers-reduced-motion: reduce){
  .btn, .mini, .tb, .app .gl, .it .gl, .pill, .gp, .lp, .tick,
  .star, .fold, .bellb, .modeb, .gems, .vgear, .fab, .ncard .npv, .row,
  .tbi{transition:none}
  .pop:not([hidden]), .bellpanel:not([hidden]), #pop-card:not([hidden]),
  .sheet:not([hidden]), .dropbar:not([hidden]), .offbar:not([hidden]),
  .feed .row, .ncard{animation:none}
  .app:active .gl, .it:active .gl, .row:active, .fab:active{transform:none}
}

/* ===================== goodnight =======================================
   One tap, in the SnapTalk header beside the bell. Offshore the hours do not
   line up, so it is usually said to someone who is asleep - it just sits
   there until they wake up and look.

   Once it has been said tonight the button stays lit, so you can tell at a
   glance whether you already did it.                                     */

.nightform{display:flex;margin:0}
.nightb{width:32px;height:32px;flex:0 0 auto;position:relative;cursor:pointer;
  display:grid;place-items:center;font-size:15px;line-height:1;padding:0;
  border:1px solid var(--line);border-radius:11px;
  background:var(--card-2);color:var(--ink);
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
/* the same invisible pad the bell and the mode switch get, so it is a real
   44px target without looking any bigger */
.nightb::after{content:"";position:absolute;inset:-6px;border-radius:14px}
.nightb.on{background:var(--honey);border-color:var(--honey);color:var(--on-accent)}
.nightb:active{transform:translateY(1px);box-shadow:none}

/* what was said, sitting quietly at the top of SnapTalk */
.nightsaid{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;
  font-size:12px;color:var(--ink-soft)}
.nightsaid b{font-weight:700;color:var(--ink)}

/* ===================== head to head ====================================
   Who is up, across the six games. Reached from the diamond in the games
   header. Two columns, one per person, and the bigger number is lit.     */

.popfeet{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.popfeet .popfoot{margin:0;text-align:center}

.h2htop{margin:0 0 14px}
.h2hscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:16px 12px;
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.h2hside{display:grid;justify-items:center;gap:2px;color:var(--ink-soft)}
.h2hside b{font-family:"Fraunces",Georgia,serif;font-size:34px;line-height:1;
  font-weight:700;color:var(--ink-soft)}
.h2hside span{font-size:12px;font-weight:700;letter-spacing:.04em}
.h2hside.win b{color:var(--notes-ink)}
.h2hside.win span{color:var(--ink)}
.h2hvs{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft);text-align:center;max-width:70px;line-height:1.3}
.h2hlead{margin:8px 2px 0;text-align:center;font-size:13px;color:var(--ink-soft)}

.h2hcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:12px 14px 10px;margin:0 0 10px;
  box-shadow:var(--drop),inset 0 1px 0 var(--lift)}
.h2hname{display:block;font-weight:700;font-size:15px;margin:0 0 8px;
  color:var(--ink);text-decoration:none}
.h2hline{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:10px;padding:4px 0}
.h2hline.sub{border-top:1px solid var(--line);padding-top:7px;margin-top:5px}
.h2hn{font-size:17px;font-weight:700;text-align:center;color:var(--ink-soft)}
.h2hline.sub .h2hn{font-size:14px}
.h2hn.win{color:var(--notes-ink)}
.h2hlab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft);text-align:center;min-width:96px}
.h2hsub{display:block;font-size:10.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink-soft);margin-top:1px}
.h2hfoot{margin:12px 2px 0;font-size:11.5px;color:var(--ink-soft);text-align:center}


/* ================= the control board =================
   Michael's only. Plain rows, real edges, nothing clever - it is a
   workbench, not a screen either of us looks at for pleasure.        */
.admtabs{display:flex;gap:6px;margin:2px 0 12px;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.admtab{flex:0 0 auto;padding:8px 14px;border-radius:11px;font-size:13px;
  font-weight:700;color:var(--ink-soft);background:var(--card);
  border:1.5px solid var(--line);text-decoration:none}
.admtab.on{color:#fff;border-color:#3B3F73;
  background:linear-gradient(160deg,#5A62A8,#2E3468)}
.admcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px;margin-bottom:12px;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.5)}
.admh{margin:0 0 8px;font-family:"Fraunces",Georgia,serif;font-size:18px;
  font-weight:700;color:var(--ink)}
.admsay{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.admf{display:block;margin:0 0 10px}
.admf>span{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.admf>span b{font-weight:800;color:var(--ink);letter-spacing:0;text-transform:none}
.admf input[type=text],.admf input[type=password],.admf input[type=number]{
  width:100%;padding:10px 11px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--card-2);color:var(--ink);font-size:15px}
.admf input[type=range]{width:100%}
.admf input[type=color]{width:56px;height:34px;padding:2px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--card-2)}
.admf.admsw{display:flex;align-items:center;justify-content:space-between;gap:12px}
.admf.admsw>span{margin:0}
.admf.admsw input{width:22px;height:22px}
.admfile{display:block;width:100%;margin:0 0 10px;font-size:13px;color:var(--ink-soft)}
.admrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.admrow form{margin:0}
.admrules{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.admrules td{padding:6px 0;border-top:1px solid var(--line);
  color:var(--ink-soft);vertical-align:top}
.admrules td:first-child{width:104px;font-weight:800;color:var(--ink);
  letter-spacing:.02em}
.admrules tr:first-child td{border-top:0}

/* a model in the library */
.admitem{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
.admview{width:96px;height:96px;display:block;border-radius:12px;
  background:linear-gradient(168deg,#1E4A50,#102A30)}
.admbig{width:100%;height:180px;margin-bottom:12px}
.admmeta{min-width:0;display:flex;flex-direction:column;gap:3px}
.admmeta b{font-size:15.5px;color:var(--ink)}
.admmeta span{font-size:12px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.admslot{display:inline-block;align-self:flex-start;text-decoration:none;
  margin-top:3px;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:linear-gradient(160deg,#5A62A8,#2E3468)}
.admnote{font-style:normal;font-size:12px;color:var(--ink-soft);opacity:.85}
.admplug{grid-column:1 / -1;margin:0}
.admplug select,.admf select{width:100%;padding:9px 10px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--card-2);color:var(--ink);
  font-size:14px}
.admitem .admrow{grid-column:1 / -1;margin-top:2px}

/* teaching a die its faces */
.admfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.admfc{display:flex;flex-direction:column;gap:6px}
.admfc canvas{width:100%;height:84px;display:block;border-radius:11px;
  background:linear-gradient(168deg,#1E4A50,#102A30)}
.admfc select{width:100%;padding:7px 8px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card-2);color:var(--ink);
  font-size:14px;text-align:center}
/* the way into the control board, sitting where a back arrow would */
.admgear{width:30px;display:inline-flex;align-items:center;justify-content:flex-start;
  color:var(--ink-soft);line-height:1}
.admgear svg{width:20px;height:20px;fill:currentColor;opacity:.72}
.admgear:active svg{opacity:1}
/* a token slot on the Estates card, filled or not */
.admtok{align-items:center}
.admempty{background:var(--card-2);border:1.5px dashed var(--line)}
/* a preview that is not on screen is not running - it shows as a quiet
   plate rather than a black hole */
.admview:not(.lit),.admface:not(.lit){opacity:.55}
.admview.lit,.admface.lit{opacity:1;transition:opacity .2s ease}

/* Back sits where Search used to in the bar along the bottom. With nothing
   behind you it goes home and reads as unavailable rather than looking like
   a button that does nothing. */
.tb.back.none{opacity:.42}

/* =======================================================================
   The catch-up bar
   -----------------------------------------------------------------------
   A live screen redraws itself the moment the other one moves. It will not
   do that while you are part way through filling something in - a Phase 10
   lay-down, a note, anything with a box in it - because the redraw would
   take your ticks with it. So it waits, and this says so. Tap it and it
   catches up.

   It sits just above the tab bar, on top of everything, and follows the
   theme like every other lifted thing.
   ======================================================================= */
.liveping{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:35;max-width:calc(100% - 32px);
  display:block;border:0;cursor:pointer;
  padding:11px 18px;border-radius:999px;
  font:600 14px/1.2 inherit;letter-spacing:.01em;text-align:center;
  color:var(--on-accent);background:var(--hitch);
  box-shadow:var(--drop-2),0 0 0 1px rgba(0,0,0,.06);
  animation:livepingin .28s cubic-bezier(.2,.8,.3,1) both;
}
.liveping:active{filter:brightness(.94)}
.liveping:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@keyframes livepingin{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .liveping{animation:none}
}

/* A DRAWN icon that is meant to be a picture, not a line drawing - the
   calendar on Dates and Overtime. `.app .gl svg{width:26px}` and its five
   friends are (0,1,1) selectors, so plain `.glimg` at (0,1,0) loses to them
   and the drawing came out as a 26px glyph in the middle of an empty tile.
   Naming the element wins it back everywhere at once.                    */
.gl svg.glimg,.dock .gl svg.glimg,.app .gl svg.glimg,.editrow .gl svg.glimg,
.apps.v-large .gl svg.glimg,.apps.v-list .gl svg.glimg{
  width:100%;height:100%}

/* ---- the fire ---------------------------------------------------------
   A campfire at the foot of the hills on the home screen. It burns low
   when one of you is here and flares up when you both are - so the screen
   says she is about without saying anything.

   It sits with `scene()`, behind everything, and never takes a tap. The
   canvas is 300 wide because the flame wanders about 40px either side of
   the middle and a narrower box clips the lean off.                     */
.olsfire{position:fixed;left:50%;bottom:74px;width:300px;height:230px;
  transform:translateX(-50%);z-index:-1;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.olsfire canvas{display:block;width:100%;height:100%}
/* at night the whole thing gets a little bloom off the hills */
[data-mode="night"] .olsfire{filter:saturate(1.08)}
[data-mode="night"] .olsfire canvas[data-near="1"]{
  filter:drop-shadow(0 0 26px rgba(255,138,48,.30))}

/* Above the flame, not under it - the foot of the screen is the bottom bar,
   and the line was drawn behind it where nobody could read it. */
.olsfiresay{position:fixed;left:0;right:0;bottom:300px;margin:0;text-align:center;
  z-index:1;pointer-events:none;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:#C67A3A;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.olsfiresay[hidden]{display:none}
[data-mode="night"] .olsfiresay{color:#F0A860}

/* ---- the map that fills in --------------------------------------------
   THREE LAYERS. `.usland` and `.usink` are scaled by pinching; `.usmarks`
   never is - every pin, town and name keeps its size on screen at any zoom,
   which is what a real map does and what stops a pin turning into a blob.

   Nothing in here sets a SIZE on anything inside the map. Sizes are written
   into the markup by PHP and rewritten by usmap.js as it zooms, because the
   same picture is drawn over the whole country and over one state and a
   number fixed here would be wrong in one of them. This file is colour. */
.usmapwrap{position:relative;margin:0 0 12px;padding:8px;border-radius:20px;
  background:var(--card,#FFF);border:1px solid var(--edge,#DDE2DE);
  box-shadow:0 14px 36px -24px rgba(0,0,0,.7);overflow:hidden}
.usmap{display:block;width:100%;height:auto;touch-action:none;
  user-select:none;-webkit-user-select:none;border-radius:14px;
  background:var(--mapsea,#EEF2F1)}
/* the sea, so the empty half of the box is a sea and not a gap. No filter
   anywhere near the land - a filter re-rasterises the whole layer on every
   pinch frame and the map would crawl. */
.ussea{fill:url(#usSeaFill)}
.usseatop{stop-color:var(--mapsea,#EEF2F1)}
.usseabot{stop-color:var(--mapsea2,#DFE7E5)}
.usmapwrap.touchy .usmap{cursor:grab}
.usmapwrap.zoomed .usmap{cursor:grabbing}
.usmapwrap.dropping .usmap{cursor:crosshair}
.usmapwrap.dropping{border-color:var(--mappin,#B0552A)}

/* the land */
.usst{fill:var(--map0,#E4E8E5);stroke:var(--mapline,#FFF);transition:fill .2s ease}
.usst.d1{fill:var(--map1,#CFE0CE)}
.usst.d2{fill:var(--map2,#9FC7A2)}
.usst.d3{fill:var(--map3,#69A776)}
.usst.d4{fill:var(--map4,#3F7C52)}
.usst.on{stroke:var(--mappick,#B4762F);fill:var(--mapon,#EDF2EC)}
.usland a{cursor:pointer}
.usland a:focus-visible .usst{stroke:var(--mappick,#B4762F);outline:none}

/* the line joining them, in the order you went */
.ustrail{fill:none;stroke:var(--maptrail,#B0552A);opacity:.5;
  stroke-linecap:round;stroke-linejoin:round}
.uspick{fill:none;stroke:var(--mappin,#B0552A);stroke-linecap:round}
.uspick[hidden]{display:none}

/* the marks - never scaled, so these are the sizes you actually see */
.usmarks{pointer-events:auto}
.uspin{cursor:pointer}
.uspin.gone{display:none}
.uspin .ushit{fill:transparent}
.uspin .ushalo{fill:var(--mappin,#B0552A);opacity:.15}
.uspin .usdot{fill:var(--mappin,#B0552A);stroke:var(--card,#FFF);stroke-width:0}
.uspin .usname{fill:var(--ink,#22282C);font-weight:600;
  stroke:var(--card,#FFF);paint-order:stroke;stroke-linejoin:round;
  pointer-events:none}
.usname.off{display:none}
.uspin.picked .ushalo{opacity:.45}
.uspin.picked .usdot{fill:var(--mappick,#B4762F);stroke:var(--card,#FFF);stroke-width:2.5}
.uspin.picked .usname{font-weight:700}
.uspin:focus-visible{outline:none}
.uspin:focus-visible .ushalo{opacity:.45}

/* a crowd of places, gathered into one bubble */
.uslot{cursor:pointer}
.uslotring{fill:var(--mappin,#B0552A);opacity:.2}
.uslotdot{fill:var(--mappin,#B0552A)}
.uslotn{fill:#FFF;font-weight:700;text-anchor:middle;pointer-events:none}
.uslot:focus-visible .uslotring{opacity:.42;outline:none}

/* the towns you would know */
.uscity circle{fill:var(--ink-soft,#6A7178);opacity:.45}
.uscity text{fill:var(--ink-soft,#6A7178);stroke:var(--mapon,#EDF2EC);
  paint-order:stroke;stroke-linejoin:round;pointer-events:none}
.uscity.cap circle{opacity:.8}
.uscity.cap text{fill:var(--ink,#22282C);font-weight:600}
.uscity text.off{display:none}

/* ---- ratings view: size is how many said so, colour is what they said -- */
.m-stars .ustrail{opacity:.12}
.m-stars .uspin[data-band="top"]  .usdot{fill:var(--star4,#2F7D4F)}
.m-stars .uspin[data-band="top"]  .ushalo{fill:var(--star4,#2F7D4F)}
.m-stars .uspin[data-band="good"] .usdot{fill:var(--star3,#7FA83E)}
.m-stars .uspin[data-band="good"] .ushalo{fill:var(--star3,#7FA83E)}
.m-stars .uspin[data-band="fair"] .usdot{fill:var(--star2,#D69B2B)}
.m-stars .uspin[data-band="fair"] .ushalo{fill:var(--star2,#D69B2B)}
.m-stars .uspin[data-band="low"]  .usdot{fill:var(--star1,#C4602F)}
.m-stars .uspin[data-band="low"]  .ushalo{fill:var(--star1,#C4602F)}
.m-stars .uspin[data-band="none"] .usdot{fill:var(--ink-soft,#6A7178);opacity:.55}
.m-stars .uspin[data-band="none"] .ushalo{opacity:.06}

/* ---- time view: oldest to newest ---- */
.m-time .uspin[data-era="0"] .usdot,.m-time .uspin[data-era="0"] .ushalo{fill:var(--era0,#5B7FA8)}
.m-time .uspin[data-era="1"] .usdot,.m-time .uspin[data-era="1"] .ushalo{fill:var(--era1,#4E9A8E)}
.m-time .uspin[data-era="2"] .usdot,.m-time .uspin[data-era="2"] .ushalo{fill:var(--era2,#7FA83E)}
.m-time .uspin[data-era="3"] .usdot,.m-time .uspin[data-era="3"] .ushalo{fill:var(--era3,#D69B2B)}
.m-time .uspin[data-era="4"] .usdot,.m-time .uspin[data-era="4"] .ushalo{fill:var(--era4,#C4602F)}

/* ---- the furniture round the map ---- */
.uszoom{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px;z-index:2}
.uszoom button{width:34px;height:34px;border-radius:11px;font:inherit;font-size:18px;
  line-height:1;cursor:pointer;background:var(--card,#FFF);color:var(--ink,#22282C);
  border:1px solid var(--edge,#DDE2DE);box-shadow:0 4px 12px -8px rgba(0,0,0,.55);opacity:.94}
.uszoom button:active{background:var(--map1,#CFE0CE);opacity:1}

.usmode{display:flex;gap:0;margin:8px 2px 0;padding:3px;border-radius:12px;
  background:var(--map1,#CFE0CE);border:1px solid var(--edge,#DDE2DE)}
.usmode button{flex:1;padding:8px 4px;border:0;border-radius:9px;font:inherit;font-size:12px;
  font-weight:600;letter-spacing:.04em;cursor:pointer;background:none;
  color:var(--ink-soft,#6A7178)}
.usmode button.on{background:var(--card,#FFF);color:var(--ink,#22282C);
  box-shadow:0 2px 8px -5px rgba(0,0,0,.6)}

.uskey{display:none;gap:10px;flex-wrap:wrap;margin:8px 2px 0;font-size:11px;
  color:var(--ink-soft,#6A7178)}
.uskey[data-mode="stars"],.uskey[data-mode="time"]{display:flex}
.uskey [data-for]{display:none;align-items:center;gap:5px}
.uskey[data-mode="stars"] [data-for="stars"],
.uskey[data-mode="time"] [data-for="time"]{display:inline-flex}
.uskey b{width:11px;height:11px;border-radius:50%;display:inline-block}

/* the card that comes up when a place is tapped */
/* A sheet at the foot of the map, never more than half of it, and it
   scrolls inside itself. Before this it was a slab over the whole map and
   you could not see the place you had just tapped. */
.uscard{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;
  display:flex;flex-direction:column;gap:3px;padding:14px 14px 12px;
  border-radius:18px;max-height:47%;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--card,#FFF);border:1px solid var(--edge,#DDE2DE);
  box-shadow:0 -2px 0 rgba(0,0,0,.02),0 18px 44px -18px rgba(0,0,0,.8);
  animation:uscup .22s cubic-bezier(.2,.8,.3,1) both}
@keyframes uscup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.uscard{animation:none}}
.uscard::before{content:'';position:sticky;top:0;align-self:center;
  width:36px;height:4px;border-radius:2px;margin:-6px 0 6px;
  background:var(--edge,#DDE2DE);flex:none}
.uscard[hidden]{display:none}
.uscard.two{border-color:var(--mappin,#B0552A)}
.ucshut{position:absolute;top:5px;right:7px;width:30px;height:30px;border:0;
  background:none;font:inherit;font-size:20px;line-height:1;cursor:pointer;
  color:var(--ink-soft,#6A7178)}
.ucname{font-weight:700;font-size:15px;padding-right:26px;line-height:1.25}
.ucbig{font-size:26px;font-weight:700;color:var(--mappin,#B0552A);
  font-variant-numeric:tabular-nums;line-height:1.1}
.ucmeta,.ucleg{font-size:12px;color:var(--ink-soft,#6A7178);line-height:1.4}
.ucleg{color:var(--mappin,#B0552A)}
.ucnote{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.uscard:hover .ucnote,.uscard:focus-within .ucnote{-webkit-line-clamp:unset}
.uchint{font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft,#6A7178);opacity:.8;margin-top:2px}
.ucstar{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  color:var(--mappick,#B4762F);font-variant-numeric:tabular-nums}
.ucstar i{font-style:normal}
.ucstar em{font-style:normal;font-weight:400;color:var(--ink-soft,#6A7178)}

/* the numbers under the map. Every one of them is a door - see act() in
   usmap.js - so they get a real pressed state and a pointer. */
.usstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.usstat{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 4px;border-radius:14px;background:var(--card,#FFF);
  border:1px solid var(--edge,#DDE2DE);text-align:center;font:inherit;
  color:var(--ink,#22282C);cursor:pointer;
  box-shadow:0 4px 14px -12px rgba(0,0,0,.7)}
.usstat:active{background:var(--map1,#CFE0CE);transform:translateY(1px)}
/* ==================================================================
   THE JOURNEY -- MARKER-5-BLOCK
   One line through every stop, and three things read off it: the show,
   the timeline, and the spark that runs it at rest.
   ================================================================== */
.usdraw{fill:none;stroke:var(--mappin,#B0552A);stroke-linecap:round;
  stroke-linejoin:round;opacity:.95}
.usdraw[hidden]{display:none}

/* one short bright dash, running the route, forever, quietly */
.usspark{fill:none;stroke:var(--mapspark,#E08A3C);stroke-linecap:round;
  opacity:0;stroke-dasharray:var(--sparkdash,0 9999);
  animation:usrun var(--sparksecs,9s) linear infinite}
.m-trail .usspark{opacity:.85}
.usmapwrap.zoomed .usspark,.usmapwrap.playing .usspark{opacity:0}
@keyframes usrun{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--sparkrun,-9999px)}}
@media (prefers-reduced-motion:reduce){.usspark{animation:none;opacity:0}}

/* the stop the show is on */
.uspin.now .ushalo{opacity:.5;animation:usbeat 1.1s ease-in-out infinite}
@keyframes usbeat{0%,100%{opacity:.5}50%{opacity:.18}}
@media (prefers-reduced-motion:reduce){.uspin.now .ushalo{animation:none}}

/* a place you had not got to yet, while the timeline is dragged back */
.uspin.later{opacity:0;pointer-events:none}
.uspin{transition:opacity .25s ease}

/* the play button, bottom right of the map, out of the way of everything */
.usrun{position:absolute;right:16px;top:16px;z-index:4;
  width:48px;height:48px;border-radius:16px;border:1px solid var(--edge,#DDE2DE);
  background:var(--card,#FFF);color:var(--mappin,#B0552A);
  font:inherit;font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.8)}
.usrun[hidden]{display:none}
.usrun:active{transform:translateY(1px)}
.usmapwrap.playing .usrun{background:var(--mappin,#B0552A);color:#FFF;
  border-color:var(--mappin,#B0552A);font-size:15px}

.usbar{position:absolute;left:8px;right:8px;bottom:8px;height:3px;z-index:4;
  border-radius:2px;overflow:hidden;pointer-events:none;background:transparent}
.usmapwrap.playing .usbar{background:rgba(127,127,127,.18)}
.usbar i{display:block;height:100%;width:0;border-radius:2px;
  background:var(--mappin,#B0552A);transition:width .5s linear}

/* the timeline. Only in the Time view - it means nothing in the others. */
.usscrub{display:none;align-items:center;gap:10px;margin:8px 2px 0}
.usscrub[data-mode="time"]{display:flex}
.usscrub input{flex:1;min-width:0;accent-color:var(--mappin,#B0552A);height:22px}
.usscrubsay{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-soft,#6A7178);font-variant-numeric:tabular-nums;
  min-width:96px;text-align:right}

/* a crowd of places has no rating and no date, so it stays neutral in the
   views that colour by those - an orange bubble in the Ratings view was
   reading as "everything here is badly rated" */
.m-stars .uslotring,.m-time .uslotring{fill:var(--ink-soft,#6A7178);opacity:.16}
.m-stars .uslotdot,.m-time .uslotdot{fill:var(--ink-soft,#6A7178)}

/* ---- a number under the map opens its list, right there in the card ---- */
.uscard.list{max-height:64%}
.ucrows{display:flex;flex-direction:column;margin:6px -14px -12px;
  border-top:1px solid var(--edge,#DDE2DE)}
.ucrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border:0;border-bottom:1px solid var(--edge,#DDE2DE);
  background:none;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink,#22282C)}
.ucrow:last-child{border-bottom:0}
.ucrow:active{background:var(--map1,#CFE0CE)}
.ucrl{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ucrr{flex:none;font-size:12px;font-weight:700;color:var(--mappin,#B0552A);
  font-variant-numeric:tabular-nums}
/* ==================================================================
   WORTH DOING TWICE -- MARKER-6-BLOCK
   Every place on this map has been visited. This marks the handful
   worth going back to, so they can be found again in one tap.
   ================================================================== */
.usagain{fill:none;stroke:var(--mapagain,#7A5CC4);opacity:.95;
  stroke-dasharray:2.5 3.5;stroke-linecap:round}
.uspin.picked .usagain{opacity:1}
/* pick out only those, when the list is open */
.m-again .uspin:not([data-again="1"]) .usdot{opacity:.22}
.m-again .uspin:not([data-again="1"]) .ushalo{opacity:.04}
.m-again .uspin:not([data-again="1"]) .usname{opacity:.3}
.m-again .ustrail{opacity:.14}

/* the button on the card */
.ucagain{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  margin:8px 0 2px;padding:8px 14px 8px 11px;border-radius:12px;
  border:1px solid var(--edge,#DDE2DE);background:var(--card,#FFF);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  color:var(--ink-soft,#6A7178)}
.ucagain i{font-style:normal;font-size:15px;line-height:1;font-weight:700;
  color:var(--mapagain,#7A5CC4)}
.ucagain.on{background:var(--mapagain,#7A5CC4);border-color:var(--mapagain,#7A5CC4);
  color:#FFF}
.ucagain.on i{color:#FFF}
.ucagain:active{transform:translateY(1px)}
.ucagain[disabled]{opacity:.55}

/* its tile stands slightly apart from the plain numbers */
.usstat.lit{border-color:var(--mapagain,#7A5CC4)}
.usstat.lit b{color:var(--mapagain,#7A5CC4)}


.usstat b{font-size:17px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.usstat b i{font-style:normal;font-size:12px;color:var(--mappick,#B4762F)}
.usstat span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft,#6A7178);line-height:1.2}
.usbest{margin:-6px 2px 14px}
.usbest button{font:inherit;font-size:inherit;background:none;border:0;padding:0;
  cursor:pointer;color:var(--mappin,#B0552A);text-decoration:underline;font-weight:700}
@media (max-width:360px){ .usstats{grid-template-columns:repeat(3,1fr)} }

.usline{margin:2px 0 0;text-align:center;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft,#6A7178)}
.usline.lit{color:var(--mappin,#B0552A);letter-spacing:.06em;
  text-transform:none;font-size:13px}
.usback{display:block;margin:8px auto 0;text-align:center;font-size:13px}

/* the states you have been to, as words - the sure way into one */
.usstrip{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.usstate{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
  border-radius:999px;font-size:13px;line-height:1.2;text-decoration:none;
  background:var(--card,#FFF);border:1px solid var(--edge,#DDE2DE);
  color:var(--ink,#22282C);box-shadow:0 4px 12px -10px rgba(0,0,0,.6)}
.usstate span{font-size:11px;padding:1px 6px;border-radius:999px;
  background:var(--map1,#CFE0CE);color:var(--ink-soft,#6A7178);
  font-variant-numeric:tabular-nums}
.usstate.on{background:var(--map2,#9FC7A2);border-color:var(--mappick,#B4762F)}
.usstate.on span{background:var(--card,#FFF)}

/* ---- what shows on the map ----
   One word on the page and the whole tick list behind it, because the map
   is the thing worth looking at. The same list of ticks is used on the
   place form to say what a place is, so they look and work the same. */
.usfilterbar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.usfilter{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border-radius:999px;font:inherit;font-size:13px;cursor:pointer;
  background:var(--card,#FFF);border:1px solid var(--edge,#DDE2DE);
  color:var(--ink,#22282C);box-shadow:0 4px 12px -10px rgba(0,0,0,.6)}
.usfilter.on{background:var(--map2,#9FC7A2);border-color:var(--mappick,#B4762F)}
.usfilter span{font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--mappin,#B0552A);color:#FFF;font-variant-numeric:tabular-nums}
.usclear button{font:inherit;font-size:13px;padding:9px 4px;background:none;
  border:0;cursor:pointer;color:var(--ink-soft,#6A7178);text-decoration:underline}
.usonly{margin:-4px 2px 12px;color:var(--mappin,#B0552A)}

.uskinds{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px}
.uskind{display:flex;align-items:center;gap:10px;padding:7px 11px;
  border-radius:12px;cursor:pointer;font-size:14px;
  border:1px solid transparent}
.uskind input{width:20px;height:20px;flex:none;accent-color:var(--map4,#3F7C52)}
.uskindname{flex:1;min-width:0}
.uskindn{font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--map1,#CFE0CE);color:var(--ink-soft,#6A7178);
  font-variant-numeric:tabular-nums}
.uskind.on{background:var(--map1,#CFE0CE);border-color:var(--map2,#9FC7A2)}
/* the everyday stops read as quieter, and say why they are not on */
.uskind.quiet .uskindname{color:var(--ink-soft,#6A7178)}
.uskind.quiet em{display:block;font-style:normal;font-size:9px;line-height:1.25;
  letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.uskind.quiet.on .uskindname{color:var(--ink,#22282C)}
.uskinds.pick{border:1px solid var(--edge,#DDE2DE);border-radius:14px;
  padding:6px;background:var(--card,#FFF)}
/* Twelve rows plus a button is taller than a phone. Only the list
   scrolls, so Show these is always there to be pressed. Scoped to this
   one panel by its id - every other popout keeps the height it had. */
#pop-mapkinds{max-height:calc(100dvh - 132px);display:flex;flex-direction:column}
#pop-mapkinds .uskindform{display:flex;flex-direction:column;min-height:0;flex:1}
#pop-mapkinds .usfoot{margin:0 2px 6px}
#pop-mapkinds .uskinds{overflow-y:auto;min-height:0}

/* the towns you would know, once you are inside a state */
.uscity circle{fill:var(--ink-soft,#6A7178);opacity:.5;stroke-width:0}
.uscity text{fill:var(--ink-soft,#6A7178);stroke:var(--mapon,#EDF2EC);paint-order:stroke;stroke-linejoin:round}
.uscity.cap circle{fill:var(--map4,#3F7C52)}
.uscity.cap text{fill:var(--ink,#22282C);font-weight:600}

/* the line joining your places, in the order you went */
.ustrail{fill:none;stroke:var(--maptrail,#B0552A);opacity:.55;
  stroke-linecap:round;stroke-linejoin:round}
.uspick{fill:none;stroke:var(--mappin,#B0552A);stroke-linecap:round}
.uspick[hidden]{display:none}

/* your places */
.uspin{cursor:pointer}
.uspin .ushalo{fill:var(--mappin,#B0552A);opacity:.16}
.uspin .usdot{fill:var(--mappin,#B0552A);stroke:var(--mapline,#FFF);
  stroke-width:0}
.uspin .usname{fill:var(--ink,#22282C);font-weight:600;
  stroke:var(--card,#FFF);paint-order:stroke;stroke-linejoin:round}
.uspin.picked .ushalo{opacity:.42}
.uspin.picked .usdot{fill:var(--mappick,#B4762F)}
.uspin:focus-visible{outline:none}
.uspin:focus-visible .ushalo{opacity:.42}

/* dropping a pin by hand */
.usmapwrap.dropping .usmap{cursor:crosshair}
.usmapwrap.dropping{border-color:var(--mappin,#B0552A)}
.usdrop{display:none}
/* typing where a place is, when tapping is not the easy way */
.uswhere{display:flex;flex-direction:column;gap:8px;margin:0 0 6px;
  padding:12px;border-radius:16px;background:var(--card,#FFF);
  border:1px solid var(--mappin,#B0552A);
  box-shadow:0 6px 18px -14px rgba(0,0,0,.5)}
.uswhere .fld{gap:5px}
.uswhere input{width:100%}
.uspinline{margin:-2px 2px 4px;font-size:12px;color:var(--ink-soft,#6A7178);
  font-variant-numeric:tabular-nums}
.uspinline a{margin-left:8px;font-variant-numeric:normal}

.usdroplist{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.usdropone{display:inline-block;padding:9px 14px;border-radius:999px;
  font-size:13px;line-height:1.2;text-decoration:none;background:var(--card,#FFF);
  border:1px solid var(--edge,#DDE2DE);color:var(--ink,#22282C);
  box-shadow:0 4px 12px -10px rgba(0,0,0,.6)}
.usdropone:active{background:var(--map1,#CFE0CE)}
.usnopin{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--map1,#CFE0CE);color:var(--ink-soft,#6A7178)}
.usfoot{margin:6px 2px 14px;font-size:12px;line-height:1.45;
  color:var(--ink-soft,#6A7178)}
.usleglist .m{font-variant-numeric:tabular-nums}

/* the strip on the home screen - deliberately quiet, and one tap through */
.mapband{display:block;margin:4px 0 14px;padding:4px 6px 2px;border-radius:16px;
  background:var(--card,#FFF);border:1px solid var(--edge,#DDE2DE);
  box-shadow:0 6px 18px -16px rgba(0,0,0,.5);text-decoration:none}
.mapband .usband{opacity:.92}
.mapbandsay{display:block;padding:2px 0 4px;text-align:center;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft,#6A7178)}

/* ---- two names that were used but never declared ----------------------
   --edge appeared in 15 rules and --bg in 2, and neither was ever defined
   anywhere in either stylesheet. So --edge always fell back to #DDE2DE
   (pale grey-green) no matter the theme, which is why the whole map screen's
   chrome stayed daylight in Storm; and --bg had no fallback at all, so the
   two fade-to-background gradients faded to nothing.

   They are declared here as aliases of the real tokens. A custom property is
   substituted where it is USED, not where it is declared, so one line each is
   enough - they follow whichever palette is in force.

     --edge -> --line    soft sage line   day #CBD4C6, Storm #575C66 steel
     --bg   -> --ground  the page itself  day #EDF0EA pale sage, Storm #2C2E33 gunmetal
   -------------------------------------------------------------------- */
:root{ --edge: var(--line); --bg: var(--ground); }

:root{--map0:#E4E8E5;--map1:#CFE0CE;--map2:#9FC7A2;--map3:#69A776;
  --map4:#3F7C52;--mapline:#FFFFFF;--mappick:#B4762F;--mappin:#B0552A;--mapon:#EDF2EC;
  --mapsea:#EFF3F2;--mapsea2:#DDE6E4;--mapspark:#E08A3C;--mapagain:#7A5CC4;
  --star4:#2F7D4F;--star3:#7FA83E;--star2:#D69B2B;--star1:#C4602F;
  --era0:#5B7FA8;--era1:#4E9A8E;--era2:#7FA83E;--era3:#D69B2B;--era4:#C4602F;
  --maptrail:#B0552A}
[data-mode="night"]{--map0:#2B3236;--map1:#33463A;--map2:#3E6248;
  --map3:#4C8258;--map4:#63A76E;--mapline:#1D2225;--mappick:#E0A85C;--mapon:#252C30;
  --mapsea:#1F2529;--mapsea2:#161B1E;--mapspark:#F0A75E;--mapagain:#A98BEA;
  --star4:#63C089;--star3:#A8CB63;--star2:#E8B75A;--star1:#E08A5B;
  --era0:#7EA6D0;--era1:#63BFB1;--era2:#A8CB63;--era3:#E8B75A;--era4:#E08A5B;
  --mappin:#E8934A;--maptrail:#E8934A}

/* The same again for a dark phone whose owner never touched the switch.
   Everything else in the app has this branch; the map did not, so Storm
   chrome ended up wrapped around a daylight map. */
@media (prefers-color-scheme: dark){
  body:not([data-mode]){--map0:#2B3236;--map1:#33463A;--map2:#3E6248;
    --map3:#4C8258;--map4:#63A76E;--mapline:#1D2225;--mappick:#E0A85C;--mapon:#252C30;
    --mapsea:#1F2529;--mapsea2:#161B1E;--mapspark:#F0A75E;--mapagain:#A98BEA;
    --star4:#63C089;--star3:#A8CB63;--star2:#E8B75A;--star1:#E08A5B;
    --era0:#7EA6D0;--era1:#63BFB1;--era2:#A8CB63;--era3:#E8B75A;--era4:#E08A5B;
    --mappin:#E8934A;--maptrail:#E8934A}
}

/* ---- SnapTalk, tightened ---------------------------------------------
   The send box was taller than the phone: a full-width label and select,
   two chunky buttons, another label, a field, and a Send row - about 500px
   before a single snap was on screen. Nothing is removed here. The parts
   are the same size to a finger (every tap target stays at least 44px);
   the air between them is what has gone.                               */
.snapbox{gap:8px;padding:12px 13px}
.stpane{gap:8px}

/* the kind sits on ONE line with its label, not stacked above it */
.stpick .fld{flex-direction:row;align-items:center;gap:10px}
.stpick .fld > span{flex:0 0 auto;font-size:11px;white-space:nowrap;
  letter-spacing:.1em}
.stpick select{flex:1 1 auto;min-width:0;font-size:15px;padding:9px 30px 9px 11px;
  min-height:44px}

/* the two big buttons keep their height but lose the padding around them */
.snapbox .sttwo{gap:8px}
.snapbox .fld span.snapbtn{font-size:15px;padding:11px 10px;min-height:44px;
  display:flex;align-items:center;justify-content:center}

/* Add Text on one line as well */
.snapbox .stpane > .fld{flex-direction:row;align-items:center;gap:10px}
.snapbox .stpane > .fld > span{flex:0 0 auto;font-size:11px;white-space:nowrap;
  letter-spacing:.1em}
.snapbox .stpane > .fld > input{flex:1 1 auto;min-width:0;min-height:44px;
  padding:9px 11px}
/* the words box on Just Words still needs its own line */
.snapbox #st-text .fld{flex-direction:column;align-items:stretch}

/* flex, not grid: Start over is only `hidden`, so it is still a grid
   CHILD and `:only-child` never fires - Send it sat in half the width
   with an empty cell beside it. A hidden flex item takes no room. */
.snapbox .snapbtns{display:flex;gap:8px;margin-top:2px}
.snapbox .snapbtns .btn{flex:1 1 0;min-height:46px;padding:10px 12px}
.snapbox .meta:empty{display:none}
.snapbox .snapprev{margin:4px 0 0}
.snapbox .snapprev img{max-height:34vh}

/* ---- Compass Estates: the pot, the clock and the state of play ----
   One strip above the board answering the four things you have to know
   before you can decide anything: how much is in Free Camping, how long
   this game has been going, whether you are still on your free lap, and
   whether the board has sold out so building is open. Each chip is a
   quiet label over a loud number, because the number is what is read. */
.esstrip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.esstrip > span{
  flex:1 1 auto;min-width:104px;
  display:flex;flex-direction:column;gap:1px;
  padding:8px 10px;border-radius:12px;
  background:var(--card,#171a1f);border:1px solid rgba(255,255,255,.07);
}
.esstrip i{font-style:normal;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;opacity:.55}
.esstrip b{font-size:16px;font-weight:700;line-height:1.15}
/* the pot is the point of this game's money, so it is the one that glows */
.esstrip .espot{border-color:rgba(226,190,106,.45)}
.esstrip .espot b{color:#E2BE6A}
/* a warning colour while you still cannot buy, and while a loan is open */
.esstrip .eslap{border-color:rgba(255,255,255,.18)}
.esstrip .eslap b,
.esstrip .esloan b{color:#E08A6A}
.esstrip .essold.on b{color:#7FC08C}
.esstrip .esx10 b{color:#8FB8F0}
/* paying the loan back early sits under the strip, not inside it */
.esrepay{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.esrepay input{
  flex:0 1 120px;padding:8px 10px;border-radius:10px;
  background:var(--card,#171a1f);color:inherit;
  border:1px solid rgba(255,255,255,.12);
}
/* the loan offer only appears when nothing they own can cover the debt,
   so it has to read as the last resort it is */
.esloanoffer{display:block;margin-top:6px;font-size:13px;color:#E08A6A}

/* ---- how Compass Estates works ----
   Half these rules contradict what anybody already knows about this game, so
   the page is built to be scanned rather than read: one card per subject,
   the question on the left and the answer on the right, and no prose. */
.esrule{margin:0 0 14px;padding:12px 14px;border-radius:14px;
  background:var(--card,#171a1f);border:1px solid rgba(255,255,255,.07)}
.esrule h3{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#E2BE6A}
.esrule .t{width:100%;border-collapse:collapse}
.esrule .t td{padding:6px 0;vertical-align:top;font-size:14px;line-height:1.35;
  border-top:1px solid rgba(255,255,255,.06)}
.esrule .t tr:first-child td{border-top:0}
.esrule .t td:first-child{width:42%;padding-right:12px;color:rgba(255,255,255,.60)}
.esrule .t td:last-child{color:rgba(255,255,255,.94)}
@media (max-width:420px){
  .esrule .t td{display:block;border-top:0;padding:2px 0}
  .esrule .t td:first-child{width:auto;font-size:12px;letter-spacing:.03em;
    text-transform:uppercase;padding-top:8px}
  .esrule .t tr + tr td:first-child{border-top:1px solid rgba(255,255,255,.06);margin-top:4px}
}


/* ---- Compass Estates: the test bench ----
   A plain stack of labelled boxes. It is a workshop, not a screen anybody
   plays on, so it is built to be read quickly rather than to look like the
   rest of the app. */
.tbform{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 2px}
.tbhead{flex:1 0 100%;margin:8px 0 0;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tbhead:first-child{margin-top:0}
.tbf{flex:1 1 150px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tbf.tbwide{flex:1 0 100%}
.tbf span{font-size:12px;color:var(--ink-soft)}
.tbf input,.tbf select{width:100%;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px}
.tbnote{flex:1 0 100%;margin:0;font-size:12.5px;line-height:1.4;
  color:var(--ink-soft)}
.tbnote b{color:var(--ink)}
.tbform .btn{flex:1 0 100%;margin-top:2px}
/* the line that says what just happened, so a press that leaves the page
   exactly where it was still tells you it landed */
.tbdone{margin:6px 0 10px;padding:8px 11px;border-radius:10px;
  font-size:13px;color:#CFF3DC;
  background:rgba(47,139,74,.22);border:1px solid rgba(47,139,74,.45)}
.tbdone.bad{color:#F6D2CC;background:rgba(196,56,47,.22);
  border-color:rgba(196,56,47,.45)}
.tbdone[hidden]{display:none}

/* the Board meter switch on the test bench - two buttons side by side */
.tbrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tbrow .btn{flex:1 1 130px}