/* =============================================================================
   Aryal Practice Management — The Bound Ledger

   The practice kept as one bound ledger. The binding is the firm's red buckram;
   every screen is a page of pale green columnar ledger paper, ruled in feint
   green, with red money rules. Figures sit in fixed columns, totals are ruled
   once above and twice below, and entries are marked the way an auditor marks
   them: a tick when checked, a pencil query when pending, a red circle round
   an exception. Every mark on a page is explained by its key.

   Self-contained: the typeface ships from /assets/fonts, so the Content
   Security Policy stays closed to every foreign origin.

   Order: faces, tokens, base, the binding and the page, components, the day
   book, utilities, phone, print. legacy.css follows and maps the class names
   of screens that have not moved yet onto this world.
   ========================================================================== */

/* ----------------------------------------------------------------- Faces */

/* Archivo, variable in weight and width: condensed for printed column heads
   and the day numeral, normal width for entries. SIL Open Font License. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- Tokens */

:root {
  /* The binding: firm-red buckram, and the gilt of its ribbon and stamping. */
  --cloth:         #6e1420;
  --cloth-deep:    #561019;
  --cloth-thread:  #84202f;
  --on-cloth:      #f4efe3;
  --on-cloth-soft: #e3bcbc;
  --gilt:          #b08d3f;

  /* The page: columnar ledger paper and its ruling. */
  --paper:      #e6efdb;
  --paper-slip: #f3f7ec;   /* a loose slip laid on the page: fields, menus, notes */
  --paper-band: #d3e1c1;   /* the printed band behind column heads */
  --rule-feint: #b9ccaa;   /* feint lines between entries */
  --rule:       #6a8360;   /* ruling that must be seen: field edges, column foot */
  --ruling-ink: #3b5a38;   /* printed column heads, account rules, ticks */

  /* The inks. */
  --ink:    #1b2233;       /* blue-black entry ink: all primary text */
  --pencil: #545b57;       /* graphite: notes, captions, queries */
  --red:    #b0271f;       /* ledger red: money rules and exceptions */

  /* Chart inks: one per firm, in the firms' order, so a firm keeps its colour
     on every chart. Checked with the data-visualisation validator: apart under
     colour-blind simulation for neighbouring segments, and 3:1 on the paper. */
  --series-1: #a8701a;   /* ochre: the first firm */
  --series-2: #2f63a8;   /* blue: the second */
  --series-3: #1d8a5c;   /* green: the third */

  /* What each ink means when it marks an entry. */
  --mark-checked:   var(--ruling-ink);
  --mark-query:     var(--pencil);
  --mark-exception: var(--red);
  --mark-note:      var(--ink);

  /* The marks themselves, drawn once and masked in any ink. */
  --m-tick:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 8.9l3.5 3.3L13.7 3.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-query: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 5.7a2.8 2.8 0 1 1 4.2 2.4c-.9.5-1.5 1.1-1.5 2.3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='13.3' r='1.2'/%3E%3C/svg%3E");
  --m-ring:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 5.4C12.6 3 10.2 1.8 7.6 2.2 4.4 2.6 2 5.3 2.3 8.4c.3 3.1 3.1 5.4 6.2 5.2 3.1-.2 5.5-2.9 5.3-6-.1-.8-.3-1.5-.8-2.2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.2M9.2 4.4L12.8 8l-3.6 3.6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-dot:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.2'/%3E%3C/svg%3E");
  --m-dash:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5h9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Type: one family in four widths. Sizes step for a dense desk page. */
  --face: "Archivo", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --face-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --w-head:    75%;       /* printed column heads and running heads */
  --w-figure:  87.5%;     /* headings, figures, folio references */
  --w-text:    100%;      /* entries */
  --w-numeral: 62%;       /* the day numeral */

  --t-caption: 12px;
  --t-label:   13px;
  --t-body:    14px;
  --t-account: 16px;
  --t-heading: 20px;
  --t-title:   28px;
  --t-cast:    34px;      /* the Day book's money, cast across its band */
  --t-display: 44px;      /* the Day book's headline counts */
  --t-numeral: 88px;

  /* Space: a 4 px grid. Entries are dense; accounts get air between them. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Shape and depth: paper is cut square; only loose slips cast a shadow. */
  --cut: 2px;
  --shadow-slip: 0 1px 0 rgb(27 34 51 / 0.05), 0 12px 28px -10px rgb(27 34 51 / 0.32);

  /* Motion: settled, never bouncy. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --quick: 140ms;
  --settle: 260ms;

  /* Structure */
  --binding-w: 248px;
  --rail-w:    64px;
  --page-max:  1240px;
  --row:       40px;
  --control:   36px;
  --tabbar-h:  60px;
}

/* ------------------------------------------------------------------ Base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) transparent; }

body {
  margin: 0;
  font-family: var(--face);
  font-size: var(--t-body);
  font-stretch: var(--w-text);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  font-stretch: var(--w-figure);
  line-height: 1.2;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--cloth); text-decoration-color: currentColor; }

img, svg { max-width: 100%; vertical-align: middle; }

:focus-visible { outline: 2px solid var(--cloth); outline-offset: 2px; }

::selection { background: rgb(110 20 32 / 0.16); color: var(--ink); }

input, textarea { caret-color: var(--cloth); }

[hidden] { display: none !important; }

/* Figures line up in every column. */
table, input, select, .tnum { font-variant-numeric: tabular-nums lining-nums; }

code, kbd { font-family: var(--face-mono); font-size: var(--t-label); }

.skip {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--cut);
  background: var(--ink);
  color: var(--paper-slip);
  transform: translateY(-200%);
}
.skip:focus { transform: none; color: var(--paper-slip); }

/* ------------------------------------------------- The binding and the page */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* The binding, closed to its spine: a rail of icons. It opens over the page,
   never pushing it aside, while the pointer or keyboard focus is on it. The
   panel is always laid out at full width and only the edge of what shows
   moves, so opening it never reflows anything. */
.sidebar {
  --opened: calc(var(--binding-w) - var(--rail-w));
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: var(--binding-w);
  padding: var(--s-5) 0 var(--s-3);
  background: var(--cloth);
  color: var(--on-cloth);
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-color: var(--cloth-thread) transparent;
  box-shadow: 10px 0 28px -10px rgb(0 0 0 / 0.4);
  clip-path: inset(0 var(--opened) 0 0);
  transition: clip-path 180ms var(--ease-out);
}
.sidebar:hover,
.sidebar:focus-within,
.sidebar.is-holding { clip-path: inset(0 -40px 0 0); }

/* Where the board meets the page: it follows the edge as the binding opens. */
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(var(--rail-w) - 10px);
  width: 10px;
  box-shadow: inset -1px 0 0 var(--cloth-deep), inset -8px 0 10px -8px rgb(0 0 0 / 0.4);
  pointer-events: none;
  transition: translate 180ms var(--ease-out);
}
.sidebar:hover::after, .sidebar:focus-within::after, .sidebar.is-holding::after { translate: var(--opened) 0; }

/* A nav entry that opens a menu beside the binding rather than a page. */
.nav__item--menu { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.nav__chevron { flex: none; width: 12px; height: 12px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The work by kind, a slip laid beside the binding. */
.menu.menu--beside { position: fixed; top: var(--s-5); left: calc(var(--rail-w) + var(--s-2)); z-index: 90; width: max-content; min-width: 17rem; max-width: 22rem; max-height: calc(100vh - var(--s-4)); overflow-y: auto; transform-origin: top left; }
.menu__title { padding: var(--s-2) var(--s-3) var(--s-1); color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.08em; text-transform: uppercase; }
.menu .menu__item--kind { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); }
.menu__count { color: var(--ink); font-weight: 700; font-stretch: var(--w-figure); font-variant-numeric: tabular-nums lining-nums; }
.menu__count.is-nil { color: var(--pencil); font-weight: 500; }
.menu .menu__item--all { margin-top: var(--s-1); border-top: 1px solid var(--rule-feint); border-radius: 0; color: var(--cloth); font-weight: 600; }

/* In the phone's sheet the kinds open as a list under their entry. */
.nav__kinds > summary { list-style: none; cursor: pointer; }
.nav__kinds > summary::-webkit-details-marker { display: none; }
.nav__item--kind { padding-left: var(--s-7); }
.nav__tally { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.shell > .content { grid-column: 2; }

.sidebar :focus-visible { outline-color: var(--on-cloth); }

/* What only shows while the binding is open. */
.sidebar .nav__label,
.sidebar .nav__heading,
.sidebar .firm__name,
.sidebar .firm__chevron,
.sidebar__edition {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 120ms var(--ease-out);
}
.sidebar:hover .nav__label, .sidebar:focus-within .nav__label,
.sidebar:hover .nav__heading, .sidebar:focus-within .nav__heading,
.sidebar:hover .firm__name, .sidebar:focus-within .firm__name,
.sidebar:hover .firm__chevron, .sidebar:focus-within .firm__chevron,
.sidebar:hover .sidebar__edition, .sidebar:focus-within .sidebar__edition,
.sidebar.is-holding .nav__label, .sidebar.is-holding .nav__heading, .sidebar.is-holding .firm__name,
.sidebar.is-holding .firm__chevron, .sidebar.is-holding .sidebar__edition { opacity: 1; }
.sidebar .nav__chevron { opacity: 0; transition: opacity 120ms var(--ease-out); }
.sidebar:hover .nav__chevron, .sidebar:focus-within .nav__chevron, .sidebar.is-holding .nav__chevron { opacity: 1; }

.icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__top { position: relative; z-index: 1; padding: 0 0 0 21px; }
.sidebar__firm { position: relative; }

.firm {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: calc(var(--binding-w) - 36px);
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-cloth);
  font-size: var(--t-account);
  font-weight: 700;
  font-stretch: var(--w-figure);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
a.firm:hover { color: var(--on-cloth); }
.firm .icon { color: var(--gilt); }
.firm__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.firm__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--on-cloth-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.firm__rule { display: block; width: 22px; height: 2px; margin-top: var(--s-2); background: var(--gilt); }

.sidebar__edition {
  margin-top: var(--s-2);
  color: var(--on-cloth-soft);
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: var(--w-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav { flex: 1; }
/* The contents scroll on their own; the firm and the account stay put. */
.sidebar .nav { min-height: 0; overflow: hidden; scrollbar-width: thin; }
.sidebar:hover .nav, .sidebar:focus-within .nav { overflow-y: auto; }
.nav__group + .nav__group { margin-top: var(--s-3); }

.nav__heading {
  padding: 0 var(--s-2) var(--s-1);
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: var(--w-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar .nav__heading { padding: 0 0 var(--s-1) 21px; color: var(--on-cloth-soft); }

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-2);
  border-radius: var(--cut);
  font-weight: 500;
  text-decoration: none;
}
.sidebar .nav__item {
  min-height: 38px;
  padding: 0 var(--s-5) 0 21px;
  border-radius: 0;
  color: var(--on-cloth);
}
.sidebar .nav__item:hover { background: rgb(255 255 255 / 0.07); color: var(--on-cloth); }
.sidebar .nav__item[aria-current="page"] { background: rgb(255 255 255 / 0.12); font-weight: 700; }
.sidebar .nav__item[aria-current="page"] .icon { color: var(--gilt); }

/* The ribbon bookmark: it hangs from the top of the binding down to the page
   you are on, and ends in a swallowtail beside it, at the binding's edge. */
.sidebar .nav__item[aria-current="page"]::before,
.sidebar .nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: calc(var(--rail-w) - 16px);
  width: 8px;
  background: var(--gilt);
  pointer-events: none;
  animation: ribbon-drop var(--settle) var(--ease-out) both;
  transition: translate 180ms var(--ease-out);
}
.sidebar:hover .nav__item[aria-current="page"]::before, .sidebar:hover .nav__item[aria-current="page"]::after,
.sidebar:focus-within .nav__item[aria-current="page"]::before, .sidebar:focus-within .nav__item[aria-current="page"]::after { translate: calc(var(--binding-w) - var(--rail-w)) 0; }
.sidebar .nav__item[aria-current="page"]::before { bottom: 50%; height: 100vh; }
.sidebar .nav__item[aria-current="page"]::after {
  top: calc(50% - 1px);
  height: 14px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
}

button.nav__item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }

/* A count on an entry's icon: things waiting, notices unread. */
.nav__count {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--gilt);
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sidebar .nav__count { position: absolute; top: 2px; left: 34px; }
.sheet .nav__count { margin-left: auto; background: var(--cloth); color: var(--on-cloth); }

.sidebar__user { padding-top: var(--s-3); border-top: 1px solid rgb(255 255 255 / 0.14); }
.sidebar__user .avatar { flex: none; width: 24px; height: 24px; margin-left: -1px; background: rgb(255 255 255 / 0.12); color: var(--on-cloth); font-size: var(--t-caption); }
.sidebar__user .nav__item { font-size: var(--t-label); }
.sidebar__user .nav__label { overflow: hidden; text-overflow: ellipsis; }

/* A tablet has no hover: there the binding stays open. */
@media (hover: none) and (min-width: 768px) {
  .shell { grid-template-columns: var(--binding-w) minmax(0, 1fr); }
  .sidebar { clip-path: none; }
  .sidebar::after { translate: var(--opened) 0; }
  .sidebar .nav__item[aria-current="page"]::before, .sidebar .nav__item[aria-current="page"]::after { translate: calc(var(--binding-w) - var(--rail-w)) 0; }
  .sidebar .nav { overflow-y: auto; }
  .sidebar .nav__label, .sidebar .nav__heading, .sidebar .firm__name,
  .sidebar .firm__chevron, .sidebar__edition { opacity: 1; }
}

/* The page. */
.content {
  min-width: 0;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--s-7));
  padding: var(--s-6) var(--s-7) var(--s-8);
}
.content:focus { outline: none; }

