/* The product's visual language, ported from the prototype on 20 August 2026.
   The tokens, the tile, the fold, the tab strip and the button rules are the
   prototype's own, quoted from its stylesheet rather than reinvented, because
   the design decisions they carry were settled with Saqib line by line: the
   pure white ground, the eight working hues with oxblood reserved for what a
   person must act on today, shadows on hover alone, and one margin column.
   Where the prototype held a rule this file does not yet need, it is absent
   rather than approximated: it ports when its screen does. The fold row's
   internal grid is stated here to the margin column doctrine, as the one
   reconstruction, and is marked below. */

/* The product's own typefaces, the prototype's faces carried across as files
   so every machine shows the same page: Fraunces under the Bracton Serif name
   for headings and the maxim, Source Sans 3 under Bracton Sans for everything
   else, with the size adjustment the prototype settled so nothing changed
   size, and Atkinson Hyperlegible for the reading mode. All three are under
   the SIL Open Font Licence, the texts beside the files in fonts/. */
@font-face{font-family:'Bracton Sans';font-style:normal;font-weight:400 800;font-display:swap;
  size-adjust:104.5%;src:url("fonts/bracton-sans-400-800.c36ad037eaaa.woff2") format('woff2')}
@font-face{font-family:'Bracton Sans';font-style:italic;font-weight:400;font-display:swap;
  size-adjust:104.5%;src:url("fonts/bracton-sans-400-italic.fc88ef402226.woff2") format('woff2')}
