/* The frozen revision-3 design, lifted from the approved artboards.
   Source: /root/cr/design/*.dc.html — Main, Cases, Waiting, Deadlines,
   MasterIssues and Navigation. The UX is frozen (spec, "What frozen means"),
   so this file is not authored: it is the design, carried across unchanged,
   with the artboard scaffolding removed and a handful of additions at the
   bottom for states the artboards do not draw (empty screens, focus rings).
*/
:root{
  --ground:#EEF1F3; --panel:#FFFFFF; --p2:#F6F8F9; --p3:#E9EEF0;
  --ink:#0F1B1E; --soft:#4B5C60; --faint:#78898D;
  --rule:#D2DBDD; --rules:#E3E9EA;
  --ac:#17635C; --acs:#DFEDEB;
  --al:#C0391A; --als:#FAE6E0;
  --wn:#A9760D; --wns:#FAF0DC;
  --ok:#2C6B4C; --oks:#E1EFE7;
  --sh:0 1px 2px rgba(15,27,30,.05),0 6px 18px -10px rgba(15,27,30,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
a{color:var(--ac);text-decoration:none}
a:hover{color:#0F4A45}

/* shell */
.shell{display:flex;min-height:100vh}
html,body{height:100%}
.side{width:212px;flex-shrink:0;background:var(--p2);border-right:1px solid var(--rule);
  padding:20px 12px;display:flex;flex-direction:column;gap:2px}
.logo{font-weight:700;font-size:16px;letter-spacing:-.02em;padding:0 10px 4px;line-height:1.2}
.logo em{font-style:normal;color:var(--ac)}
.logosub{font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:0 10px 16px}
.nav{display:flex;flex-direction:column;gap:1px}
.nv{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;font-size:13.5px;
  font-weight:500;color:var(--soft)}
.nv .ic{width:16px;height:16px;flex-shrink:0;opacity:.8}
.nv .lb{flex:1}
.nv .bd{font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.nv.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--sh)}
.nv.on .bd{color:var(--ac);font-weight:600}
.nv.hot .bd{color:var(--al);font-weight:600}
.navgap{height:14px}
.navlbl{font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:8px 10px 5px}
.nv.later{opacity:.42}
.nv.pin{font-size:12.5px;color:var(--faint)}
.nv.pin .lb{line-height:1.25}
.nv.pin.on{background:var(--panel);color:var(--ink);font-weight:600}
.plusmenu{background:var(--panel);border:1px solid var(--rule);border-radius:9px;
  box-shadow:0 14px 34px -14px rgba(15,27,30,.4);padding:5px;margin-bottom:8px}
.pm{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:6px;font-size:13.5px;font-weight:500}
.pm:first-child{background:var(--acs);color:var(--ac)}
.pm .kb{margin-left:auto;font-family:"IBM Plex Mono";font-size:10px;color:var(--faint);
  border:1px solid var(--rule);border-radius:3px;padding:0 4px}
.nv.later .bd{font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.addbtn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--ac);color:#fff;border-radius:7px;padding:10px;font-size:13.5px;font-weight:600}

/* main */
.main{flex:1;min-width:0;padding:26px 30px 34px;display:flex;flex-direction:column}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.sub{margin:7px 0 0;font-size:15.5px;color:var(--soft);line-height:1.45;max-width:560px}
.sub b{color:var(--ink);font-weight:600}
.stamp{font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);text-align:right;white-space:nowrap;
  line-height:1.7}
h2{margin:24px 0 9px;font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:8px}
h2 .n{background:var(--p3);color:var(--soft);padding:1px 6px;border-radius:3px;letter-spacing:0}
h2:first-of-type{margin-top:0}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--sh);overflow:hidden}

/* deadline band */
.band{background:var(--als);border:1px solid var(--al);border-radius:9px;overflow:hidden}
.bandh{display:flex;align-items:center;gap:7px;padding:9px 14px;border-bottom:1px solid rgba(192,57,26,.3);
  font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--al)}