/* A page head: the account title, ruled off twice beneath. */
.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 3px double var(--ruling-ink);
}
.page__head > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.page__title { font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; letter-spacing: -0.01em; }
.page__sub { margin-top: var(--s-1); max-width: 72ch; color: var(--pencil); }
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }

.tabbar { display: none; }

/* The closed cover: sign-in, and pages for signed-out visitors. The paper
   label on the buckram carries a printed double frame. */
.cover { min-height: 100vh; background: var(--cloth); }

.cover__board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  min-height: 100vh;
  padding: var(--s-7) var(--s-4);
}

.cover__label {
  position: relative;
  width: min(420px, 100%);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: var(--cut);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.2), 0 30px 60px -22px rgb(0 0 0 / 0.6);
}
.cover__label::before,
.cover__label::after { content: ""; position: absolute; pointer-events: none; }
.cover__label::before { inset: 10px; border: 1px solid var(--ruling-ink); }
.cover__label::after  { inset: 14px; border: 1px solid var(--rule-feint); }

.cover__title { font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; }
.cover__rule { display: block; margin: var(--s-4) 0 var(--s-5); border-top: 3px double var(--ruling-ink); }
.cover__foot { color: var(--on-cloth-soft); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.1em; text-transform: uppercase; }

.auth__title { margin-bottom: var(--s-1); font-size: var(--t-heading); font-weight: 700; font-stretch: var(--w-figure); }
.auth__hint { margin-bottom: var(--s-5); color: var(--pencil); }

/* ------------------------------------------------------------ Components */

/* Account: a heading ruled off, then its entries. */
.section + .section { margin-top: var(--s-7); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--ruling-ink);
}
.section__title { font-size: var(--t-account); font-weight: 700; font-stretch: var(--w-figure); }
.section__hint { color: var(--pencil); font-size: var(--t-label); }
.section__action { margin-left: auto; white-space: nowrap; }
.section__body { padding-top: var(--s-4); }

/* Buttons. The primary action is bound in the same cloth as the ledger. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control);
  padding: 0 var(--s-4);
  border: 1px solid var(--cloth-deep);
  border-radius: var(--cut);
  background: var(--cloth);
  color: var(--on-cloth);
  font-size: var(--t-body);
  font-weight: 600;
  font-stretch: var(--w-figure);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-out), border-color var(--quick) var(--ease-out), color var(--quick) var(--ease-out), transform var(--quick) var(--ease-out);
}
.btn:hover { background: var(--cloth-deep); color: var(--on-cloth); text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn--secondary { border-color: var(--rule); background: var(--paper-slip); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ruling-ink); background: var(--paper-band); color: var(--ink); }

.btn--quiet,
.btn--destructive {
  min-height: var(--control);
  padding: 0 var(--s-1);
  border-color: transparent;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.btn--quiet:hover { border-color: transparent; background: none; color: var(--cloth); text-decoration: underline; text-decoration-color: currentColor; }
.btn--destructive { color: var(--red); text-decoration-color: currentColor; }
.btn--destructive:hover { border-color: transparent; background: none; color: var(--red); }

/* The red fill appears only inside the confirmation step. */
.btn--confirm-destructive { border-color: var(--red); background: var(--red); color: var(--paper-slip); }
.btn--confirm-destructive:hover { border-color: var(--red); background: var(--red); color: var(--paper-slip); text-decoration: underline; }

.btn--lg { min-height: 48px; padding: 0 var(--s-5); font-size: var(--t-account); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--rule-feint);
  background: var(--paper-band);
  color: var(--pencil);
  cursor: not-allowed;
  transform: none;
  text-decoration: none;
}

/* Fields: a slip to write on, with the writing line drawn in ink. */
.field { margin-bottom: var(--s-4); }

.label { display: block; margin-bottom: var(--s-1); color: var(--ink); font-size: var(--t-label); font-weight: 600; }
.req { color: var(--red); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: var(--control);
  padding: 6px var(--s-3);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--ink);
  border-radius: var(--cut) var(--cut) 0 0;
  background: var(--paper-slip);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--cloth); outline-offset: 2px; }
.input:disabled, .select:disabled, .textarea:disabled { border-bottom-color: var(--rule); background: var(--paper-band); color: var(--pencil); }
.input::placeholder, .textarea::placeholder { color: var(--pencil); }

.textarea { min-height: 96px; resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--s-6);
  background: var(--paper-slip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%233b5a38' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s-3) center;
}

.field__hint, .field__error { margin-top: var(--s-1); font-size: var(--t-label); }
.field__hint { color: var(--pencil); }
.field__error { display: flex; align-items: flex-start; gap: 6px; color: var(--red); font-weight: 500; }
.field__error::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: var(--red);
  -webkit-mask: var(--m-ring) center / contain no-repeat;
  mask: var(--m-ring) center / contain no-repeat;
}

.has-error .input, .has-error .select, .has-error .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red); }

.check { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-1) 0; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--cloth); cursor: pointer; }
.check__label { font-weight: 600; }
.check__hint { display: block; color: var(--pencil); font-size: var(--t-label); font-weight: 400; }

/* The folio: a ruled table. Printed heads on a band, feint lines between
   entries, counts behind a feint rule, money behind the red double rule. */
/* Positioned, so screen-reader-only text in a cell stays inside the scroll
   box instead of widening the page on a phone. */
.table-wrap { position: relative; overflow-x: auto; scrollbar-color: var(--rule) transparent; }

.table { width: 100%; border-collapse: collapse; }

.table th {
  padding: 7px var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-band);
  color: var(--ruling-ink);
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: var(--w-head);
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td { height: var(--row); padding: 7px var(--s-3); border-bottom: 1px solid var(--rule-feint); vertical-align: middle; }
.table tbody tr:hover td { background: rgb(211 225 193 / 0.5); }

.table .num, .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.table td.num, .table th.num { border-left: 1px solid var(--rule-feint); }
.table th.num { border-left-color: var(--rule); }