@font-face{font-family:'Bracton Serif';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/bracton-serif-400-700.77f01ad2c22b.woff2") format('woff2')}
@font-face{font-family:'Bracton Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/bracton-serif-400-italic.96391c8ca9b4.woff2") format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/atkinson-hyperlegible-400.d444e1815a3a.woff2") format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/atkinson-hyperlegible-700.c6b471cbb2b9.woff2") format('woff2')}

:root{
  /* the ground is light whatever the reader's system prefers, so the form
     fields never turn dark against the white paper */
  color-scheme:light;
  --bx-ink:#21201c; --bx-ink2:#55534b; --bx-ink3:#747166;
  --bx-paper:#fff; --bx-laid:#f2f2f0; --bx-white:#fff;
  --bx-rule:#e0e0de; --bx-rule2:#c9c9c6; --bx-field:#8a8a7e;
  --vb-blue:#1663d8; --vb-pink:#d6336c; --vb-yellow:#f0a800; --vb-yellowt:#8a5e0b; --vb-tealt:#0d7d7f;
  --vb-red:#d0342c; --vb-green:#12873f; --vb-purple:#6f42c1; --vb-orange:#e8590c;
  --vb-teal:#0f8b8d;
  --vb-gold:#e09600;
  --vb-oranget:#b34408;
  --vb-blue-t:#eef4fc; --vb-pink-t:#fceef4; --vb-yellow-t:#fdf6e6; --vb-red-t:#fbeeed;
  --vb-green-t:#edf6f0; --vb-purple-t:#f3effa; --vb-orange-t:#fdf0e8; --vb-teal-t:#eaf5f5;
  --bx-green:#16302a; --bx-ok:#116A51; --bx-focus:#0F6B55;
  --bx-ox:#8c3b34; --bx-amber:#8a5e0b;
  --bx-chrome:#6f6c61;
  --bx-serif:'Bracton Serif',Georgia,'Times New Roman',serif;
  --bx-sans:'Bracton Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --bx-marg:7.5rem;
  --bx-margcol:0px;
  --bx-rail:var(--bx-paper);
}

/* The dark ground, the person's own choice on their record. The tokens swap
   and nothing else moves: the eight hues keep their identity on a deeper
   tint, oxblood still means act today, and the form fields follow the
   scheme so they never glare against the dark paper. */
:root[data-theme="dark"]{
  color-scheme:dark;
  /* the Night values, from the artboard Saqib chose on 2 September 2026:
     Counsel Black for the paper, the rail a step darker, a warm off white
     for the ink, and the blue and the oxblood lifted so both still read */
  --bx-ink:#f1efe9; --bx-ink2:#b8bfc7; --bx-ink3:#9aa3ad;
  --bx-paper:#101820; --bx-laid:#172230; --bx-white:#141d27;
  --bx-rail:#0b1219;
  --bx-rule:#263241; --bx-rule2:#34414f; --bx-field:#9aa3ad;
  --vb-blue:#7fa3e0; --vb-pink:#e46a93; --vb-yellow:#f2be3b; --vb-yellowt:#e0b25a; --vb-tealt:#5cc0c2;
  --vb-red:#e3655d; --vb-green:#4fb373; --vb-purple:#a07de0; --vb-orange:#f08a4c;
  --vb-teal:#4fb8ba;
  --vb-gold:#e6b04a;
  --vb-oranget:#f0a070;
  --vb-blue-t:#1a2536; --vb-pink-t:#33202a; --vb-yellow-t:#332b16; --vb-red-t:#351f1d;
  --vb-green-t:#1c2f24; --vb-purple-t:#27213a; --vb-orange-t:#35241a; --vb-teal-t:#1a2e2e;
  --bx-green:#9fd3c0; --bx-ok:#5cbb9d; --bx-focus:#7ed3b8;
  --bx-ox:#d17168; --bx-amber:#e0b25a;
  --bx-chrome:#9aa3ad;
}
:root[data-theme="dark"] .main.bx .pv-row.sel{background:#1b2735}
:root[data-theme="dark"] .main.bx .btn.primary{color:#101820}

/* The blue theme, a sky blue ground. The ink stays dark and the paper
   turns to a pale sky, the laid tint and the rules a shade deeper, the
   hues and oxblood as they are because they read on a light ground. */
:root[data-theme="blue"]{
  color-scheme:light;
  --bx-ink:#14212b; --bx-ink2:#3f5361; --bx-ink3:#4f6274;
  --bx-paper:#e3f2fb; --bx-laid:#d2e8f5; --bx-white:#eef7fc;
  --bx-rule:#b9d5e6; --bx-rule2:#98bfd6; --bx-field:#6f8794;
  --vb-blue-t:#d4e6f7; --vb-pink-t:#f0dde8; --vb-yellow-t:#efe9d2; --vb-red-t:#efdcda;
  --vb-green-t:#d7ebe0; --vb-purple-t:#e3e0f3; --vb-orange-t:#f0e2d4; --vb-teal-t:#d2ebeb;
  --bx-chrome:#55707f;
}
:root[data-theme="blue"] .main.bx .pv-row.sel{background:#cfe4f2}

/* The reading theme, a person's own choice for dyslexia and tired eyes: a pale cream
   ground in place of white, the ink kept dark, Atkinson Hyperlegible for every word,
   the line opened out and the letters given air, as the British Dyslexia Association's
   style guide asks. Nothing else moves, so the hues and oxblood keep their meaning. */
:root[data-theme="reading"]{
  color-scheme:light;
  --bx-ink:#1f1d1a; --bx-ink2:#4a4640; --bx-ink3:#6a655d;
  --bx-paper:#f9f2df; --bx-laid:#f2e9d0; --bx-white:#fdf9ee;
  --bx-rule:#dccfb0; --bx-rule2:#c9b992; --bx-field:#7d7361;
  --bx-sans:'Atkinson Hyperlegible','Bracton Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
:root[data-theme="reading"] body{line-height:1.6;letter-spacing:0.01em;word-spacing:0.06em}
:root[data-theme="reading"] .main.bx .pv-row.sel{background:#f0e4c4}

/* The high contrast theme, a person's own choice for low vision: black ink on
   white paper, every rule and field edge black, the hues and oxblood deepened
   so each stands at seven to one against the paper, the act today mark
   underlined as well as coloured so its meaning never rests on colour alone,
   and a thicker focus ring. Nothing else moves. */
:root[data-theme="contrast"]{
  color-scheme:light;
  --bx-ink:#000000; --bx-ink2:#000000; --bx-ink3:#1a1a1a;
  --bx-paper:#ffffff; --bx-laid:#f4f4f4; --bx-white:#ffffff;
  --bx-rule:#000000; --bx-rule2:#000000; --bx-field:#000000;
  --vb-blue:#0b3e8f; --vb-pink:#8a1d47; --vb-yellow:#5a3d00; --vb-yellowt:#5a3d00; --vb-tealt:#0a4f50;
  --vb-red:#8a1f1a; --vb-green:#0b5a2a; --vb-purple:#4a2a86; --vb-orange:#8a3600;
  --vb-teal:#0a5c5e; --vb-gold:#5a3d00; --vb-oranget:#7a2e05;
  --bx-green:#0b2a20; --bx-ok:#0b4a38; --bx-focus:#0000ff;
  --bx-ox:#6b1f17; --bx-amber:#5a3d00;
  --bx-chrome:#000000;
}
:root[data-theme="contrast"] .main.bx .act-now{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
:root[data-theme="contrast"] :focus-visible{outline:4px solid #0000ff;outline-offset:3px}
:root[data-theme="contrast"] .main.bx .pv-row.sel{background:#e6e6e6}

/* The person's own text size: the root grows and every rem in the stylesheet
   grows with it, so the layout keeps its proportions at every size. */
:root[data-size="larger"]{font-size:115%}
:root[data-size="largest"]{font-size:130%}

/* A person who asks their system for less motion gets none: Henry stands
   still and nothing slides, per WCAG 2.3.3. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--bx-sans);color:var(--bx-ink);background:var(--bx-paper);
  font-size:0.9375rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--bx-ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--bx-focus);outline-offset:2px}

/* the frame: rail beside the middle column, both on the white ground. The
   middle column stacks the running head, the maxim bar and the sheet. */
.app{display:grid;grid-template-columns:16rem minmax(0,1fr);min-height:100vh;background:var(--bx-paper)}
.mcol{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.mcol .main{flex:1}
.side{background:var(--bx-rail);padding:16px 22px 30px;border-right:1px solid var(--bx-rule);
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;
  align-self:start}
/* the lockup, matched to the Bracton Property CMS logo: mark, name, and the
   descriptor in grey beneath the pair */
.side .bx-rail-head{display:grid;grid-template-columns:34px 1fr;column-gap:10px;
  align-items:center;row-gap:4px;padding:1px 0 9px;
  border-bottom:2px solid var(--bx-ink);margin-bottom:2px}
.side .bx-logo{width:34px;height:34px;display:block}
.side .bx-logo svg{width:100%;height:100%;display:block}
.side .bx-logo-name{font-family:var(--bx-serif);font-size:1.3125rem;font-weight:600;
  letter-spacing:-.01em;color:var(--bx-ink)}
.side .bx-logo-name span{color:var(--bx-ox)}
.side .bx-rail-tag{grid-column:1/-1;display:block;font-family:var(--bx-sans);
  font-size:0.6875rem;font-weight:400;color:var(--bx-ink3);letter-spacing:.01em;line-height:1.45}
.side .bx-sec{font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bx-ink3);font-weight:600;padding:12px 0 2px}
.side .nav{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px;
  padding:2px 0 2px 17px;border-radius:0;background:none;color:var(--bx-ink);
  font-size:0.9375rem;font-weight:400;position:relative}
.side .nav:hover{background:none;text-decoration:underline;text-underline-offset:3px}
.side .nav.on{font-weight:600;background:none}
/* the square beside an entry is the area's hue, and the bar against the
   active entry takes the same hue, so the two always agree */
.side .nav::after{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;
  background:var(--acc,var(--bx-ink3))}
.side .nav.on:before{content:"";position:absolute;left:-10px;top:.4em;width:3px;
  height:1.02em;background:var(--acc,var(--bx-ink))}
.side a.nav{text-decoration:none;color:var(--bx-ink)}
/* the counts sit as an index sets its page numbers, and only a count that
   needs a person today takes oxblood */
.side .nav .badge{color:var(--bx-ink3);font-size:0.8125rem;font-weight:400}
.side .nav.urgent .badge{color:var(--bx-ox);font-weight:600}
/* the rail's foot: the theme fold, then Henry last at the bottom left of the
   screen, on Saqib's 2 September instruction, the name shown once in the
   running head with Sign out beside it */
.side .rail-foot{margin-top:auto;padding-top:18px;font-size:0.8125rem;color:var(--bx-ink3)}
.side .rail-act{color:var(--bx-ink3);font-size:0.8125rem;padding:0}
.side .theme-pick summary{list-style:none;cursor:pointer;margin-bottom:4px}
.side .theme-pick summary::-webkit-details-marker{display:none}
.side .theme-pick form .rail-act{display:block;margin:0 0 4px 12px}
.side .rail-act:hover{text-decoration:underline;text-underline-offset:3px;color:var(--bx-ink)}

/* the calm main, one sheet width, space instead of rules */
.main.bx.calm{padding:34px 40px 40px;--bx-sheet:min(100%, 92rem)}
.main.bx.calm>*{max-width:var(--bx-sheet);margin-left:auto;margin-right:auto}
.main.bx.calm .bx-head{margin-bottom:34px;column-gap:2.5rem}
.main.bx.calm .h-title{font-size:1.75rem;letter-spacing:-.018em;margin-bottom:9px;
  font-family:var(--bx-serif);font-weight:600}
.main.bx.calm .h-sub{font-size:1.0625rem;line-height:1.55;max-width:52ch;color:var(--bx-ink2)}
.main.bx.sheet.calm{--bx-sheet:min(100%, 92rem)}

/* each hue as a class, because the content security policy rightly refuses
   inline style attributes: a tile or detail panel names its hue by class and
   the custom properties resolve from here */
.hue-blue{--tile:var(--vb-blue);--tilet:var(--vb-blue);--tilebg:var(--vb-blue-t)}
.hue-pink{--tile:var(--vb-pink);--tilet:var(--vb-pink);--tilebg:var(--vb-pink-t)}
.hue-yellow{--tile:var(--vb-yellow);--tilet:var(--vb-yellowt);--tilebg:var(--vb-yellow-t)}
.hue-red{--tile:var(--vb-red);--tilet:var(--vb-red);--tilebg:var(--vb-red-t)}
.hue-green{--tile:var(--vb-green);--tilet:var(--vb-green);--tilebg:var(--vb-green-t)}
.hue-purple{--tile:var(--vb-purple);--tilet:var(--vb-purple);--tilebg:var(--vb-purple-t)}
.hue-orange{--tile:var(--vb-orange);--tilet:var(--vb-oranget);--tilebg:var(--vb-orange-t)}
.hue-teal{--tile:var(--vb-teal);--tilet:var(--vb-teal);--tilebg:var(--vb-teal-t)}

/* Today, the Night composition of 2 September 2026, taken from the design
   canvas Saqib chose: no tiles. What needs a person stands as a numbered
   list on the left with its figures in oxblood, what can wait stands as
   quiet lines on the right, and the day's maxim moves to the foot of the
   page. The area hues leave the figures: oxblood alone says act today and
   every other figure is ink, so the colour on the screen is the meaning. */
.main.bx.calm .td-day{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:56px;row-gap:28px;margin:0 0 34px}
.main.bx.calm .td-h{font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bx-ink3);font-weight:600;margin:0 0 14px}
.main.bx.calm .td-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.main.bx.calm .td-entry{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:8px;
  align-items:baseline;text-decoration:none;color:var(--bx-ink)}
.main.bx.calm .td-wait .td-entry{grid-template-columns:minmax(0,1fr)}
.main.bx.calm .td-i{font-size:0.6875rem;letter-spacing:.08em;color:var(--bx-ink3);
  font-variant-numeric:tabular-nums}
.main.bx.calm .td-body{display:flex;flex-direction:column;gap:3px;text-decoration:none;
  color:inherit;min-width:0}
.main.bx.calm .td-t{font-weight:600;font-size:0.9375rem;line-height:1.4}
.main.bx.calm .td-n{font-family:var(--bx-serif);font-size:1.375rem;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--bx-ink);margin-right:8px}
.main.bx.calm .act .td-n,.main.bx.calm .act .td-chip{color:var(--bx-ox)}
.main.bx.calm .td-chip{font-variant-numeric:lining-nums tabular-nums}
.main.bx.calm .td-s{color:var(--bx-ink2);font-size:0.9375rem;line-height:1.5;max-width:62ch}
.main.bx.calm .td-open{color:var(--vb-blue);text-decoration:none;font-weight:600;white-space:nowrap}
.main.bx.calm .td-open:hover,.main.bx.calm a.td-body:hover .td-t,
.main.bx.calm a.td-entry:hover .td-t{text-decoration:underline;text-underline-offset:3px}
.main.bx.calm .sel .td-t{text-decoration:underline;text-underline-offset:3px}
.main.bx.calm .td-quiet{color:var(--bx-ink2)}
.main.bx.calm .td-det{margin:0 0 22px}
.main.bx.calm .td-det-h{display:flex;align-items:baseline;justify-content:space-between;
  border-top:2px solid var(--bx-ink);padding-top:10px;margin-bottom:6px}
.main.bx.calm .td-det-h h2{font-size:1.1875rem;margin:0;font-weight:600;font-family:var(--bx-serif)}
/* on a laptop narrower than the head's line the search takes a line of its
   own beneath the running head, as it does on a phone, so nothing overflows
   the page sideways, 10 September 2026 */
@media (max-width:1180px){
  .topbar{flex-wrap:wrap;gap:8px 14px}
  .topbar .bx-run{flex:1 1 auto}
  .topbar .tb-search{flex:1 1 100%;order:5;max-width:none}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--bx-rule);position:static;height:auto;overflow:visible}
  .main.bx.calm .td-day{grid-template-columns:1fr}
}

/* the time pies on Today: the person's recorded minutes by file, drawn as stroked rings */
.main.bx.calm .td-pies{margin:0 0 34px}
.main.bx.calm .td-pie-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:24px}
.main.bx.calm .td-pie{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:16px;align-items:start}
.main.bx.calm .td-pie svg{display:block}
.main.bx.calm .td-pie-ring{stroke:var(--bx-rule)}
.main.bx.calm .td-pie-slice{transition:stroke-width .15s}
.main.bx.calm .td-pie-slice:hover{stroke-width:7}
.main.bx.calm .td-pie-total{fill:var(--bx-ink);font-family:var(--bx-serif);font-variant-numeric:tabular-nums}
.main.bx.calm .td-pie-l{display:block;font-family:var(--bx-serif);font-size:1.0625rem;font-weight:500;color:var(--bx-ink);line-height:1.2}
.main.bx.calm .td-pie-w{display:block;font-size:.8125rem;color:var(--bx-ink3);margin:2px 0 8px}
.main.bx.calm .td-pie-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.8125rem;color:var(--bx-ink2);line-height:1.35}
.main.bx.calm .td-pie-key a{color:var(--bx-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bx-rule2)}
.main.bx.calm .td-pie-key a:hover{text-decoration-color:currentColor}
.main.bx.calm .td-pie-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.45em;vertical-align:baseline;background:currentColor}
.main.bx.calm .td-pie-none{font-size:.8125rem;color:var(--bx-ink3)}
.td-pie-blue{stroke:var(--vb-blue);color:var(--vb-blue)}
.td-pie-teal{stroke:var(--vb-teal);color:var(--vb-teal)}
.td-pie-green{stroke:var(--vb-green);color:var(--vb-green)}
.td-pie-orange{stroke:var(--vb-orange);color:var(--vb-orange)}
.td-pie-purple{stroke:var(--vb-purple);color:var(--vb-purple)}
.td-pie-pink{stroke:var(--vb-pink);color:var(--vb-pink)}
.td-pie-yellow{stroke:var(--vb-yellow);color:var(--vb-yellowt)}
.td-pie-red{stroke:var(--vb-red);color:var(--vb-red)}
.td-pie-other{stroke:var(--bx-ink3);color:var(--bx-ink3)}
@media (max-width:1100px){.main.bx.calm .td-pie-row{grid-template-columns:1fr}}

/* Today as the dashboard: the doors, the targets, the week, the money, the firm, the asks */
.main.bx.calm .td-entry.urgent .td-t{color:var(--bx-ox)}
.main.bx.calm .td-more{margin:14px 0 0}
.main.bx.calm .td-more>summary{cursor:pointer;font-size:.875rem;color:var(--bx-ink2);list-style:none;padding:6px 0}
.main.bx.calm .td-more>summary::-webkit-details-marker{display:none}
.main.bx.calm .td-more>summary::before{content:"+ ";color:var(--bx-ink3)}
.main.bx.calm .td-more[open]>summary::before{content:"\2212 "}
.main.bx.calm .td-more>.td-list{margin-top:14px}
.main.bx.calm .td-doors{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.main.bx.calm .td-door{display:inline-flex;align-items:center;gap:.5em;padding:7px 14px;border:1px solid var(--bx-rule);border-radius:999px;
  font-size:.875rem;font-weight:600;color:var(--bx-ink);text-decoration:none;background:var(--bx-paper)}
.main.bx.calm .td-door:hover{border-color:currentColor}
.main.bx.calm .td-targets{margin:0 0 34px}
.main.bx.calm .td-target-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;row-gap:20px}
.main.bx.calm .td-target{display:flex;flex-direction:column;gap:4px}
.main.bx.calm .td-target-l{font-family:var(--bx-serif);font-size:1.0625rem;font-weight:500}
.main.bx.calm .td-target-n{font-family:var(--bx-serif);font-size:1.75rem;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.main.bx.calm .td-target.behind .td-target-n{color:var(--bx-ox)}
.main.bx.calm .td-target-s{font-size:.8125rem;color:var(--bx-ink3)}
.main.bx.calm .td-bar{position:relative;height:10px;border-radius:5px;background:var(--bx-rule);overflow:visible;margin:6px 0 2px}
.main.bx.calm .td-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--vb-teal)}
.main.bx.calm .td-target.behind .td-bar-fill{background:var(--bx-ox)}
.main.bx.calm .td-bar-mark{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:var(--bx-ink);border-radius:2px}
/* the week as a list of days in the right column, today ruled darker, an
   empty day one quiet word rather than an empty column */
.main.bx.calm .td-side{display:flex;flex-direction:column;gap:30px;min-width:0}
.main.bx.calm .td-week-list{display:flex;flex-direction:column}
.main.bx.calm .td-week-day{display:grid;grid-template-columns:4.25rem minmax(0,1fr);column-gap:10px;
  padding:7px 0;border-top:1px solid var(--bx-rule)}
.main.bx.calm .td-week-day.today{border-top:2px solid var(--bx-ink)}
.main.bx.calm .td-week-h{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-ink3);padding-top:3px}
.main.bx.calm .td-week-h small{font-size:inherit;letter-spacing:0;text-transform:none}
.main.bx.calm .td-week-day.today .td-week-h{color:var(--bx-ink);font-weight:600}
.main.bx.calm .td-week-rows{display:flex;flex-direction:column;gap:6px;min-width:0}
.main.bx.calm .td-week-item{display:block;font-size:.9375rem;line-height:1.45;color:inherit;text-decoration:none}
.main.bx.calm .td-week-item:hover{text-decoration:underline;text-underline-offset:3px}
.main.bx.calm .td-week-item small{display:block;color:var(--bx-ink3)}
.main.bx.calm .td-week-none{color:var(--bx-ink3);font-size:.875rem}
/* the bands beneath the day: one heading over the figures, and the firm's
   money and the recent updates behind a fold that reads as a heading */
/* each section of Today wears one of the area hues, a square before its
   heading and its rule in the same hue, so the eye tells the sections apart
   before it reads a word: red for what needs you, purple for the week,
   blue for the files that can wait, orange for colleagues, pink for the
   figures, teal for the firm and green for the record */
.main.bx.calm .td-need,.main.bx.calm .td-week,.main.bx.calm .td-wait,.main.bx.calm .td-asks{
  border-top:2px solid var(--tile);padding-top:14px}
.main.bx.calm .td-need>.td-h::before,.main.bx.calm .td-week>.td-h::before,
.main.bx.calm .td-wait>.td-h::before,.main.bx.calm .td-asks>.td-h::before,
.main.bx.calm .td-band-h::before,.main.bx.calm .td-fold>summary>.td-h::before{
  content:"";display:inline-block;width:9px;height:9px;background:var(--tile);margin-right:9px}
.main.bx.calm .td-wait .td-n{color:var(--tile)}
.main.bx.calm .td-week-day.today{border-top-color:var(--tile)}
.main.bx.calm .td-band-h{margin:0 0 18px;padding-top:22px;border-top:2px solid var(--tile)}
.main.bx.calm .td-targets h3.td-h,.main.bx.calm .td-pies h3.td-h,.main.bx.calm .td-firm h3.td-h,
.main.bx.calm .td-money h3.td-h{margin-top:0}
.main.bx.calm .td-fold{margin:0 0 34px;border-top:2px solid var(--tile)}
.main.bx.calm .td-fold>summary{cursor:pointer;list-style:none;padding:22px 0 18px}
.main.bx.calm .td-fold>summary::-webkit-details-marker{display:none}
.main.bx.calm .td-fold>summary .td-h{display:inline;margin:0}
.main.bx.calm .td-fold>summary::after{content:" +";color:var(--bx-ink3);font-size:.75rem;letter-spacing:.09em}
.main.bx.calm .td-fold[open]>summary::after{content:" \2212"}
.main.bx.calm .td-fold .td-firm,.main.bx.calm .td-fold .td-money,.main.bx.calm .td-fold .td-updates{margin-bottom:26px}
.main.bx.calm .td-money{margin:0 0 34px}
.main.bx.calm .td-money .tbl-wrap{overflow-x:auto}
.main.bx.calm .td-money-t{width:100%}
.main.bx.calm .td-money-t tr.mine td{font-weight:600}
.main.bx.calm .td-money-t small{font-weight:400;color:var(--bx-ink3)}
.main.bx.calm .td-firm{margin:0 0 34px}
.main.bx.calm .td-firm-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 30px}
.main.bx.calm .td-tilebox{display:flex;flex-direction:column;gap:4px;padding:12px 0 0;border-top:2px solid var(--bx-rule)}
.main.bx.calm .td-tilebox .td-n{margin:0}
.main.bx.calm .td-line{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:10px;padding:7px 0;border-top:1px solid var(--bx-rule);
  font-size:.875rem;color:var(--bx-ink);text-decoration:none;line-height:1.4}