.bandr{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid rgba(192,57,26,.16)}
.bandr:last-child{border-bottom:0}
.bandr .t{flex:1;font-size:14.5px;font-weight:500;color:#8E2A12}
.bandr .m{font-family:"IBM Plex Mono";font-size:12px;color:#A8341A}
.bandr .d{font-family:"IBM Plex Mono";font-size:12.5px;font-weight:600;color:var(--al);
  white-space:nowrap;min-width:82px;text-align:right}

/* rows */
.row{display:flex;gap:12px;padding:13px 15px;border-bottom:1px solid var(--rules);align-items:flex-start}
.row:last-child{border-bottom:0}
.pill{font-family:"IBM Plex Mono";font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;margin-top:2px;min-width:70px;text-align:center}
.p-woke{background:var(--acs);color:var(--ac)}
.p-over{background:var(--als);color:var(--al)}
.p-new{background:var(--p3);color:var(--soft)}
.p-wait{background:var(--wns);color:var(--wn)}
.p-done{background:var(--oks);color:var(--ok)}
.p-dl{background:var(--panel);color:var(--al);border:1px solid var(--al)}
.unconf{font-family:"IBM Plex Mono";font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  border:1px dashed var(--faint);color:var(--faint);padding:1px 5px;border-radius:3px}
.subnote{font-size:12px;color:var(--faint);margin:-4px 0 8px}
/* --- stakes --- */
.stakes{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.stake{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:600;padding:2px 6px;border-radius:3px}
.s-date{background:var(--als);color:var(--al)}
.s-money{background:var(--acs);color:var(--ac)}
.s-legal{background:var(--wns);color:var(--wn)}
.s-stock{background:var(--wns);color:var(--wn)}
.s-late{background:var(--als);color:var(--al)}
.why{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.bigrow{display:flex;gap:13px;padding:15px 16px 15px 13px;border-bottom:1px solid var(--rules);
  align-items:flex-start;border-left:3px solid var(--al)}
.bigrow:last-child{border-bottom:0}
.bigrow.amber{border-left-color:var(--wn)}
.bigrow .rt{font-size:16.5px;font-weight:600;line-height:1.3}
/* --- changed since --- */
.chg{background:var(--panel);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--sh);
  overflow:hidden;margin-bottom:14px}
.chgh{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:"IBM Plex Mono";
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:600;
  border-bottom:1px solid var(--rules)}
.chgh .cnt{background:var(--p3);color:var(--soft);padding:1px 6px;border-radius:3px;letter-spacing:0}
.chgr{display:flex;gap:11px;padding:8px 14px;font-size:13.5px;color:var(--soft);align-items:baseline}
.chgr .dt{font-family:"IBM Plex Mono";font-size:10.5px;color:var(--faint);min-width:44px}
.chgr b{color:var(--ink);font-weight:600}
/* --- waiting summary --- */
.sum{display:grid;grid-template-columns:190px 1fr 210px;gap:0;background:var(--panel);
  border:1px solid var(--rule);border-radius:9px;box-shadow:var(--sh);overflow:hidden;margin-bottom:18px}
.sumbig{padding:18px 20px;border-right:1px solid var(--rules)}
.sumbig .n{font-family:"IBM Plex Mono";font-size:40px;font-weight:600;line-height:1;color:var(--ac)}
.sumbig .l{font-size:12.5px;color:var(--faint);margin-top:6px}
.summid{padding:15px 20px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.sr{display:flex;align-items:center;gap:10px;font-size:13px}
.sr .w{min-width:112px;color:var(--soft)}
.sr .bar{flex:1;height:6px;background:var(--p3);border-radius:3px;overflow:hidden}
.sr .bar i{display:block;height:100%;background:var(--ac);border-radius:3px}
.sr .n{font-family:"IBM Plex Mono";font-size:12px;font-weight:600;min-width:20px;text-align:right}
.sumr{padding:18px 20px;border-left:1px solid var(--rules);background:var(--p2);
  display:flex;flex-direction:column;justify-content:center}
.sumr .l{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:5px}
.sumr .v{font-size:16px;font-weight:600}
.sumr .s{font-size:12.5px;color:var(--faint);margin-top:3px}
/* --- suggestion --- */
.sug{border:1px dashed var(--ac);background:var(--acs);border-radius:9px;padding:14px 16px}
.sug .lb{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.sug .big{font-size:17px;font-weight:600;margin-bottom:4px}
.sug .q{font-size:13px;color:var(--soft);line-height:1.5;margin-bottom:12px}
.sug .q i{color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--panel)}
.seg span{padding:8px 14px;font-size:13.5px;font-weight:500;color:var(--soft);border-right:1px solid var(--rule)}
.seg span:last-child{border-right:0}
.seg span.on{background:var(--ac);color:#fff;font-weight:600}
.actby{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;background:var(--wns);color:var(--wn);padding:2px 6px;border-radius:3px}
.reclass{font-size:11.5px;color:var(--ac);font-family:"IBM Plex Mono";letter-spacing:.02em;
  border-bottom:1px dotted var(--ac);cursor:pointer}
.classtag{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--p3);color:var(--soft);padding:1.5px 6px;border-radius:3px;font-weight:600}
.notyet{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border:1px dashed var(--faint);border-radius:3px;padding:1px 5px}
.rb{flex:1;min-width:0}
.rt{font-weight:500;font-size:15px;line-height:1.35}
.rm{font-size:12.5px;color:var(--faint);display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;align-items:baseline}
.rm .pty{color:var(--soft)}
.rm .val{font-family:"IBM Plex Mono";color:var(--ac);font-weight:500}
/* Spec 7.4 — value that is not owed to you renders muted and says "blocked,
   not owed". ATTACK: "blk" is also the name of the card block the case screen
   and the Add form are built from — `.blk{padding:16px 18px;border-bottom:1px
   solid var(--rules)}` — and that rule matched too. So on Cases the amount on
   every blocked case became a block-level box 52px tall with a grey rule under
   it: "£44,663.90 blocked, not owed" sat in a hole in the middle of the row
   with a line beneath that read as the start of a second row. Spec 7.4's point
   is that blocked money is the SAME kind of thing, drawn quieter. The class
   name is asserted by tests/test_week2_screens.py, so the two meanings are
   separated here instead: the muting, and everything the other `blk` must not
   bring with it. */
.rm .val.blk{color:var(--faint);display:inline;padding:0;border:0}
.rm .sil{font-family:"IBM Plex Mono"}
.rm .sil.hot{color:var(--al);font-weight:600}
.rr{flex-shrink:0;text-align:right;font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);
  padding-top:3px;line-height:1.6}
.rr .lk{background:var(--acs);color:var(--ac);padding:1px 5px;border-radius:3px;font-weight:600}
.na{font-size:13px;color:var(--soft);margin-top:5px;padding-left:11px;border-left:2px solid var(--acs)}

/* quiet footer */
.quiet{margin-top:auto;padding-top:22px}
.quietbox{border:1px dashed var(--rule);border-radius:9px;padding:14px 16px;display:flex;
  align-items:center;gap:12px;color:var(--faint);font-size:13.5px}
.quietbox b{color:var(--soft);font-weight:600}

/* tasks */
.tk{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--rules);font-size:14.5px}
.tk:last-child{border-bottom:0}
.box{width:17px;height:17px;border:1.5px solid var(--rule);border-radius:4px;flex-shrink:0;background:var(--panel)}
.box.on{background:var(--ok);border-color:var(--ok);display:flex;align-items:center;justify-content:center}
.tk .tt{flex:1}
.tk.done .tt{color:var(--faint);text-decoration:line-through}
.cad{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* chips + buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--ink)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.dgr{color:var(--al);border-color:#E3B3A5}
.btn.sm{padding:5px 9px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--rule);
  border-radius:20px;padding:6px 13px;font-size:13px;font-weight:500;color:var(--soft)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
.bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* detail */
.two{display:grid;grid-template-columns:1fr 296px;gap:18px}
.blk{padding:16px 18px;border-bottom:1px solid var(--rules)}
.blk:last-child{border-bottom:0}
.blkh{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:8px}
.nextact{background:var(--acs);border-left:3px solid var(--ac);border-radius:0 6px 6px 0;padding:12px 15px}
.nextact .lb{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);font-weight:600;margin-bottom:4px}
.nextact .tx{font-size:15px;font-weight:500}
.facts{display:flex;flex-direction:column}
.f{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rules);font-size:13px}
.f:last-child{border-bottom:0}
.f .k{color:var(--faint)}
.f .v{font-weight:600;text-align:right}
.f .v.al{color:var(--al)}
.f .v.mono{font-family:"IBM Plex Mono";font-size:12.5px}
.ev{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--rules);font-size:13.5px;color:var(--soft);line-height:1.5}
.ev:last-child{border-bottom:0}
.ev .dt{font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);white-space:nowrap;min-width:52px;padding-top:2px}
.doc{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--rules);font-size:13.5px}
.doc:last-child{border-bottom:0}
.doc .nm{flex:1;color:var(--soft)}
.doc .sz{font-family:"IBM Plex Mono";font-size:11px;color:var(--faint)}