.table .money { border-left: 3px double var(--red); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.money__p { display: inline-block; min-width: 2.4ch; margin-left: var(--s-2); padding-left: var(--s-2); border-left: 1px solid var(--red); text-align: right; }
.table th .money__p { color: var(--ruling-ink); }

/* A total: ruled once above and twice below. */
.table tfoot td { height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
.table tfoot td:empty { border-color: transparent; }

.table__primary { color: var(--ink); font-weight: 600; }
.table__primary a, a.table__primary { color: var(--ink); text-decoration: none; }
.table__primary a:hover, a.table__primary:hover { color: var(--cloth); text-decoration: underline; }
.table__muted { color: var(--pencil); font-size: var(--t-label); }
.table__person { display: flex; align-items: center; gap: var(--s-3); }

/* A folio that shows a set number of rows and scrolls for the rest: its
   printed head stays at the top as the entries pass beneath. The script
   sets the height to the rows themselves; this is the height without it. */
.table-wrap--rows { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; }
.table-wrap--rows thead th { position: sticky; top: 0; z-index: 2; }
.table-wrap--rows:focus-visible { outline: 2px solid var(--cloth); outline-offset: 2px; }
/* The head's foot rule travels with it (a collapsed border would not). */
.table-wrap--rows .table { border-collapse: separate; border-spacing: 0; }

/* A row's own head inside the folio: an entry, not a printed column head. */
.table tbody th.table__rowhead {
  height: var(--row);
  border-bottom: 1px solid var(--rule-feint);
  background: none;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 600;
  font-stretch: var(--w-text);
  letter-spacing: 0;
  text-transform: none;
}

/* A client's group, under the name in a row head. */
/* Where a line stands, said under the client when the steps are off to the side (a phone). */
.rowhead__now { display: none; color: var(--ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-text); line-height: 1.5; }
.rowhead__now .circled { padding: 0 5px; font-size: var(--t-caption); }
@media (max-width: 960px) { .rowhead__now { display: block; } }
.rowhead__group { display: block; color: var(--pencil); font-size: var(--t-caption); font-weight: 400; font-stretch: var(--w-text); line-height: 1.3; }

/* Running work by the month: each month cell carries its mark (tick, query,
   or a red ring with the count) and, where it lags, a pencilled lag. */
.table--running td, .table--running th { white-space: nowrap; }
/* The client stays in view while the months scroll on a phone. */
.table--running tbody th.table__rowhead { position: sticky; left: 0; z-index: 1; background: var(--paper); white-space: normal; }
.table--running tbody tr:hover th.table__rowhead { background: color-mix(in srgb, var(--paper-band) 50%, var(--paper)); }
.table--running tbody th.table__rowhead a { color: var(--ink); font-weight: 600; text-decoration: none; }
.table--running tbody th.table__rowhead a:hover { color: var(--cloth); text-decoration: underline; }
/* Counts side by side, without operators: nothing here adds up. */
.casting--counts { gap: var(--s-3) var(--s-6); }
.table--running td { font-variant-numeric: tabular-nums lining-nums; }
.month { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.month.status { align-items: center; }
.month--late .circled { margin-left: 2px; font-size: var(--t-label); }
.month__lag { margin-left: var(--s-1); color: var(--pencil); font-size: var(--t-caption); font-weight: 400; }
.casting__figure--nil { color: var(--pencil); }

/* The work as lines across its steps, one column a step, each step's head
   carrying how much work is at it.
   The statutory audits are a row a file: inked through the steps passed,
   the gilt dot where it stands with its days there (ringed in red past the
   target), a hatch through a step it does not need, the steps to come a
   feint line. The other work is a row a kind: a stop at every step, and
   where the kind has files a gilt disc with their count, a little larger
   the more there are, ringed in red when any are past target; the disc
   opens them. The row head stays in view as the steps scroll. */
.track-grid { min-width: 48rem; table-layout: fixed; }
.track-grid th { background: none; }
.track-grid th.track-grid__corner { width: 14rem; padding: 0 var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--rule-feint); vertical-align: bottom; }
.track-grid--bars th.track-grid__corner { padding-bottom: 22px; }
.track-grid th.track-grid__stage { padding: 0 2px var(--s-3); border-bottom: 1px solid var(--rule-feint); text-align: center; vertical-align: bottom; white-space: normal; line-height: 1.2; }
.track-grid__stage a, .track-grid__head { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.track-grid__name { max-width: 100%; color: var(--pencil); font-size: var(--t-caption); font-weight: 500; font-stretch: var(--w-text); letter-spacing: 0; text-transform: none; hyphens: auto; overflow-wrap: break-word; }
.track-grid__stage.is-review .track-grid__name { color: var(--ink); font-weight: 600; }
.track-grid__count { color: var(--ink); font-size: var(--t-heading); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; }
.track-grid__count.is-nil { color: var(--pencil); font-weight: 500; }
.track-grid__stage a:hover .track-grid__name, .track-grid__stage a:hover .track-grid__count { color: var(--cloth); }
/* Shown on a phone only, where the steps become a numbered list and a kind's discs its chips. */
.track-grid__no, .track-grid__phone-label, .track-grid__chips { display: none; }
/* How the audits are spread over the steps, when the rows are only the
   latest of them: a bar a step, as long as its share of the fullest step,
   the part past target in red at its end. */
.track-grid__bar { display: flex; align-self: stretch; height: 3px; margin: 2px 10px 0; }
.track-grid__fill { display: flex; justify-content: flex-end; height: 100%; margin: 0 auto; background: var(--rule-feint); overflow: hidden; }
.track-grid__late { height: 100%; background: var(--red); }
.track-grid__stage a:hover .track-grid__fill { background: var(--rule); }

.track-grid th.track-grid__who,
.table.track-grid tbody th.track-grid__who {
  position: sticky;
  left: 0;
  z-index: 3;
  padding: var(--s-2) var(--s-4) var(--s-2) 0;
  border-bottom: 1px solid var(--hair, var(--rule-feint));
  background: var(--account, var(--paper));
  line-height: 1.3;
  white-space: normal;
}
.track-grid__who a { color: var(--ink); font-weight: 600; text-decoration: none; }
.track-grid__who a:hover { color: var(--cloth); text-decoration: underline; }
.track-grid__kind.is-nil { color: var(--pencil); font-weight: 500; }
.table.track-grid tbody tr:last-child > * { border-bottom: 0; }
.track-grid tbody tr:hover th.track-grid__who,
.track-grid tbody tr:hover td { background: color-mix(in srgb, var(--paper-band) 30%, var(--account, var(--paper))); }

.track-grid td.track-grid__cell { position: relative; height: 56px; padding: 0; border-bottom: 1px solid var(--hair, var(--rule-feint)); }
.track-grid__cell::before,
.track-grid__cell::after { content: ""; position: absolute; top: 50%; height: 1px; background: var(--rule-feint); }
.track-grid__cell::before { left: 0; right: 50%; }
.track-grid__cell::after { left: 50%; right: 0; }
.track-grid__cell.is-first::before, .track-grid__cell.is-last::after { content: none; }
.track-grid__cell.is-done::before,
.track-grid__cell.is-done::after,
.track-grid__cell.is-current::before { height: 3px; margin-top: -1px; background: var(--ruling-ink); }
.track-grid__cell.is-skipped::before,
.track-grid__cell.is-skipped::after { height: 9px; margin-top: -4px; background: repeating-linear-gradient(135deg, var(--rule-feint) 0 1px, transparent 1px 5px); }
.track-grid__dot { position: absolute; z-index: 1; top: 50%; left: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--gilt); box-shadow: 0 0 0 3px var(--account, var(--paper)); }
.track-grid__days {
  position: absolute;
  bottom: calc(50% + 10px);
  left: 50%;
  translate: -50% 0;
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 700;
  font-stretch: var(--w-figure);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.track-grid__days .circled { padding: 0 5px; }

/* The other work's line: a stop at each step, a disc where there are files. */
.track-grid--kinds td.track-grid__cell { height: 60px; }
.track-grid--kinds .track-grid__cell::before,
.track-grid--kinds .track-grid__cell::after { height: 2px; margin-top: -1px; }
.track-grid__stop { position: absolute; z-index: 1; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1.5px solid var(--rule-feint); border-radius: 50%; background: var(--account, var(--paper)); }
.track-grid__files { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; color: var(--ink); text-decoration: none; }
.track-grid__n {
  --d: 26px;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--gilt);
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: 0 0 0 3px var(--account, var(--paper));
  transition: transform var(--quick) var(--ease-out), background-color var(--quick) var(--ease-out), color var(--quick) var(--ease-out);
}
.track-grid__files.is-2 .track-grid__n { --d: 30px; }
.track-grid__files.is-3 .track-grid__n { --d: 34px; font-size: var(--t-label); }
.track-grid__files.is-4 .track-grid__n { --d: 38px; font-size: var(--t-label); }
.track-grid__files.is-5 .track-grid__n { --d: 42px; font-size: var(--t-label); }
.track-grid__files.is-late .track-grid__n { box-shadow: 0 0 0 2.5px var(--account, var(--paper)), 0 0 0 4px var(--red); }
.track-grid__files:hover .track-grid__n,
.track-grid__files:focus-visible .track-grid__n { background: var(--cloth); color: var(--on-cloth); transform: scale(1.08); }
.track-grid__files:active .track-grid__n { transform: scale(0.97); }
.track-grid__files:focus-visible { outline: 0; }
.track-grid__files:focus-visible .track-grid__n { outline: 2px solid var(--cloth); outline-offset: 4px; }

/* At a table's foot, the way to everything it shows only the latest of. */
.section__foot { padding-top: var(--s-3); }
.section__foot a { font-weight: 600; }
.section__hint .circled { margin: 0 1px; font-size: var(--t-label); }

.key__track { display: inline-flex; align-items: center; gap: var(--s-2); }
.key__track-done { width: 22px; height: 3px; background: var(--ruling-ink); }
.key__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--gilt); }
.key__files { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gilt); color: var(--ink); font-size: var(--t-caption); font-weight: 800; }
.key__stop { position: relative; width: 24px; height: 9px; }
.key__stop::before { content: ""; position: absolute; top: 3.5px; left: 0; right: 0; height: 2px; background: var(--rule-feint); }
.key__stop::after { content: ""; position: absolute; top: 0; left: 7.5px; width: 9px; height: 9px; border: 1.5px solid var(--rule-feint); border-radius: 50%; background: var(--paper); }
.key__bar { display: flex; justify-content: flex-end; width: 28px; height: 3px; background: var(--rule-feint); overflow: hidden; }
.key__bar-late { width: 10px; background: var(--red); }
.key__note { flex-basis: 100%; }
.key__track-skip { width: 22px; height: 9px; background: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 5px); }
.key--open { margin-top: var(--s-6); padding-top: 0; border-top: 0; }

/* A figure that opens what it counts. */
.figure-link { color: var(--ink); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.figure-link:hover { color: var(--cloth); text-decoration: underline; }

/* Stages read across the page, one column each, their counts beneath. */
.table--across th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.table--across td { font-size: var(--t-heading); font-stretch: var(--w-figure); }
.table--across td.is-review { position: relative; }
.table--across td.is-review::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--s-2);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--gilt);
  -webkit-mask: var(--m-dot) center / contain no-repeat;
  mask: var(--m-dot) center / contain no-repeat;
}

/* A folio reference: ENG-2026-0142, AA-004. */
.folio-ref { font-size: var(--t-label); font-weight: 600; font-stretch: var(--w-figure); letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* Status: an auditor's mark, then the word. */
.status {
  --mark: var(--m-dash);
  --mark-ink: var(--pencil);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--mark-ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.status--ok      { --mark: var(--m-tick);  --mark-ink: var(--mark-checked); }
.status--warn    { --mark: var(--m-query); --mark-ink: var(--mark-query); }
.status--bad     { --mark: var(--m-ring);  --mark-ink: var(--mark-exception); }
.status--info    { --mark: var(--m-arrow); --mark-ink: var(--mark-note); }
.status--current { --mark: var(--m-dot);   --mark-ink: var(--gilt); }

/* Circled in red: an exception figure, the way an auditor rings it. */
.circled { position: relative; display: inline-block; padding: 0 7px; color: var(--red); font-weight: 700; }
.circled::after {
  content: "";
  position: absolute;
  inset: -3px -1px -2px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  transform: rotate(-5deg);
  pointer-events: none;
}

/* The key: every mark used on a page, explained on it. */
.key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule-feint); color: var(--pencil); font-size: var(--t-label); }
.key__title { color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.08em; text-transform: uppercase; }
.key .status { color: var(--pencil); }

/* Tally marks, as clerks keep a count: four strokes and a fifth across. */
.tally { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; vertical-align: -3px; }
.tallied { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); }

/* Casting: figures that add up across the page to a double-ruled total. */
.casting { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); padding-top: var(--s-4); }
.casting__item { display: flex; flex-direction: column; gap: 2px; min-width: 72px; }
.casting__figure { font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
a.casting__figure { color: var(--ink); text-decoration: none; }
a.casting__figure:hover { color: var(--cloth); }
.casting__label { color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.07em; text-transform: uppercase; }
.casting__note { color: var(--pencil); font-size: var(--t-label); }
.casting__op { padding-bottom: 22px; color: var(--pencil); font-size: var(--t-heading); font-weight: 300; }

.casting__item--total { position: relative; padding: var(--s-1) var(--s-3) 0; }
.casting__item--total::before,
.casting__item--total::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  transform-origin: left center;
  animation: rule-cast 520ms var(--ease-out) 180ms both;
}
.casting__item--total::before { top: 0; border-top: 1px solid var(--ink); }
.casting__item--total::after { bottom: -6px; border-bottom: 3px double var(--ink); }