.main.bx.calm .td-line .fd-m{font-size:.75rem;color:var(--bx-ink3);padding-top:2px}
.main.bx.calm .td-line small{display:block;color:var(--bx-ink3)}
.main.bx.calm .td-line:hover span:last-child{text-decoration:underline}
.main.bx.calm h3.td-h{margin-top:22px}
@media (max-width:1100px){
  .main.bx.calm .td-target-row{grid-template-columns:1fr}
  .main.bx.calm .td-firm-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the fold: one line per entry, the reasoning behind a click */
.main.bx .bxf{display:block;border-bottom:1px solid var(--bx-rule);max-width:var(--bx-sheet)}
.main.bx .bxf>summary{display:block;padding:10px 0;cursor:pointer;list-style:none}
.main.bx .bxf>summary::-webkit-details-marker{display:none}
.main.bx .bxf>summary::marker{content:"";font-size:0}
.main.bx .bxf>summary:focus-visible{outline:2px solid var(--bx-ox);outline-offset:2px}
.main.bx .bxf>summary:hover .fd-t{color:var(--bx-ox)}
.main.bx .bxf[open]>summary .fd-c{transform:rotate(-135deg);vertical-align:.02em}
.main.bx .bxf>.fd-b{margin-left:calc(var(--bx-marg) + 1.5rem);padding:1px 0 14px;max-width:90ch}
/* the fold row's internal grid, reconstructed to the margin column doctrine:
   the margin column takes --bx-marg, the line takes the rest, the value sits right */
.main.bx .fd-row{display:grid;grid-template-columns:var(--bx-marg) minmax(0,1fr) auto;
  column-gap:1.5rem;align-items:baseline}
.main.bx .fd-m{color:var(--bx-ink3);font-size:0.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}
/* a fold with no margin date lets its line take both columns, so the text
   never wraps inside the margin column it was not given */
.main.bx .fd-row>.fd-c2:first-child{grid-column:1/3}
.main.bx .fd-guide{color:var(--bx-ink3);margin-top:.5rem}
.main.bx .fd-t{font-weight:600}
.main.bx .fd-s{display:block;color:var(--bx-ink2);font-size:0.875rem;line-height:1.4}
.main.bx .fd-v{color:var(--bx-ink2);font-size:0.875rem;white-space:nowrap}
.main.bx .fd-c{display:inline-block;width:.42em;height:.42em;margin-left:.6rem;
  border-right:2px solid var(--bx-ink3);border-bottom:2px solid var(--bx-ink3);
  transform:rotate(45deg);transition:transform .12s ease;vertical-align:.12em}
.main.bx .fd-b p{margin:0 0 8px}
.main.bx .fd-line{color:var(--bx-ink2);font-size:0.875rem}

/* the file's tab strip: ink rule, the active tab coloured by its position */
.tabstrip{display:flex;flex-wrap:wrap;row-gap:2px;gap:4px;border-bottom:1px solid var(--bx-ink);
  margin:0 0 17px;overflow-x:auto}
.tabstrip a{padding:10px 16px;font-weight:700;font-size:0.8125rem;color:var(--bx-ink2);
  border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none}
.tabstrip a:hover{color:var(--bx-ink);border-bottom-color:var(--bx-rule2)}
.tabstrip a.on{color:var(--bx-ink);font-weight:800}
.main.bx.sheet .tabstrip a.on:nth-child(10n+1){border-bottom-color:var(--vb-blue);color:var(--vb-blue)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+2){border-bottom-color:var(--vb-pink);color:var(--vb-pink)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+3){border-bottom-color:var(--vb-green);color:var(--vb-green)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+4){border-bottom-color:var(--vb-orange);color:var(--vb-oranget)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+5){border-bottom-color:var(--vb-purple);color:var(--vb-purple)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+6){border-bottom-color:var(--vb-teal);color:var(--vb-tealt)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+7){border-bottom-color:var(--vb-red);color:var(--vb-red)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+8){border-bottom-color:var(--vb-gold);color:var(--vb-yellowt)}
.main.bx.sheet .tabstrip a.on:nth-child(10n+9){border-bottom-color:var(--vb-blue);color:var(--vb-blue)}
.main.bx.sheet .tabstrip a.on:nth-child(10n){border-bottom-color:var(--vb-green);color:var(--vb-green)}

/* buttons name the act, squared and quiet in the working screens */
.main.bx .btn{display:inline-block;padding:7px 13px;border-radius:0;font-weight:700;
  font-size:0.8125rem;border:1px solid var(--vb-blue);background:none;color:var(--vb-blue);
  text-decoration:none}
.main.bx .btn:hover{background:var(--vb-blue-t);border-color:var(--vb-blue)}
.main.bx .btn.primary{background:var(--vb-blue);border-color:var(--vb-blue);color:#fff}
.main.bx .btn.sm{padding:5px 11px;font-size:0.75rem}
.main.bx .btn[disabled]{opacity:.5;cursor:not-allowed}

/* the empty state: a sentence, not an apology */
.estate{display:flex;gap:14px;align-items:flex-start;padding:16px 2px 14px}
.estate .et{font-weight:700;font-size:0.875rem;margin-bottom:3px}
.estate .ed{color:var(--bx-ink2);font-size:0.8125rem;line-height:1.55;max-width:64ch}

/* the ledger on the financial tab: two pairs in Saqib's stated order */
.main.bx .fin-h{font-size:1.1875rem;font-weight:700;margin:22px 0 6px;
  border-top:4px solid var(--bx-ink);padding-top:10px}
.main.bx .lrow{border-bottom:1px solid var(--bx-rule);padding:10px 0}
.main.bx a.lrow{display:block;text-decoration:none;color:inherit;max-width:var(--bx-sheet)}
.main.bx .td-answers{margin-bottom:1.5rem;max-width:var(--bx-sheet)}
.main.bx a.lrow:hover .fd-t{color:var(--bx-ox)}
.main.bx a.lrow:focus-visible{outline:2px solid var(--bx-ox);outline-offset:2px}
.main.bx .lrow .fd-v{font-variant-numeric:tabular-nums;color:var(--bx-ink)}
.main.bx .board{display:flex;gap:1.25rem;align-items:flex-start;overflow-x:auto;padding:.25rem 0 1rem;max-width:100%}
.main.bx .board-col{flex:0 0 17rem;min-width:17rem}
.main.bx .board-h{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bx-ink2);margin:0 0 .6rem;padding:.4rem 0;border-bottom:2px solid var(--tile,var(--bx-rule2))}
.main.bx .board-n{font-family:var(--bx-serif);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--bx-ink);margin-left:.35rem}
.main.bx .board-card{display:block;padding:.6rem .75rem;margin:0 0 .5rem;border:1px solid var(--bx-rule);border-radius:2px;text-decoration:none;color:inherit}
.main.bx .board-card .fd-t{display:block}
.main.bx .board-card:hover .fd-t{color:var(--bx-ox)}
.main.bx .board-card:focus-visible{outline:2px solid var(--bx-ox);outline-offset:2px}
.main.bx .board-empty{font-size:.875rem;color:var(--bx-ink3);margin:.25rem 0 0}
.main.bx .lbal{font-weight:700;padding:12px 0 4px;font-variant-numeric:tabular-nums}