/* master */
.master{border:1.5px solid var(--ac);border-radius:10px;background:var(--panel);box-shadow:var(--sh);overflow:hidden}
.masterh{padding:15px 17px;border-bottom:1px solid var(--acs);background:var(--acs)}
.kidrow{display:flex;align-items:center;gap:12px;padding:11px 17px 11px 34px;border-bottom:1px solid var(--rules);
  position:relative;font-size:13.5px}
.kidrow:last-child{border-bottom:0}
.kidrow:before{content:"";position:absolute;left:19px;top:0;bottom:0;width:1px;background:var(--rule)}
.kidrow:after{content:"";position:absolute;left:19px;top:50%;width:9px;height:1px;background:var(--rule)}
.kidrow.last:before{bottom:50%}

/* form */
.field{margin-bottom:16px}
/* The field's own caption, and only that.
   ATTACK: this was `.field label`, which was right while every control on
   every artboard was a `<div>`. Stage 3 rebuilt the date presets, the cadence
   chips, the weekday chips and the yes/no segments as real `<label>`s wrapped
   round real radios — and every one of them landed inside a `.field`, so they
   inherited the caption's 9.5px uppercase mono. The AddCase artboard draws
   "Today · Tomorrow · 3 days · 7 days · Next Monday · Pick a date…"; the
   screen was drawing "TODAY · TOMORROW · 3 DAYS · 7 DAYS · NEXT MONDAY · PICK
   A DATE…" in type a third of the size, on every picker in the Control Room.
   The child combinator is the whole fix: a caption is the field's own child; a
   chip is not. */