/* Stats on screens not yet moved read as castings. */
.stats { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.stat__value { order: 1; color: var(--ink); font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
a.stat__value { text-decoration: none; }
a.stat__value:hover { color: var(--cloth); }
.stat__label { order: 2; color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.07em; text-transform: uppercase; }
.stat__meta { order: 3; color: var(--pencil); font-size: var(--t-label); }

/* Stepper: the approval path and the audit stages, as a line of marks. */
.stepper { display: flex; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }

.stepper__step { position: relative; flex: 1 1 0; min-width: 0; padding-top: var(--s-6); color: var(--pencil); font-size: var(--t-label); }
.stepper__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--rule);
  -webkit-mask: var(--m-dash) center / contain no-repeat;
  mask: var(--m-dash) center / contain no-repeat;
}
.stepper__step::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 26px;
  right: calc(-1 * var(--s-4) + var(--s-2));
  border-top: 1px dashed var(--rule);
}
.stepper__step:last-child::after { display: none; }
.stepper__step.is-done::before { background: var(--mark-checked); -webkit-mask-image: var(--m-tick); mask-image: var(--m-tick); }
.stepper__step.is-done::after { border-top-style: solid; border-top-color: var(--ruling-ink); }
.stepper__step.is-current::before { background: var(--gilt); -webkit-mask-image: var(--m-dot); mask-image: var(--m-dot); }

.stepper__label { display: block; color: var(--pencil); font-weight: 500; }
.stepper__step.is-done .stepper__label { color: var(--ink); }
.stepper__step.is-current .stepper__label { color: var(--ink); font-weight: 700; }
.stepper__meta { display: block; color: var(--pencil); }

/* Slips: notes laid on the page. Each carries the mark of its kind. */
.notices { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }

.notice {
  --mark: var(--m-arrow);
  --mark-ink: var(--mark-note);
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) 42px;
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-slip);
  color: var(--ink);
}
.notice::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 15px;
  width: 16px;
  height: 16px;
  background: var(--mark-ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.notice--ok   { --mark: var(--m-tick);  --mark-ink: var(--mark-checked); }
.notice--warn { --mark: var(--m-query); --mark-ink: var(--mark-query); }
.notice--bad  { --mark: var(--m-ring);  --mark-ink: var(--mark-exception); border-color: rgb(176 39 31 / 0.35); }
.notice--gold { --mark: var(--m-dot);   --mark-ink: var(--gilt); }
.notice__title { margin-bottom: 2px; font-weight: 700; }
.notice__list { max-width: 72ch; margin: var(--s-2) 0 0 var(--s-5); list-style: disc; }
.notice__list li + li { margin-top: var(--s-1); }
.notice__action { margin-top: var(--s-4); }

/* Toasts: a slip passed across the desk, then taken away. */
.toasts {
  position: fixed;
  top: var(--s-5);
  right: var(--s-5);
  z-index: 90;
  display: grid;
  gap: var(--s-2);
  width: min(380px, calc(100vw - 2 * var(--s-4)));
  pointer-events: none;
}

.toast {
  --mark: var(--m-tick);
  --mark-ink: var(--mark-checked);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) 42px;
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-slip);
  color: var(--ink);
  box-shadow: var(--shadow-slip);
  pointer-events: auto;
  animation: slip-in var(--settle) var(--ease-out) both;
  transition: opacity var(--quick) var(--ease-out), transform var(--quick) var(--ease-out);
}
.toast::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 15px;
  width: 16px;
  height: 16px;
  background: var(--mark-ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.toast--info { --mark: var(--m-arrow); --mark-ink: var(--mark-note); }
.toast--warn { --mark: var(--m-query); --mark-ink: var(--mark-query); }
.toast--bad  { --mark: var(--m-ring);  --mark-ink: var(--mark-exception); }
.toast.is-leaving { opacity: 0; transform: translateY(-4px); }
.toast__close { margin: -2px -6px 0 auto; padding: 0 var(--s-1); border: 0; background: none; color: var(--pencil); font-size: var(--t-account); line-height: 1; cursor: pointer; }
.toast__close:hover { color: var(--ink); }

/* Nil: what a ledger writes when there is nothing to enter. */
.empty { padding: var(--s-4) 0; color: var(--pencil); }
.empty__action { margin-top: var(--s-3); }
.nil { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-4) 0 var(--s-2); color: var(--pencil); }
.nil__word { color: var(--ruling-ink); font-size: var(--t-account); font-weight: 700; font-stretch: var(--w-head); letter-spacing: 0.06em; text-transform: uppercase; }

/* Avatar: initials stamped on a square. */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--cut);
  background: var(--paper-band);
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 700;
  font-stretch: var(--w-figure);
  letter-spacing: 0.02em;
}

/* Loose slips over the page: menus, the firm switcher, sheets. */
.menu {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: var(--s-3);
  z-index: 80;
  min-width: calc(100% - var(--s-3));
  padding: var(--s-1);
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-slip);
  color: var(--ink);
  box-shadow: var(--shadow-slip);
  transform-origin: top left;
  animation: slip-open var(--quick) var(--ease-out) both;
}

.menu__item {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--cut);
  background: none;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--paper-band); color: var(--ink); }
.menu__item[aria-checked="true"], .menu__item[aria-current="true"] { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-weight: 700; }
.menu__item[aria-checked="true"]::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--mark-checked);
  -webkit-mask: var(--m-tick) center / contain no-repeat;
  mask: var(--m-tick) center / contain no-repeat;
}

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 85vh;
  margin: 0;
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  border: 0;
  border-top: 3px double var(--ruling-ink);
  border-radius: var(--cut) var(--cut) 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-slip);
  overflow-y: auto;
}
.sheet[open] { animation: sheet-in var(--settle) var(--ease-out); }
.sheet::backdrop { background: rgb(27 34 51 / 0.36); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.sheet__title { font-size: var(--t-account); font-weight: 700; font-stretch: var(--w-figure); }
.sheet .nav__heading { color: var(--ruling-ink); }
.sheet .nav__item { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--rule-feint); border-radius: 0; color: var(--ink); }
.sheet .nav__item .icon { width: 20px; height: 20px; color: var(--ruling-ink); }
.sheet .nav__item[aria-current="page"] { font-weight: 700; }
.sheet .nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--s-3);
  width: 10px;
  height: 22px;
  background: var(--gilt);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 64%, 0 100%);
}

/* Clock-in: one large button, and where you are on the line below. */
.clockin { display: grid; gap: var(--s-2); max-width: 420px; }
.clockin__time { font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.clockin__where { color: var(--pencil); font-size: var(--t-label); }
/* Whether this phone can give the reading, said under the button before it is pressed. */
.clockin__location { margin: 0; color: var(--pencil); font-size: var(--t-label); line-height: 1.5; }
.clockin__location .status { display: flex; align-items: flex-start; color: inherit; white-space: normal; }
.clockin__location .status::before { margin-top: 2px; }
.clockin__location .status--bad { color: var(--red); }
.clockin__location a { font-weight: 600; white-space: nowrap; }

/* This phone: the test and what it found, and how to put a fault right. */
.device__test { display: grid; gap: var(--s-3); justify-items: start; padding-top: var(--s-4); }
.device__result { max-width: 60ch; margin: 0; color: var(--pencil); font-size: var(--t-label); line-height: 1.5; }
.device__result.status { display: flex; align-items: flex-start; white-space: normal; }
.device__result.status::before { margin-top: 2px; }
.device__result.status--ok, .device__result.status--warn { color: var(--ink); }
.device__result.status--bad { color: var(--red); }
.device__help { max-width: 62ch; }
.device__help ol { margin: 0 0 var(--s-3); padding-left: 1.4em; }
.device__help li { padding: 2px 0; }
.device__sub { margin: var(--s-3) 0 var(--s-1); color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.07em; text-transform: uppercase; }
.device__sub:first-child { margin-top: 0; }
[data-device] .particulars .status { white-space: normal; }

/* Meters and bars: a proportion ruled in ink, always beside its figure. */
.meter { display: block; min-width: 64px; height: 6px; background: var(--rule-feint); overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--ruling-ink); }
.meter__fill--ok   { background: var(--ruling-ink); }
.meter__fill--warn { background: var(--pencil); }
.meter__fill--bad  { background: var(--red); }
.meter__fill--gold { background: var(--gilt); }
.meter__fill--info { background: var(--ink); }

.bars { display: grid; gap: var(--s-3); padding-top: var(--s-4); }
.bar { display: grid; grid-template-columns: minmax(0, 16rem) minmax(64px, 1fr) 4.5rem; align-items: center; gap: var(--s-4); }
.bar__value { font-weight: 700; font-stretch: var(--w-figure); text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* Thumb index: the tabs cut into a ledger's edge, one per firm. */
.thumbs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--ruling-ink); }
.thumbs__tab {
  padding: var(--s-2) var(--s-4) 6px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--cut) var(--cut) 0 0;
  background: var(--paper-band);
  color: var(--ruling-ink);
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: var(--w-head);
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}
.thumbs__tab:hover { background: var(--paper-slip); color: var(--ink); }
.thumbs__tab[aria-current="page"] { position: relative; top: 2px; padding-bottom: var(--s-2); border-color: var(--ruling-ink); background: var(--paper); color: var(--ink); }
.thumbs + .spread, .thumbs + .section { margin-top: var(--s-6); }

/* Charts: columns drawn on the server, one ink per firm. Thin marks on
   hairline ruling; the figures are always in a table beneath. */
.chart { position: relative; margin: var(--s-3) 0 0; container-type: inline-size; }
/* Each chart comes in three drawings; the one nearest the space shows. */
.chart__svg { display: none; width: 100%; height: auto; }
.chart__svg--wide { display: block; }
@container (max-width: 860px) {
  .chart__svg--wide { display: none; }
  .chart__svg--mid { display: block; }
}
@container (max-width: 560px) {
  .chart__svg--mid { display: none; }
  .chart__svg--narrow { display: block; }
}
.chart text { fill: var(--pencil); font-family: var(--face); font-size: var(--t-caption); font-variant-numeric: tabular-nums lining-nums; }
.chart__grid line { stroke: var(--rule-feint); stroke-width: 1; }
.chart__base { stroke: var(--rule); stroke-width: 1; }
.chart__tick { text-anchor: end; }
.chart__label { font-stretch: var(--w-head); letter-spacing: 0.04em; text-anchor: middle; }
.chart .chart__value { fill: var(--ink); font-weight: 700; text-anchor: middle; }
.chart__hit { fill: transparent; }
.chart__col { outline: none; }
.chart__col:hover .chart__hit, .chart__col:focus-visible .chart__hit { fill: rgb(211 225 193 / 0.5); }
.chart__col:focus-visible .chart__hit { stroke: var(--cloth); stroke-width: 2; }

.series-1 { fill: var(--series-1); background: var(--series-1); }
.series-2 { fill: var(--series-2); background: var(--series-2); }
.series-3 { fill: var(--series-3); background: var(--series-3); }
.meter__fill--series-1 { background: var(--series-1); }
.meter__fill--series-2 { background: var(--series-2); }
.meter__fill--series-3 { background: var(--series-3); }

/* The key to a chart's inks: a swatch beside each firm's name. */
.legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink); font-size: var(--t-label); }
.legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend__swatch { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: var(--s-2); border-radius: var(--cut); }
.legend__item .legend__swatch { margin-right: 0; }