/* the refusal line, in the colour that means a person must act */
.refusal{color:var(--bx-ox);font-weight:600;margin:10px 0}
.refusal:focus{outline:2px solid var(--bx-ox);outline-offset:3px}
/* words for the screen reader alone, kept out of sight and out of the layout */
/* A visually hidden span sits at the left edge of its page rather than where
   its text would fall, so one inside a scrolled ledger never widens the page
   for the phone's scroll bar, record 0185. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;left:0}
.main.bx .act-now{color:var(--bx-ox);font-weight:600}

/* the development door's form */
.main.bx .doorform{display:grid;gap:14px;max-width:26rem}
.main.bx .doorform label{display:block;font-size:0.8125rem;font-weight:700;margin-bottom:4px}
.main.bx .doorform select,.main.bx .doorform input{width:100%;padding:8px 10px;font:inherit;
  border:1px solid var(--bx-rule2);border-radius:0;background:var(--bx-white);color:var(--bx-ink)}

/* the personal list, ported from the prototype. The tick is a square, because the round
   exception covers the 8px marks alone, and an empty square beside a line is the oldest
   to do mark there is. */
.main.bx .bn-t{font-size:0.9375rem;color:var(--bx-ink)}
.main.bx.calm .bn-t{font-size:1.0625rem;line-height:1.5;max-width:62ch}
.main.bx .cs-in{border:1px solid var(--bx-field);padding:8px 10px;font:inherit;
  font-size:0.875rem;background:var(--bx-paper)}