.field > label,.field > legend{display:block;font-family:"IBM Plex Mono";font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;
  margin-bottom:6px}
/* The artboard draws every .inp as a block-level div, so it fills its
   field. Built as an <input> it took its intrinsic width instead: on the
   phone the "what happens next?" box in Add's two-column strip hung 65px
   off the right edge of the screen, and the title box on Add cut its own
   placeholder in half. One line, and both viewports match the design. */
.inp{background:var(--p2);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;
  font-size:15px;color:var(--ink);width:100%;max-width:100%}
.inp.big{font-size:19px;font-weight:500;padding:14px 15px}
.inp.ph{color:var(--faint);font-weight:400}
.hint{font-size:12px;color:var(--faint);margin-top:6px}

/* flow strips */
.flow{padding:26px 30px;background:var(--ground)}
.flowh{margin-bottom:4px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.flowq{font-size:15px;color:var(--soft);margin-bottom:20px;font-style:italic}
.steps{display:flex;align-items:stretch;gap:0}
.step{flex:1;min-width:0}
.stepn{font-family:"IBM Plex Mono";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:7px;display:flex;gap:7px;align-items:center}
.stepn .i{width:17px;height:17px;border-radius:50%;background:var(--ac);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:9.5px;letter-spacing:0}
.arrow{width:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding-top:22px}
.cap{font-size:13px;color:var(--soft);margin-top:9px;line-height:1.5}
.cap b{color:var(--ink);font-weight:600}
.pop{background:var(--panel);border:1px solid var(--rule);border-radius:9px;box-shadow:0 12px 32px -12px rgba(15,27,30,.34);padding:15px}
.poph{font-size:14.5px;font-weight:600;margin-bottom:11px}
.navwrap{padding:30px 34px;display:flex;flex-direction:column;gap:26px}
.navcols{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--sh);
  padding:18px 20px}
.rule-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--rules);align-items:flex-start}
.rule-row:last-child{border-bottom:0}
.rule-row .k{min-width:190px;font-weight:600;font-size:14px}
.rule-row .v{flex:1;font-size:13.5px;color:var(--soft);line-height:1.55}
.phbar{background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden;width:330px}
.phbar .t{display:flex;padding:9px 6px}
.phbar .i{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--faint)}
.phbar .i.on{color:var(--ac);font-weight:600}

/* ---------------------------------------------------------------------------
   Additions. Everything above is the frozen design. Everything below is a
   state the artboards do not draw — an empty screen, a focus ring, the scroll
   the red bar is allowed to have — written to match it.
   --------------------------------------------------------------------------- */

/* Spec 4.3: "If the list is long the band scrolls; it does not shorten."
   The only cap permitted anywhere on Today, and it is a scroll, not a cut. */
.band .bandrows{max-height:340px;overflow-y:auto}

.empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:13.5px}
.empty strong{color:var(--soft);font-weight:600}

a.nv:focus-visible,a.chip:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ac);outline-offset:2px}
a.row,a.bigrow,a.bandr,a.wr{color:inherit;display:flex;text-decoration:none}
a.row:hover,a.bigrow:hover,a.wr:hover{background:var(--p2)}
a.bandr:hover{background:rgba(192,57,26,.06)}

/* A row that is a link, without the row being an anchor.
   -------------------------------------------------------------------------
   ATTACK: Cases and Today drew each row as one `<a>`, and the metadata line
   inside it carries spec 9.3's "4 case numbers" link. Chromium does not nest
   anchors: it closed the outer one at the inner one and opened a fresh one
   after, so every row with more than one case number came apart into four
   stacked fragments, with the title, the metadata and the entire right-hand
   date column standing outside the link. It hit the five largest arguments in
   the business, on the screen that exists to list all of them.

   A row is a link or it contains links, never both. The row is not a link: it
   CONTAINS one, stretched across it and named with the row's title, so the
   whole row is still one press — which matters most on a phone — while every
   real link and control inside the row stands above it and is still reachable
   in its own right. */