/* A column's figures, on a slip, while the pointer or focus is on it. */
.chart-tip { position: absolute; z-index: 5; display: grid; gap: 2px; min-width: 10rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule-feint); border-radius: var(--cut); background: var(--paper-slip); color: var(--ink); box-shadow: var(--shadow-slip); font-size: var(--t-label); pointer-events: none; white-space: nowrap; }
.chart-tip[hidden] { display: none; }
.chart-tip__title { color: var(--pencil); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.06em; text-transform: uppercase; }
.chart-tip__row { display: flex; align-items: center; gap: var(--s-2); }
.chart-tip__row strong { font-variant-numeric: tabular-nums lining-nums; }
.chart-tip__key { flex: none; width: 12px; height: 2px; }
.chart-tip__key:not([class*="series-"]) { background: var(--rule); }
.chart-tip__name { color: var(--pencil); }

/* A meter and its figure inside a table cell. */
.bar--inline { display: grid; grid-template-columns: minmax(64px, 1fr) 3.5rem; align-items: center; gap: var(--s-3); }
.bar--inline .meter, .bar--inline .meter__fill { display: block; }

/* An account heading inside a folio: the rows below it belong to it. */
.table .table__band th { padding-top: var(--s-4); border-bottom: 2px solid var(--ruling-ink); background: none; color: var(--ruling-ink); }
.table tbody tr.table__band:hover th { background: none; }

/* A voided receipt stays on the page, struck through, and counts for nothing. */
.is-voided, .is-voided td { color: var(--pencil); }

/* A large standalone figure keeps proportional digits. */
.figure--plain { font-variant-numeric: proportional-nums lining-nums; }

@keyframes ribbon-drop { from { transform: translateY(-18px); } to { transform: none; } }
@keyframes rule-cast   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slip-in     { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes slip-open   { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sheet-in    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Day book */

/* Today's page head: the day numeral large, the month and year beside it. */
.folio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 3px double var(--ruling-ink);
}

.folio__date { display: flex; align-items: flex-end; gap: var(--s-4); margin: 0; font-weight: 700; }
.folio__day {
  color: var(--cloth);
  font-size: var(--t-numeral);
  font-weight: 800;
  font-stretch: var(--w-numeral);
  line-height: 0.78;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.folio__when { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.folio__month { font-size: var(--t-title); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.05; }
.folio__ad { color: var(--pencil); font-size: var(--t-label); font-weight: 500; font-stretch: var(--w-text); }

.folio__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
.folio__running { color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.08em; text-transform: uppercase; }

.folio__greeting { margin: var(--s-3) 0 var(--s-6); color: var(--pencil); }
.folio__greeting strong { color: var(--ink); font-weight: 600; }

/* The overview is set as a report's page. Its head needs no double rule:
   the band of red beneath it is the page's ruling. */
.folio--open { padding-bottom: 0; border-bottom: 0; }
.daybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-4); }
.daybar .folio__greeting { margin: 0; font-size: var(--t-account); }
.daybar .folio__greeting strong { font-weight: 700; }

/* The firm in view, chosen on the page as in the switcher. */
.firm-pick__group { display: inline-flex; padding: 3px; border-radius: var(--cut); background: var(--paper-band); }
.firm-pick__choice { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--cut); background: none; color: var(--ruling-ink); font: inherit; font-size: var(--t-label); font-weight: 600; white-space: nowrap; cursor: pointer; }
.firm-pick__choice:hover { color: var(--ink); }
.firm-pick__choice[aria-pressed="true"] { background: var(--paper-slip); color: var(--ink); box-shadow: 0 1px 2px rgb(27 34 51 / 0.14); }

/* Today: what waits on you and the money, as large figures in one band of
   the binding's red, the page's one bold moment. The past-target count is
   ringed, the net owed ruled once above and twice below, in the band's ink. */
.today { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-radius: var(--cut); background: var(--cloth); color: var(--on-cloth); }
.today--one { grid-template-columns: minmax(0, 1fr); }
.today :focus-visible { outline-color: var(--on-cloth); }
.today__part { min-width: 0; padding: var(--s-5) var(--s-6) 28px; }
.today__part + .today__part { border-left: 1px solid rgb(244 239 227 / 0.18); }
.today__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: 20px; }
.today__title { color: var(--on-cloth-soft); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.12em; text-transform: uppercase; }
.today__link, .today__link:hover { color: var(--on-cloth); font-size: var(--t-label); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(244 239 227 / 0.4); text-underline-offset: 3px; }
.today__link:hover { text-decoration-color: var(--on-cloth); }
.today__figs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--s-4); }
.today__fig, .today__item { display: grid; align-content: start; gap: var(--s-2); color: var(--on-cloth); text-decoration: none; }
/* A figure that opens what it counts is lifted onto a slip of paper under the
   pointer or the keyboard's focus, its figure in black ink: the link colour, the
   binding's red, would vanish into the band. The slip is drawn into the
   figure's own margin, so nothing moves. */
a.today__fig, a.today__item { justify-self: start; margin: -8px -10px; padding: 8px 10px; border-radius: var(--cut); transition: background-color var(--quick) var(--ease-out), color var(--quick) var(--ease-out); }
a.today__fig:hover, a.today__item:hover, a.today__fig:focus-visible, a.today__item:focus-visible { background: var(--paper-slip); color: var(--ink); }
a.today__fig:hover .today__label, a.today__item:hover .today__label, a.today__fig:focus-visible .today__label, a.today__item:focus-visible .today__label { color: var(--pencil); }
a.today__fig:hover .today__ring::after, a.today__fig:focus-visible .today__ring::after { border-color: var(--red); }
.today__n { font-size: var(--t-display); font-weight: 800; font-stretch: var(--w-figure); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.today__n--cast { font-size: var(--t-cast); white-space: nowrap; }
.today__label { color: var(--on-cloth-soft); font-size: var(--t-label); line-height: 1.3; }
.today__fig.is-nil .today__n { color: rgb(244 239 227 / 0.42); font-weight: 600; }
.today__ring { position: relative; display: inline-block; padding: 0 9px; }
.today__ring::after { content: ""; position: absolute; inset: -7px -3px -5px; border: 2px solid var(--on-cloth); border-radius: 50%; transform: rotate(-5deg); pointer-events: none; }
.today__cast { display: flex; align-items: flex-start; gap: 14px; }
.today__op { padding-top: 4px; color: var(--on-cloth-soft); font-size: var(--t-heading); font-weight: 300; line-height: 1; }
.today__item--total .today__n { margin-top: -5px; padding: 4px; border-top: 1px solid var(--on-cloth); border-bottom: 4px double var(--on-cloth); }
.today__note { color: var(--on-cloth-soft); font-size: var(--t-label); }

/* An account to a leaf: a pale sheet laid on the page, its head, its table
   and its foot, with air between the accounts. */
.account {
  --account: var(--paper-slip);
  --hair: color-mix(in srgb, var(--rule-feint) 55%, var(--paper-slip));
  margin-top: var(--s-5);
  padding: var(--s-5) 28px 18px;
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--account);
}
.account__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) 14px; margin-bottom: 20px; }
.account__title { font-size: var(--t-heading); font-weight: 700; font-stretch: var(--w-figure); letter-spacing: -0.01em; }
.account__hint { color: var(--pencil); font-size: var(--t-body); }
.account__hint .circled { margin: 0 1px; font-size: var(--t-label); }
.account__action { margin-left: auto; color: var(--ink); font-size: var(--t-label); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-feint); text-underline-offset: 3px; }
.account__action:hover { color: var(--cloth); text-decoration-color: currentColor; }
.account__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); padding-top: 14px; border-top: 1px solid var(--hair); color: var(--pencil); font-size: var(--t-label); }
.account__more { color: var(--cloth); font-weight: 600; text-decoration: none; }
.account__more::after { content: " \2192"; }
.account__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.account .nil { padding-top: 0; }

/* VAT and TDS, and accounting: a button each, to their pages. Under a
   pointer a slip comes up beneath it after a moment, with the table of the
   ten worked on most recently; Escape puts it away. A touch screen has no
   hover, so there the button simply opens the page. */
.peeks { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); }
.peek__btn { display: grid; align-content: center; gap: var(--s-1); min-height: 92px; padding: 20px 28px; border: 1px solid var(--rule-feint); border-radius: var(--cut); background: var(--paper-slip); color: var(--ink); text-decoration: none; transition: border-color var(--quick) var(--ease-out); }
.peek__title { font-size: var(--t-heading); font-weight: 700; font-stretch: var(--w-figure); letter-spacing: -0.01em; line-height: 1.2; transition: color var(--quick) var(--ease-out); }
.peek__meta { color: var(--pencil); font-size: var(--t-body); }
.peek__meta .circled { margin: 0 1px; font-size: var(--t-label); }
.peek:hover .peek__btn, .peek:focus-within .peek__btn { border-color: var(--rule); }
.peek:hover .peek__title { color: var(--cloth); }
.peek__panel {
  position: absolute;
  top: 100%;
  z-index: 15;
  width: min(100%, 46rem);
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity var(--quick) var(--ease-out), translate var(--quick) var(--ease-out), visibility 0s linear var(--quick);
}
.peek:first-child .peek__panel { left: 0; }
.peek:last-child .peek__panel { right: 0; }
.peek:hover .peek__panel, .peek:focus-within .peek__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 140ms; }
.peek.is-dismissed .peek__panel { opacity: 0; visibility: hidden; transition-delay: 0s; }
.peek__box { padding: 18px 24px 12px; border: 1px solid var(--rule-feint); border-radius: var(--cut); background: var(--paper-slip); box-shadow: var(--shadow-slip); }
.peek__box .table th { background: none; border-bottom-color: var(--rule-feint); }
.peek__box .table td, .peek__box .table tbody th.table__rowhead { border-bottom-color: color-mix(in srgb, var(--rule-feint) 55%, var(--paper-slip)); }
.peek__box .table tbody tr:last-child > * { border-bottom: 0; }
.peek__box .table th:first-child, .peek__box .table td:first-child { padding-left: 0; }
.peek__box .table th:last-child, .peek__box .table td:last-child { padding-right: 0; }
.peek__box .table--running tbody th.table__rowhead { position: static; background: none; }
.peek__box .table tbody tr:hover td, .peek__box .table tbody tr:hover th.table__rowhead { background: color-mix(in srgb, var(--paper-band) 30%, var(--paper-slip)); }
.peek__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s-4); margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid color-mix(in srgb, var(--rule-feint) 55%, var(--paper-slip)); color: var(--pencil); font-size: var(--t-caption); }
.peek__marks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) 14px; }
.peek__marks .status { color: var(--pencil); }
.peek__marks .circled { font-size: var(--t-caption); }
@media (hover: none), (max-width: 767px) { .peek__panel { display: none; } }

/* A month that is due, its pencil query after it. */
.month__query { display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 6px; background: var(--mark-query); -webkit-mask: var(--m-query) center / contain no-repeat; mask: var(--m-query) center / contain no-repeat; align-self: center; }

/* The day book opens as a spread: two facing pages and the fold between. */
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: start; }
/* The gutter between the pages is printed, as a ledger's is: a double hairline
   down the full height of the spread. */
.spread::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-3));
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  pointer-events: none;
}
.spread__page { min-width: 0; }
.section + .spread, .spread + .section, .notices + .spread, .spread + .spread { margin-top: var(--s-7); }
.spread__page > * + * { margin-top: var(--s-7); }

