/* `hidden` loses to any rule that sets display; this makes it win everywhere. */
[hidden]{display:none!important}

/* ---- the HR half of Pulse: policy, people, reports -------------------- */
.pagehead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.backlink{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;
  padding:0;margin-bottom:9px;display:inline-flex;gap:7px;align-items:center}
.backlink:hover{color:var(--brass-ink)}

/* filters */
.fbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:18px}
.fbar input,.fbar select{padding:8px 11px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.fbar input[type=search]{min-width:200px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--raised);color:var(--muted);font-weight:600;
  white-space:nowrap}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.warn{background:var(--brass-wash);color:var(--brass-ink)}
.chip.bad{background:var(--crit-wash);color:var(--crit)}

/* the person record */
.rec-head{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:6px}
.rec-av{width:56px;height:56px;border-radius:14px;background:var(--brass-wash);color:var(--brass-ink);
  display:flex;align-items:center;justify-content:center;font-family:Archivo,sans-serif;
  font-weight:700;font-size:19px;flex:none}
.rec-name{font-family:Archivo,sans-serif;font-size:25px;font-weight:700;letter-spacing:-.02em;
  line-height:1.15}
.rec-sub{font-size:13px;color:var(--muted);margin-top:3px}
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:20px 0 22px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--brass)}
.tabs button .n{font-family:"IBM Plex Mono",monospace;font-size:10px;margin-left:6px;opacity:.7}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-bottom:20px}
.kv > div{background:var(--surface);padding:13px 15px}
.kv .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px}
.kv .v{font-size:14px;font-weight:500}
.kv .v.big{font-family:Archivo,sans-serif;font-size:23px;font-weight:600;letter-spacing:-.02em}

.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:17px 19px;
  margin-bottom:14px}
.card h3{font-family:Archivo,sans-serif;font-size:15px;font-weight:600;margin:0 0 4px;
  letter-spacing:-.01em}
.card .blurb{font-size:12.5px;color:var(--muted);margin-bottom:15px;line-height:1.5}
.cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}

/* forms */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.grid2>*{min-width:0}
.f{min-width:0}
.f{display:block}
.f > label{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
/* a tick box is not a text field: without this it inherits the full width, the
   padding and the border, and comes out as a giant empty box */
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.f input[type=checkbox],.f input[type=radio]{width:auto;accent-color:var(--brass);
  margin:0;flex:none}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;
  border-color:var(--brass)}
.f .hint2{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45}
.f.req > label{color:var(--crit)}
.f .unit{font-size:10.5px;color:var(--brass-ink);margin-left:7px;text-transform:none;
  letter-spacing:0;font-weight:500;font-family:"IBM Plex Sans",sans-serif}
.f.inline{display:flex;align-items:flex-start;gap:12px}
.f.inline > label{margin:0;flex:1;text-transform:none;font-family:inherit;font-size:13.5px;
  letter-spacing:0;color:var(--ink);font-weight:500}
.savebar[hidden]{display:none}
.savebar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);
  padding:13px 0;margin-top:20px;display:flex;gap:10px;align-items:center;z-index:20}
.savebar .msg{font-size:12.5px;color:var(--muted)}
.btn.pri{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:600}
.btn.pri:hover{background:var(--brass-ink);border-color:var(--brass-ink)}
.btn.danger{color:var(--crit);border-color:var(--line-2)}
.btn.danger:hover{border-color:var(--crit);background:var(--crit-wash)}

/* editable tables */
.etabwrap{overflow-x:auto;max-width:100%}
.etab{width:100%;min-width:340px;border-collapse:collapse;font-size:13px}
.etab th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line-2);
  font-weight:600}
.etab td{padding:5px 6px;border-bottom:1px solid var(--line)}
.etab input:not([type=checkbox]),.etab select{width:100%;padding:7px 9px;
  border:1px solid transparent;border-radius:6px;
  background:transparent;color:var(--ink);font:inherit;font-size:12.5px}
.etab input[type=checkbox]{width:auto;accent-color:var(--brass)}
.etab input:hover,.etab select:hover{border-color:var(--line-2)}
.etab input:focus,.etab select:focus{outline:0;border-color:var(--brass);background:var(--bg)}
.etab .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:2px 6px;
  line-height:1}