.row,.bigrow{position:relative}
a.rowlink{position:absolute;inset:0;color:inherit;text-decoration:none}
.row .rm a,.bigrow .rm a,.row form,.bigrow form,.row button,.bigrow button,
.row select,.bigrow select,.row input,.bigrow input,.row label,.bigrow label{
  position:relative;z-index:1}
.row:has(a.rowlink):hover,.bigrow:has(a.rowlink):hover{background:var(--p2)}
a.rowlink:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* A name for a control that the design does not draw a caption for. It is in
   the page and in the accessibility tree; it is only not painted. Twelve
   `<label>`s named nothing at all before this existed — a screen reader read
   the date box on every picker as "date, edit". */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A group of radios is named by a legend, not by a label with nothing to point
   at. The fieldset is invisible; it is here for the name, and it inherits the
   caption the design draws. */
fieldset.field{border:0;margin:0 0 16px;padding:0;min-width:0}
.field > legend{padding:0}

/* Spec 4.1's three exits, on the say-so panel: accept, change or ignore, drawn
   as the artboard draws them — three words in the sentence — and built as
   three submit buttons on one form, each with its own `formaction`, so the
   three routes stay three routes with no script involved. */
.sayso{display:inline;font-size:inherit}
.exit{background:none;border:0;padding:0;font:inherit;color:var(--ac);
  font-weight:600;cursor:pointer;border-bottom:1px solid var(--acs)}
.exit:hover{border-bottom-color:var(--ac)}
.sayso-when{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-left:8px;font-size:12px;color:var(--faint)}
.sayso-when label{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.chip{cursor:pointer}
input.search{flex:1;min-width:200px;border:1px solid var(--rule);border-radius:20px;
  padding:6px 14px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--panel)}
input.search::placeholder{color:var(--faint)}

/* The reconciliation strip. Not in the design, because the design assumes the
   numbers agree. This says so out loud, on every screen, in the smallest type
   on the page — spec 18.5's checks, standing where they can be seen. */
.recon{margin-top:16px;border-top:1px dashed var(--rule);padding-top:10px;
  font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.04em;color:var(--faint)}
.recon.bad{color:var(--al);font-weight:600}
.recon ul{margin:6px 0 0;padding-left:16px}

/* ---------------------------------------------------------------------------
   The flow artboards. These eight rules are drawn on FlowAddNumber,
   FlowChased, FlowDateAuthority, FlowDeadline, FlowMoneyUnknown, FlowNewTask,
   FlowQuickAdd, FlowReclassify, FlowReplied, FlowResolve and FlowSnooze, and
   were the only part of the frozen design with no rule in this file — so the
   panels, notes, toasts, option rows and warnings those flows are built from
   had nothing to be drawn with. Carried across unchanged, like everything
   above them.
   --------------------------------------------------------------------------- */
.frame{background:var(--panel);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--sh);
  overflow:hidden}
.tint{background:var(--p2);border:1px dashed var(--rule);border-radius:9px;padding:13px 15px;
  font-size:13px;color:var(--soft);line-height:1.5}
.toast{display:flex;align-items:center;gap:9px;background:var(--oks);border:1px solid #A9CFB9;
  border-radius:8px;padding:11px 13px;font-size:13.5px;color:#1E5238;font-weight:500}
.optcol{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--rule);
  border-radius:7px;font-size:13.5px;background:var(--panel)}