/* Entries waiting on you: the page's first account, and its weightiest.
   Number, particulars, the count behind its rule, then the action. */
.entries { list-style: none; }
.entries__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 4.5rem 6rem;
  align-items: baseline;
  column-gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-feint);
}
.entries__no { color: var(--ruling-ink); font-weight: 600; font-stretch: var(--w-figure); font-variant-numeric: tabular-nums; }
.entries__what { font-size: var(--t-account); font-weight: 600; line-height: 1.3; }
.entries__what small { display: block; margin-top: 2px; color: var(--pencil); font-size: var(--t-label); font-weight: 400; }
.entries__count { align-self: stretch; padding-top: 2px; border-left: 1px solid var(--rule-feint); font-size: var(--t-heading); font-weight: 700; font-stretch: var(--w-figure); line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.entries__act { justify-self: end; white-space: nowrap; }
.entries__count--word { color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.06em; text-transform: uppercase; }
.entries__row.is-nil .entries__what { color: var(--pencil); font-weight: 500; }
.entries__row.is-nil .entries__count { color: var(--pencil); font-size: var(--t-body); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.06em; text-transform: uppercase; }

/* The spread's pages are narrow: their folios pack tighter. */
.spread .table th, .spread .table td { padding-left: var(--s-2); padding-right: var(--s-2); }
.spread .table th:first-child, .spread .table td:first-child { padding-left: 0; }
.spread .table th:last-child, .spread .table td:last-child { padding-right: 0; }
/* A ring drawn round the last figure in a row stays on the page. */
.table td:last-child > .circled:last-child { margin-right: 3px; }

.stage-no { display: inline-block; min-width: 1.75rem; color: var(--ruling-ink); }
.entry-title { display: block; }
.key__circled { display: inline-flex; align-items: center; gap: var(--s-3); padding-left: 2px; }

/* Assigned work as an index of folios. */
.index { list-style: none; }
.index__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-feint); }
.index__title { font-weight: 600; }
.index__title a { text-decoration: none; }
.index__title a:hover { text-decoration: underline; }
.index__meta { grid-column: 1 / -1; color: var(--pencil); font-size: var(--t-label); }

/* Particulars: a record's facts as the ledger's left-hand column and entry. */
.particulars { display: grid; grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr); }
.particulars dt, .particulars dd { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-feint); }
.particulars dt { padding-right: var(--s-3); color: var(--pencil); font-size: var(--t-label); font-weight: 600; }
.particulars dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* A closed action under an account: the pencilled note that opens a form. */
.disclosure { margin-top: var(--s-3); border-bottom: 1px solid var(--rule-feint); }
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--cloth);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "+"; display: inline-block; width: 1rem; color: var(--ruling-ink); font-weight: 700; text-align: center; }
.disclosure[open] > summary::before { content: "\2212"; }
.disclosure > summary:hover { text-decoration: underline; }
.disclosure__body { padding: var(--s-2) 0 var(--s-4); }
.disclosure__body > .field { max-width: 32rem; }

.input--figure { width: 6rem; text-align: right; font-variant-numeric: tabular-nums lining-nums; }

.inline-form { display: inline; margin-left: var(--s-2); }
.inline-form .btn { min-height: 0; padding: 0 var(--s-1); }

/* Actions on a record that moves through approval. */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; padding-top: var(--s-4); }
.actions .field { flex: 1 1 16rem; margin: 0; }
.actions--tight { padding-top: 0; align-items: center; }

/* The form's own pages: one account per fieldset, fields two abreast. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.input--short { max-width: 12rem; }

/* A Nepali date: the BS date written in the field, the calendar's button at
   its end, the English date pencilled beneath and kept in step. */
.bsdate { position: relative; display: block; }
.bsdate__input { padding-right: calc(var(--control) + var(--s-1)); font-variant-numeric: tabular-nums lining-nums; }
.bsdate__open {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ruling-ink);
  cursor: pointer;
}
.bsdate__open:hover { color: var(--cloth); }
.bsdate__open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bsdate__ad { display: block; margin-top: 3px; color: var(--pencil); font-size: var(--t-caption); }
.bsdate.is-bad .bsdate__ad { color: var(--red); }
.bsdate.is-bad .bsdate__input { border-color: var(--red); }
.filters .bsdate__ad { white-space: nowrap; }
/* On a phone the calendar's button is a full thumb's width. */
@media (max-width: 767px) { .bsdate__open { width: 44px; height: 44px; } }
/* And a small button in a table is still a thumb's height. */
@media (max-width: 767px) { .table .btn--sm { min-height: 40px; } }

/* The Nepali calendar: a loose slip laid over the page. Each day is its BS
   number, with the English day small beside it; today carries the gilt
   mark, the chosen day the cloth. */
.bscal {
  position: fixed;
  z-index: 95;
  width: 19.5rem;
  padding: var(--s-2) var(--s-3) var(--s-1);
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-slip);
  color: var(--ink);
  box-shadow: var(--shadow-slip);
  transform-origin: top left;
  animation: slip-open var(--quick) var(--ease-out) both;
}
.bscal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: 2px solid var(--ruling-ink); }
.bscal__title { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0; font-weight: 700; font-stretch: var(--w-figure); line-height: 1.15; }
.bscal__ad { color: var(--pencil); font-size: var(--t-caption); font-weight: 500; font-stretch: var(--w-text); }
.bscal__nav { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--cut); background: none; color: var(--ink); cursor: pointer; }
.bscal__nav:hover { background: var(--paper-band); }
.bscal__nav:disabled { color: var(--rule); cursor: default; background: none; }
.bscal__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bscal__grid { width: 100%; margin-top: var(--s-1); border-collapse: collapse; table-layout: fixed; }
.bscal__grid th { padding: var(--s-1) 0; color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.bscal__grid td { padding: 1px; }
.bscal__day {
  position: relative;
  display: grid;
  width: 100%;
  height: 40px;
  padding: 3px 4px;
  border: 0;
  border-radius: var(--cut);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums lining-nums;
}
.bscal__bs { justify-self: start; font-weight: 600; line-height: 1.1; }
.bscal__adday { justify-self: end; align-self: end; color: var(--pencil); font-size: var(--t-caption); line-height: 1; }
.bscal__day:hover { background: var(--paper-band); }
.bscal__day:focus-visible { outline: 2px solid var(--cloth); outline-offset: 0; }
.bscal__day.is-today::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  background: var(--gilt);
  -webkit-mask: var(--m-dot) center / contain no-repeat;
  mask: var(--m-dot) center / contain no-repeat;
}
.bscal__day.is-selected { background: var(--cloth); color: var(--on-cloth); }
.bscal__day.is-selected .bscal__adday { color: var(--on-cloth-soft); }
.bscal__day:disabled { color: var(--rule); cursor: default; background: none; }
.bscal__day:disabled .bscal__adday { color: var(--rule-feint); }
.bscal__foot { display: flex; justify-content: space-between; margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--rule-feint); }

/* The kind of a bill: VAT unless "No VAT", owed unless "Cash". */
/* How a receipt came: the same row of choices, under its label. */
.received-by { margin-bottom: var(--s-3); }
.received-by .label { margin-bottom: var(--s-1); padding: 0; }
.received-by .field__error { flex-basis: 100%; }
.bill-kind { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; }

/* An engagement's account: billed, received and the running balance. */
.table--account td.money:last-of-type { font-weight: 600; }

/* Fields only one kind of work has, under their own printed heading. */
.for-service { min-width: 0; margin: var(--s-2) 0 var(--s-4); padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--rule-feint); }
.for-service__title { margin-bottom: var(--s-2); color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.07em; text-transform: uppercase; }
.for-service__hint { margin: 0 0 var(--s-3); }
.for-service .check + .check { margin-top: var(--s-1); }
.form-page { max-width: 58rem; }
.form-page .form-grid .field { margin-bottom: var(--s-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 2px solid var(--ruling-ink); }
.spread + .form-actions, .section + .form-actions, .form-actions--page { margin-top: var(--s-7); }

/* Password rules, ticked off as they are met: a dash to come, a tick when met. */
.rules { display: grid; gap: 2px; margin: calc(-1 * var(--s-2)) 0 var(--s-4); padding: 0; list-style: none; color: var(--pencil); font-size: var(--t-label); }
.rules li, .match-note { position: relative; padding-left: 22px; }
.rules li::before, .match-note:not(:empty)::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--rule);
  -webkit-mask: var(--m-dash) center / contain no-repeat;
  mask: var(--m-dash) center / contain no-repeat;
}
.rules li.is-met, .match-note.is-met { color: var(--ink); }
.rules li.is-met::before, .match-note.is-met::before { background: var(--mark-checked); -webkit-mask-image: var(--m-tick); mask-image: var(--m-tick); }
.match-note { min-height: 1.4em; margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--pencil); font-size: var(--t-label); }
.match-note:empty { padding-left: 0; }

/* The error log, as it was written. */
.log {
  max-height: 420px;
  margin: 0;
  padding: var(--s-3);
  overflow: auto;
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-slip);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A record's leaf: the entries in the body of the page, its particulars in
   the margin, divided by the margin rule printed down ledger paper. */
.leaf { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--s-7); align-items: start; }
.section + .leaf { margin-top: var(--s-7); }
.leaf__main, .leaf__margin { min-width: 0; }
.leaf__margin { position: relative; }
.leaf__margin::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s-3));
  bottom: 0;
  left: calc(-1 * var(--s-7) / 2);
  border-left: 1px solid var(--rule-feint);
  pointer-events: none;
}
.leaf__margin .table th, .leaf__margin .table td { padding-left: var(--s-2); padding-right: var(--s-2); }
.leaf__margin .table th:first-child, .leaf__margin .table td:first-child { padding-left: 0; }
.leaf__margin .table th:last-child, .leaf__margin .table td:last-child { padding-right: 0; }
.leaf__note { max-width: 60ch; margin-top: var(--s-2); color: var(--pencil); font-size: var(--t-label); }
.leaf + .key, .section + .key, .spread + .key, .leaf__key { margin-top: var(--s-7); }

/* The stage a piece of work is at, and the move it can make next. */
.stage-now {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  gap: var(--s-4) var(--s-7);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-feint);
}
.stage-now__name { font-size: var(--t-account); font-weight: 700; font-stretch: var(--w-figure); }
.stage-now__what { max-width: 60ch; margin-top: var(--s-1); color: var(--pencil); }
.stage-now__when { margin-top: var(--s-2); color: var(--pencil); font-size: var(--t-label); }
.stage-now__act .field { margin-bottom: var(--s-3); }
.stage-now__act .disclosure { margin-top: var(--s-3); }
.stage-now__said { max-width: 60ch; color: var(--pencil); }
.stage-now__said + .stage-now__said { margin-top: var(--s-2); }
.stage-now__said .status { white-space: normal; color: var(--ink); }