.main.bx .td-todo-row{display:flex;gap:9px;align-items:center;padding:5px 0;max-width:34rem}
.main.bx .td-todo-row.done .td-todo-t{text-decoration:line-through;color:var(--bx-ink3)}
.main.bx .td-tick{width:14px;height:14px;flex:none;border:1.5px solid var(--bx-ink3);
  background:none;cursor:pointer;padding:0}
.main.bx .td-tick.done{background:var(--bx-ink3)}
.main.bx .td-tick.still{border-color:var(--bx-rule2);cursor:default;display:inline-block}
.main.bx .td-todo-t{font-size:0.9375rem}
.main.bx .td-todo-quiet{color:var(--bx-ink3)}
.main.bx .td-todo-by{color:var(--bx-ink3);font-size:0.6875rem;text-transform:uppercase;
  letter-spacing:0.04em;margin-left:6px}
.main.bx .td-todo-d{margin-left:auto;color:var(--bx-ink3);font-size:0.6875rem;white-space:nowrap}
.main.bx .td-todo-sel{max-width:16rem;margin:6px 0 10px;display:inline-block}
.main.bx .td-todo-donehead{margin-top:14px;color:var(--bx-ink3);font-size:0.6875rem;
  text-transform:uppercase;letter-spacing:0.06em}
.main.bx .td-todo-add{display:flex;gap:9px;margin-top:14px;max-width:26rem}
.main.bx .td-todo-add .cs-in{flex:1}
.main.bx .td-todo-row form{display:flex;flex:none}
.main.bx .time-add{max-width:44rem}
.main.bx .time-add .time-min{flex:none;width:7rem}
.main.bx .time-add .time-day{flex:none;width:11rem}
.main.bx .tr-add{max-width:44rem;margin-top:14px}
.main.bx textarea.tr-in{display:block;width:100%;margin-bottom:9px;resize:vertical;
  font:inherit;font-size:0.875rem;line-height:1.55}
.main.bx .tr-text{max-width:70ch;margin:2px 0 10px;white-space:pre-wrap}

/* ===== THE CHROME PORT, 23 August 2026 =====
   The running head, the maxim bar, the area hues on the rail and the heads,
   and Henry at the rail's foot, quoted from the prototype where its rules
   already existed and reconstructed to the same doctrine where they did not. */

/* the area hues, as classes because the content security policy refuses
   inline style: an entry or a sheet names its area and the pair resolves */
.acc-yellow{--acc:var(--vb-yellow);--acct:var(--vb-yellowt)}
.acc-blue{--acc:var(--vb-blue);--acct:var(--vb-blue)}
.acc-teal{--acc:var(--vb-teal);--acct:var(--vb-teal)}
.acc-green{--acc:var(--vb-green);--acct:var(--vb-green)}
.acc-orange{--acc:var(--vb-orange);--acct:var(--vb-oranget)}
.acc-red{--acc:var(--vb-red);--acct:var(--vb-red)}

/* the running head. A printed report says where you are in a line of small
   print and then gets on with it. No controls compete with the work. */
.topbar{display:flex;align-items:center;gap:18px;background:var(--bx-white);
  border-bottom:1px solid var(--bx-rule2);min-height:48px;padding:5px 22px}
.topbar .bx-run{font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bx-chrome);font-weight:600;white-space:nowrap;flex:0 1 auto;min-width:9rem;
  overflow:hidden;text-overflow:ellipsis}
/* the search box stands as a box a reader sees at once, Saqib's 2 September
   instruction, a bordered field on the laid tint at the reading size */
/* the box is white on every theme, Saqib's instruction, so it reads as the
   one field on the page whatever ground the person has chosen */
/* the search keeps a width a hand can use whatever the head's line takes,
   the line giving way with an ellipsis first, 10 September 2026 */
.topbar .tb-search{flex:1;min-width:13rem;max-width:44rem;display:flex;align-items:stretch;
  border:1px solid var(--bx-rule2);background:#fff}
.topbar .tb-search:focus-within{border-color:var(--vb-blue);box-shadow:0 0 0 2px var(--vb-blue-t)}
.topbar .tb-search input{border:0;border-radius:0;background:#fff;color-scheme:light;
  font-size:1.0625rem;padding:9px 14px;width:100%;color:#21201c;min-width:0}
.topbar .tb-search input::placeholder{color:#747166}
.topbar .tb-search input:focus{outline:0}
/* the magnifying glass in the blue hue, the act on the right of the box */
.topbar .tb-go{flex:none;width:2.75rem;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--vb-blue);border-left:1px solid var(--bx-rule2)}
.topbar .tb-go:hover{background:var(--bx-ink)}
/* the right cluster: the theme fold, Sign out, then the person's name at the far right */
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar .tb-theme{position:relative}
/* FitzNeal record 0016: the two buttons of the chrome are square, as every corner is */
.topbar .tb-theme summary{list-style:none;cursor:pointer;color:var(--bx-ink2);font-size:0.9375rem;
  padding:5px 12px;border:1px solid var(--bx-rule2);border-radius:0;white-space:nowrap}
.topbar .tb-theme summary:hover,.topbar .tb-out .rail-act:hover{border-color:var(--bx-ink3);color:var(--bx-ink)}
.topbar .tb-theme summary::-webkit-details-marker{display:none}
.topbar .tb-theme form{position:absolute;right:0;top:1.6rem;z-index:5;background:var(--bx-paper);
  border:1px solid var(--bx-rule2);padding:10px 14px;box-shadow:0 6px 18px rgba(0,0,0,.08);
  display:grid;grid-template-columns:auto auto;gap:0 22px;align-items:start}
.topbar .tb-theme form .tb-col-h{display:block;font-size:0.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bx-ink3);margin:0 0 6px}
.topbar .tb-theme form .rail-act{display:block;margin:0 0 6px;white-space:nowrap}
.topbar .who{font-size:0.9375rem;color:var(--bx-ink2);white-space:nowrap;
  border-left:1px solid var(--bx-rule2);padding-left:16px;
  text-align:right;line-height:1.25;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.topbar .who .who-name{font-size:1.0625rem;color:var(--bx-ink)}
.topbar .who small{display:block;color:var(--bx-ink3);font-size:0.8125rem}
/* the reading aids, Voice, Dictation and Fit, as the prototype's running head
   carried them, small capitals in the chrome tone, lit when pressed */
.topbar .tb-aids{display:flex;align-items:center;gap:4px;margin-left:8px}
.topbar .tb-aid{font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--bx-chrome);padding:5px 8px;border:1px solid transparent;text-decoration:none;
  background:none;cursor:pointer;line-height:1}
.topbar .tb-aid:hover{color:var(--bx-ink);border-color:var(--bx-rule2)}
.topbar .tb-aid[aria-pressed="true"]{color:#fff;background:var(--vb-blue);border-color:var(--vb-blue)}
.topbar .tb-out{flex:none}
.topbar .tb-out .rail-act{color:var(--bx-ink2);font-size:0.9375rem;padding:5px 12px;
  border:1px solid var(--bx-rule2);border-radius:0;white-space:nowrap}

/* the maxim sits at the foot of the page, where Saqib placed it on 2 September
   2026 after it was lost under the running head: one italic line and its
   source, and nothing beneath it */
.quotebar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px 40px 22px;border-top:1px solid var(--bx-rule);margin-top:auto}
/* the maxim reads as a maxim: larger, in the ink, on the laid tint, Saqib's
   2 September instruction that it be noticed */
.quotebar{background:var(--bx-laid);border-top:1px solid var(--bx-rule);padding:16px 40px 18px}
.quotebar .q{font-family:var(--bx-serif);font-style:italic;color:var(--bx-ink);font-size:1.125rem;line-height:1.5}
.quotebar .qa{font-family:var(--bx-sans);font-style:normal;color:var(--bx-ink2);font-size:0.75rem;
  letter-spacing:.08em;text-transform:uppercase}

/* the head is the sheet: the date sits in the margin where a printed report
   puts it, and the keyline under the title repeats the area's hue */
.main.bx .bx-head:has(.bx-marg){display:grid;
  grid-template-columns:var(--bx-marg) minmax(0,1fr);column-gap:1.5rem;align-items:start}
.main.bx .bx-marg{text-align:right;font-size:0.6875rem;line-height:1.45;color:var(--bx-ink3);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding-top:.5rem}
.main.bx .bx-close{border:0;border-top:2px solid var(--bx-ink);margin:0 0 14px;max-width:var(--bx-sheet)}
.main.bx[class*="acc-"] .bx-head .h-title::after{content:"";display:block;width:3.25rem;
  height:4px;background:var(--acc);margin-top:12px}

/* the list's one control: which way the clock runs */
.listbar{display:flex;justify-content:flex-end;margin:0 0 8px}
.ordlink{font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--bx-chrome);text-decoration:none;border-bottom:1px solid var(--bx-rule2);
  white-space:nowrap;align-self:center}
.ordlink:hover{color:var(--bx-ink);border-bottom-color:var(--bx-ink)}
.tabstrip .ordlink{margin-left:auto;padding:10px 0}