.opt.on{border-color:var(--ac);background:var(--acs);color:var(--ac);font-weight:600}
.opt.off{opacity:.38}
.warnbox{background:var(--wns);border:1px solid #DCC084;border-radius:8px;padding:12px 14px;
  font-size:13px;color:#7A5508;line-height:1.5}

/* Spec 4.2 — "It cannot be set down past it. The date picker greys out later
   dates and says why." FlowDeadline draws the greyed chip and the reason under
   it; there was no style for a chip that cannot be pressed, so the one thing
   that had to look unavailable looked exactly like the ones that worked. */
.chip.off{opacity:.35;cursor:default}
.chip.off:hover{background:var(--panel)}
.whynot{font-size:12px;color:var(--al);margin-top:6px}

/* ===========================================================================
   STAGE 3 — the screens you can press, and the same screens on a phone.
   Everything above is the frozen revision-3 design. Everything here is either
   a real control wearing a drawn control's clothes, or a state the artboards
   do not draw.
   =========================================================================== */

/* The artboards draw every control as a div, because an artboard cannot be
   pressed. These are the real elements — a radio inside its own label, a
   button where a div was drawn — made to look exactly like the drawing. The
   input stays in the accessibility tree and is reachable by keyboard; it is
   simply not painted. */
.pick{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
label.chip,label.opt,.seg label{cursor:pointer;user-select:none}
label.chip:has(.pick:checked){background:var(--ac);border-color:var(--ac);color:#fff}
.seg label{padding:8px 14px;font-size:13.5px;font-weight:500;color:var(--soft);
  border-right:1px solid var(--rule)}
.seg label:last-child{border-right:0}
.seg label:has(.pick:checked){background:var(--ac);color:#fff;font-weight:600}
label.opt:has(.pick:checked){border-color:var(--ac);background:var(--acs);
  color:var(--ac);font-weight:600}
/* Focus has to be visible on the thing you can see, not on the hidden input. */
label.chip:has(.pick:focus-visible),label.opt:has(.pick:focus-visible),
.seg label:has(.pick:focus-visible){outline:2px solid var(--ac);outline-offset:2px}

button.box{cursor:pointer;padding:0}
button.opt{width:100%;text-align:left;font-family:inherit;cursor:pointer}
button.opt:hover{border-color:var(--ac);background:var(--acs)}
button.reclass{background:none;border:0;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;color:var(--ac);border-bottom:1px dotted var(--ac);cursor:pointer;padding:0}
form.tk{width:100%}
a.btn{text-decoration:none}
a.pm{text-decoration:none}

/* Form fields. `.inp` is drawn; these are the shapes the artboards never had
   to draw because nothing on them could be typed into. */
textarea.inp{font-family:inherit;line-height:1.5;resize:vertical}
select.inp{font-family:inherit;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.inp-date{border:0;background:transparent;font-family:inherit;font-size:12px;
  color:inherit;width:120px;margin-left:6px}
.inp-inline{border:1px solid var(--rule);border-radius:6px;background:var(--panel);
  font-family:inherit;font-size:12px;color:var(--ink);padding:3px 6px}
input[type=file].inp{padding:7px 9px;font-size:12.5px}

/* The confirmation and the refusal, at the top of the screen you were on. A
   refusal is a sentence you can act on; it is never a stack trace and never a
   silent no-op. */
.toast a,.warnbox a{color:inherit;text-decoration:underline}

/* ---------------------------------------------------------------------------
   The phone. Spec 12, clarified 25 August: mobile is the same Control Room,
   rendered responsively — not a second product. The desktop rule wins every
   contradiction with the phone artboard, so this file changes the LAYOUT and
   never the content: the red bar stays first, the act-by gap stays on every
   row, the bottom line keeps its split, and the tabs carry their counts.

   Nothing below may hide anything that carries information. A @media rule here
   may move something, stack it, or re-order it; the four tabs, the floating +
   and the saved-views strip may appear, and the sidebar may stand down in
   their favour, because between them they reach everywhere it reached. That is
   the whole licence, and tests/test_stage3_mobile.py parses this file to hold
   it to it.
   --------------------------------------------------------------------------- */

/* Three things the desktop does not need, hidden here rather than in a @media
   block, so that every @media rule below only ever turns something ON. */
.fab{display:none}
.phbar{display:none}
.phviews{display:none}

/* How much room the furniture at the bottom of a phone screen takes. The bar
   is about 69px plus the home indicator; the floating + sits above it, and its
   top edge is 126px off the bottom. `.main` reserves the larger of the two, so
   that neither can ever come to rest on the last line of the page. */
:root{--phfab-clear:140px}

@media (max-width: 900px){
  /* The sidebar becomes the bottom bar. It is the same four destinations with
     the same counts — spec 5.1's identity has to hold on a phone too. */
  .side{display:none}
  .shell{display:block}
  /* ATTACK: the bottom padding cleared the bar (92px) but not the floating +,
     whose top edge is 126px off the bottom. Scrolled to the end of Today, the
     + sat squarely on the reconciliation strip and covered the words "= open
     cases". A screen whose own furniture hides its numbers is exactly the
     failure spec 12 forbids on a phone. */
  .main{padding:16px 14px var(--phfab-clear);max-width:none}
  .head{flex-direction:column;gap:10px}
  .stamp{text-align:left}
  h1{font-size:22px}
  .sub{font-size:14.5px;max-width:none}

  .phbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--panel);border:0;border-top:1px solid var(--rule);width:auto;
    border-radius:0;padding-bottom:env(safe-area-inset-bottom)}
  /* 48px, not 44: 44 is the floor Apple and Google both give, and a floor is
     not a target. Measured, a tab comes out 98 x 68.

     ATTACK: this comment stated a standard the file kept in two places and
     broke everywhere else. Measured at 390 x 844: the task tick box — the
     primary gesture on the Tasks screen and on Today's recurring work — was
     17 x 17; the three exits on a note to self were 26px; the case screen's
     action bar was 35px; Waiting's filter chips were 34px; and "change this"
     and "remove" had no padding at all, so their target was the height of the
     type. A comment claiming a standard it does not keep is worse than no
     comment, because it is the reason nobody measures. Every rule from here to
     the end of this block is that standard, actually applied.

     Where the design draws something smaller than 48 — the 17px tick box is
     the design, and growing it would be a different screen — the PAINT stays
     as drawn and the TARGET around it is 48, which is the thing the rule is
     about. */
  .ph-t{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    min-height:48px;justify-content:center;
    padding:8px 4px 7px;font-size:10px;color:var(--faint);text-decoration:none}
  .ph-t.on{color:var(--ac);font-weight:600}
  .ph-t b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
    font-weight:600;font-variant-numeric:tabular-nums}

  .fab{display:flex;position:fixed;right:16px;bottom:74px;z-index:61;
    width:52px;height:52px;min-width:48px;min-height:48px;border-radius:26px;
    background:var(--ac);align-items:center;justify-content:center;
    box-shadow:0 3px 12px rgba(0,0,0,.22)}

  /* Spec 12 — the bar carries four, and the two saved views sit under them.
     Under a bottom bar there is no "under", so they come to the top of the
     page instead, with the same counts from the same query. The alternative
     was to let the sidebar take them away with it, which would leave "Dates
     you can't move" reachable from nowhere at all on a phone: nothing else in
     the system links to it. Spec 4.3's band count and the Dates screen have to
     agree, and you cannot check an agreement you cannot open. */
  /* `.main` is a flex column, so the strip can be written first in the
     document -- where it is on the desktop, at the top of the sidebar -- and
     still come to rest where spec 12 puts it, under the four, at the foot of
     the page just above the reconciliation strip. Nothing about the document
     changes with the viewport; only where this one row sits in it. */
  .phviews{display:flex;order:9;gap:8px;flex-wrap:wrap;margin-top:18px}
  .recon{order:10}
  .phviews a{display:flex;align-items:center;gap:7px;min-height:48px;
    padding:8px 13px;border:1px solid var(--rule);border-radius:20px;
    background:var(--panel);font-size:13px;font-weight:500;color:var(--soft)}
  .phviews a.on{border-color:var(--ac);color:var(--ac)}
  .phviews a .bd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
    color:var(--faint);font-variant-numeric:tabular-nums}
  .phviews a.hot .bd{color:var(--al)}

  /* Rows stack rather than truncate. Nothing is dropped: a screen that shows
     less on a phone is a screen you cannot trust on a phone. */
  .row,.bigrow,.bandr,.wr,.kidrow{flex-wrap:wrap;gap:7px}
  .rr{width:100%;text-align:left;padding-left:0}
  .bandr .d{min-width:0;text-align:left}
  /* ATTACK: `flex:1` let the mono meta line — "$18,000 · act by yesterday ·
     1 day before", which cannot break — win the row, and the title of the
     $18,000 Fanola deadline was squeezed into a 78px column five words tall.
     The title takes the line; the dates wrap under it. Both are still there,
     which is the rule; now both are also legible, which is the point. */
  .bandr .t{flex:1 0 100%}
  /* Spec 4.3 — "if the list is long the band scrolls; it does not shorten."
     On a desktop that scroll keeps the band from pushing Today below the fold.
     A phone page already scrolls, and a scrolling box inside a scrolling page
     is how two of five deadlines end up behind a gesture nobody makes: 340px
     of box against 558px of rows. The band grows instead, still nearest-first,
     still all of them, still first on the page. */
  .band .bandrows{max-height:none;overflow-y:visible}

  /* ATTACK: Waiting's summary is a three-column grid on a card with
     `overflow:hidden`. At 390px the third column started at x=394 — off the
     card, off the screen, gone. "Next one returns · Today · ACT Lab —
     Godzilla certificates" simply did not exist on a phone, which is half of
     what section 8.1's summary is for. It stacks now. */
  .sum{grid-template-columns:1fr}
  .sumbig{border-right:0;border-bottom:1px solid var(--rules)}
  .sumr{border-left:0;border-top:1px solid var(--rules)}

  /* The grouped view's header is a two-column flex written inline in the
     template. At 390px the title column was 290px of a four-line wrap beside
     an empty half. It stacks; the amount and the dates keep their order. */
  .masterh > div{flex-direction:column}
  .masterh > div > div:last-child{text-align:left !important;
    white-space:normal !important}

  .two{grid-template-columns:1fr}
  .bar{flex-wrap:wrap}
  .head .stamp{font-size:10.5px}
  table,.card{max-width:100%}
  .chgr{flex-wrap:wrap}
  /* The red bar's header and the two panel headers each carry a sentence of
     explanation pushed to the right with `margin-left:auto`. At 390px that
     sentence takes half the width and squeezes the heading it explains into a
     three-line stack beside it. It takes its own line instead; both are still
     there, and both are now legible. */
  .bandh,.chgh{display:block}
  .bandh > svg,.chgh > svg{vertical-align:-2px;margin-right:4px}
  .bandh > span,.chgh > span:last-child{display:block;margin-left:0 !important;
    margin-top:4px}
  .chgh .cnt{margin-left:5px}
  /* 9px was the desktop's smallest type read at a desktop's distance. On a
     phone it is a grey smear, and this strip is the one that says whether the
     numbers above it add up. */
  .recon{font-size:10.5px}

  /* --- 48px, applied. Everything below here is a thing you press. --- */

  /* Buttons and chips. `.btn.sm` is the note-to-self exits and "Turn it back
     on"; `.chip` is Waiting's filter chips, Cases' filters and every date
     preset in every picker. */
  .btn,.btn.sm,a.btn,button.btn{min-height:48px}
  .chip,label.chip,a.chip{min-height:48px}
  .seg label{min-height:48px;display:inline-flex;align-items:center}
  .opt,button.opt,label.opt{min-height:48px}

  /* The tick. The square stays 17px, because that is what the Tasks artboard
     draws; the target around it is 48 and invisible. The row grows to hold it,
     so two rows' targets can never overlap and tick the wrong job. */
  .tk{min-height:48px}
  button.box{position:relative}
  button.box::after{content:"";position:absolute;top:50%;left:50%;
    width:48px;height:48px;transform:translate(-50%,-50%)}

  /* "change this" and "remove" — a dotted-underline word inside a sentence,
     with no padding at all. It keeps its shape and gains a target. */
  button.reclass,.reclass{display:inline-flex;align-items:center;min-height:48px;
    padding:0 4px}

  /* Spec 4.1's three exits, which are words in a sentence on a desktop. */
  .exit{display:inline-flex;align-items:center;min-height:48px;padding:0 4px}

  /* The inline pickers: a select and a date box beside a small button. */
  .inp-inline,.inp-date{min-height:48px}

  /* Spec 9.3's "N case numbers" — a link sitting inside a line of 12.5px
     metadata, and the only route into the grouped view from a row. It keeps
     its type; the line grows to hold a target you can hit with a thumb. */
  .rm a{display:inline-flex;align-items:center;min-height:48px}

  /* The rows themselves. A row is one press (`.rowlink`), so the press has to
     be 48 tall even on the shortest row on the quietest screen. */
  .row,.bigrow,.bandr,.wr,.tk{min-height:48px}
}

@media (max-width: 560px){
  .main{padding:13px 11px var(--phfab-clear)}
  h1{font-size:20px;letter-spacing:-.02em}
  .stake{font-size:10.5px}
  .btn{padding:7px 10px;font-size:12.5px}
  .pop{padding:14px}
}

/* A phone is a pointer that cannot hover, and a hover-only affordance is one
   that does not exist there. */
@media (hover: none){
  a.row:hover,a.bigrow:hover,a.wr:hover{background:inherit}
  .row:has(a.rowlink):hover,.bigrow:has(a.rowlink):hover{background:inherit}
  a.row:active,a.bigrow:active,a.wr:active{background:var(--p2)}
  .row:has(a.rowlink):active,.bigrow:has(a.rowlink):active{background:var(--p2)}
}

/* Nothing in this file moves of its own accord today. This block is here so
   that the first thing that does — a panel that slides, a + that grows under
   the thumb — is already covered, because the person who adds it will not
   think to add this. Spec 18.2a's mobile row, and the test beside it, hold
   both halves: motion may exist, and it must stop when the machine is set to
   ask for less of it. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------------------
   The front door. Stage 4, spec 15. The one screen anybody can reach without
   being somebody, so it says as little as possible about what is behind it.
   --------------------------------------------------------------------------- */
body.doorway{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;background:var(--ground)}
.door{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--rule);
  border-radius:12px;box-shadow:var(--sh);padding:30px 28px}
.door .logo{font-size:19px;margin-bottom:1px}
.door .logosub{margin-bottom:22px}
.door .field{margin-bottom:14px}
.trust{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);
  margin:4px 0 12px;cursor:pointer;min-height:48px}
.orline{display:flex;align-items:center;gap:11px;margin:4px 0 16px;
  font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--rules)}
.doorfoot{margin-top:22px;padding-top:16px;border-top:1px solid var(--rules);
  font-size:12px;color:var(--faint);line-height:1.55}