/* The statutory audit's signings: which it needs, and when each was done. */
.signing { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule-feint); }
.signing__title { margin-bottom: var(--s-3); font-weight: 700; font-stretch: var(--w-figure); }
.signing__line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem); gap: var(--s-2) var(--s-5); align-items: end; max-width: 44rem; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-feint); }
.signing__line .field { margin: 0; }
.signing__form .btn { margin-top: var(--s-4); }
.signing__state { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* The workflow's stages: the stepper, one step per stage. */
.stepper--stages { gap: var(--s-3); }
.stepper--stages .stepper__step::after { right: calc(-1 * var(--s-3) + var(--s-2)); }

/* The journal: each move of the work, written down as it happened. */
.journal { position: relative; padding-left: var(--s-5); list-style: none; }
.journal::before { content: ""; position: absolute; top: calc(var(--s-4) + var(--s-2)); bottom: var(--s-2); left: 6px; border-left: 1px solid var(--rule-feint); }
.journal__entry { position: relative; padding-bottom: var(--s-4); }
.journal__entry:last-child { padding-bottom: 0; }
.journal__entry::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(-1 * var(--s-5));
  width: 14px;
  height: 14px;
  background: var(--mark-checked);
  -webkit-mask: var(--m-tick) center / contain no-repeat;
  mask: var(--m-tick) center / contain no-repeat;
}
.journal__entry--back::before { background: var(--mark-query); -webkit-mask-image: var(--m-query); mask-image: var(--m-query); }
.journal__head { font-weight: 600; }
.journal__meta { color: var(--pencil); font-size: var(--t-label); }
.journal__note { max-width: 72ch; margin-top: var(--s-1); padding-left: var(--s-3); border-left: 2px solid var(--rule-feint); font-size: var(--t-label); }

/* Who is on a file: initials and name, one feint line each. */
.roster { list-style: none; }
.roster__person { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-feint); }
.roster__name { min-width: 0; font-weight: 600; }
.roster__role { display: block; color: var(--pencil); font-size: var(--t-label); font-weight: 400; }

/* A long list of choices inside a disclosure keeps to its own height. */
.choices { min-width: 0; max-height: 22rem; margin: 0 0 var(--s-3); padding: 0; overflow-y: auto; border: 0; scrollbar-color: var(--rule) transparent; }

/* Many choices on a full-width page run in columns, each kept whole. */
.choices--columns { max-height: 26rem; columns: 3 16rem; column-gap: var(--s-6); }
.choices--columns .check { break-inside: avoid; }

/* A disclosure that sits in a table row. */
.disclosure--row { margin-top: 0; border-bottom: 0; }
.disclosure--row > summary { min-height: var(--control); }

/* The import. The rules of the format are numbered down the page, to be
   pointed at ("rule 7"); its tables hold sentences, so their cells sit at the
   top of the row and the column that explains is given room. A starting
   password is set in the mono face, and selects whole. */
.format-rules { max-width: 80ch; margin: var(--s-4) 0 var(--s-3); padding-left: var(--s-6); list-style: decimal; }
.format-rules li { padding: 3px 0 3px var(--s-1); }
.format-rules li::marker { color: var(--ruling-ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.format-rules--plain { margin-top: 0; padding-left: var(--s-5); list-style: disc; }
.table--format td, .table--format tbody th.table__rowhead { height: auto; padding-top: var(--s-2); padding-bottom: var(--s-2); vertical-align: top; }
.table--format tbody th.table__rowhead { white-space: nowrap; }
.table--format td:nth-child(3) { min-width: 16rem; }
.table--format td:last-child { min-width: 12rem; }
.table .table__rowno { width: 4rem; color: var(--pencil); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
code.secret { font-size: var(--t-body); letter-spacing: 0.03em; user-select: all; }

/* ------------------------------------------------------------- Utilities */

.muted { color: var(--pencil); }
.small { font-size: var(--t-label); }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.hide { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Proportions ship as classes: the CSP forbids inline style attributes. */
.w-0 { width: 0; }      .w-5 { width: 5%; }     .w-10 { width: 10%; }
.w-15 { width: 15%; }   .w-20 { width: 20%; }   .w-25 { width: 25%; }
.w-30 { width: 30%; }   .w-35 { width: 35%; }   .w-40 { width: 40%; }
.w-45 { width: 45%; }   .w-50 { width: 50%; }   .w-55 { width: 55%; }
.w-60 { width: 60%; }   .w-65 { width: 65%; }   .w-70 { width: 70%; }
.w-75 { width: 75%; }   .w-80 { width: 80%; }   .w-85 { width: 85%; }
.w-90 { width: 90%; }   .w-95 { width: 95%; }   .w-100 { width: 100%; }

/* ------------------------------------------------------------ Narrower */

@media (max-width: 960px) {
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: span 1; }
  .leaf, .stage-now, .signing__line { grid-template-columns: minmax(0, 1fr); }
  .leaf__margin { margin-top: var(--s-7); }
  .leaf__margin::before { display: none; }
}

@media (max-width: 1180px) {
  .today { grid-template-columns: minmax(0, 1fr); }
  .today__part + .today__part { border-left: 0; border-top: 1px solid rgb(244 239 227 / 0.18); }
  .track-grid th.track-grid__corner { width: 11rem; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread::before { display: none; }
  .spread__page + .spread__page { margin-top: var(--s-7); }
  .content { padding-left: var(--s-6); padding-right: var(--s-6); }
}

/* ----------------------------------------------------------------- Phone */

@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .shell > .content { grid-column: 1; }

  .content { padding: var(--s-5) var(--s-4) calc(var(--tabbar-h) + var(--s-6) + env(safe-area-inset-bottom)); }
  .page__head { margin-bottom: var(--s-5); }
  .page__actions { margin-left: 0; }
  .page__title { font-size: var(--t-heading); }

  .btn { min-height: 44px; }
  .input, .select, .textarea { min-height: 44px; font-size: var(--t-account); }

  .folio { align-items: flex-start; }
  .folio__side { align-items: flex-start; }
  .folio__day { font-size: 64px; }
  .folio__month { font-size: var(--t-heading); }

  /* On the phone the action drops beneath the particulars. */
  .entries__row { grid-template-columns: 1.5rem minmax(0, 1fr) 3.5rem; row-gap: var(--s-1); }
  .entries__count { grid-row: 1 / span 2; grid-column: 3; padding-left: var(--s-3); }
  .entries__act { grid-row: 2; grid-column: 2; justify-self: start; }
  .entries__what { font-size: var(--t-body); }

  /* The casting stays on one line, so the day still adds up across the page. */
  .casting { display: grid; grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr) 1.25rem minmax(0, 1.2fr); align-items: start; gap: var(--s-3) var(--s-2); }
  .casting__item { min-width: 0; }
  .casting__op { justify-self: center; padding: 8px 0 0; font-size: var(--t-account); }
  .casting__item--total .casting__note { white-space: nowrap; }
  .casting__note { font-size: var(--t-caption); }

  /* A long casting, such as the HR day: three abreast, the total on its own line. */
  .casting--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casting--counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* On the phone the clock-in card comes before the day's record. */
  .grid--aside-first > aside { order: -1; }
  .casting--wide .casting__op { display: none; }
  .casting--wide .casting__item--total { grid-column: 1 / -1; justify-self: start; }

  /* The tab bar: a strip of the binding along the bottom edge. */
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--cloth);
    box-shadow: 0 -1px 0 var(--cloth-deep);
  }

  .tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-height: var(--tabbar-h);
    padding: 0 var(--s-1);
    border: 0;
    background: none;
    color: var(--on-cloth-soft);
    font-size: var(--t-label);
    font-weight: 600;
    font-stretch: var(--w-figure);
    text-decoration: none;
    cursor: pointer;
  }
  .tabbar__item:hover { color: var(--on-cloth); }
  .tabbar__item .icon { width: 21px; height: 21px; }
  .tabbar__item[aria-current="page"] .icon { color: var(--gilt); }
  .tabbar__label { font-size: var(--t-caption); line-height: 1.1; }
  .tabbar__item:focus-visible { outline-color: var(--on-cloth); outline-offset: -4px; }
  .tabbar__item[aria-current="page"] { color: var(--on-cloth); font-weight: 800; }

  /* The ribbon, hanging from the strip's top edge over the current tab. */
  .tabbar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 14px;
    margin-left: -5px;
    background: var(--gilt);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
    animation: ribbon-drop var(--settle) var(--ease-out) both;
  }

  .toasts {
    top: auto;
    right: auto;
    bottom: calc(var(--tabbar-h) + var(--s-4) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
  }

  .bar { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); }
  .bar .meter { grid-row: 2; grid-column: 1 / -1; }

  .stepper { flex-direction: column; gap: var(--s-4); }
  .stepper__step { padding: 0 0 0 var(--s-6); }
  .stepper__step::after { top: 24px; right: auto; bottom: calc(-1 * var(--s-4) + 4px); left: 8px; border-top: 0; border-left: 1px dashed var(--rule); }
  .stepper__step.is-done::after { border-left-style: solid; border-left-color: var(--ruling-ink); }
  .stepper--stages { gap: var(--s-3); }
  .stepper--stages .stepper__step::after { bottom: calc(-1 * var(--s-3) + 4px); }
  .stepper--stages .stepper__meta { display: inline; margin-left: var(--s-2); }
}

/* ------------------------------------------------------------- Checklist */

/* One ruled line for each item, with a box at its head that takes a tick. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--rule-feint); }
.checklist__item:last-child { border-bottom: 0; }
.checklist__tick { flex: none; margin: 0; }
.checklist__box {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: var(--cut);
  background: var(--paper-slip);
  cursor: pointer;
}
.checklist__box::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--mark-checked);
  -webkit-mask: var(--m-tick) center / contain no-repeat;
  mask: var(--m-tick) center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--quick) var(--ease-out);
}
.checklist__box:hover::after { opacity: 0.35; }
.checklist__box[aria-pressed="true"] { border-color: var(--ruling-ink); }
.checklist__box[aria-pressed="true"]::after { opacity: 1; }
.checklist__text { flex: 1; min-width: 0; padding-top: 4px; }
.checklist__who { display: block; color: var(--pencil); font-size: var(--t-caption); }
.checklist__item.is-done .checklist__text { color: var(--pencil); }
.checklist__meter { margin-bottom: var(--s-3); }
.checklist__remove { flex: none; margin: 0; }
.checklist__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); max-width: 40rem; margin-top: var(--s-4); }

/* My to-do list: the line to add to it, then a thing to do a line, with the
   date it is due by beside it and its changing kept closed. */