/* Henry de Bracton at the foot of the rail, drawn as the prototype drew him */
.side .assistant-btn{margin-top:auto;background:none;border:0;border-top:1px solid var(--bx-rule);
  border-radius:0;box-shadow:none;color:var(--bx-ink);padding:9px 0 0;display:block;
  font-family:var(--bx-sans);font-weight:600;font-size:0.9375rem;text-align:left}
.side .assistant-btn:hover{background:none}
.side .assistant-btn small{display:block;font-family:var(--bx-sans);font-weight:400;
  font-size:0.75rem;color:var(--bx-ink3);letter-spacing:0}
.side .hb-btn{cursor:pointer}
.side .hb-btn .hb{width:100%;max-width:9rem;height:auto;display:block;margin:3px auto 7px;
  filter:drop-shadow(0 2px 2.5px rgba(30,25,20,0.3))}
.side .hb-btn .hb-x{display:block;text-align:center}
.side .hb-btn .hb-x small{display:block;font-family:var(--bx-sans);font-weight:400;
  color:var(--bx-ink3);margin-top:1px}
.side .nav:focus-visible,.side .assistant-btn:focus-visible{
  outline:2px solid var(--bx-ox);outline-offset:2px;box-shadow:none}

/* his movements, coprime cycles that never repeat on a visible period, and
   all of them still for a reader who has asked for reduced motion */
[id^=hbAll]{animation:hbSway 5.2s ease-in-out infinite}
[id^=hbNod]{transform-box:fill-box;transform-origin:50% 90%;animation:hbNodK 23s ease-in-out infinite}
[id^=hbHead]{transform-box:fill-box;transform-origin:50% 88%;animation:hbTilt 17s ease-in-out infinite}
[id^=hbBrow]{animation:hbBrowUp 11s ease-in-out infinite}
.hbEye{transform-box:fill-box;transform-origin:center;animation:hbBlink 4.7s infinite}
.hbPupil{animation:hbGlance 13s ease-in-out infinite}
[id^=hbQuill]{transform-box:fill-box;transform-origin:12% 88%;animation:hbWrite 8s ease-in-out infinite}
[id^=hbMouthN]{animation:hbMoodN 19s infinite}
[id^=hbMouthS]{animation:hbMoodS 19s infinite}
.hbSquint{transform-box:fill-box;transform-origin:center;animation:hbSquintK 29s ease-in-out infinite}
@keyframes hbSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.8px)}}
@keyframes hbTilt{0%,24%,42%,58%,76%,100%{transform:rotate(0deg)}29%,37%{transform:rotate(-3.2deg)}
  63%,71%{transform:rotate(2.8deg)}}
@keyframes hbNodK{0%,60%,70%,100%{transform:translateY(0)}62%,66.5%{transform:translateY(1.4px)}
  64%{transform:translateY(0.4px)}}
@keyframes hbBrowUp{0%,45%,61%,100%{transform:translateY(0)}48%,58%{transform:translateY(-0.9px)}}
@keyframes hbBlink{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(0.08)}}
@keyframes hbMoodN{0%,55%,71%,100%{opacity:1}58%,68%{opacity:0}}
@keyframes hbMoodS{0%,55%,71%,100%{opacity:0}58%,68%{opacity:1}}
@keyframes hbSquintK{0%,40%,53%,100%{transform:scaleY(1)}43%,50%{transform:scaleY(0.55)}}
@keyframes hbGlance{0%,30%,49%,72%,87%,100%{transform:translateX(0)}
  33%,46%{transform:translateX(1px)}75%,84%{transform:translateX(-1px)}}
@keyframes hbWrite{0%,52%,84%,88%,96%,100%{transform:rotate(0deg) translateY(0)}
  58%{transform:rotate(-8deg)}64%{transform:rotate(4deg)}70%{transform:rotate(-7deg)}
  76%{transform:rotate(3deg)}81%{transform:rotate(-4deg)}
  92%{transform:rotate(6deg) translateY(-1.6px)}}
@media(prefers-reduced-motion:reduce){[id^=hbAll],[id^=hbNod],[id^=hbHead],[id^=hbBrow],.hbEye,.hbPupil,.hbSquint,[id^=hbMouthN],[id^=hbMouthS],[id^=hbQuill]{animation:none}}

/* ===== CREDIT CONTROL AND THE RAIL ACTS, 24 August 2026 ===== */
.acc-pink{--acc:var(--vb-pink);--acct:var(--vb-pink)}
.side .bx-acts{margin-top:14px;border-top:1px solid var(--bx-rule);padding-top:7px}
.side .side-act{display:block;width:100%;background:none;border:0;border-radius:0;
  padding:2px 0;margin:0;color:var(--bx-ink);font-family:var(--bx-sans);
  font-weight:600;font-size:0.9375rem;text-align:left;text-decoration:none}
.side .side-act:hover{background:none;border:0;text-decoration:underline;text-underline-offset:3px}
.side .side-act:focus-visible{outline:2px solid var(--bx-ox);outline-offset:2px;box-shadow:none}
/* the money owed leads its row, set in the serif with lining figures */
.main.bx .cc-owing{font-family:var(--bx-serif);font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
/* an owing row and its reminder act sit side by side, the row taking the width */
.main.bx .cc-row{display:flex;align-items:center;gap:10px}
.main.bx .cc-row .lrow{flex:1;min-width:0}
.main.bx .cc-remind{margin:0;white-space:nowrap}
/* the rail door forms: one column of labelled fields, the sheet's width capped */
.main.bx .doorform2{max-width:34rem;display:flex;flex-direction:column;gap:11px}
.main.bx .doorform2 label{display:block;font-size:0.8125rem;font-weight:600;
  color:var(--bx-ink2);margin-bottom:2px}
.main.bx .doorform2 .cs-in{width:100%}
.main.bx .doorform2 .df-row{display:flex;gap:11px}
.main.bx .doorform2 .df-row>div{flex:1}

/* ===== THE PREVIEW PANE, 24 August 2026 =====
   On History and Documents an entry keeps its one line in the list and its
   detail reads in the pane on the right, chosen by query parameter like
   every other door, so no script ships. The chosen row takes the wash the
   cause list uses on hover and a bar in the file's blue. */
.main.bx .pv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:0 2.2rem;align-items:start}
.main.bx .pv-row.sel{background:#f2f2f1;box-shadow:inset 3px 0 0 var(--tile,var(--vb-blue))}
.main.bx .pv-pane{position:sticky;top:1rem;background:var(--bx-white);
  border:1px solid var(--bx-rule);border-top:4px solid var(--tile,var(--vb-blue));
  padding:16px 19px 18px}
.main.bx .pv-pane h3,.main.bx .pv-pane h2.pane-h{font-family:var(--bx-serif);font-size:1.0625rem;font-weight:600;
  margin:0 0 2px}
.main.bx .pv-when{color:var(--bx-ink3);font-size:0.8125rem;margin:0 0 10px}
.main.bx .pv-pane .fd-line{font-size:0.875rem;margin:0 0 6px}
.main.bx .pv-body{font-size:0.875rem;line-height:1.6;max-width:70ch;white-space:normal}
.main.bx .pv-body p{margin:0 0 9px}
@media(max-width:900px){
  .main.bx .pv-split{grid-template-columns:1fr}
  .main.bx .pv-pane{position:static;margin-top:14px}
}

/* ===== THE LEDGER, 24 August 2026 =====
   The Financial tab's accounts read as a book of account: date, particulars,
   debit, credit and the running balance, ruled by hairlines, figures lining
   and tabular in the serif, oldest first because the running balance is the
   story the columns tell. */
.main.bx .ledg{width:100%;border-collapse:collapse;margin:2px 0 8px}
.main.bx .ledg th{font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bx-ink3);font-weight:600;text-align:left;padding:0 1rem .3rem 0;
  border-bottom:1px solid var(--bx-ink);white-space:nowrap;vertical-align:bottom}
.main.bx .ledg td{padding:.34rem 1rem .34rem 0;border-bottom:1px solid var(--bx-rule);
  font-size:0.9375rem;vertical-align:top}
.main.bx .ledg th.num,.main.bx .ledg td.num{text-align:right;padding-right:0;
  padding-left:1rem;white-space:nowrap}
.main.bx .ledg td.num{font-family:var(--bx-serif);
  font-variant-numeric:lining-nums tabular-nums}
.main.bx .ledg .ld-d{white-space:nowrap;color:var(--bx-ink2)}
/* The two ledgers on the Financial tab share one set of columns, so Debit,
   Credit and Balance stand at the same place on the office side and the
   client side, whatever each table's particulars happen to say. */
.main.bx .ledg.lgr{table-layout:fixed}
.main.bx .ledg.lgr th:nth-child(1){width:6.5rem}
.main.bx .ledg.lgr th:nth-child(3),.main.bx .ledg.lgr th:nth-child(4),.main.bx .ledg.lgr th:nth-child(5){width:8rem}
.main.bx .ledg.lgr td{overflow-wrap:anywhere}

