/* =====================================================================
   The Cheshire Cat: the page's own rules (R158.14, redrawn R159). The
   tokens, the bar, the kit, and the fonts are the Looking-Glass's. The
   Cat adds two tokens (the paint on a rose, the frost on a freezer) and
   the rules of a front page: one column, read downward; the situation
   largest; Act now the only cards; everything else paper, ink, thin
   rules, and space. House colour identifies (a name, a hairline); it
   never means a state. Red, amber, and green are rare enough to mean
   something, and never the only signal: the word beside them says it.
   ===================================================================== */
:root{ --paint:#B3243E; --paint-white:#FFFFFF; --frost:#DCEBF7; --house-mix:0%; --rule:var(--line); --rule2:var(--line2); }
:root[data-theme="dark"]{ --paint:#E0506A; --paint-white:#F3ECD8; --frost:#22406A; --house-mix:38%; }

.page{max-width:760px;padding:18px 16px 60px;}
#main{display:flex;flex-direction:column;gap:36px;}
.muted{color:var(--muted);}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums;}
.dot{color:var(--muted);margin:0 6px;}
.who{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);}
.ic{border-radius:4px;vertical-align:middle;flex:0 0 auto;display:inline-block;opacity:.9;}
.ic.mono{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--ink);font-family:var(--fellsc);font-size:11px;}
#login{max-width:520px;margin:6vh auto 0;}
#login input{width:100%;margin:10px 0 4px;}
#pwErr{color:var(--danger);min-height:1.2em;}

/* section heads: small caps over a hairline, a count in sans, a fold at the right */
h2.sc{display:flex;align-items:baseline;gap:10px;font-family:var(--fellsc);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--muted);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule);}
h2.sc > span:first-child{color:var(--ink);}
h2.sc .num{font-size:14px;font-weight:700;color:var(--muted);}
h2.sc .more{margin-left:auto;padding:0;}
.more{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--muted);background:none;border:0;padding:6px 0;cursor:pointer;}
.more:hover{color:var(--ink);}

/* level 1: the situation. The largest thing on the page. */
.situation{padding-top:6px;}
.greet{margin:0 0 6px;font-family:var(--fellsc);font-size:15px;letter-spacing:.14em;color:var(--muted);}
h1.lead{font-family:var(--fell);font-weight:400;font-size:38px;line-height:1.12;margin:0;text-wrap:balance;}
h1.lead .num{font-size:33px;font-weight:700;}
.climate{margin:12px 0 0;font-size:17px;color:var(--muted);}
.climate .num{font-weight:700;color:var(--ink);}
.today{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--muted);}
.today .num{font-weight:800;color:var(--ink);font-size:16px;}
.today .owed .num{color:var(--amber);}
.wink{margin:14px 0 0;font-style:italic;color:var(--muted);}