.todo__add { display: grid; grid-template-columns: minmax(0, 1fr) 13rem auto; gap: var(--s-3); align-items: end; padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.todo__add .field { margin: 0; }
.todo__add .field__hint, .todo__edit .field__hint { display: none; }
.todo__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); }
.todo__body { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.todo__due { flex: none; color: var(--pencil); font-size: var(--t-label); }
.todo__due .circled { font-size: var(--t-caption); }
.todo__change { flex: 0 0 auto; }
.todo__change[open] { flex-basis: 100%; }
.todo__change > summary { display: inline-flex; align-items: center; min-height: 28px; color: var(--pencil); font-size: var(--t-label); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.todo__change > summary::-webkit-details-marker { display: none; }
.todo__change > summary:hover { color: var(--cloth); }
.todo__change > summary:focus-visible { outline: 2px solid var(--cloth); outline-offset: 2px; }
.todo__edit { display: grid; grid-template-columns: minmax(0, 1fr) 13rem auto; gap: var(--s-3); align-items: end; padding: var(--s-2) 0 var(--s-3); }
.todo__edit .field { margin: 0; }
/* Side by side, the date's English reading hangs beneath its field, so the
   three controls stand on one line. */
@media (min-width: 768px) {
  .todo__add, .todo__edit { padding-bottom: var(--s-6); }
  .todo__add .field, .todo__edit .field { position: relative; }
  .todo__add .bsdate__ad, .todo__edit .bsdate__ad { position: absolute; top: 100%; left: 0; white-space: nowrap; }
}
@media (max-width: 767px) {
  .todo__add, .todo__edit { grid-template-columns: minmax(0, 1fr); }
  .todo__add .btn, .todo__edit .btn { justify-self: start; }
  .todo__change > summary { min-height: 44px; }
}

/* Where there is a pointer, Remove waits on the line until it is wanted, so
   a long list is not a column of red; keyboard focus shows it too. */
@media (hover: hover) and (pointer: fine) {
  .checklist__remove { opacity: 0; transition: opacity var(--quick) var(--ease-out); }
  .checklist__item:hover .checklist__remove,
  .checklist__item:focus-within .checklist__remove { opacity: 1; }
}

@media (max-width: 767px) {
  .checklist__box { width: 44px; height: 44px; }
  .checklist__text { padding-top: 12px; }
}

/* ------------------------------------------------------ Tables on a phone */

/* A ledger's columns do not fit a phone. So a table too wide for it is read
   an entry at a time (`is-stack`, set by app.js): the cell a row is known by
   heads the entry, and every other cell is a line, its column's heading in
   the margin and its value beside it, figures set to the right as in their
   column. Empty cells are left out. Figures across (`is-matrix`) stay a
   table with the first column held. The work lines become a strip. */
@media (max-width: 767px) {
  /* While the script measures the room a table would want with nothing broken. */
  .table.is-measuring th, .table.is-measuring td { white-space: nowrap !important; }

  .table.is-stack, .table.is-stack tbody, .table.is-stack tfoot { display: block; }
  /* The head is said by every line; it stays for a screen reader only. */
  .table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .table.is-stack tr { display: flex; flex-direction: column; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .table.is-stack tbody tr:last-child { border-bottom: 0; }
  .table.is-stack tbody tr:hover td, .table.is-stack tbody tr:hover th.table__rowhead { background: none; }

  .table.is-stack tbody th.table__rowhead { position: static; height: auto; border: 0; background: none; }
  .table.is-stack td,
  .table.is-stack tbody th {
    position: relative;
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 2px 0 2px 6.75rem;
    border: 0;
    background: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .table.is-stack [data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 6.25rem;
    overflow: hidden;
    color: var(--ruling-ink);
    font-size: var(--t-caption);
    font-weight: 600;
    font-stretch: var(--w-head);
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* What the entry is known by: first, in full, with no heading beside it. */
  .table.is-stack tr > .is-known { order: -1; padding: 0 0 var(--s-1); color: var(--ink); font-size: var(--t-body); font-weight: 600; font-stretch: var(--w-text); letter-spacing: 0; text-transform: none; }
  .table.is-stack .is-known a { display: inline-block; padding: 2px 0; }
  .table.is-stack tr > .is-figure { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
  .table.is-stack tr > .is-figure.is-known { text-align: left; }
  .table.is-stack tr > .is-blank { display: none; }
  .table.is-stack tr > td:not([data-label]):not(.is-known) { padding-left: 0; }

  /* What can be done with the entry, at its foot. */
  .table.is-stack tr > .is-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0 0; }
  .table.is-stack .is-acts form { margin: 0; }

  /* A heading across the table, and an empty table's one line. */
  .table.is-stack tr > .is-across { padding-left: 0; }
  .table.is-stack tr.table__band { padding-bottom: var(--s-1); border-bottom: 2px solid var(--ruling-ink); }
  .table.is-stack tr.table__band th { padding: var(--s-3) 0 0; color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }

  /* The total: ruled once above and twice below, as on the page. */
  .table.is-stack tfoot tr { margin-top: -1px; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 700; }
  .table.is-stack tfoot td { border: 0; }
  .table.is-stack tfoot td:empty { display: none; }

  /* A mark's words wrap on a phone rather than run off the entry. */
  .table.is-stack .status { display: inline-flex; align-items: flex-start; white-space: normal; }
  .table.is-stack .status::before { margin-top: 3px; }
  .table.is-stack .nowrap { white-space: normal; }
  .table.is-stack .money__p { min-width: 2.4ch; }
  .table.is-stack .table__person { align-items: flex-start; }

  /* Running work by the month (the Day book): the client, then its months
     side by side, each under its heading. */
  .table--running.is-stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--s-3); }
  .table--running.is-stack tr > .is-known { grid-column: 1 / -1; padding-bottom: 2px; }
  .table--running.is-stack tr > td { padding: 0; }
  .table--running.is-stack [data-label]::before { position: static; display: block; width: auto; }

  /* Figures across: the table kept, tightened, its first column held while
     the rest moves under the thumb. */
  .table.is-matrix th, .table.is-matrix td { height: auto; padding: 8px 6px; font-size: var(--t-label); white-space: nowrap; }
  .table.is-matrix thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
  .table.is-matrix .money__p { margin-left: 4px; padding-left: 4px; }
  .table.is-matrix thead th:first-child,
  .table.is-matrix tbody th:first-child,
  .table.is-matrix tbody td:first-child,
  .table.is-matrix tfoot td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 6.75rem;
    min-width: 6.75rem;
    padding-left: 0;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--rule);
    white-space: normal;
  }
  .table.is-matrix thead th:first-child { padding-left: var(--s-2); background: var(--paper-band); }
  .table.is-matrix tbody tr:hover td:first-child { background: var(--paper); }
  /* Said under a figure table that runs on past the edge. */
  .table-wrap.is-wide::after { content: "More columns to the right: slide the table."; position: sticky; left: 0; display: block; padding-top: var(--s-2); color: var(--pencil); font-size: var(--t-caption); }

  /* The work lines. The steps cannot stand side by side over a phone's width,
     so a line drawn across them could not be read. Instead: a summary, the
     steps as a numbered list with how many files are at each; then each row
     an entry that says where it stands, over a meter of one block a step.
     An audit says "Client review · step 4 of 11 · 2 d", its blocks done in
     ruling ink, where it is in gilt, to come feint, not needed hatched. A
     kind of other work has a chip for each step it has files at ("In
     progress 2"), each the way to them, and gilt blocks where they are. */
  .track-grid, .track-grid thead, .track-grid tbody { display: block; min-width: 0; }
  .track-grid thead tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--rule-feint); }
  .track-grid th.track-grid__corner { display: block; grid-column: 1 / -1; width: auto; padding: 0 0 2px; border: 0; background: none; white-space: normal; }
  .track-grid__corner-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .track-grid__phone-label { display: inline; }
  .track-grid th.track-grid__stage { display: block; width: auto; padding: 0; border: 0; border-bottom: 1px solid var(--hair, var(--rule-feint)); background: none; text-align: left; }
  .track-grid__stage a, .track-grid__head { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; align-items: baseline; justify-content: stretch; gap: 0 4px; min-height: 40px; padding: 8px 0; text-align: left; }
  .track-grid__no { display: block; color: var(--pencil); font-size: var(--t-caption); font-weight: 400; font-stretch: var(--w-text); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
  .track-grid__name { min-width: 0; color: var(--ink); font-size: var(--t-label); line-height: 1.25; }
  .track-grid__count { font-size: var(--t-body); }
  .track-grid__bar { display: none; }

  .track-grid tbody tr { display: flex; flex-wrap: wrap; column-gap: 3px; padding: var(--s-3) 0; border-bottom: 1px solid var(--hair, var(--rule-feint)); }
  .track-grid tbody tr:last-child { border-bottom: 0; }
  .track-grid tbody tr:hover th.track-grid__who, .track-grid tbody tr:hover td { background: none; }
  .track-grid th.track-grid__who,
  .table.track-grid tbody th.track-grid__who { position: static; display: block; flex: 0 0 100%; width: auto; height: auto; padding: 0 0 var(--s-2); border: 0; background: none; }
  .track-grid__who a { display: inline-block; padding: 2px 0; }
  .rowhead__now { font-weight: 500; }
  .rowhead__now strong { font-weight: 700; }
  /* One block a step. A share of the line each, so the blocks take the line
     beneath the name (a basis of nothing would let them sit, unseen, beside it). */
  .track-grid td.track-grid__cell { display: block; flex: 1 1 6%; min-width: 0; height: 8px; padding: 0; border: 0; background: var(--rule-feint); }
  .track-grid td.track-grid__cell::before,
  .track-grid td.track-grid__cell::after { content: none; }
  .track-grid__dot, .track-grid__days, .track-grid__files, .track-grid__stop { display: none; }
  .track-grid td.track-grid__cell.is-done { background: var(--ruling-ink); }
  .track-grid td.track-grid__cell.is-current,
  .track-grid td.track-grid__cell.has-files { background: var(--gilt); }
  .track-grid td.track-grid__cell.is-skipped { background: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 4px); }
  .track-grid__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
  .track-grid__chips a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 1px solid var(--rule-feint); border-radius: var(--cut); background: var(--paper-slip); color: var(--ink); font-size: var(--t-label); font-weight: 500; text-decoration: none; }
  .track-grid__chips a:active { background: var(--paper-band); }
  .track-grid__chips b { font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
  .track-grid__chips .circled { font-size: var(--t-caption); }

  /* The key draws its marks as the meter does. */
  .key__track-done { height: 8px; border: 0; background: var(--ruling-ink); }
  .key__track-skip { height: 8px; }
  .key__dot { width: 22px; height: 8px; }
  .key__track--bars { display: none; }
  .key__current::before { width: 22px; height: 8px; background: var(--gilt); -webkit-mask: none; mask: none; }

  /* The overview on a phone: the band's figures three abreast, the leaves
     full width, the two buttons one above the other. */
  .daybar { margin: var(--s-4) 0 var(--s-3); }
  .daybar .folio__greeting { font-size: var(--t-body); }
  .firm-pick, .firm-pick__group { width: 100%; }
  .firm-pick__group { overflow-x: auto; scrollbar-width: none; }
  .firm-pick__choice { flex: 1 1 auto; min-height: 40px; padding: 0 var(--s-2); font-size: var(--t-caption); }
  .today__part { padding: 20px 18px 24px; }
  .today__figs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); }
  .today__n { font-size: var(--t-title); }
  .today__n--cast { font-size: var(--t-heading); }
  .today__cast { gap: var(--s-2); }
  .today__op { padding-top: 1px; font-size: var(--t-account); }
  .account { margin-top: var(--s-4); padding: 20px var(--s-4) 14px; }
  .account__head { margin-bottom: 14px; }
  .peeks { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
  .peek__btn { min-height: 76px; padding: var(--s-4); }
}

/* ----------------------------------------------------------------- Print */

@media print {
  .sidebar, .tabbar, .toasts, .sheet, .skip, .page__actions, .folio__side .page__actions, .btn { display: none !important; }
  .shell { display: block; }
  .content { max-width: none; padding: 0; }
  body { background: #fff; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread::before { display: none; }
  .table tr { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}