/* ===== THE MORNING HANDOVER AND THE BREACH REGISTER, 24 August 2026 =====
   A finding is a card: white paper, hairline border, the dot saying whether
   it is grave, the lead in bold, and the one door it opens on the right.
   Shown only while the finding is true, computed fresh at render. */
.main.bx .hv-sec{margin:0 0 22px}
.main.bx .hv{background:var(--bx-white);border:1px solid var(--bx-rule);
  padding:13px 18px 11px;margin:0 0 12px}
.main.bx .hv.grave{border-left:3px solid var(--bx-ox)}
.main.bx .hv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--bx-ink3);margin-right:8px;vertical-align:middle;margin-top:-1px}
.main.bx .hv-dot.red{background:var(--vb-red)}
.main.bx .hv-t{margin:0 0 6px;max-width:92ch;line-height:1.55}
.main.bx .hv-t.act-now{color:var(--bx-ox)}
.main.bx .hv-chip{display:inline-block;background:var(--vb-red-t);color:var(--bx-ox);
  font-size:0.75rem;font-weight:700;letter-spacing:.04em;padding:0 6px;
  font-variant-numeric:lining-nums tabular-nums}
.main.bx .hv-flag{position:static;margin-left:8px}
.main.bx .hv-open{display:block;text-align:right;font-weight:700;font-size:0.8125rem;
  color:var(--bx-ok);text-decoration:none}
.main.bx .hv-open:hover{text-decoration:underline;text-underline-offset:3px}
.main.bx .rpt{max-width:44rem}
.main.bx .rpt .rpt-total{font-weight:700;border-top:1px solid var(--bx-ink)}
.main.bx .rpt-case{margin:2px 0 8px}
.main.bx .rpt-case-head,.main.bx .rpt-case-fold>summary,.main.bx .rpt-case-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.34rem 0;border-bottom:1px solid var(--bx-rule)}
.main.bx .rpt-case-head{font-size:0.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--bx-ink2);border-bottom:1px solid var(--bx-ink)}
.main.bx .rpt-case .num{font-family:var(--bx-serif);font-variant-numeric:tabular-nums;text-align:right}
.main.bx .rpt-case-fold>summary{cursor:pointer;list-style:none}
.main.bx .rpt-case-fold>summary::-webkit-details-marker{display:none}
.main.bx .rpt-case-name::after{content:" +";color:var(--bx-ink3);font-size:.75rem;letter-spacing:.09em}
.main.bx .rpt-case-fold[open]>summary .rpt-case-name::after{content:" \2212"}
.main.bx .rpt-case-fold>summary:hover .rpt-case-name{color:var(--vb-blue)}
.main.bx .rpt-case-files{list-style:none;margin:0;padding:.2rem 0 .5rem 1.5rem;border-bottom:1px solid var(--bx-rule)}
.main.bx .rpt-case-files li{padding:.22rem 0;font-size:.9375rem}
.main.bx .rpt-case-files a{font-family:var(--bx-serif);text-decoration:none;border-bottom:1px solid var(--bx-rule)}
.main.bx .rpt-case-files a:hover{color:var(--vb-blue);border-color:var(--vb-blue)}
.main.bx .rpt-case-total{font-weight:700;border-top:1px solid var(--bx-ink);border-bottom:0}

/* the writing form stacks inside the pane, and the correspondents split
   hands the pane the width its form needs from the space the short list
   leaves spare */
.main.bx .pv-split.pv-wide{grid-template-columns:minmax(0,1fr) minmax(0,34rem)}
.main.bx .pv-write-form{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.main.bx .pv-write-form .cs-in{width:100%}
.main.bx .pv-write-form textarea{resize:vertical}
.main.bx .pv-write-form .btn{align-self:flex-start}
@media(max-width:900px){.main.bx .pv-split.pv-wide{grid-template-columns:1fr}}

/* The conflicts search: one field, one act, held to a reading width */
.main.bx .cf-form{max-width:34rem;margin-bottom:18px}

/* A gathered item on the subject access screen: the tick rides the row */
.main.bx .sar-pick{display:flex;align-items:center;gap:10px;cursor:pointer}
.main.bx .sar-pick input{width:15px;height:15px;flex:none}

/* The banner shown while the connection is gone: quiet, fixed, honest */
.offline-note{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#1c1c1a;
  color:#fff;font:500 13px/1.5 "Libre Franklin",-apple-system,sans-serif;
  text-align:center;padding:9px 16px}


/* WCAG 2.2 AA: the muted date darkens on the tinted selected row, and the
   skip link appears only to the keyboard; focus outlines stand globally above */
.main.bx .pv-row.sel .fd-m{color:var(--bx-ink2)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--vb-blue);color:#fff;
  padding:8px 14px;font:600 14px/1 var(--bx-sans);text-decoration:none}
.skip:focus{left:8px;top:8px}

/* the typing queue's page: the recording's player on the paper, the typed words
   in a sheet wide box, the transcript read back as it was held */
.main.bx .dict-audio{margin:0 0 18px}
.main.bx .dict-audio audio{display:block;width:min(100%,44rem);margin-bottom:6px}
.main.bx .dict-form{max-width:44rem;margin-top:14px}
.main.bx .dict-label{display:block;font-size:0.8125rem;color:var(--bx-ink2);margin-bottom:6px}
.main.bx .dict-text{display:block;width:100%;min-height:22rem;font:inherit;line-height:1.55;
  padding:10px 12px;margin-bottom:10px;resize:vertical}
.main.bx .dict-read{white-space:pre-wrap;font:inherit;line-height:1.6;max-width:64ch;
  padding:12px 0;border-top:1px solid var(--bx-rule);border-bottom:1px solid var(--bx-rule);margin:8px 0 14px}

/* the recorder on a dictation form: the face says what it is doing in words */
.main.bx .record-face{display:block;font-size:0.8125rem;color:var(--bx-ink2);margin:4px 0 6px;flex-basis:100%}
.main.bx [data-record][aria-pressed="true"]{color:var(--bx-ox);border-color:var(--bx-ox)}

/* the sitting counter under the file's name: quiet, in the second ink, the
   minutes ready to record with one press and never recorded on their own */
.main.bx .sitting{font-size:0.8125rem;color:var(--bx-ink3);margin-top:6px}
.main.bx .sitting .sitting-face{font-variant-numeric:tabular-nums;color:var(--bx-ink2)}
.main.bx .sitting a{color:var(--bx-ink2)}

/* the Inbox: each message a row, its filing acts beneath it in a line */
.main.bx .inbox-row{display:block}
.main.bx .inbox-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 0 10px calc(var(--bx-marg) + 1.5rem)}
.main.bx .inbox-acts .td-todo-add{margin:0}
.main.bx .inbox-acts .cs-in{width:12rem}

/* the narrowing box on a long list: a search field in the list bar, the
   face beside it saying how many rows remain */
.main.bx .listbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.main.bx .listbar .narrow{flex:1;min-width:14rem;max-width:28rem}
.main.bx .listbar .ordlink{margin-left:auto}