/* level 2: the houses that want attention. Size follows importance: intervention large, attention medium. */
.hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.hs{padding:16px 0 18px 14px;border-left:3px solid var(--hc,var(--line));border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;grid-template-areas:"head view" "strip strip" "counts counts" "why why";gap:4px 12px;}
.hs:last-child{border-bottom:0;}
.hs.intervention{padding:22px 0 24px 16px;border-left-width:5px;}
.hhead{grid-area:head;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit;}
.hname{font-family:var(--fell);font-weight:400;font-size:26px;line-height:1.1;color:color-mix(in oklab,var(--hc,var(--ink)) calc(100% - var(--house-mix)),white);}
.hs.intervention .hname{font-size:34px;}
.hword{font-family:var(--fellsc);font-size:15px;letter-spacing:.14em;color:var(--muted);}
.hs.intervention .hword{color:var(--danger);font-size:17px;}
.hs.attention .hword{color:var(--amber);}
.view{grid-area:view;align-self:start;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--muted);background:none;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;min-height:34px;cursor:pointer;white-space:nowrap;}
.view:hover{color:var(--ink);border-color:var(--ink);}
.strip{grid-area:strip;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;}
.cat{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.cat .mk{opacity:.75;}
.cat .cg{font-size:14px;font-weight:800;}
.cat.ok .cg{color:var(--ok);} .cat.amber{color:var(--amber);} .cat.amber .cg{color:var(--amber);} .cat.red{color:var(--danger);} .cat.red .cg{color:var(--danger);}
.hcounts{grid-area:counts;margin:4px 0 0;font-size:15px;color:var(--muted);}
.hcounts .num{font-weight:700;color:var(--ink);}
.hwhy{grid-area:why;margin:4px 0 0;font-size:18px;line-height:1.35;}
.hs.intervention .hwhy{font-size:20px;}

/* the queue: the same anatomy at three sizes. Act now gets the only cards on the page. */
.queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.q{display:flex;flex-direction:column;gap:3px;padding:10px 0 10px 14px;border-left:3px solid var(--hc,var(--line));}
.q.l{padding:16px 18px 14px 18px;border:1.5px solid color-mix(in oklab,var(--danger) 55%,var(--line));border-left:6px solid var(--danger);border-radius:6px;background:var(--paper);gap:5px;}
.q.s{padding:6px 0 6px 12px;gap:2px;}
.q.claimed{opacity:.72;}
.qhead{margin:0;display:flex;align-items:center;gap:6px;font-family:var(--fellsc);font-size:14px;letter-spacing:.12em;color:var(--muted);}
.qh{font-family:var(--fell);font-size:16px;letter-spacing:0;font-weight:400;}
.qcat{text-transform:none;}
.qfind{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--ink);text-decoration:none;}
.q.l .qfind{font-size:24px;}
.q.s .qfind{font-size:17px;}
.qfind:hover{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;}
.qfind .num{font-weight:700;}
.qctx{margin:0;font-size:15px;color:var(--muted);}
.qctx .num{font-weight:700;color:var(--ink);}
.qnext{margin:2px 0 0;font-size:16px;color:var(--ink);opacity:.85;}
.qfoot{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.q.s .qfoot{margin-top:2px;}
.uncl{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.onit{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;border:1.5px solid var(--line);border-radius:999px;padding:6px 11px;min-height:32px;white-space:nowrap;color:var(--muted);background:none;cursor:pointer;}
.onit:hover{border-color:var(--ink);color:var(--ink);}
.onit.is{background:var(--okbg);border-color:var(--ok);color:var(--ok);}
.door{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.door:hover{text-decoration:underline;text-underline-offset:3px;}
.tier.watch .queue{gap:2px;}

/* put right: struck through, the hour at the right */
.putright ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.putright li{display:flex;justify-content:space-between;gap:10px;font-size:16px;padding:5px 0;border-bottom:1px dotted var(--line);}
.putright .done{display:inline-flex;align-items:baseline;gap:8px;color:var(--muted);}
.putright s{color:var(--muted);}

/* the patterns: a glyph in the margin, the finding, its figure, and its reason one tap away */
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pat{border-bottom:1px dotted var(--line);}
.pat:last-child{border-bottom:0;}
.pat > a,.pat > .pg{text-decoration:none;color:inherit;}
.plink,.pat:not(:has(> a)){display:grid;grid-template-columns:28px 1fr auto;gap:0 10px;align-items:start;padding:9px 0;}
.pg{font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.2;color:var(--ink);text-align:center;}
.pg.amber{color:var(--amber);} .pg.ok{color:var(--ok);} .pg.red{color:var(--danger);}
.pbody{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ptext{font-size:18px;line-height:1.3;}
.pdetail{font-size:15px;color:var(--muted);}
.pdetail .num{font-weight:700;color:var(--ink);}
.pwhy{font-size:14px;color:var(--muted);}
.pwhy summary{cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;list-style:none;width:max-content;}
.pwhy summary::-webkit-details-marker{display:none;}
.pwhy[open] summary{margin-bottom:2px;}
.spark{align-self:center;}

/* everything else: one tick a line; normal is paper */
.elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.el{font-size:17px;line-height:1.5;color:var(--muted);}
.el .num{font-weight:700;color:var(--ink);}
.tick{display:inline-block;font-family:var(--sans);font-weight:800;color:var(--ok);width:18px;margin-right:6px;text-align:center;}
.tick.amber{color:var(--amber);}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:8px;vertical-align:middle;}
.el .more{margin-left:8px;}
.chip.house{border-left:3px solid var(--hc,var(--line));font-family:var(--fell);font-size:15px;padding:4px 10px 4px 8px;}
.mouse{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:2px 9px 2px 5px;font-size:15px;color:var(--ink);text-decoration:none;background:var(--paper);}
.mouse.amber{border-color:color-mix(in oklab,var(--amber) 55%,var(--line));}
.mouse.red{border-color:color-mix(in oklab,var(--danger) 55%,var(--line));}

/* level 2: one house */
.crumb{margin-bottom:8px;}
.back{font-family:var(--serif);font-size:16px;color:var(--muted);padding:4px 8px 4px 0;background:none;border:0;cursor:pointer;}
.back:hover{color:var(--ink);}
.house-lead{border-left:5px solid var(--hc,var(--line));padding-left:16px;}
.house-lead .hname{font-size:40px;}
.house-lead .hword{display:block;margin:4px 0 0;}
.house-lead.intervention .hword{color:var(--danger);} .house-lead.attention .hword{color:var(--amber);}
.house-lead .strip{margin-top:10px;}
.lead2{font-family:var(--fell);font-size:24px;margin:0 0 12px;line-height:1.2;}
.lead2 .num{font-size:22px;font-weight:700;}
.yourday .tier{margin-top:10px;}
.yourday .tier h2.sc{border-bottom:0;padding-bottom:0;margin-bottom:6px;font-size:13px;}
.trow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:15px;color:var(--muted);}
.tname{font-family:var(--serif);font-size:18px;color:var(--ink);}
.tn .num{font-size:18px;color:var(--ink);font-weight:700;}
.tdir{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--ink);}
.tdir.down{color:var(--amber);} .tdir.up{color:var(--ok);}
.twhy{margin:6px 0 0;font-size:15px;color:var(--muted);}
.twhy .num{font-weight:700;}
.lists{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;}
.lrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0;border-top:1px dotted var(--line);font-size:16px;}
.lname{min-width:110px;}
.lrow .num{font-weight:700;}
.lrow.amber .num{color:var(--amber);} .lrow.red .num{color:var(--danger);}
.lmiss{color:var(--muted);font-size:15px;}
.klist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.keep{padding:7px 0;border-bottom:1px dotted var(--line);font-size:17px;}
.keep a{color:inherit;text-decoration:none;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;}
.keep a:hover b{text-decoration:underline;text-underline-offset:3px;}
.kn{color:var(--muted);font-size:15px;}
.kn .num{font-weight:700;color:var(--ink);}
.moral{display:flex;flex-direction:column;gap:8px;}
.moral .hint{margin:0;font-style:italic;color:var(--muted);}
.moral .filed{margin:0;font-size:17px;}
.moral label{font-family:var(--fellsc);font-size:13px;letter-spacing:.08em;color:var(--muted);}
.moral textarea{width:100%;font-family:var(--serif);font-size:16px;min-height:42px;}
.moral .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tag{border:1.5px solid var(--line);border-radius:999px;padding:3px 10px;font-family:var(--sans);font-size:12px;font-weight:700;background:none;color:inherit;cursor:pointer;}
.tag[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn.small{padding:7px 16px;font-size:14px;min-height:38px;border-radius:999px;}

/* the admin's desks */
.desk table{width:100%;border-collapse:collapse;font-size:15px;}
.desk td,.desk th{padding:6px 8px;border-bottom:1px dotted var(--line);text-align:left;vertical-align:top;}
.desk th{font-family:var(--fellsc);font-weight:400;letter-spacing:.08em;color:var(--muted);font-size:13px;}
.desk input,.desk select{font-size:15px;padding:6px 8px;}
.desk .settings{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:15px;}
.clock{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;}
.clock button{padding:5px 10px;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.03em;min-height:32px;background:none;border:0;color:inherit;cursor:pointer;}
.clock button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

@media (max-width:720px){
  .page{gap:28px;} h1.lead{font-size:30px;} h1.lead .num{font-size:27px;}
  .hs{grid-template-areas:"head head" "strip strip" "counts counts" "why why" "view view";} .view{justify-self:start;}
  .hs.intervention .hname{font-size:30px;} .house-lead .hname{font-size:32px;}
  .plink,.pat:not(:has(> a)){grid-template-columns:24px 1fr;} .spark{grid-column:2;}
}
@media (prefers-reduced-motion:no-preference){ .qfind,.hhead,.door,.view{transition:color .15s ease,border-color .15s ease;} }