.etab .x:hover{color:var(--crit)}
.etab tr.gone{opacity:.4;text-decoration:line-through}

/* timeline */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl .e{position:relative;padding:0 0 17px}
.tl .e::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--raised);border:2px solid var(--line-2)}
.tl .e.hi::before{background:var(--brass);border-color:var(--brass)}
.tl .d{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);
  letter-spacing:.05em}
.tl .t{font-size:13.5px;font-weight:500;margin-top:2px}
.tl .s{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}

/* register grid */
.regwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.reg{border-collapse:separate;border-spacing:0;font-size:11px}
.reg th,.reg td{padding:0;text-align:center}
.reg th.nm,.reg td.nm{text-align:left;padding:6px 12px;position:sticky;left:0;
  background:var(--surface);border-right:1px solid var(--line);white-space:nowrap;min-width:158px;
  font-size:12.5px;z-index:2}
.reg thead th{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--muted);
  padding:7px 0 6px;border-bottom:1px solid var(--line-2);min-width:24px}
.reg thead th.we{color:var(--brass-ink)}
.reg tbody td{border-bottom:1px solid var(--line)}
.reg .m{display:block;width:22px;height:22px;line-height:22px;margin:2px auto;border-radius:4px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600}
.m-P{background:var(--ok-wash);color:var(--ok)}
.m-L{background:#C97B1E;color:#fff}
.m-A{background:var(--crit);color:#fff}
.m-LV{background:#2C6E63;color:#fff;font-size:8px}
.m-M{background:transparent;border:1px dashed var(--crit);color:var(--crit)}
.m-H{background:var(--crit-wash);color:var(--crit)}
.m-W{background:var(--brass-wash);color:var(--brass-ink)}
.m-O{background:var(--sunk);color:var(--muted)}
.m-half{background:#8A6A2F;color:#fff}
.m-q{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.m-dot{color:var(--line-2)}
.reg .tot{font-family:"IBM Plex Mono",monospace;font-size:11px;padding:0 9px;color:var(--ink-2)}

/* report blocks */
.verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;margin:18px 0}
.verdict > div{border:1px solid var(--line);border-left-width:3px;border-radius:9px;
  padding:13px 15px;background:var(--surface)}
.verdict .a{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.verdict .c{font-family:Archivo,sans-serif;font-size:16px;font-weight:600;margin:5px 0 4px;
  letter-spacing:-.01em}
.verdict .w{font-size:12px;color:var(--ink-2);line-height:1.5}
.v-good{border-left-color:var(--ok)} .v-good .c{color:var(--ok)}
.v-warn{border-left-color:var(--warn)} .v-warn .c{color:var(--warn)}
.v-bad{border-left-color:var(--crit)} .v-bad .c{color:var(--crit)}
.bars{display:grid;gap:11px;margin:16px 0}
.bar{display:grid;grid-template-columns:150px 1fr 92px;gap:12px;align-items:center;font-size:12.5px}
.bar .t{color:var(--ink-2)}
.bar .track{display:block;height:8px;background:var(--sunk);border-radius:5px;
  overflow:visible;position:relative}
.bar .fill{display:block;height:100%;background:var(--brass);border-radius:5px;
  min-width:2px}
.bar .ghost{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink-2);opacity:.55}
.bar .n{font-family:"IBM Plex Mono",monospace;text-align:right;font-size:12px}
.up{color:var(--ok)} .down{color:var(--crit)} .flat{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.spread{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.logrow{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.logrow .when{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.logrow del{color:var(--crit);text-decoration:line-through;opacity:.75}
.logrow ins{color:var(--ok);text-decoration:none}
@media (max-width:640px){.bar{grid-template-columns:1fr;gap:5px}
  .logrow{grid-template-columns:1fr}}

/* ---- the decision picker ---------------------------------------------- */
.pick{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border-radius:9px;
  border:1px solid var(--line);margin-bottom:8px;cursor:pointer;background:var(--bg);
  transition:border-color .12s,background .12s}
.pick:hover{border-color:var(--line-2);background:var(--raised)}
.pick.sel{border-color:var(--brass);background:var(--brass-wash)}
.pick.on{opacity:1;cursor:pointer;border-color:var(--brass)}
.pick input{margin-top:3px;flex:none;accent-color:var(--brass)}
.pick b{font-size:13.5px;display:block}
.pick p{margin:4px 0 0;font-size:12px;color:var(--ink-2);line-height:1.5}
.pick.on b::after{content:" — already recorded";font-weight:400;color:var(--muted);
  font-size:11.5px}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left}
.linkish:hover{color:var(--brass-ink);text-decoration:underline}
.attrow{cursor:pointer}
.attrow:hover td{background:var(--raised)}
.chip.st-ontime{background:var(--ok-wash);color:var(--ok)}
.chip.st-latelate{background:#C97B1E;color:#fff}
.chip.st-absent{background:var(--crit);color:#fff}
.chip.st-leave{background:#2C6E63;color:#fff}
.chip.st-free{background:#3F7D6E;color:#fff}
.chip.st-half{background:#8A6A2F;color:#fff}
.chip.st-punch{background:transparent;border:1px dashed var(--crit);color:var(--crit)}
.chip.st-wfh{background:var(--brass-wash);color:var(--brass-ink)}
.chip.st-holiday{background:var(--crit-wash);color:var(--crit)}
.chip.st-off,.chip.st-none{background:var(--sunk);color:var(--muted)}
.chip.st-today{background:transparent;border:1px dashed var(--brass);color:var(--brass-ink)}
.stamp.syncing{color:var(--brass-ink)}
.stamp.syncing::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;
  border:1.5px solid var(--brass);border-right-color:transparent;border-radius:50%;
  animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

/* a list of people to tick: one row each, the name beside its box */
.tickbox{display:flex;flex-wrap:wrap;gap:7px;max-height:210px;overflow-y:auto;padding:3px 0}
.tickbox label{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:13px;
  font-family:"IBM Plex Sans",sans-serif;text-transform:none;letter-spacing:0;
  color:var(--ink);font-weight:500;white-space:nowrap;flex:0 1 auto}
.tickbox label:hover{border-color:var(--line-2);background:var(--raised)}
.tickbox label.on{border-color:var(--brass);background:var(--brass-wash);
  color:var(--brass-ink)}
.tickbox input{flex:none;accent-color:var(--brass);margin:0}
.tickall{display:flex;gap:8px;margin-bottom:8px}
.daynow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:8px 0 18px;
  padding:11px 13px;border-radius:10px;background:var(--raised);
  border:1px solid var(--line)}

/* ---- the day's facts, above its decisions ---------------------------------
   A row per person, ordered by when they arrived, so "who came when" is the
   shape of the list rather than something you have to read for. */
.dsum{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.dsum .small{color:var(--muted);font-size:11.5px}
.dfacts{display:grid;gap:4px}
/* The sheet is 620px at most, so the detail and the badges never fit on the
   same line as the name and the time. Two rows, always — clipping a reason
   like "excused by manager" is worse than spending a line on it. */
.dfrow{display:grid;grid-template-columns:20px 1fr auto;gap:4px 11px;
  align-items:center;padding:9px 11px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);font-size:12px}
.dfrow:hover{border-color:var(--line-2);background:var(--raised)}
.dfrow.on{border-color:var(--brass);background:var(--brass-wash)}
.dfrow input{margin:0;accent-color:var(--brass);align-self:start;margin-top:2px}
.dfn{font-weight:600;min-width:0}
.dfn em{display:block;font-style:normal;font-weight:400;font-size:10.5px;
  color:var(--muted)}
.dfw{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  white-space:nowrap;align-self:start;padding-top:1px}
.dfd{grid-column:2/4;color:var(--muted);font-size:11.5px;min-width:0;
  line-height:1.5}
.dfb{grid-column:2/4;display:flex;gap:5px;flex-wrap:wrap}
.dfb:empty{display:none}
.dfb .chip{font-size:10px;padding:2px 7px;white-space:normal;
  text-align:left;max-width:100%}
/* the ones who did not come read differently from the ones who did */
.dfrow.k-leave .dfw,.dfrow.k-booked .dfw{color:var(--ok)}
.dfrow.k-absent .dfw{color:var(--crit)}
.dfrow.k-pending .dfw,.dfrow.k-nothing .dfw{color:var(--muted);font-weight:400}
.dprevbox{margin-top:13px;padding:11px 13px;border-radius:9px;background:var(--sunk);
  font-size:11.5px;line-height:1.6;display:flex;gap:11px;align-items:center;
  flex-wrap:wrap}
.dprevbox b{color:var(--crit)}
.dselbar{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:12px}
.dselbar span{font-weight:600}
.dfrow.k-miss .dfw{color:var(--brass-ink)}

/* ---- agreeing to a change before anything is written ---------------------- */
.agreewarn{margin:10px 0 16px;padding:11px 13px;border-radius:9px;
  background:var(--brass-wash);color:var(--brass-ink);font-size:12px;line-height:1.6}
.agreewarn b{color:var(--brass-ink)}
.agreenow{display:flex;gap:11px;align-items:baseline;margin-bottom:14px;font-size:12.5px}
.agreenow .ck{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);flex:none}
.agreesaid{font-size:12.5px;line-height:1.6;margin-bottom:14px}
.agreelist{display:grid;gap:3px;margin-top:4px}
.agreerow{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.1fr) minmax(0,1.2fr);
  gap:10px;align-items:baseline;padding:8px 11px;border-radius:8px;
  background:var(--surface);border:1px solid var(--line);font-size:11.5px}
.agreerow b{font-weight:600}
.agreerow span{color:var(--muted)}
.agreerow em{font-style:normal;font-weight:600}
.agreelist.ok .agreerow em{color:var(--ok)}
.agreelist.bad .agreerow{border-color:var(--crit);background:var(--crit-wash)}
.agreelist.bad .agreerow em{color:var(--crit)}
.agreerow.quiet{background:var(--sunk);border-color:transparent}
.agreerow.quiet b{font-weight:500;color:var(--muted)}
.agreerow.quiet em{font-weight:400;color:var(--muted)}
.card.warn{border-color:var(--crit)}
/* a flag that is agreed but not yet saved must not look like a saved one */
.rulerow.staged{background:var(--brass-wash);border-radius:9px;
  outline:1px solid var(--brass);outline-offset:2px}
.stagedtag{display:block;margin-top:5px;font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink)}
@media (max-width:640px){
  .agreerow{grid-template-columns:1fr;gap:2px}
  .agreerow span:empty{display:none}
}

/* ---- what somebody said they did ----------------------------------------- */
.eodblock{margin-top:11px;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface)}
.eodhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px}
.eodhead b{font-size:12.5px;font-weight:600}
.eodhead span{font-size:11px;color:var(--muted)}
.eodproj{margin-top:7px}
.eodname{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brass-ink);
  background:var(--brass-wash);padding:2px 7px;border-radius:5px;margin-bottom:5px}
.eodproj ul{margin:3px 0 0;padding-left:17px}
.eodproj li{font-size:11.5px;line-height:1.65;color:var(--ink);
  overflow-wrap:anywhere}
.eodraw{margin-top:9px}
.eodraw summary{font-size:10.5px;color:var(--muted);cursor:pointer}
.eodraw pre{margin:7px 0 0;padding:10px 11px;border-radius:8px;background:var(--sunk);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;color:var(--muted);max-height:280px;
  overflow-y:auto}
.eodnote{margin-top:11px;font-size:11.5px;color:var(--muted);line-height:1.6}
.eodnote.bad{color:var(--crit)}
.eodnote b{color:inherit}

/* ---- the salary breakdown ------------------------------------------------- */
.pbrow{display:grid;grid-template-columns:minmax(120px,1fr) 110px minmax(0,1.5fr);
  gap:6px 14px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12px}
.pbrow:last-child{border-bottom:0}
.pbl{font-weight:500}
.pbv{font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right;
  white-space:nowrap}
.pbw{font-size:11px;color:var(--muted);line-height:1.55}
.pbrow.neg .pbv{color:var(--crit)}
.pbrow.tot{border-top:1px solid var(--ink);border-bottom:0;margin-top:4px;padding-top:11px}
.pbrow.tot .pbl{font-weight:700}
.pbrow.tot .pbv{font-size:15px}
.pbrow.sub .pbv{font-size:14px}
.pbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pbgrid > div{background:var(--surface);padding:9px 11px;display:flex;
  flex-direction:column;gap:2px}
.pbgrid span{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.pbgrid b{font-size:14px;font-weight:600}
@media (max-width:640px){
  .pbrow{grid-template-columns:1fr auto}
  .pbw{grid-column:1/3}
  .pbv{text-align:left}
}

/* ---- one person, every day of the cycle ---------------------------------
   A wide table on purpose: the whole point is that in, out, late, lunch, EOD and
   leave are readable together. Splitting them across screens is what made people
   ask for a printable report to answer one question. */
.pane.wide { max-width: 96vw; }
.dtot { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 11px; overflow: hidden; margin: 12px 0 14px; }
.dtot > div { background: var(--card); padding: 10px 12px; }
.dtot span { display: block; font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.dtot b { font-size: 15px; font-variant-numeric: tabular-nums; }
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
table.dtab { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.dtab th { position: sticky; top: 0; z-index: 1; background: var(--sunk);
  text-align: right; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 9px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--line-2); }
table.dtab th.l, table.dtab td.l { text-align: left; }
table.dtab td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line);
  vertical-align: top; }
table.dtab tr.dr:hover td { background: var(--sunk); }
table.dtab tr.off td { color: var(--muted); }
table.dtab tr.bad td { background: rgba(180, 69, 58, .07); }
table.dtab tr.hasov td { box-shadow: inset 3px 0 0 var(--brass); }
table.dtab .nil { color: var(--line-2); }
table.dtab .why { color: var(--muted); max-width: 260px; white-space: normal; }
table.dtab .nowrap { white-space: nowrap; }
table.dtab i.small { font-style: normal; font-size: 10.5px; color: var(--muted);
  margin-left: 3px; }
table.dtab i.small.down, table.dtab b.down { color: var(--bad); }
table.dtab b.muted { color: var(--muted); font-weight: 500; }
table.dtab .chip.st { font-size: 9.5px; padding: 2px 6px; }
tr.eodrow td { padding: 0 8px 9px 8px; border-bottom: 1px solid var(--line); }
.eodtext { font-size: 11.5px; color: var(--muted); line-height: 1.55;
  background: var(--sunk); border-radius: 8px; padding: 8px 10px; max-width: 900px; }
.btn.tiny { padding: 3px 8px; font-size: 11px; }
.btn.wide { display: block; width: 100%; text-align: left; }
.btn.wide b { display: block; font-size: 13px; }
.btn.wide span { display: block; font-size: 11.5px; color: var(--muted);
  margin-top: 2px; line-height: 1.45; white-space: normal; }
/* EOD text folds away — the table is meant to be read as a whole cycle */
tr.eodrow { display: none; }
tr.eodrow.open { display: table-row; }
.dtabbar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
button.linkish.eodtoggle { font: inherit; color: inherit; text-align: right;
  display: block; width: 100%; }
button.linkish.eodtoggle:hover { text-decoration: underline; }
/* the leave detail folded under a person's row */
tr.lvdet > td { padding: 0 0 14px 0; background: var(--sunk); }
tr.lvdet table.dtab { border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; margin: 0 12px; width: calc(100% - 24px); }
/* the wallet balance, on the sheet where it gets spent */
.wbal { margin: 2px 0 14px; padding: 8px 11px; border-radius: 8px;
  background: var(--sunk); border: 1px solid var(--line); font-size: 12px;
  color: var(--muted); }
.wbal b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wbal.short { border-color: var(--crit); }
.wbal.short b { color: var(--crit); }
.btn.wide span em { display: block; font-style: normal; margin-top: 3px;
  color: var(--brass-ink); }
.btn.wide[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- one colour vocabulary for the day table ---------------------------
   red      it is costing money right now
   amber    somebody decided something, or the machine has a gap
   green    better than what was asked for
   grey     nothing was expected of this day
   A table where every figure is the same colour is a table nobody reads, so
   these are the only four meanings and they are used consistently. */
table.dtab .bad, p.hint .bad { color: var(--crit); font-weight: 600; }
table.dtab .decided, p.hint .decided { color: var(--brass-ink); font-weight: 600; }
table.dtab .good { color: var(--ok); font-weight: 600; }
table.dtab .chip.st { font-weight: 600; letter-spacing: .04em; }
table.dtab .chip.st.st-p    { background: var(--ok-wash);    color: var(--ok); }
table.dtab .chip.st.st-abs  { background: var(--crit-wash);  color: var(--crit); }
table.dtab .chip.st.st-miss { background: var(--brass-wash); color: var(--brass-ink); }
table.dtab .chip.st.st-lv   { background: var(--ok-wash);    color: var(--ok); }
table.dtab .chip.st.st-half { background: var(--brass-wash); color: var(--brass-ink); }
table.dtab .chip.st.st-wfh  { background: var(--brass-wash); color: var(--brass-ink); }
table.dtab .chip.st.st-wo   { background: transparent; color: var(--line-2);
  box-shadow: inset 0 0 0 1px var(--line); }
/* the row itself, so a bad day is visible before any column is read */
table.dtab tr.dr.bad td { background: rgba(180, 69, 58, .07); }
table.dtab tr.dr.hasov td { box-shadow: inset 3px 0 0 var(--brass); }
/* a decision that cannot be taken right now says why, rather than vanishing */
label.pick.off { opacity: .55; }
label.pick.off input { cursor: not-allowed; }
label.pick span p em { display: block; font-style: normal; margin-top: 4px;
  color: var(--brass-ink); }

/* Sending a summary: the message itself is the important thing on the screen,
   so it is shown as it will arrive — monospaced, wrapped, nothing reflowed —
   with the tick that decides whether it goes sitting directly above it. */
.prev{border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  margin:8px 0;background:var(--surface)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--ink);cursor:pointer}
.slackmsg{margin:8px 0 0;padding:10px 12px;border-radius:6px;
  background:var(--sunk);border:1px solid var(--line);
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.sect{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 6px}

/* Standings. The reasons carry this screen, so the bars are quiet and the
   sentences beside them are not. */
.wincard{border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:8px;padding:14px 16px;margin:4px 0 18px;background:var(--surface)}
.wincard h3{margin:2px 0 2px}
.whylist{margin:8px 0 0;padding-left:18px}
.whylist li{font-size:12.5px;margin:3px 0}
.wkrow{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.wkcard{border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  min-width:132px;background:var(--surface)}
.wkcard.none{opacity:.55}
.wkn{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.wkw{font-size:13px;font-weight:600;margin-top:2px}
.liftcard{border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  margin:6px 0;background:var(--surface)}
.axline{padding:9px 0;border-bottom:1px solid var(--line)}
.axhead{display:flex;align-items:baseline;gap:6px;font-size:12.5px}
.axhead .mono{margin-left:auto}
.axbar{height:6px;border-radius:4px;background:var(--sunk);margin:5px 0 4px;
  overflow:hidden}
.axbar i{display:block;height:100%;background:var(--ink)}
.axbar.good i{background:#2E7D4F} .axbar.warn i{background:#B7791F}
.axbar.bad i{background:#A93226}
.rankrow{cursor:pointer}
.dtab td.l .d{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.rankpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rankpick label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;
  overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--muted);
  font:inherit;font-size:12px;padding:5px 11px;cursor:pointer}
.seg button.on{background:var(--sunk);color:var(--ink);font-weight:600}
.wincard.supreme{border-left-color:#8A5414;background:linear-gradient(
  to right, rgba(138,84,20,.06), transparent 60%)}
.tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:#8A5414;color:#fff;padding:2px 6px;border-radius:4px;
  vertical-align:middle;margin-left:4px}
.note{margin:12px 0 4px;padding:12px 14px;border-radius:8px;
  background:var(--sunk);font-size:13px;line-height:1.6}
.note.dim{opacity:.75}
.notebody{margin:7px 0 0}
.notestep{margin:10px 0 8px;padding-top:9px;border-top:1px solid var(--line)}

/* The day sheet's action bar. It used to sit below a dozen options, off the
   bottom of the pane — you picked something and the button that applies it was
   nowhere to be seen. */
.dkbar{position:sticky;bottom:0;display:flex;gap:9px;flex-wrap:wrap;
  align-items:center;margin:0 -18px -18px;padding:14px 18px;
  background:var(--surface);border-top:1px solid var(--line);z-index:3}
.dkerr{color:var(--crit,#A93226);font-size:12.5px;flex:1 1 100%}
/* An option already recorded is marked, not locked — choosing it again simply
   restates it with a fresh reason. Greying it out was indistinguishable from
   removing it. */
.pick.on{border-color:var(--brass);opacity:1}