/* The comparison of two papers: removed lines struck in oxblood, added lines marked. */
.cmp{white-space:pre-wrap;font:inherit;margin:.5rem 0 0;padding:0}
.cmp-removed{color:var(--ox,#8c3b34);text-decoration:line-through}
.cmp-added{font-weight:600}

/* The postroom's proposed dates, ticked or left at the review. */
.pv-dates{border:0;padding:0;margin:0 0 .5rem}
.pv-dates legend{padding:0;margin-bottom:.25rem}
.pv-dates label{display:block}

/* The file at a glance: the facts a handler wants before the prose, as a
   labelled grid at the head of the Home tab, record 0185. */
.main.bx .glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 28px;
  margin:0 0 18px;max-width:var(--bx-sheet)}
.main.bx .glance div{margin:0;min-width:0}
.main.bx .glance dt{font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--bx-ink3);margin:0 0 2px}
.main.bx .glance dd{margin:0;font-size:0.9375rem;line-height:1.4;color:var(--bx-ink);overflow-wrap:anywhere}
.main.bx .glance dd a{color:inherit}
.main.bx .glance .glance-wide{grid-column:1 / -1}
.main.bx .glance .glance-act{display:inline-block;margin:6px 0 0 8px;vertical-align:middle}
.main.bx .glance dd.act-now{color:var(--bx-ox)}
@media(max-width:1100px){.main.bx .glance{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The list filters: who has the conduct and which plan, narrowing Files
   before the page is read, record 0185. */
.main.bx .filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 12px;
  max-width:var(--bx-sheet)}
.main.bx .filters .cs-in{max-width:16rem}
.main.bx .filters .fd-s{flex:1 1 100%}

/* The contents of a long screen: one line of links to its sections,
   record 0185. */
.main.bx .contents{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 20px;max-width:var(--bx-sheet);
  font-size:0.875rem}
.main.bx .contents a{color:var(--bx-ink2);text-decoration:underline;text-underline-offset:3px}
.main.bx .contents a:hover{color:var(--bx-ink)}

/* The product on a phone, record 0185. The rail folds behind a Menu
   control, the running head wraps, the margin column gives way to a
   single column, the ledgers scroll inside their own box and the grids
   stack, so nothing pushes the page sideways. */
.side .rail-toggle,.side .rail-menu{display:none}
@media (max-width:760px){
  .side{padding:12px 16px 16px}
  .side .rail-menu{display:inline-block;font:inherit;font-weight:600;font-size:0.9375rem;
    padding:6px 12px;border:1px solid var(--bx-rule2);cursor:pointer;margin:6px 0 4px;color:var(--bx-ink)}
  .side .rail-toggle{display:block;position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  .side .rail-toggle:focus-visible+.rail-menu{outline:2px solid var(--bx-focus);outline-offset:2px}
  .side nav,.side .bx-acts,.side .hb-btn{display:none}
  .side .rail-toggle:checked~nav,.side .rail-toggle:checked~.bx-acts{display:block}
  .side .rail-toggle:checked~.hb-btn{display:flex}
  .topbar{flex-wrap:wrap;gap:8px 12px;padding:8px 14px}
  .topbar .bx-run{flex:1 1 auto;white-space:normal}
  .topbar .tb-search{flex:1 1 100%;order:5;max-width:none}
  .topbar .tb-aids{margin-left:0}
  .topbar .tb-right{margin-left:auto;gap:10px}
  .topbar .who{white-space:normal}
  .topbar .tb-theme form{right:0;max-width:calc(100vw - 2rem)}
  .main.bx,.main.bx.calm{padding-left:16px;padding-right:16px}
  .main.bx .bx-head:has(.bx-marg){grid-template-columns:1fr;column-gap:0}
  .main.bx .bx-marg{text-align:left;padding-top:0}
  .main.bx .fd-row{grid-template-columns:minmax(0,1fr) auto}
  .main.bx .fd-row>.fd-m{grid-column:1 / -1}
  .main.bx .bxf>.fd-b{margin-left:0}
  .main.bx .glance{grid-template-columns:1fr 1fr;gap:10px 16px}
  .main.bx table,.main.bx .ledg,.main.bx .ledg.rpt,.main.bx .ledg.lgr{display:block;overflow-x:auto;
    max-width:100%;-webkit-overflow-scrolling:touch}
  .main.bx img{max-width:100%;height:auto}
  .main.bx .td-line{grid-template-columns:1fr}
  .main.bx.calm .td-firm-row{grid-template-columns:1fr}
  .main.bx .time-add,.main.bx .td-todo-add{flex-wrap:wrap}
  .main.bx .time-add .time-min,.main.bx .time-add .time-day{width:100%}
  .main.bx .pv-split{grid-template-columns:1fr}
  .main.bx .fd-line,.main.bx .fd-guide,.main.bx .h-sub,.main.bx .fd-s{overflow-wrap:anywhere}
  .quotebar{padding:14px 16px 16px}
}

/* The calendar link on People, an address a person copies, record 0186. */
.main.bx .cal-link{font-family:ui-monospace,Menlo,monospace;font-size:0.8125rem;overflow-wrap:anywhere;
  background:var(--bx-laid);padding:1px 4px}

/* Every field carries its question above it, record 0187: the placeholder
   stays as the example and the label stays as the field fills. In a row
   the label wrapper is the flex item, so the widths a row gives its
   fields move to the wrapper. */
.main.bx .fld{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.main.bx .fld-l{font-size:0.75rem;line-height:1.3;color:var(--bx-ink2);letter-spacing:.01em}
.main.bx .fld>.cs-in{width:100%}
.main.bx .time-add .fld-min,.main.bx .td-todo-add .fld-min{flex:none;width:7rem}
.main.bx .time-add .fld-day,.main.bx .td-todo-add .fld-day{flex:none;width:11rem}
.main.bx .td-todo-add,.main.bx .time-add,.main.bx .filters{align-items:flex-end}
/* in a row every control stands the same height, so the labels above them
   sit level and the button shares their foot, Saqib's 9 September point on
   the post book */
.main.bx .td-todo-add .cs-in,.main.bx .time-add .cs-in,.main.bx .filters .cs-in,
.main.bx .td-todo-add .btn,.main.bx .time-add .btn,.main.bx .filters .btn{
  height:2.5rem;box-sizing:border-box}
.main.bx .filters .fld{max-width:16rem}
.main.bx .pv-write-form .fld,.main.bx .doorform2 .fld{width:100%}
.main.bx .fld .time-min,.main.bx .fld .time-day{width:100%}
@media (max-width:760px){
  .main.bx .time-add .fld-min,.main.bx .time-add .fld-day,.main.bx .td-todo-add .fld-min,
  .main.bx .td-todo-add .fld-day{width:100%}
}


/* The time beside the date in the running head, 10 September 2026, and the
   door to a file in Henry's section on Today. */
.topbar .bx-clock{font-variant-numeric:tabular-nums}
.henry-door{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 10px}
.henry-door .fld{flex:1 1 18rem;margin:0}

/* The remark door at the foot of every screen, record 0218: one line
   folded under the maxim, opening to a single field, so a person can say
   what went wrong on the screen they are looking at without leaving it. */
.remark{padding:6px 40px 18px;background:var(--bx-laid);font-family:var(--bx-sans);font-size:0.8125rem;color:var(--bx-ink2)}
.remark summary{cursor:pointer;list-style:none}
.remark summary::-webkit-details-marker{display:none}
.remark summary::before{content:"+ ";color:var(--bx-ink3)}
.remark[open] summary::before{content:"- "}
.remark-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.remark-form .fld{flex:1 1 320px;margin:0}
.remark-all{align-self:center;color:var(--bx-ink2)}
@media (max-width:760px){.remark{padding:6px 16px 16px}}

/* The help at hand, record 0220: how this screen works, folded beside the
   remark door in the handbook's own words, a paragraph or two and no more. */
.helpat{padding-bottom:4px}
.helpat-b{max-width:70ch;margin-top:8px}
.helpat-b p{margin:0 0 8px;line-height:1.5;color:var(--bx-ink2)}

/* The clinical photograph, per Ahsene record 0006. The ghost is the previous
   image of the same view standing faintly behind the camera so the framing
   matches, and a shot on the comparison screen is the picture the surgeon and
   the patient look at together. Both stay inside their column on every glass. */
.main.bx img.ghost{display:block;max-width:100%;height:auto;opacity:.28;border-radius:8px;
  margin:0 0 10px}
.main.bx img.shot{display:block;max-width:100%;height:auto;border-radius:8px;margin:0 0 8px}


/* The treatment room's layout state and the rule about a finger, per
   Ahsene record 0008. The clinic's screens carry the class glass on the body and the
   legal screens carry nothing, so both rules below are the clinic's own and
   Bracton's screens render exactly as they rendered.

   The room puts the record on one side and the task on the other. At the
   tablet held sideways and at the desktop the two stand side by side with the
   record first, and at the existing nine hundred pixel breakpoint they stack
   with the task first, because a person holding a telephone came to do one
   thing. No fourth breakpoint is added. */
body.glass .main.bx .bx-room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 26px;align-items:start}
body.glass .main.bx .bx-room-record,body.glass .main.bx .bx-room-task{min-width:0}
@media (max-width:900px){
  body.glass .main.bx .bx-room{grid-template-columns:1fr;gap:0}
  body.glass .main.bx .bx-room-task{order:-1}
}

/* Every target a finger meets is at least forty four pixels on each side at
   the telephone and the two tablet widths, which is what the eleven hundred
   and eighty pixel breakpoint already separates from the desktop. A link laid
   out inline is a link inside a sentence and keeps the size of its words,
   which is the one exception the rule has always carried. */
@media (max-width:1180px){
  body.glass a[href],body.glass button,body.glass summary,body.glass input,
  body.glass select,body.glass textarea,body.glass [role=button]{
    min-height:44px;min-width:44px}
  body.glass .main.bx .tabstrip a{display:inline-flex;align-items:center}
  body.glass .side .nav,body.glass .side .side-act,body.glass .side .rail-menu,
  body.glass .topbar .tb-aid,body.glass .topbar .tb-go,body.glass .topbar .rail-act{
    display:inline-flex;align-items:center;justify-content:center}
  body.glass .main.bx .lrow a,body.glass .main.bx a.lrow{display:block}
  /* Safari draws a chooser at its own height whatever it is told, until the
     native appearance is set aside, so the clinic's choosers take the height
     the rule asks for and carry their own chevron on the right. */
  body.glass select{-webkit-appearance:none;appearance:none;padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
}