/* The platform's one stylesheet — no business's name appears here.

   AURORA. White to the edges, one iris-to-sky gradient that ignites on focus,
   and colour reserved for exceptions. Light falls from the top left: every
   raised surface gets a pale top edge and drops its shadow down and right.
   Change a token here and every screen follows — this block is the theming
   engine for white-labelling. */

/* The tokens live in assets/theme.css — the only file a rebrand touches.
   Nothing below may hand-write a colour; spend the tokens instead. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #FFFFFF; color: var(--ink);
  font: 14.5px/1.55 var(--sans);
}
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 18px; }
a { color: var(--bronze-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}

/* ---- top bar: white sheet closed by the bronze rule, like the summary band ---- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40; }
.topbar-in { display: flex; align-items: stretch; gap: 26px; min-height: 58px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; align-self: center; gap: 9px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand { font: 700 19px/1 var(--serif); letter-spacing: 0.01em; }
/* THE WORDMARK — three lines, one width (owner board A, 3.178).
   Each line is tracked so its INK measures the same 6.997em, which is what
   gives the block its two straight edges. letter-spacing also adds a trailing
   space after the last letter, so each line cancels its own with an equal
   negative right margin — without that the three right edges would step. The
   numbers come from Inter 700's own advance widths; change the face and they
   must be measured again. */
.brand-sub { display: flex; flex-direction: column; color: var(--bronze-deep);
  text-transform: uppercase; border-left: 1px solid var(--line); padding-left: 13px; }
.brand-sub b { font: 700 10px/10.4px var(--sans); }
.brand-sub b:nth-child(1) { letter-spacing: .251em; margin-right: -.251em; }
.brand-sub b:nth-child(2) { letter-spacing: .160em; margin-right: -.160em; }
.brand-sub b:nth-child(3) { letter-spacing: .227em; margin-right: -.227em; }
.topbar nav { display: flex; gap: 2px; margin-left: auto; align-items: stretch; }
.topbar nav > a { display: flex; align-items: center; padding: 0 14px; color: var(--muted);
  font-size: 13px; font-weight: 500; border-radius: 14px; margin: 0 1px;
  transition: background .14s, color .14s; }
/* sizing and the lit state for both kinds of tab live together further down,
   so a link and a dropdown can never drift apart again */

/* ---- headings & text ---- */
h1 { font: 600 27px/1.2 var(--serif); letter-spacing: 0.005em; margin: 30px 0 5px; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; }
.muted { color: var(--muted); font-size: 13px; }
.mono { font-family: var(--mono); }
.right { text-align: right; }

/* ---- cards: white sheets with the PDF's label style ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; margin-bottom: 18px; box-shadow: var(--lift-1); }
/* the card the page is actually about gets the gradient hairline on top */
.card.hero { box-shadow: var(--lift-2); border-color: #E2E4F8; position: relative;
  overflow: hidden; }
.card.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); }
.card > h2 { font: 700 11.5px var(--sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0 0 14px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.card h2 .count { font: 700 11px var(--mono); color: var(--bronze-deep); letter-spacing: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.flash { background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--iris); color: var(--ink);
  border-radius: 12px; padding: 13px 16px; margin: 16px 0; font-size: 13.5px;
  box-shadow: var(--lift-1); }

/* ---- tables: hairline rows, mono figures — the items table, everywhere ---- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--faint); font: 800 9.5px var(--sans);
  text-transform: uppercase; letter-spacing: 0.11em; padding: 8px 10px;
  border-bottom: 1px solid var(--line); }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--paper); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
tr.inactive td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* ---- badges: print-stamp status marks ---- */
.badge { display: inline-flex; align-items: center; font: 800 9.5px var(--sans);
  letter-spacing: 0.09em; padding: 4px 10px; border-radius: 11px; text-transform: uppercase;
  border: 1px solid transparent; }
.badge-draft { background: var(--surface); color: var(--muted); border-color: var(--line); }
.badge-sent { background: var(--bronze-tint); color: var(--bronze-deep); }
.badge-paid { background: var(--paid-tint); color: var(--paid); }
.badge-void { background: #EEF1F6; color: var(--muted); text-decoration: line-through; }
.badge-overdue { background: var(--overdue-tint); color: var(--overdue); }

/* ---- forms ---- */
label { display: block; font-size: 12.5px; font-weight: 600; margin: 13px 0 4px;
  letter-spacing: 0.01em; }
label .hint { font-weight: 400; color: var(--muted); }
/* Design principle — SYMMETRY:
   every single-line control (text, email, password, number, date, select, file)
   is exactly the same height (42px) and splits its row equally with its
   neighbours. Only textareas may be taller, and only because they hold many
   lines. Any new field added to the app inherits this — do not override
   heights or widths per field. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=file], select, textarea {
  width: 100%; padding: 8px 14px; border: 1px solid transparent; border-radius: 12px;
  background: var(--soft); color: var(--ink); font: inherit;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=file], select {
  height: 42px;
}
/* Safari draws its own rounded field for type=search, which lands a second
   border inside ours and ignores our height. One control, one line. */
input[type=search] { appearance: none; -webkit-appearance: none; }
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
input[type=file] { padding: 8px; line-height: 24px; }
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 36px; cursor: pointer;
  /* the caret: a mask over the brand colour, so it follows a rebrand */
  background-image: var(--caret-img);
  background-repeat: no-repeat; background-position: right 13px center;
}
select::-ms-expand { display: none; }
/* One behaviour for every control: a hairline at rest, gold the moment you
   reach for it. Hover shows the gold line alone; focus adds the soft ring. */
/* The caret takes its colour from the theme. A data-URI cannot read a CSS
   variable — which is exactly how the old brand survived here unseen through a
   whole repaint — so the arrow is a MASK over the brand colour instead. It
   needs no wrapper: the mask sits on the select's own background layer. */
select::-ms-expand { display: none; }

input:hover, select:hover, textarea:hover { background: var(--surface); border-color: var(--line); }
/* Focus is the one moment the brand gradient appears on an input: the field
   lifts to pure white, takes a soft iris ring, and a gradient rule ignites
   along its base. Nothing else on the page does this, so it always reads. */
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--surface); border-color: #DEE0F6;
  box-shadow: var(--ring), inset 0 -3px 0 -1px transparent;
  background-image: var(--grad), none;
  background-size: calc(100% - 22px) 3px; background-position: 11px calc(100% - 2px);
  background-repeat: no-repeat;
}
/* a field that has been filled correctly keeps a quiet green edge */
input.is-ok, select.is-ok { border-color: #CEE8DC; background: var(--surface); }
input.is-bad, select.is-bad, textarea.is-bad {
  border-color: #F6D0D0; background: #FFF9F9;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
input[readonly] { background: var(--paper); font-family: var(--mono); font-size: 12.5px; }
.frow { display: flex; gap: 12px; align-items: stretch; }
.frow > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* symmetry: whatever the labels do, the controls line up and split the row equally */
.frow > div > input, .frow > div > select { margin-top: auto; }
.frow > div > textarea { flex: 1; min-height: 128px; }
.frow > .actions, .frow > div > .check, .frow > div > .checkline { margin-top: auto; }
@media (max-width: 620px) { .frow { flex-wrap: wrap; } .frow > div { flex-basis: 100%; } }
.checkline { display: flex; align-items: center; gap: 8px; margin: 13px 0 4px; font-size: 13.5px; }
.checkline input, .check input { width: auto; accent-color: var(--bronze-deep); }
.check { font-weight: 400; font-size: 13px; }

/* ---- buttons: ink primary, hairline ghost ---- */
button, .btn, a.btn-ghost, a.btn-danger, a.btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-h); /* symmetry: every full-size button matches the fields exactly */
  border: 1px solid transparent; border-radius: 12px; padding: 0 20px;
  background-image: var(--grad-btn); background-color: var(--iris);
  color: #fff; font: 700 13.5px/1.4 var(--sans); letter-spacing: .01em;
  cursor: pointer; text-decoration: none; box-shadow: var(--lift-1);
  transition: box-shadow .14s, transform .08s, filter .14s;
}
button:hover, .btn:hover { box-shadow: var(--lift-2); filter: saturate(1.06) brightness(1.03); }
/* the quiet ones: everything that is not the page's single hero */
button.ghost, .btn.ghost {
  background-image: none; background-color: var(--surface); color: var(--ink);
  border-color: #D8DEEA; font-weight: 600;
}
button.ghost:hover, .btn.ghost:hover { background-color: var(--soft); filter: none; }
button.soft, .btn.soft {
  background-image: none; background-color: var(--iris-tint); color: var(--iris-deep);
  border-color: transparent;
}
button.soft:hover, .btn.soft:hover { background-color: #E4E7FF; filter: none; }
button:active, .btn:active { transform: translateY(1px); }
/* symmetry: a button sitting in a row of 42px fields is itself 42px */
.frow .actions button, .frow .actions .btn {
  height: 42px; display: inline-flex; align-items: center; }
.btn:hover, button:hover { background: var(--bronze-deep); border-color: var(--bronze-deep);
  text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: var(--bronze); color: var(--ink); }
.btn-danger { background: transparent; color: var(--overdue); border: 1px solid var(--line); }
.btn-danger:hover { background: var(--overdue-tint); border-color: var(--overdue); }
/* THE SETTLED VERB WEARS THE PAID GREEN (3.192.1, owner board, approved).
   `btn-paid` was written by six buttons across four money pages from 3.77 and
   defined nowhere, so every one of them rendered iris; 3.187.0 gave it a rule
   scoped to the cash box while the rest were on a board. He said both, so the
   rule comes out of that scope and belongs to the class, as it always should
   have. The hover is here because it had to be decided: the shared
   `button:hover` paints bronze, and bronze on green is a collision the house
   language does not allow — a paid button deepens its own green instead. */
.btn-paid { background-color: var(--paid);
  background-image: linear-gradient(135deg, var(--paid), color-mix(in srgb, var(--paid) 70%, var(--sky))); }
.btn:hover.btn-paid, button:hover.btn-paid, .btn-paid:hover {
  background-color: color-mix(in srgb, var(--paid) 88%, #000);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--paid) 88%, #000), var(--paid));
  border-color: transparent; }
.btn-sm, button.btn-sm, a.btn-sm, label.btn-sm { height: var(--ctl-h-sm); padding: 0 12px; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* and every small one, exactly this tall */
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; align-items: center; }
form.inline { display: inline; }
/* a row's buttons: side by side with air between them, sized by their words,
   never stretched to the column — .frow's column layout is overridden here */
.frow > .rowacts, .rowacts { display: flex; flex-direction: row; gap: 8px;
  justify-content: flex-end; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
form.rowacts { display: inline-flex; }

/* ---- billing rail: the month strip on the dashboard ---- */
.rail { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; margin-top: 6px; }
.rail .d { position: relative; text-align: center; font: 10px var(--mono);
  color: var(--muted); padding: 16px 0 3px; border-radius: 2px; }
.rail .d .dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.rail .d.today { background: var(--bronze-tint); color: var(--bronze-deep); font-weight: 700; }
@media (max-width: 720px) { .rail { grid-template-columns: repeat(16, 1fr); } .rail .d.h2 { display: none; } }

/* ---- stat strip: serif figures, like AMOUNT DUE on the invoice ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px 14px; box-shadow: var(--lift-1); }
.stat .k { font: 700 10.5px var(--sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.12em; }
.stat .v { font: 600 24px/1.2 var(--serif); font-variant-numeric: tabular-nums; margin-top: 4px; }
@media (max-width: 600px) { .stats { grid-template-columns: 1fr; } }

/* ---- settings: grouped sections, jump nav, sticky save ---- */
.sect { margin: 34px 0 8px; scroll-margin-top: 108px; }
.sect-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sect-head h2 { font: 600 18px var(--serif); margin: 0; }
.sect-head .sect-note { color: var(--muted); font-size: 12.5px; }
.jumpnav { position: sticky; top: 58px; z-index: 30; background: var(--surface);
  display: flex; gap: 6px; padding: 10px 0 12px; margin: 0 0 4px; overflow-x: auto; }
.jumpnav a { flex: none; font: 600 11px var(--sans); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); border: 1px solid var(--line);
  background: var(--surface); border-radius: 13px; padding: 6px 13px; }
.jumpnav a:hover { text-decoration: none; color: var(--ink); border-color: var(--bronze); }
.savebar { position: sticky; bottom: 0; z-index: 30; background: var(--surface);
  border-top: 2px solid var(--bronze); margin: 26px -18px 0; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.savebar .muted { font-size: 12.5px; }
@media (min-width: 1056px) { .savebar { margin-left: 0; margin-right: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* ---- login: the arrival moment — a lifted sheet under the bronze rule ---- */
.login-box { max-width: 400px; margin: 11vh auto 0; border-top: 2px solid var(--bronze);
  padding: 28px 30px 26px;
  box-shadow: 0 24px 60px -34px rgba(23, 20, 15, 0.45);
  animation: rise 0.34s ease-out; }
.login-box h1 { text-align: center; margin: 6px 0 2px; }
.login-brandline { text-align: center; font: 700 9.5px var(--sans); color: var(--bronze-deep);
  text-transform: uppercase; letter-spacing: 0.22em; margin: 0 0 6px; }
.login-foot { max-width: 400px; margin: 14px auto 0; text-align: center;
  color: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; }
.login-foot .mono { font-size: 10.5px; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* topbar user chip */
.whoami { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; }
.whoami .badge { font-size: 10px; }

/* ---------- tenant portal ---------- */
.pt-hero { display:flex; flex-wrap:wrap; gap:14px; margin:6px 0 18px; }
.pt-stat { flex:1 1 200px; border:1px solid var(--line); background:var(--paper); padding:16px 18px; }
.pt-stat .v { font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.15; }
.pt-stat .l { font:600 10.5px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.pt-stat.due { border-color:var(--overdue); background:var(--overdue-tint); }
.pt-stat.due .v { color:var(--overdue); }
.pt-stat.ok  { border-color:var(--paid); background:var(--paid-tint); }
.pt-stat.ok  .v { color:var(--paid); }
.pt-logo { display:block; margin:0 auto 10px; max-height:56px; max-width:200px; object-fit:contain; }
@media (max-width: 640px) {
  .pt-table table, .pt-table tr, .pt-table td { display:block; width:100%; }
  .pt-table thead, .pt-table th { display:none; }
  .pt-table tr { border:1px solid var(--line); padding:10px 12px; margin:0 0 10px; background:var(--paper); }
  .pt-table td { border:0; padding:2px 0; text-align:left !important; }
  .pt-table td.right { text-align:left !important; }
  .pt-table td[data-l]::before { content: attr(data-l); font:600 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; }
  .pt-table td .btn { width:100%; text-align:center; margin-top:6px; }
}

/* ---- refinement pass: the quiet details ---- */
::selection { background: var(--bronze-tint); color: var(--ink); }
.card table tbody tr:hover > td, .card table tr:not(:first-child):hover > td { background: var(--paper); }
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }

@media print {
  .topbar, .jumpnav, .savebar, .actions, button, .btn, nav { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card { border: 0; padding: 0 0 14px; margin: 0 0 10px; }
  a { color: var(--ink); }
}

/* ---- segmented buttons (radio pills) + inventory visuals ---- */
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
/* the vehicle's one screen (3.148): type as two chips inside the same form */
.vseg { display: flex; gap: 10px; margin: 4px 0 14px; }
.vseg label { cursor: pointer; }
.vseg input { position: absolute; opacity: 0; pointer-events: none;
  /* a control nobody can see must also take no room: without these, an
     ancestor rule like `.pc-f input { width: 100% }` stretches this
     invisible radio to the full measure and the page scrolls sideways
     on every width (3.218). */
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.vseg span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 13px; background: var(--soft); color: var(--muted); font: 700 12px var(--sans); }
.vseg svg { width: 17px; height: 17px; }
.vseg input:checked + span { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; }
/* the recognised plate is one tap: the row is a div, and its button points at
   its own form, which is emitted after the step's form closes (3.233.1) */
.recog button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #fff; background-image: none; border: 0; box-shadow: none; color: var(--ink);
  padding: 13px 14px 13px 18px; font: inherit; height: auto; }
.recog button:hover { filter: none; }
/* the support kinds and their fobs */
.iv-fob.is-km { background: linear-gradient(180deg, #B27C20, color-mix(in srgb, #B27C20 72%, #000)); }
.iv-fob.is-kg { background: #EDF0F5; color: var(--muted); }
.card.is-shut h2 { color: var(--muted); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { border: 1px solid #E4E5F0; background: #fff; border-radius: 11px;
  height: 42px; display: inline-flex; align-items: center; padding: 0 16px; margin: 0;
  font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; transition: background 0.12s; }
.seg label:hover { background: var(--iris-tint); color: var(--iris-deep); }
/* the chosen one wears the brand, not a slab of black. Black was the only
   thing on these pages that belonged to no palette at all. */
.seg input:checked + label {
  background-image: var(--grad-btn); background-color: var(--iris);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: var(--lift-1);
}
.seg input:focus-visible + label { outline: 2px solid var(--iris); outline-offset: 1px; }
.stockbar { position: relative; height: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.stockbar > i { position: absolute; inset: 0 auto 0 0; background: var(--bronze); border-radius: 1px; }
.stockbar > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--overdue); }
.unitchip { display: inline-block; border: 1px solid var(--line); background: var(--soft); border-radius: 8px;
  font: 600 11px var(--mono); padding: 2px 7px; margin: 2px 3px 0 0; color: var(--ink); }
.unitchip.is-more { border-style: dashed; color: var(--muted); }

/* ---- section subnav ---- */
.subnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav-in { display: flex; gap: 4px; padding: 0 28px; }
.subnav a { display: inline-block; padding: 9px 14px; font: 500 12.5px var(--sans);
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--bronze); }
/* ---- my day ---- */
.daygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: 16px; }
.daycard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--lift-1); }
.daycard .n { font: 700 30px var(--serif); color: var(--ink); line-height: 1.1; }
.daycard .n.alert { color: var(--overdue); }
.daycard .k { font: 800 9.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.daycard p { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; }

/* ---- brand lockup in the topbar ---- */
.brand-with-logo { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 38px; width: auto; display: block; max-width: 220px; object-fit: contain; }
@media (max-width: 640px) { .brand-logo { height: 30px; max-width: 150px; }
  /* the mark shrinks here, so the wordmark shrinks with it and the block
     keeps meeting the logo's height. The tracking is in em, so the three
     lines stay justified to one width without being told again. */
  .brand-sub b { font-size: 9.6px; line-height: 10px; } }

/* ---- My day buttons: one width, one height, all ink, bottoms aligned ---- */
.daycard { display: flex; flex-direction: column; }
.daycard p { flex: 0 0 auto; }
.daycard .btn, .daycard .btn-sm, .daycard a.btn-ghost {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42px; padding: 0 16px; box-sizing: border-box; border-radius: 12px;
  background-image: none; background-color: var(--surface);
  border: 1px solid #D8DEEA; color: var(--ink); font-weight: 600;
  font: 600 13px var(--sans); text-decoration: none; border-radius: 12px;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.daycard .btn:hover, .daycard .btn-sm:hover, .daycard a.btn-ghost:hover {
  background: var(--bronze); border-color: var(--bronze); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23, 20, 15, 0.18);
}
.daycard .btn:active, .daycard .btn-sm:active { transform: translateY(0); box-shadow: none; }























/* panel: flush under the gold line, gentle arrival */


@media (hover: hover) {

}

.topbar-in { display: flex; align-items: center; }
.topbar nav { display: flex; align-items: center; gap: 26px; margin-left: 38px; margin-right: auto; }
















/* ================================================================
   NAVIGATION — the one authoritative block. Do not add rules above;
   edit here. Panels are ALWAYS flex columns; visibility/opacity do
   the showing, so the item gap survives every open path (hover,
   click, keyboard alike).
   ================================================================ */
/* The bar gained a search, a word on the record verb and a face, and the 26px
   gap between every one of them was suddenly 130px of nothing — enough on its
   own to push the page wider than the window. Measured, not guessed (3.191). */
.topbar-in { flex-wrap: nowrap; max-width: 1360px; gap: 10px; }
.topbar .brand, .topbar .brand-with-logo { flex: 0 0 auto; }
.topbar nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 1px; margin-left: 18px; margin-right: 12px; }
.userdrop { margin-left: auto; flex: 0 0 auto; }

.navdrop { position: relative; display: inline-block; }
.topbar .navtop, .topbar .navtop:hover, .topbar .navtop:focus, .topbar .navtop:active {
  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  font: 500 14.5px var(--sans); color: var(--ink);
  padding: 22px 10px 20px; display: inline-flex; align-items: center; gap: 5px;
}
/* A tab is a tab whether it opens a page or a dropdown. Both were sized by
   different rules — one had no vertical padding at all and the other twenty-two
   pixels — so the lit pill came out a different size depending on which kind of
   tab you were on. One shape now, for both. */
.topbar nav > a,
.topbar .navtop {
  white-space: nowrap;
  padding: 9px 11px;
  margin: 0;
  border-radius: 13px;
  font: 500 13.5px var(--sans);
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s, color .14s;
}
.topbar nav > a:hover, .topbar .navtop:hover {
  background: var(--soft); color: var(--ink); text-decoration: none;
}
/* 3.191: the lit tab wears the same iris wash the day uses for today. A solid
   gradient slab shouted louder than the page it was pointing at. */
.topbar nav > a.on, .topbar nav > a.on:hover,
.topbar .navtop.on, .topbar .navtop.on:hover {
  color: var(--iris-deep); font-weight: 700; background: var(--iris-tint);
}
.topbar .navtop:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.topbar .navtop .caret { width: 13px; height: 13px; opacity: .55; transition: transform .15s; }
.navdrop.open .navtop .caret { transform: rotate(180deg); }

.navpanel {
  position: absolute; top: 100%; left: -10px;
  display: flex; flex-direction: column; gap: 18px;
  min-width: 252px; padding: 16px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--lift-3); z-index: 80;
  overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
/* the brand edge, as every other Aurora surface wears it */
.navpanel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); }
/* THE FLICKER FIX: the panel used to sit two pixels below the button, and that
   two-pixel strip is not part of either — the pointer crossed it, hover was
   lost, and the menu shut in your face. The panel now begins at the button's
   own edge and pads itself down, so the pointer never leaves. */
.navpanel { margin-top: 0; padding-top: 22px; }
.navdrop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.navdrop.open .navpanel { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
@media (hover: hover) {
  .navdrop:hover .navpanel, .navdrop:focus-within .navpanel {
    visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s;
  }
}
.userdrop .navpanel { left: auto; right: -8px; }

.navitem { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin: 0;
  border-radius: 12px; font: 500 14px var(--sans); color: var(--ink); text-decoration: none; }
.navitem svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); transition: color .12s; }
.navitem:hover { background: var(--iris-tint); text-decoration: none; }
.navitem:hover svg { color: var(--iris-deep); }
.navitem.cur { font-weight: 700; }
.navitem.cur svg { color: var(--iris-deep); }
.navitem.cur::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--iris); margin-left: auto; }

/* One mechanism only. A second rule here used to flip `display`, which cannot
   be transitioned — so the panel appeared instantly and then faded, twice. */

/* panel items outrank every legacy ancestor rule — sections and user identical, forever */
.topbar .navpanel .navitem { display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  margin: 0; border-bottom: 0; font: 500 14px var(--sans); color: var(--ink); }
.topbar .navpanel .navitem:hover { background: var(--iris-tint); color: var(--iris-deep); }

/* group label inside the person menu — structure without lines */
.navlabel { font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 14px 0; margin-top: 4px; }

/* ---- expense form: two field rows, the Record seal centered at the right ---- */

/* ---- My day money bands: number · graph · seal ---- */
.band { display: flex; align-items: center; gap: 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin: 0 0 14px;
  box-shadow: var(--lift-1); }
.band .k { font: 800 9.5px var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.band .n { font: 700 27px var(--serif); color: var(--ink); line-height: 1.1; white-space: nowrap; }
.band .n.alert { color: var(--overdue); }
.band p { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; white-space: nowrap; }
.band-fig { flex: 0 0 auto; min-width: 210px; }
.band-graph { flex: 1; min-width: 0; }
.band-go { flex: 0 0 auto; }
.band-go .btn { display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px;
  background-image: none; background-color: var(--surface); border: 1px solid #D8DEEA;
  color: var(--ink); font: 600 13px var(--sans);
  text-decoration: none; border-radius: 12px; transition: background .16s, transform .16s, box-shadow .16s; }
.band-go .btn:hover { background: var(--bronze); border-color: var(--bronze);
  transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23,20,15,.18); }
@media (max-width: 760px) { .band { flex-wrap: wrap; } .band-graph { flex-basis: 100%; order: 3; } }

/* graph month labels: real type, never stretched */
.bandlabels { display: flex; justify-content: space-around; margin-top: 6px; }
.bandlabels span { font: 500 10.5px var(--sans); color: var(--muted); letter-spacing: .04em; }

/* view-as banner: unmistakable borrowed-eyes stripe */
.imp-banner { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  gap: 18px; background: var(--ink); color: #fff; padding: 9px 16px; font: 500 13px var(--sans); }
.imp-banner b { color: var(--bronze); }
.imp-banner form { margin: 0; }
.imp-banner button { all: unset; cursor: pointer; border: 1px solid var(--iris); color: var(--iris);
  padding: 6px 15px; border-radius: 12px; font: 600 12px var(--sans); }
.imp-banner button:hover { background: var(--bronze); color: var(--ink); }

/* view-as switchboard inside the person menu */
.navpanel .vs-form { margin: 0; padding: 0 12px; }
.navpanel .vs-form select { width: 100%; height: 38px; font-size: 13px; }

/* ---- frequency colors (Option B): blue monthly · purple quarterly · ink semi-annual ---- */
/* Frequency bands. These were five colours picked by hand — a green, a blue, a
   purple, a near-black and a slate — which is why the page looked like it came
   from three different design eras at once. They are one idea now: the further
   apart a job's visits are, the further the band travels along the brand's own
   gradient, from iris at every visit to sky once a year. A rebrand takes them
   with it. */
.fq0  { --fq: var(--iris); --fqt: var(--iris-tint); }
.fq1  { --fq: color-mix(in srgb, var(--iris) 75%, var(--sky));
        --fqt: color-mix(in srgb, var(--iris) 6%, #fff); }
.fq3  { --fq: color-mix(in srgb, var(--iris) 50%, var(--sky));
        --fqt: color-mix(in srgb, var(--sky) 5%, #fff); }
.fq6  { --fq: color-mix(in srgb, var(--iris) 25%, var(--sky));
        --fqt: color-mix(in srgb, var(--sky) 7%, #fff); }
.fq12 { --fq: var(--sky); --fqt: color-mix(in srgb, var(--sky) 9%, #fff); }
.fqblock { border: 1px solid var(--line); border-left: 5px solid var(--fq); border-radius: 14px;
  margin: 16px 0; padding: 0 14px 6px; overflow: hidden; box-shadow: var(--lift-1); }
.fqhd { background: var(--fqt); color: var(--fq); margin: 0 -14px 8px; padding: 9px 16px;
  font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.fq6 .fqhd, .fq6.fqhd-sm { color: var(--ink); }
.fqhd-sm { color: var(--fq); background: var(--fqt); padding: 6px 12px; margin: 14px 0 4px;
  font: 700 10.5px var(--sans); letter-spacing: .09em; text-transform: uppercase; border-left: 4px solid var(--fq); }
.fqrow { border-left: 3px solid var(--fq); }

/* two-column person menu: wide panel, short drop */
.userdrop .navpanel { min-width: 440px; }
.navgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.navgrid .navitem { padding: 9px 10px; }
.navgrid .vs-form { padding: 0; }
/* ---- navigation on the phone: one thumb, one list (v2.62) ---- */
.mburger { display: none; }
.navsheet { display: contents; } /* desktop: the wrapper vanishes, layout untouched */
.crumb { display: none; }

/* The drawer. This used to begin at 760px, which meant every tablet made
   was left squeezing ten destinations into a bar that fits six. */
@media (max-width: 1080px) {
  /* the bar: logo left, burger right, nothing else */
  .topbar .navsheet { display: none; }
  .mburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; }
  /* the bars belong to the HEADER burger. The phone bar's More handle carries
     the same class so it opens the same drawer, and its <span> is the word
     "More" — unscoped, this rule painted that word as a black bar (3.191). */
  .topbar .mburger span { display: block; height: 2px; width: 24px; background: var(--ink); border-radius: 1px; transition: transform .18s ease, opacity .18s ease; }
  body.mnav-open .topbar .mburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mnav-open .topbar .mburger span:nth-child(2) { opacity: 0; }
  body.mnav-open .topbar .mburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the crumb always names where you are */
  .crumb { display: block; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 18px; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep); }
  .crumb::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--bronze);
    transform: rotate(45deg); margin-right: 9px; vertical-align: 1px; }

  /* the full-screen sheet */
  body.mnav-open { overflow: hidden; }
  body.mnav-open .topbar .navsheet { display: flex; flex-direction: column; position: fixed;
    top: 57px; left: 0; right: 0; bottom: 0; background: var(--surface); overflow-y: auto;
    padding: 10px 8px calc(20px + env(safe-area-inset-bottom)); z-index: 60; }
  body.mnav-open .topbar .navsheet nav { display: flex; flex-direction: column; margin: 0; gap: 2px; align-items: stretch; }

  /* rows: plain links and section heads look alike, thumb-sized */
  .navsheet nav > a, .navsheet .navtop { display: flex; align-items: center; width: 100%;
    padding: 13px 16px; font: 600 15px var(--sans); color: var(--ink); background: none;
    border: 0; border-radius: 6px; text-align: left; }
  .navsheet nav > a.on::after, .navsheet .navtop.on::after { content: ''; width: 6px; height: 6px;
    background: var(--bronze); transform: rotate(45deg); margin-left: 10px; }
  .navsheet .navdrop { display: block; width: 100%; position: static; }
  .navsheet .navtop .caret { margin-left: auto; width: 18px; height: 18px; transition: transform .16s ease; }
  .navsheet .navdrop.open > .navtop .caret { transform: rotate(180deg); }

  /* sections expand in place — the panel becomes a static, indented list */
  .navsheet .navpanel { display: none; position: static; width: 100%; min-width: 0; box-shadow: none;
    border: 0; border-top: 0; padding: 0 0 6px; margin: 0; opacity: 1; transform: none; background: none; }
  .navsheet .navdrop.open > .navpanel { display: flex; flex-direction: column; gap: 2px; }
  .navsheet .navpanel .navitem { padding: 11px 16px 11px 44px; font-size: 14.5px; border-radius: 6px; }
  .navsheet .navpanel .navitem.cur { background: var(--bronze-tint); }
  .navsheet .navpanel .navlabel { padding-left: 44px; }

  /* the person menu: pinned at the bottom, same machinery */
  .navsheet .userdrop { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px; }
  .navsheet .userdrop > .navtop { background: var(--paper); border-radius: 8px; }
  .navsheet .userdrop .navpanel { padding-bottom: 0; }
  .navsheet .userdrop .navgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 0 12px 0 16px; }
  .navsheet .userdrop .navgrid .navitem { padding: 10px 8px; font-size: 13.5px; }
  .navsheet .userdrop .vs-form select { width: 100%; }
}

/* rota v2: state cards */
.slot-done { opacity: .75; }
.slot-live { border-left: 5px solid var(--bronze); }
.slot-locked { opacity: .6; }
.hk-float { border: 0; }

/* ================= THE HOUSE CALENDAR =================
   One language for every surface that draws days: the month on My day, the
   month on the reports, and the week strips on housekeeping and the cleaner's
   page. Four calendars used to draw the same estate four different ways.

   A calendar here is ONE bordered sheet whose cells are divided by hairlines —
   the 1px grid gap lets the sheet's own background show through, so the rules
   cost no borders and can never double up. Thirty-one separately-bordered
   cards floating in 6px of air is what made the old month read as a scatter of
   tiles instead of a calendar. */
.cal-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--line); }
.cal-head, .cal-grid { display: grid; gap: 1px; }
.cal-c7 .cal-head, .cal-c7 .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-c6 .cal-head, .cal-c6 .cal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cal-head { background: var(--line); border-bottom: 1px solid var(--line); }
.cal-h { background: var(--paper); font: 800 9.5px var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); padding: 9px 11px; }
.cal-d { display: block; position: relative; background: var(--surface); color: var(--ink);
  text-decoration: none; min-height: 84px; padding: 8px 10px 10px; }
a.cal-d:hover { background: var(--iris-tint); text-decoration: none; }
.cal-d.is-we { background: color-mix(in srgb, var(--iris) 1.8%, #fff); }
.cal-d.is-out { background: color-mix(in srgb, var(--iris) 4%, #fff); }
.cal-d.is-week { background: color-mix(in srgb, var(--iris) 4.5%, #fff); }
/* colour is reserved for exceptions, and the exception is a rostered day that
   never came back initialled — washed, and spined down its leading edge */
.cal-d.is-miss { background: var(--overdue-tint); box-shadow: inset 3px 0 0 var(--overdue); }
.cal-d.is-today { background: var(--surface); box-shadow: inset 0 0 0 2px var(--iris); z-index: 1; }
.cal-n { font: 700 12.5px var(--sans); color: var(--muted); display: flex; align-items: center;
  gap: 6px; min-height: 23px; }
.cal-d.is-out .cal-n { color: color-mix(in srgb, var(--ink) 24%, #fff); font-weight: 400; }
.cal-d.has-work .cal-n, .cal-d.is-miss .cal-n { color: var(--ink); }
.cal-dow { font: 800 8.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); }
.cal-d.is-today .cal-dow { color: var(--iris); }
.cal-fob { display: inline-flex; align-items: center; justify-content: center; width: 23px;
  height: 23px; border-radius: 8px; font: 700 11.5px var(--serif); font-style: normal; color: #fff;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
.cal-tdy { font: 800 8px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--iris); }
.cal-cnt { margin-left: auto; font: 800 9px var(--sans); color: var(--iris);
  background: var(--iris-tint); border-radius: 999px; padding: 2px 7px; }
.cal-note { font: 400 10.5px var(--sans); color: var(--muted); margin-top: 5px; }
/* one week wide: the same cell, standing on its own without a header row */
.cal-wk .cal-d { min-height: 74px; }


/* one day, one mark — and the mark names which of the three it is */
.cal-mark { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  border-radius: 999px; padding: 3px 9px 3px 3px; font: 700 9.5px var(--sans); }
.cal-mark i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 8px var(--sans); font-style: normal;
  color: #fff; }
.cal-mark.is-plan { background: var(--iris-tint); color: var(--iris); }
.cal-mark.is-plan i { background: var(--iris); }
.cal-mark.is-now { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.cal-mark.is-now i { background: var(--draft); }
.cal-mark.is-miss { background: var(--surface); color: color-mix(in srgb, var(--overdue) 78%, #000); }
.cal-mark.is-miss i { background: var(--overdue); }

.cal-key { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin: 13px 2px 0;
  font: 400 10.5px var(--sans); color: var(--muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
.cal-key-tail { margin-left: auto; }
.cal-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cal-dot.is-plan { background: var(--iris); }
.cal-dot.is-now { background: var(--draft); }
.cal-dot.is-miss { background: var(--overdue); }

/* the twelve months, the running one lit: navigation that is also the answer
   to the one question a month grid can never give — more or less than usual */
.cal-year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px;
  align-items: end; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px 11px;
  background: var(--paper); margin: 0 0 18px; }
.cal-year-cap { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px;
  font: 800 8.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cal-year-cap span { margin-left: auto; text-transform: none; letter-spacing: 0;
  font: 400 11px var(--sans); color: var(--muted); }
.cal-year-m { display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; border-radius: 9px; padding: 5px 2px 4px; }
a.cal-year-m:hover { background: var(--surface); text-decoration: none; box-shadow: var(--lift-1); }
.cal-year-n { font: 700 11px var(--sans); color: var(--faint); line-height: 1; }
.cal-year-b { width: 100%; max-width: 24px; border-radius: 4px; min-height: 4px;
  background: color-mix(in srgb, var(--iris) 22%, #fff); }
.cal-year-l { font: 800 8.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); }
.cal-year-m.is-now { background: var(--surface); box-shadow: var(--lift-1); }
.cal-year-m.is-now .cal-year-b { background: var(--iris); }
.cal-year-m.is-now .cal-year-n { color: var(--ink); font-size: 12.5px; }
.cal-year-m.is-now .cal-year-l { color: var(--iris); }

/* the month's own furniture — quiet, because the year strip does the walking */
.cal-bar { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; flex-wrap: wrap; }
.cal-mtitle { font: 700 20px var(--serif); letter-spacing: -.01em; padding: 0 4px; }
.cal-sp { flex: 1; }
a.cal-nav, .btn.cal-nav { background: var(--soft); background-image: none; color: var(--muted);
  border: 0; box-shadow: none; font-weight: 700; }
a.cal-nav:hover, .btn.cal-nav:hover { background: var(--iris-tint); color: var(--iris); filter: none; }

@media (max-width: 760px) {
  .cal-d { min-height: 62px; padding: 5px 6px 7px; }
  .cal-n { font-size: 11px; min-height: 18px; }
  .cal-year { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media print { .cal-d { break-inside: avoid; } }

/* ---- the housekeeping board: the month, and how the month actually went ---- */
.hkb { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 26px; align-items: start; }
@media (max-width: 1080px) { .hkb { grid-template-columns: minmax(0, 1fr); } }
/* a door has no rota of its own, so no rail stands beside its month (3.200.0) */
.hkb.is-alone { grid-template-columns: minmax(0, 1fr); }
.hkr { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.hkr-b { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.hkr-b:last-child { border-bottom: 0; }
.hkr-t { font: 800 9px var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px; }
.hkr-ring { display: flex; align-items: center; gap: 15px; }
.hkr-rw { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.hkr-rw .md-ring { width: 96px; height: 96px; }
.hkr-rw .md-ring-tx b { font: 700 20px var(--serif); }
.hkr-rw .md-ring-tx em { font-size: 9px; }
.hkr-ring p { margin: 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.hkr-ring p b { display: block; font: 700 14.5px var(--sans); color: var(--ink); margin-bottom: 2px; }
.hkr-warn { color: color-mix(in srgb, var(--overdue) 82%, #000); font-weight: 600; }
.hkr-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border-radius: 10px; overflow: hidden; }
.hkr-fig { background: var(--surface); padding: 11px 12px; }
.hkr-fig b { display: block; font: 700 19px/1.05 var(--serif); }
.hkr-fig span { display: block; font: 800 8px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px; }
.hkr-fig.is-warn b { color: var(--overdue); }
.hkr-lane { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.hkr-lane:last-child { margin-bottom: 0; }
.hkr-lane i { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 9px var(--sans); font-style: normal;
  color: #fff; background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 74%, #000)); }
.hkr-lane i.is-off { background: var(--soft); color: var(--faint); }
.hkr-who { flex: 0 0 78px; font: 600 11.5px var(--sans); color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hkr-track { flex: 1; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.hkr-track em { display: block; height: 100%; border-radius: 999px; background: var(--paid); }
.hkr-num { flex: 0 0 auto; font: 700 11.5px var(--sans); color: var(--muted); min-width: 14px;
  text-align: right; }
.hkr-line { margin: 0 0 12px; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.hkr-line b { color: var(--ink); font-weight: 700; }
.hkr-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hkr-wk div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hkr-dl { font: 800 8px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.hkr-on, .hkr-off { width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 9px var(--sans); }
.hkr-on { color: #fff; background: var(--iris); }
.hkr-on.is-now { background: var(--draft); }
.hkr-off { color: color-mix(in srgb, var(--overdue) 80%, #000); background: var(--overdue-tint);
  border: 1px dashed color-mix(in srgb, var(--overdue) 45%, #fff); }

/* contracts: the lease as one editable document */
.contract-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contract-head h2 { margin: 0; }
.contract-doc { width: 100%; min-height: 68vh; padding: 34px 38px; box-sizing: border-box;
  font: 15px/1.75 var(--serif, Georgia, serif); color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line); border-top: 3px solid var(--bronze);
  border-radius: 6px; box-shadow: 0 6px 22px rgba(23,20,15,.06); resize: vertical; }
.contract-doc:focus { outline: none; border-color: var(--bronze); box-shadow: 0 6px 26px rgba(176,141,87,.18); }
.ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; margin-top: 14px; }
.ph-row { display: flex; align-items: baseline; gap: 10px; }
.ph-row code { font: 12.5px var(--mono, "Space Mono", monospace); color: var(--bronze-deep);
  background: var(--bronze-tint); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
@media (max-width: 760px) { .ph-grid { grid-template-columns: 1fr; } .contract-doc { padding: 22px 18px; } }

/* contracts: the lease dressed as the real document (v2.63) */
.cdoc { background: #FFF; border: 1px solid var(--line); border-top: 3px solid var(--bronze); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(23,20,15,.07); max-width: 860px; margin: 0 auto; padding: 56px 64px 48px; }
.cd-eyebrow { font: 700 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); }
.cd-title { font: 700 30px/1.15 var(--serif); color: var(--ink); margin: 8px 0 4px; }
.cd-meta { font: 400 12.5px var(--sans); color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 22px; }
.cd-meta code { font: 12px var(--mono); color: var(--bronze-deep); background: var(--bronze-tint); padding: 0 5px; border-radius: 3px; }
.cdoc p { font: 400 14px/1.75 var(--sans); color: var(--ink); margin: 0 0 14px; text-align: justify; }
.cd-h { font: 700 14.5px var(--sans); color: var(--ink); margin: 26px 0 10px; letter-spacing: .01em; }
.cd-h-plain { text-align: left; }
.cd-num { color: var(--bronze-deep); }
.cd-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font: 400 13.5px/1.55 var(--sans); }
.cd-table th { background: var(--bronze-tint); color: var(--bronze-deep); font: 700 11px var(--sans);
  letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 9px 14px; border: 1px solid #E2D8C6; }
.cd-table td { border: 1px solid var(--line); padding: 10px 14px; vertical-align: top; }
.cd-table .cd-label { width: 32%; font-weight: 600; background: var(--paper); }
.cd-sign { margin-top: 42px; border-top: 1px solid var(--line); padding-top: 26px; }
.cd-sign-h { font: 700 12px var(--sans); letter-spacing: .14em; color: var(--bronze-deep); margin-bottom: 34px; }
.cd-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cd-sig-line { border-bottom: 1.5px solid var(--ink); height: 44px; }
.cd-sig-nm { font: 700 13px var(--sans); margin-top: 8px; }
.cd-sig-role { font: 400 12px var(--sans); color: var(--muted); }
@media (max-width: 760px) {
  .cdoc { padding: 28px 20px; }
  .cd-title { font-size: 23px; }
  .cdoc p { text-align: left; }
  .cd-sign-grid { grid-template-columns: 1fr; gap: 36px; }
}
/* The agreement's own table is a document table, not a data grid: it is 100%
   wide but its cells have 14px of padding and a fixed 32% label column, so on
   a 360px phone it reached 4px past the screen (3.230). Fixed layout makes the
   percentages authoritative, and the padding steps down where it must. */
.cd-table { table-layout: fixed; }
.cd-table td, .cd-table th { overflow-wrap: anywhere; }
@media (max-width: 430px) {
  .cd-table td, .cd-table th { padding-left: 9px; padding-right: 9px; }
}


/* phones: forms stack, everything stays thumb-sized (v2.64) */
@media (max-width: 760px) {
  .frow { flex-wrap: wrap; }
  .frow > div { flex: 1 1 100%; }
  .frow > .actions { flex: 1 1 100%; }
  .actions button, .actions .btn { width: 100%; }
  .card { padding: 16px 14px; }
  h1 { font-size: 24px; }
  .table-scroll { margin: 0 -14px; padding: 0 14px; }
  .table-scroll table { font-size: 13px; }
  input, select, textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
}

/* Log v2: the door in one motion (v2.67) */
.lg-hero { display: flex; align-items: center; gap: 40px; }
.lg-count b { font: 700 34px/1 var(--serif); color: var(--ink); margin-right: 10px; }
.lg-count span { font: 400 13px var(--sans); color: var(--muted); }
.lg-date { margin-left: auto; text-align: right; }
.lg-date span { display: block; font: 600 13px var(--sans); color: var(--ink); }
.lg-date em { font: 400 13px var(--mono); color: var(--bronze-deep); font-style: normal; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.lg-dot-resident { background: var(--paid); }
.lg-dot-guest { background: var(--bronze); }
.lg-dot-visitor { background: var(--overdue); }
.lg-doorform { margin-top: 12px; }
.lg-sel { display: flex; align-items: center; gap: 12px; background: var(--bronze-tint);
  border: 1px solid #E2D8C6; border-radius: 6px; padding: 10px 14px; }
.lg-sel b { display: block; font: 700 14px var(--sans); }
.lg-sel span.muted { font-size: 12px; }
.lg-sel .btn-sm { margin-left: auto; }
.lgledger { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.lgrow { display: flex; align-items: center; gap: 18px; border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 6px; padding: 12px 16px; background: #FFF; }
.lgrow.lg-resident { border-left-color: var(--paid); }
.lgrow.lg-guest { border-left-color: var(--bronze); }
.lgrow.lg-visitor { border-left-color: var(--overdue); }
.lgrow.lg-vehicle { border-left-color: var(--bronze-deep); }
.lgrow.lg-done { background: var(--paper); }
.lgrow.lg-done .lg-who b, .lgrow.lg-done .lg-plate { color: var(--muted); }
.lg-time { display: flex; align-items: baseline; gap: 8px; flex: 0 0 190px; font: 400 15px var(--mono); color: var(--ink); flex-wrap: wrap; }
.lg-time i { font: 400 13px var(--sans); color: var(--muted); font-style: normal; }
.lg-time .lg-dash { color: #C9C2B2; }
.lg-time em { flex-basis: 100%; font: 600 10.5px var(--sans); color: var(--bronze-deep); font-style: normal; }
/* The date sits above the times, quiet for today and bronze for any other day,
   so a person still inside from yesterday is obvious without reading. */
.lg-time .lg-day { flex-basis: 100%; order: -1; margin-bottom: 1px;
  font: 600 11px var(--mono); letter-spacing: .03em; color: var(--muted); font-style: normal; }
.lg-time .lg-day.other { color: var(--bronze-deep); }
.lg-time .lg-since, .lg-time .lg-stay { flex-basis: 100%; font: 600 10.5px var(--sans); font-style: normal; color: var(--muted); }
.lg-time .lg-since { color: var(--bronze-deep); }
/* the out-day, printed inline when someone left on a different date */
/* The day's own line: who has today, whether they are on site, any note.
   Reported, never asked — the day is claimed by checking in or starting. */
.dayline { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin: 0 0 16px;
  font: 400 14px var(--sans); color: var(--ink); }
.dayline .dl-dot { margin: 0 10px; color: var(--bronze); }
.dayline .muted { font-size: 13px; }

.lg-time .lg-outday { font: 600 11px var(--mono); color: var(--bronze-deep); letter-spacing: .03em; }

/* Logbook table: every stamp is a date over a time, so a stay that crosses
   midnight reads correctly instead of collapsing into one "day". */
.lgtab td, .lgtab th { vertical-align: middle; }
.lgc { display: inline-flex; flex-direction: column; line-height: 1.25; }
.lgc-d { font: 600 10.5px var(--mono); letter-spacing: .03em; color: var(--muted); font-style: normal; }
.lgc-d.x { color: var(--bronze-deep); }
.lgc-t { font: 400 14px var(--mono); color: var(--ink); }
.lgc-stay { font: 400 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.lg-who { min-width: 0; }
.lg-who b { display: block; font: 700 15px var(--sans); color: var(--ink); }
.lg-who > span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 2px; }
.lg-plate { display: inline-block; font: 700 13px var(--mono); color: var(--bronze-deep);
  background: var(--bronze-tint); border-radius: 4px; padding: 2px 9px; margin-bottom: 2px; }
.lg-act { margin-left: auto; }
.lg-pill { padding: 8px 16px; font: 600 12.5px var(--sans); color: var(--ink); background: #FFF;
  border: 1px solid #C9C2B2; border-radius: 17px; cursor: pointer; }
.lg-pill:hover { border-color: var(--bronze); background: var(--bronze-tint); }
@media (max-width: 760px) {
  .lg-hero { gap: 22px; flex-wrap: wrap; }
  .lgrow { flex-wrap: wrap; gap: 8px 14px; }
  .lg-time { flex-basis: auto; }
  .lg-who { flex-basis: 100%; }
  .lg-act { margin-left: 0; width: 100%; }
  .lg-pill { width: 100%; padding: 11px; }
}

/* mixed buildings: the fourth kind + whose-tag (v2.69) */
.lg-dot-shortterm { background: #5A7A96; }
.lgrow.lg-shortterm { border-left-color: #5A7A96; }
.lg-notours { display: inline-block; font: 600 10px var(--sans); color: #A8453A; background: #F9E9E6;
  border-radius: 10px; padding: 2px 9px; vertical-align: 2px; margin-left: 6px; }

/* managed/unmanaged wording + colors (v2.70): full color in Setup, muted on the Log */
.u-chip { display: inline-block; font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 10px; padding: 3px 10px; margin: 0 10px 0 4px; vertical-align: 1px; }
.u-managed { color: #2E6B45; background: #E7F2EA; }
.u-unmanaged { color: #A8453A; background: #F9E9E6; }

/* pictures or video — the chooser, and the storage gauges (v2.71) */
.mediapick { display: flex; gap: 12px; flex-wrap: wrap; }
.mediabtn { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; border: 1px dashed #C9BFAE; border-radius: 7px; background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s; }
.mediabtn:hover { border-color: var(--bronze); background: var(--bronze-tint); }
.mediabtn .mi-ico { color: var(--bronze-deep); line-height: 0; margin-bottom: 4px; }
.mediabtn b { font: 700 13.5px var(--sans); color: var(--ink); }
.mediabtn em { font: 400 11.5px var(--sans); font-style: normal; color: var(--muted); }
.mediabtn.has { border-style: solid; border-color: var(--paid); background: #F1F7F3; }
.stgrow { margin: 0 0 16px; }
.stghead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.stghead b { font: 700 13.5px var(--sans); color: var(--ink); }
.stghead span { font: 400 12px var(--sans); color: var(--muted); }
.stgbar { height: 12px; border-radius: 6px; background: #EDF1F7; overflow: hidden; }
.stgbar i { display: block; height: 100%; border-radius: 6px; }
.medialist { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mediachip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 14px; font: 600 11.5px var(--sans); color: var(--ink); background: #FFF; text-decoration: none; }
.mediachip:hover { border-color: var(--bronze); background: var(--bronze-tint); }
.mediachip.vid { color: #46617A; }
@media (max-width: 760px) { .mediabtn { flex: 1 1 100%; } }

/* ---- v2.72: alignment pass — every row splits equally, every control the same height ---- */
.unitform { border-bottom: 1px solid var(--line); padding: 14px 0; margin: 0; }
.unitform.is-off { opacity: .55; }
.unitform:hover { background: var(--paper); }
.unitrow { display: grid; grid-template-columns: 1fr 1fr 1.6fr auto; gap: 12px; align-items: end; }
.ur-f { display: flex; flex-direction: column; min-width: 0; }
.ur-f > label { margin-bottom: 6px; }
.ur-f > input, .ur-f > select { margin-top: auto; }
.ur-none { display: flex; align-items: center; height: 42px; padding: 0 2px;
  font: 400 13px var(--sans); color: var(--muted); }
/* min-height, not height (3.230): the row exists to stand level with the
   controls beside it, and a fixed height meant its two checkboxes spilled 12px
   out of their own box the moment they wrapped — which they do from 768px down. */
.ur-flags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 42px; }
.ur-flags .check { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.ur-save button { height: 42px; }
.ur-addr { margin-top: 10px; }
.ur-addr > label { display: block; margin-bottom: 6px; }
.findbox { position: relative; display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.findbox input { height: 42px; }
.findcount { font: 600 11.5px var(--sans); color: var(--bronze-deep); white-space: nowrap; }
/* one height for every action button, wherever it sits */
.actions button, .actions .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.actions .btn-sm { height: 34px; }
/* rows that can be scanned: quiet stripes and a hover line */
.table-scroll table tbody tr:nth-child(even), .table-scroll table tr:nth-child(even) { background: var(--paper); }
.table-scroll table tr:hover { background: var(--bronze-tint); }
.table-scroll table th { position: relative; }
/* keyboard users get a visible ring, mouse users are left alone */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 900px) {
  .unitrow { grid-template-columns: 1fr 1fr; }
  .ur-save { grid-column: 1 / -1; }
  .ur-save button { width: 100%; }
}
@media (max-width: 620px) {
  .unitrow { grid-template-columns: 1fr; }
  .ur-flags { min-height: 0; padding: 4px 0; }
}
/* a spacer label holds the line height so its control lands level with its neighbours */
.lbl-spacer { display: block; margin-bottom: 6px; }
/* The gap is load-bearing, not decoration. These are flex containers, and a
   flex container strips the leading space of a bare text node — the markup is
   <label class="check"><input> bill the damage</label>, so without a gap the
   words sat against the box on every form row in the platform. Same cause as
   the day line fixed in 3.200.0. (3.200.1, owner approved.) */
.frow > div > .check, .frow > div > .checkline {
  display: flex; align-items: center; gap: 8px; height: 42px; margin: 0; }

/* ---- v2.73: housekeeping without slots — pick, start, finish ---- */
.run-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.run-eyebrow { font: 700 10px var(--sans); letter-spacing: .14em; color: var(--bronze-deep); }
.run-meta { font: 400 12.5px var(--sans); color: var(--muted); }
.run-pause { margin: 6px 0 0 auto; }
.taskrow .tk-form { display: contents; }
.tk-box.is-ticked { border-color: var(--paid); background: var(--paid); position: relative; cursor: default; }
.tk-box.is-ticked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px;
  border: solid #FFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.tk-body { flex: 1; min-width: 0; }
.tk-freq, .tk-when { font: 400 11px var(--sans); color: var(--muted); }
.tk-said { display: block; font: italic 11px var(--sans); color: var(--bronze-deep); }
.tk-note { flex: 0 1 240px; height: 34px; font-size: 12.5px; }
.donerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.donerow .mono { font-size: 12px; color: var(--muted); flex: 0 0 120px; }
.donerow.is-live { color: var(--bronze-deep); }
.donenote { font: italic 11.5px var(--sans); color: var(--bronze-deep); }
.btn-go { background: #4C7A4C; border-color: #4C7A4C; }
@media (max-width: 760px) {
  .taskrow { flex-wrap: wrap; }
  .tk-note { flex: 1 1 100%; }
  /* the note stretches on a narrow screen; the buttons keep their own width,
     so they never become the slabs we just took out */
}

/* ---- v2.74: the Log at volume ---- */
.goneblock { margin-top: 14px; }
.goneblock summary { cursor: pointer; font: 600 12.5px var(--sans); color: var(--muted);
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 16px; display: inline-block; list-style: none; }
.goneblock summary::-webkit-details-marker { display: none; }
.goneblock summary::after { content: " ▾"; color: var(--bronze); }
.goneblock[open] summary::after { content: " ▴"; }
.goneblock summary:hover { border-color: var(--bronze); background: var(--bronze-tint); color: var(--ink); }
.goneblock .lgledger { margin-top: 10px; }
.justnow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.jn-lbl { font: 700 10px var(--sans); letter-spacing: .12em; color: var(--muted); }
.jn-form { margin: 0; }
.jn-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border-radius: 17px; border: 1px solid var(--line); background: #FFF; color: var(--ink);
  font: 600 11.5px var(--sans); cursor: pointer; }
.jn-chip:hover { border-color: var(--bronze); background: var(--bronze-tint); color: var(--ink); }
.jn-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- v2.75: what needs you — only when something is genuinely late ---- */
.attn { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #FFF; box-shadow: var(--lift-1); }
.attn-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-decoration: none;
  border-bottom: 1px solid var(--line); color: var(--ink); transition: background .12s; }
.attn-row:last-child { border-bottom: 0; }
.attn-row:hover { background: var(--paper); text-decoration: none; }
.attn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.attn-late .attn-dot { background: var(--overdue); }
.attn-warn .attn-dot { background: var(--bronze); }
.attn-t { flex: 1; min-width: 0; }
.attn-t b { display: block; font: 600 14px var(--sans); color: var(--ink); }
.attn-t em { font: 400 12px var(--sans); font-style: normal; color: var(--muted); }
.attn-go { font-size: 20px; color: #C9C2B2; }
.attn-row:hover .attn-go { color: var(--bronze); }

/* ---- v2.75: invoices grouped by what you would do about them ---- */
.invgroup { margin-bottom: 18px; }
.invgroup .ig-head { display: flex; align-items: baseline; gap: 10px; padding: 0 12px 9px; }
.invgroup .ig-head em { margin-left: auto; margin-right: 32px; font: 600 15.5px var(--serif);
  font-variant-numeric: tabular-nums; font-style: normal; color: var(--ink); }
.ig-late { border-top: 3px solid var(--overdue); }
.ig-late .ig-head { color: var(--overdue); }
.ig-warn { border-top: 3px solid var(--bronze); }
.ig-calm { opacity: .78; }
.ig-calm:hover { opacity: 1; }
td.ig-late { color: var(--overdue); font-weight: 600; }

/* ---- v2.76: the week as day cards, not a dropdown matrix ---- */
.weekplan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.wp-day { border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: #FFF; min-width: 0; }
.wp-day.is-today { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(176,141,87,.10); }
.wp-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wp-head b { font: 700 13px var(--sans); color: var(--ink); }
.wp-head .mono { font-size: 11.5px; color: var(--muted); }
.wp-head em { font-style: normal; margin-left: auto; }
.wp-lbl { display: block; font: 600 10px var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px; }
.wp-lbl .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.wp-line { margin-bottom: 6px; }
.wp-line.is-changed select { border-color: var(--bronze); background: var(--bronze-tint); }
.wp-line input { margin-top: 4px; font-size: 11.5px; height: 34px; }
@media (max-width: 1100px) { .weekplan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .weekplan { grid-template-columns: 1fr; } }
.secintro { font: 400 13.5px/1.7 var(--sans); color: var(--muted); max-width: 68ch;
  border-left: 3px solid var(--bronze); padding: 2px 0 2px 14px; margin: 0 0 20px; }

/* ---- v2.77: clients as a directory of people, not a spreadsheet ---- */
.clrow { display: grid; grid-template-columns: minmax(min(180px,100%), 2fr) repeat(4, minmax(min(92px,100%), 1fr)) auto auto;
  gap: 14px; align-items: center; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.clrow:hover { background: var(--paper); }
.clrow.is-off { opacity: .55; }
.clrow.has-late { box-shadow: inset 3px 0 0 var(--overdue); }
.cl-who a { font: 700 15px var(--sans); color: var(--ink); text-decoration: none; }
.cl-who a:hover { color: var(--bronze-deep); }
.cl-co, .cl-mail { display: block; font: 400 11.5px var(--sans); color: var(--muted); }
.cl-fact b { display: block; font: 600 13.5px var(--sans); color: var(--ink); }
.cl-fact b.is-late { color: var(--overdue); }
.cl-fact em { font: 400 10.5px var(--sans); font-style: normal; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.cl-tags { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* v3.48.1: two up, two down — the buttons hold a 2x2 block instead of starving the row */
.cl-go { display: grid; grid-template-columns: repeat(2, minmax(min(84px,100%), 1fr)); gap: 6px; align-content: center; }
.cl-go form { display: contents; }
.cl-go .btn-sm, .cl-go button.btn-sm { width: 100%; text-align: center; box-sizing: border-box; }
@media (max-width: 1000px) {
  .clrow { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .cl-who { grid-column: 1 / -1; }
  .cl-go { grid-column: 1 / -1; }
}
.lg-party { display: inline-block; font: 700 10.5px var(--mono); color: var(--bronze-deep);
  background: var(--bronze-tint); border-radius: 9px; padding: 1px 8px; vertical-align: 2px; margin-left: 6px; }
.lg-dot-delivery, .lgrow.lg-delivery { }
.lgrow.lg-delivery { border-left-color: #8A8272; }
.lg-dot-food { background: #B4713A; }      /* food: warm, tells itself apart at the door */
.lgrow.lg-food { border-left-color: #B4713A; }
.lg-dot-mail { background: #4F6B8A; }
.lgrow.lg-mail { border-left-color: #4F6B8A; }
.lg-dot-contractor { background: #3F6F5A; }   /* contractor: working green */
.lgrow.lg-contractor { border-left-color: #3F6F5A; }
.lg-dot-staff { background: #6E5AA0; }        /* staff: ours */
.lgrow.lg-staff { border-left-color: #6E5AA0; }
.lg-dot-owner { background: #17140F; }        /* owner: ink */
.lgrow.lg-owner { border-left-color: #17140F; }      /* mail: cool slate */
.lgrow.lg-mail { border-left-color: #4F6B8A; }
.lg-dot-delivery { background: #8A8272; }

/* the leases-running-out row (v2.79) was swept in 3.200.0: the tenancies say
   it in Needs you now, with the money in front. */

/* ---- v2.79: what the tenant reported ---- */
.ptk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid #E4E5F0; border-radius: 12px; margin-bottom: 8px; background: #fff; }
.ptk.is-done { background: var(--paper); }
.ptk-t { flex: 1; min-width: 160px; }
.ptk-t b { display: block; font: 600 13.5px var(--sans); color: var(--ink); }
.ptk-t span { font: 400 11.5px var(--mono); color: var(--muted); }
.ptk-said { flex-basis: 100%; font: italic 12px var(--sans); color: var(--bronze-deep); }

/* ---- v2.80: one search for everything ---- */
/* Logbook: the download sits under the filter row, quiet until you want it */
.lb-dl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line); }
.lb-dl .muted { font-size: 12.5px; }
@media (max-width: 620px) { .lb-dl .muted { display: none; } }

/* The global field and its result rows lived here from v2.80 until 3.214.0,
   in the bronze era's own hand — a hard-written #A8A091 placeholder, a
   #C9C2B2 chevron and a magnifier with a warm grey baked into its data-URI.
   Search wears My day's language now (.md-need rows, the .sch-ask field), so
   that whole wardrobe is gone rather than left to rot beside it. */
kbd { font: 600 11.5px var(--mono); background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; }

/* ---- v2.80: the logbook ---- */
.lb-day { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-deep);
  margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lb-day:first-child { margin-top: 0; }
.lb-day span { color: var(--muted); font-family: var(--mono); letter-spacing: 0; }
.lb-row { display: grid; grid-template-columns: 54px 84px 1fr 130px; gap: 12px; align-items: baseline;
  padding: 8px 10px; border-left: 3px solid var(--line); margin-bottom: 3px; }
.lb-row:hover { background: var(--paper); }
.lb-cleaning { border-left-color: var(--paid); }
.lb-tickets { border-left-color: var(--overdue); }
.lb-door { border-left-color: #5A7A96; }
.lb-money { border-left-color: var(--bronze); }
.lb-admin { border-left-color: #C9C2B2; }
.lb-t { font: 400 12px var(--mono); color: var(--muted); }
.lb-k { font: 600 10px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lb-w b { font: 600 13px var(--sans); color: var(--ink); display: block; }
.lb-w em { font: italic 11.5px var(--sans); color: var(--muted); }
.lb-u { font: 400 11.5px var(--sans); color: var(--muted); text-align: right; }
@media (max-width: 760px) {
  .lb-row { grid-template-columns: 54px 1fr; }
  .lb-k, .lb-u { grid-column: 2; text-align: left; }
}
.ubar { display: block; height: 10px; border-radius: 5px; background: #EDF1F7; overflow: hidden; }
.ubar i { display: block; height: 100%; border-radius: 5px; }

/* ---- v2.81: the tenant's own documents ---- */
.ptag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
.ptag-t { flex: 1; min-width: 160px; }
.ptag-t b { display: block; font: 600 14px var(--sans); color: var(--ink); }
.ptag-t span { font: 400 11.5px var(--sans); color: var(--muted); }
.ptag-go { display: flex; gap: 7px; flex-wrap: wrap; }
@media (max-width: 620px) { .ptag-go { width: 100%; } .ptag-go .btn { flex: 1; text-align: center; } }

/* ---------- the tenant portal ---------- */
/* Tabs: the whole portal in one row, comfortable on a phone. */
.ptnav { display: flex; gap: 4px; margin: 4px 0 22px; border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptnav-i { position: relative; flex: 0 0 auto; padding: 12px 16px 13px; text-decoration: none;
  font: 600 14px var(--sans); color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease; }
.ptnav-i:hover { color: var(--ink); border-bottom-color: var(--line); }
.ptnav-i.on { color: var(--ink); border-bottom-color: var(--bronze); }
.ptnav-i i { display: inline-block; margin-left: 7px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bronze); color: #fff; font: 700 11px/18px var(--sans); font-style: normal; text-align: center; }

/* The four doors on the front page. */
.ptdoors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: 12px; margin: 0 0 20px; }
.ptdoor { display: flex; flex-direction: column; gap: 3px; position: relative; padding: 18px 40px 18px 18px;
  border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ptdoor b { font: 600 16px var(--serif); }
.ptdoor span { font-size: 12.5px; color: var(--muted); }
.ptdoor i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal;
  font-size: 20px; color: var(--bronze); }
.ptdoor:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23,20,15,.07); }

/* Invoices, grouped the way the staff page groups them. */
.ptinv h2 { display: flex; align-items: center; gap: 10px; }
.ptinv-sum { margin-left: auto; font: 700 15px var(--mono); }
.ptinv.ig-overdue { border-left: 3px solid var(--overdue); }
.ptinv.ig-overdue .ptinv-sum { color: var(--overdue); }
.ptinv.ig-paid .ptinv-sum { color: var(--paid); }
.ptinv-r { display: grid; grid-template-columns: minmax(min(90px,100%), auto) 1fr auto auto; align-items: center; gap: 14px;
  padding: 14px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ptinv-r:hover { background: var(--paper); }
.ptinv-r .pi-d { font-size: 12.5px; color: var(--muted); }
.ptinv-r .pi-d b { color: var(--overdue); }
.ptinv-r .pi-a { font-weight: 700; }
.ptinv-r .pi-go { font: 600 13px var(--sans); color: var(--bronze); }
@media (max-width: 620px) {
  .ptinv-r { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .ptinv-r .pi-d { grid-column: 1 / -1; order: 3; }
  .ptinv-r .pi-go { order: 4; grid-column: 1 / -1; }
}

/* The contract, opened rather than linked to. */
.ptcur { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px;
  border: 1px solid var(--line); border-top: 3px solid var(--bronze); background: var(--surface); }
.ptcur-l b { display: block; font: 600 16px var(--serif); }
.ptcur-l span { font-size: 12.5px; color: var(--muted); }
.ptcur-go { margin-left: auto; }

/* Support: pick what kind of help you need. */
.ptask { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.ptask-i { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line);
  background: var(--surface); text-decoration: none; color: var(--ink); transition: all .15s ease; }
.ptask-i b { font: 600 15px var(--sans); }
.ptask-i span { font-size: 12.5px; color: var(--muted); }
.ptask-i:hover { border-color: var(--bronze); }
.ptask-i.on { border-color: var(--bronze); border-top-width: 3px; background: var(--bronze-tint); padding-top: 14px; }
.ptcontact-l { margin: 0; font-size: 14px; }
.ptcontact-l a { color: var(--ink); }
.ptc-dot { margin: 0 10px; color: var(--bronze); }

/* Feedback: five faces, one tap. */
.fbfaces { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.fbface { flex: 1 1 96px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: all .15s ease; }
.fbface input { position: absolute; opacity: 0; width: 0; height: 0; }
.fbface svg { width: 46px; height: 46px; fill: none; stroke: var(--muted); stroke-width: 1.6;
  stroke-linecap: round; transition: stroke .15s ease, transform .15s ease; }
.fbface svg .eye { fill: var(--muted); stroke: none; transition: fill .15s ease; }
.fbface span { font: 600 12px var(--sans); color: var(--muted); }
/* Option A: the feeling reads before the word — red to green, always in
   colour, and the chosen face deepens with a solid ring. */
.fb-1 { --mood: #E5484D; }
.fb-2 { --mood: #F58232; }
.fb-3 { --mood: #EAB308; }
.fb-4 { --mood: #6EB45A; }
.fb-5 { --mood: var(--paid); }
.fbface { border-radius: 14px; border-color: color-mix(in srgb, var(--mood) 38%, #fff);
  background: color-mix(in srgb, var(--mood) 7%, #fff); }
.fbface svg { stroke: var(--mood); }
.fbface svg .eye { fill: var(--mood); }
.fbface span { color: var(--mood); }
.fbface:hover { border-color: var(--mood); background: color-mix(in srgb, var(--mood) 12%, #fff); }
.fbface:hover svg { transform: scale(1.06); }
.fbface:has(input:checked) { border: 2px solid var(--mood); padding: 15px 7px 11px;
  background: color-mix(in srgb, var(--mood) 18%, #fff); }
.fbface:has(input:checked) svg { transform: scale(1.1); }
.fbface:has(input:checked) span { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .fbface, .fbface svg, .fbface svg .eye { transition: none; } }
@media (max-width: 560px) { .fbface { flex: 1 1 60px; padding: 12px 4px 10px; } .fbface svg { width: 38px; height: 38px; } .fbface span { font-size: 10.5px; } }

/* ---------- THE DOOR: one question at a time ---------- */
/* Built for somebody on their first shift: nothing on screen but the question
   being asked, targets big enough for a thumb, and a way back from every step. */
.dr { max-width: 620px; margin: 0 auto; }
.dr-bar { display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 22px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.dr-back { font: 600 17px var(--sans); color: var(--ink); text-decoration: none; }
.dr-back.dr-off { color: var(--muted); }
.dr-step { font: 600 14px var(--sans); color: var(--muted); letter-spacing: .04em; }
.dr-q { font: 600 22px/1.3 var(--serif); margin: 0 0 4px; }
.dr-hint { font: 400 13px var(--sans); color: var(--muted); margin: 0 0 16px; }

/* home: two decisions, nothing else */
.dr-two { display: grid; gap: 16px; margin-bottom: 30px; }
/* The launcher the four verbs used to wear (dr-hero, dr-ic, dr-hl) was swept
   in 3.195 when the threshold replaced it — nothing emits those names any more.
   Everything below still belongs to the guided flow behind the door. */
/* the door leads with faces (3.146): known people as one-tap fobs */
.dr-faces { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.dr-face { margin: 0; }
.dr-face button { display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; box-shadow: none; padding: 4px 2px; cursor: pointer;
  background-image: none; color: var(--muted); font: 400 9px var(--sans); }
.dr-face button:hover { filter: none; transform: translateY(-2px); }
.df-fob { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center;
  justify-content: center; font: 800 13px var(--sans); font-style: normal; color: #fff;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); box-shadow: var(--lift-1); }
.df-fob.f-resident, .df-fob.f-owner { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 72%, #000)); }
.df-fob.f-visitor { background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
.df-fob.f-contractor, .df-fob.f-delivery { background: linear-gradient(180deg, #B27C20, color-mix(in srgb, #B27C20 72%, #000)); }
.dr-mate { display: block; text-align: center; margin: 12px auto 0; max-width: 420px;
  background: var(--soft); color: var(--muted); border-radius: 12px; padding: 9px 14px;
  font: 700 10.5px var(--sans); text-decoration: none; }
.dr-mate:hover { background: #EDF1F7; color: var(--ink); text-decoration: none; }

.dr-lbl { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dr-lbl i { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 10px;
  background: var(--bronze); color: #fff; font: 700 12px var(--sans); font-style: normal; }
.dr-row { display: flex; align-items: center; border: 1px solid var(--line); border-left-width: 5px;
  background: var(--surface); padding: 16px 18px; margin-bottom: 10px; }
.dr-row b { display: block; font: 600 20px var(--sans); }
.dr-row span { display: block; font: 400 14px var(--sans); color: var(--muted); margin-top: 2px; }
.dr-empty { color: var(--muted); font-size: 15px; }

/* a row you tap: same shape whether it is a link or a form */
.dr-pick { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 7px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 13px;
  background: var(--surface); box-shadow: var(--lift-1);
  padding: 0; text-decoration: none; color: var(--ink);
  transition: box-shadow .14s, transform .1s; }
.dr-pick:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.dr-pick:hover { border-color: var(--bronze); border-left-color: currentColor; }
.dr-pick button { all: unset; display: flex; flex-direction: column; width: 100%;
  padding: 11px 14px; cursor: pointer; }
.dr-pick > .dr-t, .dr-pick button { flex: 1; }
.dr-pick b { font: 600 15.5px var(--sans); }
.dr-pick span span, .dr-pick button span { font: 400 12.5px var(--sans); color: var(--muted); margin-top: 1px; }
.dr-pick > .dr-dot { width: 11px; height: 11px; border-radius: 50%; margin-left: 14px; flex: 0 0 11px; }
.dr-pick > .dr-t { display: flex; flex-direction: column; padding: 11px 0; }
.dr-pick > .dr-go { font-size: 17px; color: var(--muted); padding-right: 14px; }
.dr-or { text-align: center; font: 600 11.5px var(--sans); color: var(--muted); margin: 16px 0 10px; }

/* which unit — a compact, filterable list rather than a wall of tiles, so
   twenty or thirty units read the way the rest of the platform's lists do. */
.dr-unit { display: block; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink); }
.dr-unit b { display: block; font: 600 17px var(--serif); }
.dr-unit span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 1px; }
.dr-unit:hover { border-color: var(--bronze); }
.dr-unit.none { grid-column: 1 / -1; }
.dr-units.tight { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px,100%), 1fr)); gap: 6px; }
.dr-units.tight .dr-unit { padding: 8px 10px; text-align: center; }
.dr-units.tight .dr-unit b { font-size: 17px; }

.dr-ufilter { position: relative; margin-bottom: 12px; }
.dr-ufilter input { width: 100%; height: 42px; font: 400 14px var(--sans); padding: 0 14px; }
.dr-ulist { columns: 2; column-gap: 20px; }
.dr-urow { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  break-inside: avoid; }
.dr-urow:hover { background: var(--iris-tint); border-radius: 8px; }
.dr-urow b { flex: 0 0 40px; font: 600 17px var(--serif); }
.dr-urow span { font: 400 12.5px var(--sans); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dr-urow.none { column-span: all; border-top: 1px solid var(--line); border-bottom: 0;
  margin-top: 4px; padding-top: 12px; }
.dr-urow.none b { flex: 0 0 auto; }
.dr-urow.hide { display: none; }
.dr-uempty { display: none; color: var(--muted); font-size: 13px; padding: 12px 0; }
@media (max-width: 560px) { .dr-ulist { columns: 1; } }

/* the chip that says what you already chose */
.dr-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 15px; margin: 0 0 16px; border: 0; border-radius: 12px;
  background: var(--iris-tint); }
.dr-chip b { font: 600 14px var(--sans); }
.dr-chip a { font: 600 12px var(--sans); color: var(--bronze-deep); }

/* the only form in the flow */
.dr-form { display: block; }
.dr-form label { display: block; font: 600 13px var(--sans); margin: 14px 0 6px; }
.dr-form .dr-opt { font-weight: 400; color: var(--muted); font-size: 12px; }
.dr-form input[type=text], .dr-form select { height: 42px; font-size: 15px; padding: 0 14px; }
.dr-count { display: flex; gap: 7px; flex-wrap: wrap; }
.dr-count.wide .dr-n { flex: 1 1 30%; }
.dr-n { position: relative; flex: 0 0 46px; }
.dr-n input { position: absolute; opacity: 0; width: 0; height: 0; }
.dr-n span { display: flex; align-items: center; justify-content: center; height: 42px;
  border: 1px solid var(--line); background: var(--surface); font: 600 15px var(--sans); cursor: pointer; }
.dr-n:has(input:checked) span { border-color: var(--bronze); background: var(--bronze-tint); color: var(--ink); }

.dr-big { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px;
  margin-top: 16px; border: 0; border-radius: 13px; font: 700 14.5px var(--sans); letter-spacing: .05em;
  box-shadow: var(--lift-2);
  color: #fff; text-decoration: none; cursor: pointer; }
.dr-in { background: var(--paid); }
.dr-ink { background: var(--ink); }

/* the outcome: unmissable, and undoable */
.dr-done { text-align: center; padding: 12px 6px 2px; }



.dr-done h1 { font: 600 22px var(--serif); margin: 0; }
.dr-verdict { font: 800 15px var(--sans); letter-spacing: .06em; color: var(--paid); margin: 5px 0 0; }
.dr-done.out .dr-verdict { color: var(--ink); }
.dr-when { font: 400 13px var(--sans); color: var(--muted); margin: 8px 0 20px; }
.dr-undo { display: flex; flex-direction: column; gap: 6px; align-items: center;
  margin-top: 16px; }
.dr-undo span { font: 400 13px var(--sans); color: var(--muted); }
.dr-undo button { all: unset; font: 800 14px var(--sans); color: var(--overdue); cursor: pointer; }
.dr-foot { text-align: center; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 14px; }

@media (max-width: 560px) {
  .dr-units.tight { grid-template-columns: repeat(auto-fill, minmax(min(76px,100%), 1fr)); }
}

/* ---------- the guided flow, as a panel over the page ----------
   The two buttons live on the Log; each step arrives as a sheet that covers
   everything else, so there is only ever one thing to answer. */
.dr-sheet { position: relative; }
@keyframes drIn { from { opacity: 0 } to { opacity: 1 } }
.dr-panel { max-width: none; margin: 0; background: none; border-radius: 0;
  box-shadow: none; padding: 0; }
/* the unit list needs room for two columns; every other step stays narrow
   and centred, which reads calmer for a short question and a few rows */
.dr-panel:has(#dr-ulist) { max-width: 780px; }
@keyframes drUp { from { transform: translateY(14px) } to { transform: none } }
.dr-panel .dr { max-width: none; }
.dr-close { position: absolute; top: -4px; right: 0; z-index: 2; font-size: 22px;
  color: var(--faint); text-decoration: none; line-height: 1; }
.dr-close:hover { background: #fff; }


/* the two buttons where the search used to be */
.lg-two { margin-bottom: 18px; }
.lg-quick { margin-top: 4px; }
.lg-quick > summary { cursor: pointer; font: 600 14px var(--sans); color: var(--muted);
  padding: 10px 0; list-style: none; }
.lg-quick > summary::-webkit-details-marker { display: none; }
.lg-quick > summary::before { content: "＋ "; color: var(--bronze); }
.lg-quick[open] > summary::before { content: "－ "; }
.lg-quick > summary:hover { color: var(--ink); }
@media (min-width: 700px) { .dr-two { grid-template-columns: 1fr 1fr; } }

/* Vehicles reuse the compact tile grid (people moved to the filterable
   list below); .dr-units.tight is fully self-contained, see above. */
.dr-units.tight form { display: contents; }

/* two fields side by side, equal halves */
.dr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dr-pair label { margin-top: 14px; }
@media (max-width: 480px) { .dr-pair { grid-template-columns: 1fr; } }

/* a party: everyone named, the ones already logged shown as done */
.dr-pick.is-in { background: var(--paid-tint); border-color: #BFD9C8; }
.dr-pick.is-in .dr-go { color: var(--paid); font-size: 22px; }
.dr-plus { font: 700 26px var(--sans); color: var(--paid); vertical-align: middle; }
.dr-mates { font: 400 15px var(--sans); color: var(--muted); margin: -14px 0 22px; }

/* the plate, typed big */
.dr-plate { text-transform: uppercase; letter-spacing: .1em; font: 700 20px var(--mono) !important;
  height: 72px !important; text-align: center; }

/* ---------- THE GATE: two columns, four decisions, two lists ----------
   People on the left, vehicles on the right. Nothing else lives here — the
   history is in Records, where browsing belongs. */
.gate2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.gatecol { display: flex; flex-direction: column; }
.gatecol .dr-lbl { margin: 14px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.gatecol .dr-empty { margin: 0; }
.gatecol .dr-foot { text-align: left; margin-top: 12px; }

/* parking's own colour lives with the other three heroes above */

.gaterow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border-radius: 13px;
  border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); }
.gaterow > div { flex: 1; min-width: 0; }
.gaterow b { display: block; font: 600 15.5px var(--sans); }
.gaterow b.mono { font-family: var(--mono); letter-spacing: .04em; }
.gaterow span { display: block; font: 400 13px var(--sans); color: var(--muted); margin-top: 2px; }
.gaterow em { font: 400 14px var(--mono); color: var(--muted); font-style: normal; }
.gaterow.lg-park { border-left-color: #3E5F86; }

.gatefoot { text-align: center; font: 400 13px var(--sans); color: var(--muted); margin: 22px 0 0; }

@media (max-width: 820px) { .gate2 { grid-template-columns: 1fr; } }

/* ---------- HOUSEKEEPING, QUIETED ----------
   Supersedes the loud pass above. Housekeeping lives inside the app's own
   chrome, so it speaks the app's language: white cards, hairlines, the serif
   for the names, bronze for emphasis, one control height. Green is
   punctuation — a tick, a rule, a single button — never a field of colour. */

/* the day begins with an ordinary button in an ordinary card */
.hk-startday { text-align: center; padding: 30px 24px; border-top: 1px solid var(--line); }
.hk-startday h2 { border: 0; font: 600 28px var(--serif); margin: 0 0 6px; }
.hk-startday .muted { max-width: 46ch; margin: 0 auto 20px; font-size: 15px; }
.hk-startday button { width: auto; min-width: 190px; height: 42px; padding: 0 26px; }

/* the unit in hand — the page's one hero, so it takes the gradient edge */
.runcard { border-top: 0; position: relative; overflow: hidden; box-shadow: var(--lift-2); }
.runcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); }
.run-eyebrow { color: var(--bronze-deep); font: 700 12px var(--sans); letter-spacing: .14em; }
.run-unit { font: 600 22px var(--serif); line-height: 1.2; }
.run-meta { font: 400 14px var(--sans); color: var(--muted); margin-top: 4px; }

/* progress: a hairline, not a bar */

/* every task is a white bordered row, and the whole row is the tap target (3.149) */
.taskrow { display: flex; align-items: center; gap: 16px; padding: 12px; margin: 0 0 8px; border-radius: 12px;
  border: 1px solid #E4E5F0; background: #fff;
  transition: background .15s ease, border-color .15s ease; }
.taskrow:hover { background: var(--paper); border-color: color-mix(in srgb, var(--paid) 40%, #fff); }
.tk-box { width: 26px; height: 26px; flex: 0 0 26px; padding: 0; border-radius: 8px;
  border: 2px solid #C8CCD8; background: #fff; background-image: none; box-shadow: none; cursor: pointer; }
.tk-box:hover { border-color: var(--paid); background: #EFF6F1; filter: none; }
button.tk-body { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.tk-body b { font: 600 16px var(--sans); }
.tk-freq, .tk-when { font: 400 13px var(--sans); color: var(--muted); }

/* done: the row sinks — struck, faded, stamped with its time and its note */
.taskrow.is-done { background: #FAFCFB; border-color: transparent; }
.taskrow.is-done:hover { background: #F5F9F6; }
.taskrow.is-done .tk-body b { font-weight: 600; color: var(--faint); text-decoration: line-through; }
.taskrow.is-done .tk-when { color: var(--paid); font-weight: 600; }
.tk-box.is-ticked { border-color: var(--paid); background: var(--paid); }

/* finishing: the note, then one ordinary button */
.run-finish { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.run-finish input { flex: 1 1 260px; height: 42px; }
.run-finish button.btn-finish { flex: 0 0 auto; width: auto; height: 42px; padding: 0 26px;
  background: var(--paid); border-color: var(--paid); color: #fff; font: 600 16px var(--sans); }
.run-finish button.btn-finish:hover { background: #3C6B4C; border-color: #3C6B4C; }

/* picking a unit: a row like every other row in the platform */
/* the queue: unit, then its detail, then Start underneath — the natural
   reading order, not a button floating beside two lines of text. Two columns
   so twenty or thirty units fit a screen without scrolling. */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.qrow { display: block; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; }
.qrow.is-wanted { border-left: 3px solid var(--bronze); padding-left: 12px; margin-left: -15px; }
.qrow:hover { background: var(--paper); }
.qrow .q-name { font: 600 17px var(--serif); line-height: 1.2; }
.qrow .q-sub { font: 400 12.5px var(--sans); color: var(--muted); margin-top: 1px; }
.q-start { display: inline-flex; margin-top: 8px; width: auto; height: 34px; padding: 0 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--ink); color: var(--ink);
  font: 600 13px var(--sans); letter-spacing: 0; }
.q-start:hover { background: var(--ink); color: #fff; }
@media (max-width: 560px) { .qgrid { grid-template-columns: 1fr; } }

/* ---------- the checklist, grouped by how often a job comes round ----------
   A coloured heading rule per frequency band, the way the plate showed it —
   not a boxed card per group, just enough colour to read the shape at a
   glance. Reuses the fq0/fq1/fq3/fq6/fq12 tokens the admin setup page already
   defines, so the two pages agree on what each frequency looks like. */
.fqsec { margin: 18px 0 0; }
.fqsec:first-of-type { margin-top: 10px; }
.fqsec-hd { display: flex; align-items: center;
  gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.fqsec-hd .fq-fob { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; font-size: 9px; }
.fqsec-hd span { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fq); }
.fqsec-hd b { margin-left: auto; font: 800 9px var(--sans); letter-spacing: .04em; color: var(--iris-deep);
  background: var(--iris-tint); padding: 3px 9px; border-radius: 8px; }

/* ---------- one-scale pass, v3.2.0 ----------
   Step 1's seven kinds sit in two columns — four rows instead of seven, so
   the panel matches its content. The odd one out (Owner) spans the row. */
.dr-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dr-kinds .dr-pick { margin: 0; }
.dr-kinds .dr-pick:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 560px) { .dr-kinds { grid-template-columns: 1fr; } }

/* ============================================================ AURORA v3.4
   The parts the older stylesheet never had: the board of units, the rich
   tile it is made of, stat cards, plate chips and the segmented control.
   Everything below reads its colour from the tokens at the top of this file,
   so a white-label customer changes six values and owns the whole thing. */

/* ---- state colours, one place ---- */
.st-clean  { --st: var(--paid);    --st-tint: var(--paid-tint); }
.st-now    { --st: var(--iris);    --st-tint: var(--iris-tint); }
.st-due    { --st: var(--draft);  --st-tint: var(--draft-tint); }
.st-owes   { --st: var(--overdue); --st-tint: var(--overdue-tint); }
.st-ticket { --st: var(--draft);   --st-tint: var(--draft-tint); }
.st-vacant { --st: #BAC6D6;        --st-tint: #F8FAFD; }

/* ---- the board ---- */
.board { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 20px; }
/* The floor label is a flex sibling, never a grid column: tiles that wrap
   stay inside .bd-units and can never land under the label. */
.bd-floor { display: block; }
/* the floor is a hairline heading over its own row — the tiles below it get
   the full width of the page, not what a left gutter leaves them */
.bd-flabel { display: flex; align-items: baseline; gap: 10px; padding: 2px 2px 8px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.bd-flabel span { font: 800 9.5px var(--sans); color: var(--faint); letter-spacing: .12em; }
.bd-flabel i { font: 400 10px var(--sans); font-style: normal; color: var(--faint); margin-left: auto; }
.bd-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px,100%), 1fr));
  gap: 12px; align-content: start; }
@media (max-width: 900px) { .bd-units { grid-template-columns: repeat(auto-fill, minmax(min(230px,100%), 1fr)); } }
@media (max-width: 560px) { .bd-units { grid-template-columns: 1fr; } }

/* ---- the tile: three bands, two hairlines, one fixed order ---- */
.utile { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  --ch: var(--iris);
  background: #fff;
  border: 1px solid transparent; border-left: 5px solid var(--st, var(--iris));
  border-radius: 15px; padding: 12px 14px 10px 10px;
  box-shadow: var(--lift-1); overflow: hidden;
  transition: box-shadow .16s, transform .12s; }
/* the key tag: the unit's number on a little fob in its channel's colour */
.ut-tag { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--serif); font-style: normal; color: #fff;
  background: linear-gradient(180deg, var(--ch), color-mix(in srgb, var(--ch) 80%, #000)); }
.ch-vacant .ut-tag { background: #fff; border: 1px solid #C8CCD8; color: var(--faint); }
.utile:hover { box-shadow: var(--lift-2); transform: translateY(-3px); text-decoration: none; }
.utile.is-open { border-color: var(--st, var(--iris)); box-shadow: var(--lift-3); }

/* band 1 — who lives here */
.ut-top { display: flex; align-items: flex-start; gap: 9px; padding-left: 8px; }
.ut-who { min-width: 0; flex: 1; }
.ut-who b { display: block; font: 700 13px var(--sans); }
.ut-who span { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 1px; }
.ut-right { margin-left: auto; text-align: right; flex: 0 0 auto; }
.ut-in { display: inline-flex; align-items: center; gap: 4px; font: 700 9.5px var(--sans);
  color: var(--paid); }
.ut-in i { width: 8px; height: 8px; border-radius: 50%; background: var(--paid);
  display: inline-block; animation: utpulse 2.4s ease-out infinite; }
@keyframes utpulse { 0% { box-shadow: 0 0 0 0 rgba(16,169,122,.5); }
                     70% { box-shadow: 0 0 0 7px rgba(16,169,122,0); }
                     100% { box-shadow: 0 0 0 0 rgba(16,169,122,0); } }
.ut-empty { font: 400 9.5px var(--sans); color: var(--faint); }
/* the channel in the name slot, and the guest the gate has not seen sign in */
.ut-chan { color: var(--ch); }
.ut-vac { color: var(--faint); }
.ut-in.is-guest { color: var(--ch); }
.ut-in.is-guest i { background: var(--ch); animation: none; }

/* band 2 — what is here right now */
.ut-mid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 0 0 auto;
  padding: 10px 0 8px 8px; margin-top: 14px; border-top: 1px solid rgba(20,35,70,.06); }
.plate { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid #D6DFEB; border-radius: 5px; background: #F7FAFD;
  font: 700 9.5px var(--mono); letter-spacing: .02em; color: var(--ink); }
.plate svg { width: 13px; height: 13px; color: var(--muted); }
.plate.out { background: #FCFCFD; border-color: #E8ECF2; color: var(--faint); }
.plate.out svg { color: var(--faint); }
.parcel { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 5px; background: var(--draft-tint); color: #B0741A;
  font: 700 9.5px var(--sans); }

/* band 3 — what the lens answers.
   The biggest thing on the tile, because it is the thing the tile is for, and
   it gets the tile's full width so nothing has to truncate to "in pro…". */
.ut-ans { padding: 9px 0 0 8px; margin-top: auto;
  border-top: 1px solid rgba(20,35,70,.06); }
.ut-ans em { display: block; font: 800 8px var(--sans); color: var(--faint);
  letter-spacing: .12em; text-transform: uppercase; font-style: normal; }
.ut-ans b { display: inline-block; vertical-align: middle; margin-top: 2px;
  font: 700 17px var(--sans); }
.ut-ans > span { display: inline-block; vertical-align: middle; margin-left: 8px;
  font: 400 11.5px var(--sans); color: var(--muted); }
.ut-ans b.ok    { color: var(--paid); }
.ut-ans b.bad   { color: var(--overdue); }
.ut-ans b.warn  { color: color-mix(in srgb, var(--draft) 76%, #000); }
.ut-ans b.now   { color: var(--iris); }
.ut-ans b.faint { color: var(--faint); }
.ut-ans b.chan  { color: var(--ch); }

/* band 4 — the facts the lens did not answer, said once and quietly.
   Always three of them, so every tile in a row is the same height. */
.ut-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  padding: 7px 0 0 8px; font: 400 11px var(--sans); color: var(--muted); }
.ut-rest b { font: 600 11px var(--sans); color: var(--ink); }
.ut-rest i { font-style: normal; color: var(--faint); }
.ut-rest b.ok   { color: var(--paid); }
.ut-rest b.bad  { color: var(--overdue); }
.ut-rest b.warn { color: color-mix(in srgb, var(--draft) 76%, #000); }
.ut-ans .ut-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px;
  width: 46px; margin: 0 0 0 10px; vertical-align: middle; }
.ut-spark i { flex: 1; background: #CFE9DE; border-radius: 1px; }
.ut-spark i:last-child { background: var(--paid); }

/* the board on its own sheet: without it the empty half of a short floor has
   no edge, and the section reads as content that failed to load */
.bd-card { padding: 18px 20px 14px; margin: 6px 0 20px; }
.bd-card .pagehead { margin: 0 0 4px; }
.bd-card .board { margin: 0; }

/* ---- the board's counters (named apart from the older .stats strip
        that invoices and P&L use, so the two can never collide) ---- */
.bstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap: 12px; margin: 4px 0 20px; }
.bstat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--lift-1); position: relative; }
.bstat::before { content: ""; position: absolute; left: 14px; top: 16px; width: 3px;
  height: 28px; border-radius: 2px; background: var(--st, var(--iris)); }
.bstat b { display: block; font: 600 24px var(--serif); padding-left: 14px; }
.bstat em { display: block; font: 800 8.5px var(--sans); color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; font-style: normal;
  margin-top: 6px; padding-left: 14px; }

/* ---- segmented control: replaces a dropdown of three or four ---- */
.segbar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.segbar a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 14px;
  background: var(--soft); color: var(--muted); font: 600 12px var(--sans);
  text-decoration: none; transition: background .14s, color .14s; }
.segbar a:hover { background: #EDF1F7; color: var(--ink); text-decoration: none; }
.segbar a.on { background-image: var(--grad-btn); color: #fff; font-weight: 700;
  box-shadow: var(--lift-1); }

/* ---- a page's opening line ---- */
.pagehead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin: 26px 0 14px; }
.pagehead .sub { margin: 0; }
.pagehead .spacer { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .ut-in i { animation: none; }
  .utile:hover { transform: none; }
}

/* ============================================ AURORA FIELDS v3.5
   A field that knows something. It formats as you type, says what it
   recognised, warns without blocking, and offers the next step. */

/* a field with something living inside its right edge */
.fx { position: relative; }
.fx-tick { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--paid); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  animation: fxpop .18s ease-out; }
/* a class that sets display OUTRANKS the hidden attribute, so the tick sat on
   a field it had recognised nothing in (3.233.1) — every display we set here
   restates its own hidden */
.fx-tick[hidden] { display: none; }
@keyframes fxpop { from { transform: translateY(-50%) scale(.6); opacity: 0; }
                   to   { transform: translateY(-50%) scale(1);  opacity: 1; } }

/* the plate itself: monospaced, spaced, unmistakably a plate */
.dr-plate { text-transform: uppercase; letter-spacing: .1em;
  font: 700 20px var(--mono) !important; }

/* What the field recognised (3.235.0, his board). The PLATE leads the row —
   two known plates used to open with the same three words and could only be
   told apart by their small print. The row is white with a green rail, the
   history is one honest line, and PARK IT is a button a thumb can hit. */
#plate-known { margin-top: 10px; }
.recog { position: relative; margin-bottom: 10px; border-radius: 14px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--paid) 22%, #fff); overflow: hidden;
  color: var(--ink); animation: fxin .18s ease-out; }
.recog[hidden] { display: none; }
.recog:hover { text-decoration: none; box-shadow: var(--lift-2); }
/* the rail: this one we know */
.recog::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px;
  border-radius: 0 3px 3px 0; background: var(--paid); }
@keyframes fxin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.recog-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: var(--paid-tint);
  display: flex; align-items: center; justify-content: center; color: var(--paid); }
.recog-ic svg { width: 22px; height: 22px; }
.recog-t { flex: 1; min-width: 0; }
.recog-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recog-p b { flex: 0 1 auto; min-width: 0; font: 700 16px var(--mono); letter-spacing: .06em;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recog-seen { flex: 0 0 auto; font: 700 9px var(--sans); letter-spacing: .09em;
  color: color-mix(in srgb, var(--paid) 78%, #000);
  background: var(--paid-tint); border-radius: 10px; padding: 4px 9px; }
.recog-sub { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recog-go { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 20px; border-radius: 11px; background: var(--paid); color: #fff;
  font: 700 11.5px var(--sans); letter-spacing: .04em; white-space: nowrap; }
.recog-new { margin: 10px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--soft);
  font: 500 11.5px var(--sans); color: var(--muted); }
/* ---- the recognised plate on a phone (3.235.0) ----
   Declared here rather than in the repair block, because nothing further down
   this file touches .recog at all — the house rule is one place or the other,
   never both. The row is plate + chip + button on one line, and at 390px the three do not
   fit: the chip is unshrinkable, so the flex algorithm took the space out of
   the PLATE — the one thing the row exists to show — and left it empty. The
   chip is the part that can go: the green rail, the tinted glyph and the
   history line all still say the gate knows this vehicle. */
@media (max-width: 560px) {
  .recog-seen { display: none; }
  .recog button { gap: 11px; padding: 11px 11px 11px 15px; }
  .recog-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; }
  .recog-ic svg { width: 19px; height: 19px; }
  .recog-p b { font-size: 15px; }
  /* the history wraps rather than truncating: "last in 16 Aug, 09:00" is the
     half a guard actually needs, and an ellipsis was eating it */
  .recog-sub { white-space: normal; overflow: visible; line-height: 1.35; }
  .recog-go { height: 34px; padding: 0 14px; font-size: 11px; }
}

/* car or motorcycle: two buttons, not two rows */
/* a field that warns without ever blocking */
.fwarn { margin: 8px 0 0; padding: 11px 14px; border-radius: 12px;
  background: var(--draft-tint); border: 1px solid #F6E2BC; }
.fwarn b { display: block; font: 700 12px var(--sans); color: #B0741A; }
.fwarn span { display: block; font: 400 10.5px var(--sans); color: #A8792C; margin-top: 2px; }
.fcalm { margin: 8px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--paid-tint); }
.fcalm b { display: block; font: 700 12px var(--sans); color: #0E7A5A; }
.fcalm span { display: block; font: 400 10.5px var(--sans); color: #3C8E72; margin-top: 2px; }

/* dates that answer in days, not just dates */
.dchips { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.dchips button { height: 30px; padding: 0 12px; border-radius: 10px; background: var(--soft);
  background-image: none; border: 1px solid transparent; color: var(--muted);
  font: 700 11px var(--sans); box-shadow: none; }
.dchips button:hover { background: #EDF1F7; color: var(--ink); filter: none; }
/* the terms the date is actually on, said by the chip rather than worked out */
.dchips button.on { background: var(--iris-tint); border-color: color-mix(in srgb, var(--iris) 30%, #fff);
  color: var(--iris-deep); }
.dsays { display: inline-block; margin-left: 10px; font: 600 11.5px var(--sans); color: var(--iris-deep); }

/* the note's offer — a checkbox that only appears when the words earn it */
.hk-offer { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 100%;
  margin-top: 10px; padding: 11px 14px; border-radius: 12px;
  background: #fff; border: 1px solid #F6E2BC; border-left: 3px solid var(--draft); cursor: pointer;
  animation: fxin .18s ease-out; }
.hk-offer input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; accent-color: var(--draft); }
.hk-offer b { display: block; font: 700 12px var(--sans); color: #B0741A; }
.hk-offer span span { display: block; font: 400 10.5px var(--sans); color: #A8792C; margin-top: 2px; }

/* ---- Profit & loss: the month's number first, the tables after ---- */
.pnl-bar { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; flex-wrap: wrap; }
.pnl-month { font: 600 20px var(--serif); }
.pnl-hero { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
.pnl-net em { display: block; font: 800 9.5px var(--sans); letter-spacing: .11em;
  color: var(--faint); font-style: normal; }
.pnl-net b { display: block; font: 600 40px var(--serif); line-height: 1.1; margin-top: 4px; }
.pnl-net b.ok { color: var(--paid); } .pnl-net b.bad { color: var(--overdue); }
.pnl-vs { display: inline-block; margin-top: 8px; font: 700 11px var(--sans);
  padding: 4px 11px; border-radius: 11px; background: var(--soft); color: var(--muted); }
.pnl-vs.ok  { background: var(--paid-tint); color: var(--paid); }
.pnl-vs.bad { background: var(--overdue-tint); color: var(--overdue); }
.pnl-split { display: flex; gap: 28px; margin-left: auto; flex-wrap: wrap; }
.pnl-leg { min-width: 150px; }
.pnl-leg em { display: block; font: 800 9px var(--sans); letter-spacing: .11em;
  color: var(--faint); font-style: normal; }
.pnl-leg b { display: block; font: 600 19px var(--serif); margin: 3px 0 7px; }
.pnl-leg i { display: block; height: 5px; border-radius: 3px; background: #EDF1F7; overflow: hidden; }
.pnl-leg i s { display: block; height: 5px; border-radius: 3px; text-decoration: none;
  background: var(--grad); }
.pnl-leg i.bad s { background: linear-gradient(90deg, #F0899A, var(--overdue)); }
/* the standalone six-month trend card was retired in 3.186 — the year's bars
   at the top of the page hold those six months and every other one with them,
   still split by channel. Its wardrobe left with it. */

/* ---- the gate's unit picker: a row that says what you are walking into ---- */
.dr-urow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
  border-bottom: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  color: var(--ink); break-inside: avoid; transition: background .12s; }
.dr-urow:hover { background: var(--iris-tint); text-decoration: none; }
.dr-uleft { flex: 1; min-width: 0; }
.dr-uleft b { display: block; font: 600 16px var(--serif); }
.dr-uwho { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-urow.is-empty .dr-uwho { color: var(--faint); font-style: italic; }
.dr-umeta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dr-umeta i { display: inline-flex; align-items: center; gap: 4px; font-style: normal;
  font: 700 10px var(--sans); }
.um-in { color: var(--paid); background: var(--paid-tint); padding: 3px 8px; border-radius: 9px; }
.um-in s { width: 6px; height: 6px; border-radius: 50%; background: var(--paid);
  text-decoration: none; display: inline-block; }
.um-car { color: var(--muted); background: var(--soft); padding: 3px 8px; border-radius: 9px; }
.um-car svg { width: 13px; height: 13px; }
.um-go { color: var(--faint); font-size: 15px; }
.dr-urow.none { column-span: all; border-top: 1px solid var(--line); border-bottom: 0;
  margin-top: 6px; padding-top: 14px; }

/* ---- the gate's person cards ---- */
.dr-pick.pcard button { flex-direction: row; align-items: center; gap: 12px; }
.pc-face { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--iris-tint); color: var(--iris-deep);
  display: flex; align-items: center; justify-content: center; font: 800 12px var(--sans); }
.pc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-t b { font: 600 15.5px var(--sans); }
.pc-t span { font: 400 11.5px var(--sans); color: var(--muted); margin-top: 1px; }
.pc-go { flex: 0 0 auto; color: var(--faint); font-size: 17px; }
.pc-here { font: 700 9.5px var(--sans); font-style: normal; color: var(--paid);
  background: var(--paid-tint); padding: 4px 9px; border-radius: 10px; white-space: nowrap; }
.dr-nobody { margin: 0 0 16px; padding: 13px 15px; border-radius: 12px; background: var(--soft);
  font: 400 12px var(--sans); color: var(--muted); line-height: 1.5; }

/* a unit row that is a submit button behaves like the link version */
.dr-uform { display: block; }
button.dr-urow { background: none; background-image: none; border: 0; border-bottom: 1px solid var(--line);
  box-shadow: none; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
button.dr-urow:hover { background: var(--iris-tint); filter: none; box-shadow: none; }

/* ---- P&L: a row per unit, never a spreadsheet ---- */
.purows { display: flex; flex-direction: column; }
.pu-who { flex: 0 0 190px; min-width: 0; }
.pu-who b { display: block; font: 600 17px var(--serif); }
.pu-who span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-mix { flex: 1; min-width: 0; }
.pu-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--soft); margin-top: 15px; }
.pu-bar.out { margin-top: 5px; }
.pu-bar i { display: block; height: 100%; min-width: 3px; }
/* money in, by where it came from — and out, by where it went. One family of
   colours across the whole page: the same chip, bar and dot everywhere. */
.in-rent  { background: var(--iris); }
.in-sales { background: var(--sky); }
.in-other { background: color-mix(in srgb, var(--iris) 34%, #fff); }
.in-dir   { background: var(--iris); }
.in-ab    { background: #FF385C; }
.out-expenses { background: var(--draft); }
.out-stock    { background: color-mix(in srgb, var(--draft) 45%, #fff); }
.out-abf      { background: color-mix(in srgb, #FF385C 55%, #fff); }
.pu-keys { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.pk { font: 600 11.5px var(--sans); color: var(--muted); border-radius: 9px;
  padding: 5px 9px; background: var(--soft); }
.pk b { font: 700 12px var(--sans); color: var(--ink); }
.pk .pk-l { color: var(--muted); }
.pk-rent  { background: var(--iris-tint); }
.pk-sales { background: color-mix(in srgb, var(--sky) 10%, #fff); }
.pk-other { background: color-mix(in srgb, var(--iris) 5%, #fff); }
.pk-expenses { background: var(--draft-tint); }
.pk-stock    { background: color-mix(in srgb, var(--draft) 6%, #fff); }
.pu-none { font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); line-height: 9px; }
.pu-net { flex: 0 0 130px; text-align: right; }
.pu-net em { display: block; font: 800 8.5px var(--sans); letter-spacing: .11em; color: var(--faint);
  font-style: normal; }
.pu-net b { display: block; font: 600 19px var(--serif); margin-top: 2px; }
.pu-net.ok b  { color: var(--paid); }
.pu-net.bad b { color: var(--overdue); }
.purow.is-quiet .pu-who b, .purow.is-quiet .pu-net b { color: var(--faint); }
.purow.is-total, .purow.is-total:hover {
  border: 1px solid color-mix(in srgb, var(--iris) 20%, #fff); border-radius: 20px;
  background: var(--iris-tint);
  color: var(--ink); box-shadow: var(--lift-1);
  padding: 18px 24px; margin: 4px 0 18px; }
.purow.is-total .pu-who b, .purow.is-total .pk b, .purow.is-total .pu-net b { color: var(--ink); }
.purow.is-total .pu-who span, .purow.is-total .pk .pk-l, .purow.is-total .pu-net em { color: var(--muted); }
.purow.is-total .pk { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.purow.is-total .pu-net.ok b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.purow.is-total .pu-net.bad b { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.purow.is-total .pu-keys { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 6px 18px; margin-top: 0; }
.purow.is-total .pk { display: flex; flex-direction: column-reverse; }
.purow.is-total .pk b { font: 600 14.5px var(--serif); white-space: nowrap; }
.purow.is-total .pu-who { flex: 0 0 150px; }
.purow.is-total .pu-net b { font-size: 20px; }
.purow.is-total .pk { line-height: 1.25; }
.purow.is-total .pk .pk-l { font: 800 8px var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }

/* six months, as bars per unit */
.six-ms { flex: 1; display: flex; align-items: flex-end; gap: 9px; min-width: 0; }
.six-ms i { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 36px; }
.six-ms i s { display: block; width: 100%; max-width: 44px; border-radius: 4px; text-decoration: none;
  background: var(--line); }
.six-ms i.ok s  { background: color-mix(in srgb, var(--paid) 62%, #fff); }
.six-ms i.bad s { background: color-mix(in srgb, var(--overdue) 72%, #fff); }
/* airbnb keeps its own colour in every spark (3.148.1) */
.six-ms i s.s-ab, .six-ms i.ok s.s-ab, .six-ms i.bad s.s-ab {
  background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
 .six-tot b.bad { color: var(--overdue); }
.pnl-note { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--overdue-tint);
  font: 500 11.5px var(--sans); color: #B3455A; }
@media (max-width: 780px) {
  .pu-who { flex: 1 1 100%; }
}

/* ---- Staff: a person per row, contact details that cannot collide ---- */
.acct { display: flex; align-items: flex-start; gap: 14px; padding: 15px 12px;
  border-bottom: 1px solid var(--line); border-radius: 12px; transition: background .12s; }
.acct:hover { background: var(--paper); }
.acct:last-of-type { border-bottom: 0; }
.acct.is-off { opacity: .55; }
.acct-face { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--iris-tint); color: var(--iris-deep); display: flex; align-items: center;
  justify-content: center; font: 800 13px var(--sans); }
.acct-who { flex: 1 1 260px; min-width: 0; }
.acct-who b { display: block; font: 600 15.5px var(--sans); }
.acct-sub { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 1px; }
.acct-sub i { font-style: normal; }
/* the fix: contact details are chips on their own line, each one truncating
   inside itself, so a long address can never reach the column beside it */
.acct-contact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px; border-radius: 10px; background: var(--soft); color: var(--ink);
  text-decoration: none; font: 500 11.5px var(--sans); }
a.ac-chip:hover { background: var(--iris-tint); color: var(--iris-deep); text-decoration: none; }
.ac-chip svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--muted); }
.ac-chip em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ac-none { font: 400 11px var(--sans); color: var(--faint); font-style: italic; }
.acct-role { flex: 0 1 240px; padding-top: 3px; display: flex; flex-wrap: wrap;
             gap: 4px; justify-content: flex-end; align-content: flex-start; }
.acct-do { flex: 0 0 auto; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(min(84px,100%), 1fr)); gap: 6px; align-content: center; }
.acct-do form { display: contents; }
.acct-do .btn-sm, .acct-do button.btn-sm { width: 100%; text-align: center; box-sizing: border-box; margin: 0; }
@media (max-width: 720px) {
  .acct { flex-wrap: wrap; }
  .acct-role, .acct-do { flex: 1 1 100%; padding-top: 0; }
}

/* ---- Roles: a card each, permissions as chips ---- */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap: 12px; }
.rolecard { border: 1px solid #E4E5F0; border-radius: 14px; padding: 14px 16px;
  background: #fff; }
.rolecard.is-wide { grid-column: span 1; border-left: 3px solid var(--iris); }
.rc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rc-head b { font: 600 15px var(--serif); }
.rc-head .cb-fob { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10px; }
.rc-head .cb-fob.is-rolepale { background: var(--iris-tint); color: var(--iris-deep); }
.rc-n { margin-left: auto; font: 800 8px var(--sans); letter-spacing: .05em; text-transform: uppercase;
  background: var(--soft); color: var(--muted); padding: 3px 9px; border-radius: 8px; }
.rc-all { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; }
.rc-note { margin: 0; font: 400 12px var(--sans); color: var(--muted); line-height: 1.5; }
.rc-caps { display: flex; flex-wrap: wrap; gap: 5px; }
.cap { font: 500 10.5px var(--sans); color: var(--muted); background: #fff; border: 1px solid #E4E5F0;
  padding: 4px 9px; border-radius: 9px; }

/* ---- Recent activity: a timeline, with the day said once ---- */
.acts { display: flex; flex-direction: column; }
.act-day { font: 800 8.5px var(--sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint); padding: 14px 4px 8px; border-bottom: 1px solid var(--line); }
.act-day:first-child { padding-top: 2px; }
.act { display: flex; align-items: flex-start; gap: 12px; padding: 11px 6px;
  border-bottom: 1px solid var(--line); border-radius: 10px; transition: background .12s; }
.act:hover { background: var(--paper); }
.act-time { flex: 0 0 44px; font-size: 11px; color: var(--muted); padding-top: 5px; }
.act-face { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--soft);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  font: 800 9.5px var(--sans); }
.act-t { flex: 1; min-width: 0; }
.act-t b { font: 600 12.5px var(--sans); }
.act-what { font: 400 12.5px var(--sans); color: var(--muted); }
.act-d { display: block; font: 400 11px var(--sans); color: var(--faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; }
.act-area { flex: 0 0 auto; font: 800 8.5px var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--iris-deep); background: var(--iris-tint);
  padding: 4px 9px; border-radius: 9px; margin-top: 3px; }

/* ---- a form grid where every field owns its own block ----
   Each .fld is label / control / helper stacked in that order, so a field
   with chips underneath and a field with a long label still put their
   controls on the same line. Nothing depends on its neighbour's height. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap: 18px 16px; margin: 4px 0 16px; align-items: start; }
.fld { display: flex; flex-direction: column; min-width: 0; }
.fld > label { font: 600 12.5px var(--sans); margin: 0 0 7px; display: block; }
.fld > label .hint { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.fld > input, .fld > select, .fld > textarea { margin: 0; }
.fhelp { display: block; margin-top: 7px; font: 400 11px var(--sans); color: var(--muted);
  line-height: 1.45; min-height: 30px; }
.fhelp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fgrid .dchips { margin: 0; display: inline-flex; gap: 6px; }
.fgrid .dchips button { height: 28px; padding: 0 11px; font-size: 10.5px; }
.fgrid .dsays { margin: 0; }
@media (max-width: 560px) { .fhelp { min-height: 0; } }

/* ---- My day: one voice for every section heading ---- */
.secttl { margin: 30px 0 12px; font: 600 22px var(--serif); }
.pagehead .secttl { margin: 30px 0 0; }
.pagehead:first-of-type .secttl { margin-top: 8px; }

/* ---- the money, as figures side by side rather than four stacked bands ---- */

/* ---- the style guide's own scaffolding ---- */
.sg-row { display: flex; align-items: center; gap: 24px; padding: 14px 4px;
  border-bottom: 1px solid var(--line); }
.sg-row:last-child { border-bottom: 0; }
.sg-lbl { flex: 0 0 150px; font: 600 12px var(--sans); }
.sg-lbl span { display: block; font: 400 10.5px var(--sans); color: var(--faint); margin-top: 2px; }
.sg-demo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px,100%), 1fr)); gap: 14px; }
.sg-sw i { display: block; height: 46px; border-radius: 12px; margin-bottom: 8px;
  box-shadow: var(--lift-1); }
.sg-sw b { display: block; font: 600 13px var(--sans); }
.sg-sw code { display: block; font: 600 10.5px var(--mono); color: var(--iris-deep); margin-top: 2px; }
.sg-sw span { display: block; font: 400 10.5px var(--sans); color: var(--muted); margin-top: 3px; }
.sg-type b { height: 46px; display: flex; align-items: center; font-size: 30px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 11px;
  background: var(--soft); font: 600 10.5px var(--mono); color: var(--muted); }
.sg-chip i { width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--line); }

/* ============================================ WHAT IS COMING
   The page's missing tense. Every other block says what is true; this one
   says what is about to be. Days run down the page, each carrying whatever
   lands on it, with the nearest two lit. */
.lensbar .lens { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 16px; line-height: 1.25; }
.lensbar .lens b { font: 700 12px var(--sans); }
.lensbar .lens span { font: 600 10px var(--sans); opacity: .8; }
.lensbar .lens.on span { color: #fff; opacity: .82; }
.lensbar .lens.has-work { background: var(--iris-tint); color: var(--iris-deep); }
.lensbar .lens.has-work span { color: var(--iris-deep); opacity: 1; }

.hz { padding: 4px 0 8px; }
.hz-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px 16px; }
.hz-n { flex: 0 0 auto; min-width: 46px; height: 46px; border-radius: 14px;
  background-image: var(--grad-btn); color: #fff; display: flex; align-items: center;
  justify-content: center; font: 600 20px var(--serif); }
.hz-t b { display: block; font: 600 15px var(--sans); }
.hz-t span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 2px; }

.hz-days { display: flex; flex-direction: column; }
.hz-day { display: flex; align-items: flex-start; gap: 18px; padding: 12px 20px;
  border-top: 1px solid var(--line); }
.hz-day.is-near { background: var(--paper); }
.hz-when { flex: 0 0 120px; padding-top: 3px; }
.hz-when b { display: block; font: 700 12px var(--sans); text-transform: capitalize; }
.hz-day.is-near .hz-when b { color: var(--iris-deep); }
.hz-when span { display: block; font: 400 10px var(--sans); color: var(--faint); margin-top: 1px; }
.hz-e { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 260px; min-width: 0;
  padding: 8px 12px; border-radius: 11px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: box-shadow .14s, transform .1s; margin-right: 8px; }
.hz-e:hover { text-decoration: none; box-shadow: var(--lift-2); transform: translateY(-2px); }
.hz-e i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px;
  background: var(--iris); }
.hz-e-t { min-width: 0; }
.hz-e-t b { display: block; font: 600 12.5px var(--sans); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hz-e-t span { display: block; font: 400 10.5px var(--sans); color: var(--muted); margin-top: 1px; }
.hz-money i { background: var(--iris); }
.hz-clean i { background: var(--paid); }
.hz-work  i { background: var(--draft); }
.hz-lease i { background: var(--overdue); }
.hz-day { flex-wrap: wrap; }

.hz-empty { display: block; }
.hz-empty b { display: block; font: 600 16px var(--serif); }
.hz-empty span { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 5px; }

/* a lease beyond the fortnight: a standing warning, not an appointment */
.hz-lease { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-top: 10px;
  border-radius: 14px; background: var(--surface); border: 1px solid #F6D0D0;
  box-shadow: var(--lift-1); text-decoration: none; color: var(--ink);
  transition: box-shadow .14s, transform .1s; }
.hz-lease:hover { text-decoration: none; box-shadow: var(--lift-2); transform: translateY(-2px); }
.hz-l-t { flex: 1; min-width: 0; }
.hz-l-t b { display: block; font: 600 14px var(--sans); }
.hz-l-t span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 1px; }
.hz-l-n { flex: 0 0 auto; font: 700 11px var(--sans); color: var(--overdue);
  background: var(--overdue-tint); padding: 5px 11px; border-radius: 11px; }
.hz-l-go { flex: 0 0 auto; font: 700 11px var(--sans); color: var(--iris-deep); }
@media (max-width: 720px) {
  .hz-when { flex: 1 1 100%; }
  .hz-lease { flex-wrap: wrap; }
  .hz-l-go { flex: 1 1 100%; }
}

/* ---- Invoices: the money first, then the invoices as objects ---- */

/* an invoice is an object: who owes it, when, how much — the row is a shell
   holding two doors to the same invoice, with the send buttons between them */
.invrows { display: flex; flex-direction: column; }

/* the one verb a group wants */
.ig-do { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 13px 16px;
  border-radius: 13px; background: var(--iris-tint); }
.ig-do button { margin-left: auto; flex: 0 0 auto; }
.ig-do b { display: block; font: 700 12.5px var(--sans); color: var(--iris-deep); }
.ig-do em { display: block; font: 400 10.5px var(--sans); font-style: normal;
  color: var(--iris-deep); opacity: .8; margin-top: 2px; }
.ig-do .btn { margin-left: auto; flex: 0 0 auto; }
.ig-late .ig-do { background: var(--overdue-tint); }
.ig-late .ig-do b, .ig-late .ig-do em { color: #B3455A; }


.invrow { display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 14px;
  grid-template-areas: "who when amt go" "line line acts acts";
  column-gap: 16px; row-gap: 3px; align-items: center; padding: 12px;
  border-bottom: 1px solid var(--line); border-radius: 11px; text-decoration: none;
  color: var(--ink); transition: background .12s; }
.invrow:last-child { border-bottom: 0; }
.invrow:hover { background: var(--paper); text-decoration: none; }
.iv-open { text-decoration: none; color: var(--ink); min-width: 0; }
.iv-open:hover { text-decoration: none; }
.iv-who { grid-area: who; min-width: 0; }
.iv-who b { display: block; font: 600 14.5px var(--sans); }
.iv-meta { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 2px; }
.iv-meta i { font-style: normal; }
.invrow .iv-prov { grid-area: line; margin: 0; align-self: center;
  font: 400 10.5px var(--sans); color: var(--faint); }
.iv-acts { grid-area: acts; justify-self: end; display: flex; gap: 6px; align-items: center; }
.iv-when { grid-area: when; min-width: 0; text-align: right; }
.iv-when b { display: block; font: 600 12.5px var(--sans); }
.iv-when b.bad { color: var(--overdue); }
.iv-when b.ok { color: var(--paid); }
.iv-when span { display: block; font: 400 10.5px var(--sans); color: var(--faint); margin-top: 2px; }
.iv-amt { grid-area: amt; text-align: right; font: 600 17px var(--serif); }
.invrow.is-late .iv-amt { color: var(--overdue); }
.iv-go { grid-area: go; text-align: center; color: var(--faint); font-size: 15px; }
@media (max-width: 640px) {
  .invrow { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who amt" "when when" "line line" "acts acts"; }
  .iv-when { text-align: left; }
  .iv-acts { justify-self: start; }
}

/* WhatsApp is green wherever it appears — the channel's own colour, sitewide */
.btn.btn-wa, .btn-sm.btn-wa, button.btn-wa, a.btn-wa {
  background: var(--wa); color: #fff; border-color: var(--wa); }
.btn.btn-wa:hover, .btn-sm.btn-wa:hover, button.btn-wa:hover, a.btn-wa:hover {
  filter: brightness(1.06); color: #fff; }

/* the rail facts keep their tones — green standing, iris things, amber age */
.ckf.ck-paid dd { color: var(--paid); }
.ckf.ck-iris dd { color: var(--iris-deep); }
.ckf.ck-over dd { color: var(--overdue); }
.ckf.ck-amber dd { color: #B27C20; }


/* ---- the accountant's month (3.159): his columns, his totals ---- */
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.acct-head h2 { margin: 0; }
.acct-sub { font: 400 11.5px var(--sans); color: var(--muted); margin: 4px 0 0; }
.acct-dl { white-space: nowrap; }
.acct-scroll { overflow-x: auto; margin-top: 14px; }
.acct-t { width: 100%; border-collapse: collapse; min-width: 860px; }
.acct-t th { font: 700 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 10px 8px 0;
  border-bottom: 2px solid var(--line); }
.acct-t td { padding: 9px 10px 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--iris) 6%, #fff);
  font: 400 12px var(--sans); vertical-align: top; }
.acct-t td b { font: 600 12px var(--sans); }
.acct-t .acct-r { text-align: right; padding-right: 0; }
.acct-t .acct-r b { font: 700 13px var(--serif); white-space: nowrap; }
.acct-t .mono { font: 400 11px var(--mono); color: var(--muted); }
.acct-fold { display: block; font: 400 10px var(--sans); color: var(--muted); font-style: italic; margin-top: 2px; }
.acct-vat { display: inline-block; font: 700 8.5px var(--sans); letter-spacing: .04em;
  padding: 3px 8px; border-radius: 8px; background: var(--soft); color: var(--muted); }
.acct-vat.is-vat { background: var(--iris-tint); color: var(--iris); }
.acct-tots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: stretch; }
.acct-tot { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; background: var(--soft); }
.acct-tot i { font: 700 9px var(--sans); letter-spacing: .06em; color: var(--muted); font-style: normal; }
.acct-tot b { font: 700 14px var(--serif); }
.acct-tot.is-vat { background: var(--iris-tint); }
.acct-tot.is-vat i, .acct-tot.is-vat b { color: var(--iris); }
.acct-tot.is-grand { margin-left: auto; background: var(--iris); }
.acct-tot.is-grand i { color: #DDDBFB; }
.acct-tot.is-grand b { color: #fff; font-size: 16px; }
.acct-note { font: 400 11px var(--sans); color: var(--muted); margin: 12px 0 0; }

/* the accountant's month on paper (3.165): the table is the page */
@media print {
  .ckrail, .acct-dl { display: none !important; }
  .ckpit { display: block; }
  .acct-scroll { overflow: visible; }
  .acct-t { min-width: 0; font-size: 10px; }
  .acct-t thead { display: table-header-group; } /* the header rides onto every sheet */
  .acct-t td, .acct-t th { padding: 5px 8px 5px 0; }
}

/* ---- the sanctioned utilities (3.164): inline styles, given names ----
   Each rule is the verbatim equivalent of an inline style it replaced; the
   !important is what makes the swap safe — an inline style always won, so
   its named replacement must too. Add nothing here that is not replacing
   an inline style one-for-one. */
.u-mt0 { margin-top: 0 !important; }
.u-mt4 { margin-top: 4px !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt12 { margin-top: 12px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-f1 { flex: 1 !important; }
.u-f2 { flex: 2 !important; }
.u-fgrow { flex: 1 1 100% !important; }
.u-span { grid-column: 1 / -1 !important; }
.u-tr { text-align: right !important; }
.u-tc { text-align: center !important; }
.u-m0 { margin: 0 !important; }
/* the two notes under Settings' logo and mark uploads, and the checkbox that
   has to sit on the same line as the sentence it belongs to */
.u-m2b6 { margin: 2px 0 6px !important; }
.u-mt6b0 { margin: 6px 0 0 !important; }
.check.is-inline { display: inline; }
.u-w100 { width: 100% !important; }
.u-fs12 { font-size: 12px !important; }
.u-fs125 { font-size: 12.5px !important; }
.u-f1min { flex: 1 !important; min-width: 0 !important; }

/* ---- editing a person (3.176): its own page, rooms that breathe ---- */
.eu-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.hero.eu-hero { margin: 0; }
.eu-head { display: flex; align-items: center; gap: 16px; }
.eu-face { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 15px var(--serif); font-style: normal;
  color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); }
.eu-head .hero-who { margin: 0; }
.eu-head .hero-date { letter-spacing: .06em; font-size: 9.5px; }
.eu-back { margin-left: auto; font: 700 12px var(--sans); color: #DDDBFB; white-space: nowrap; }
.eu-back:hover { color: #fff; text-decoration: none; }
.eu-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .eu-g3 { grid-template-columns: 1fr; } }
.eu-verbs { display: flex; align-items: center; gap: 10px; }
.eu-verbs .eu-danger { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.eu-verbs .inline { display: inline; margin: 0; }

/* ---- the month of cleans (3.173): a calendar of who cleaned what ---- */
/* the chips a day carries — the one part of the old calendars that already
   agreed with itself, so it is kept and now shared by all four surfaces */
.hkcal-c { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.hkcal-f { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font: 700 8px var(--sans); font-style: normal; color: #fff;
  background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 74%, #000)); }
.hkcal-f.is-rose { background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
/* Support wears the same chip: a ticket that is still open is RINGED rather
   than filled, so "unanswered" is told by shape first and colour second. */
.hkcal-f.is-open { background: var(--surface); color: color-mix(in srgb, var(--overdue) 78%, #000);
  box-shadow: inset 0 0 0 2px var(--overdue); }
.hkcal-c em, .hkcal-u { font: 700 9px var(--sans); font-style: normal; color: var(--iris);
  background: var(--iris-tint); border-radius: 7px; padding: 2px 7px; }
.hkcal-more { display: block; font: 700 8.5px var(--sans); color: var(--muted); margin-top: 5px; padding-left: 2px; }
@media (max-width: 760px) { .hkcal-c em { display: none; } }

/* ==========================================================================
   THE CASH BOX (3.187) — the drawer on the wide measure, in My Day's language
   Owner board, approved. The 360px rail is retired: the balance is a figure
   with a ring, the three facts are three money fields (the .md-fig grammar,
   reused not copied), the three verbs stand in a row of their own, and the
   month is card-rows. Nothing here invents a colour.
   ========================================================================== */
.pcb { margin-top: 18px; }

/* the greeting line, the one verb, and the chips that say how the drawer stands */
.pc-hd { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin: 4px 0 22px; }
.pc-hi { font: 700 34px/1.1 var(--serif); color: var(--ink); margin: 0; }
.pc-date { font: 700 12px var(--sans); letter-spacing: .14em; color: var(--muted); margin: 9px 0 0; }
.pc-hd-r { margin-left: auto; text-align: right; }
.pc-cta { display: inline-flex; align-items: center; gap: 10px; height: 48px;
         padding: 0 26px; border-radius: 14px; font-size: 15px; box-shadow: var(--lift-2); }
.pc-cta:hover { text-decoration: none; }
.pc-plus { width: 13px; height: 13px; flex: 0 0 13px; }
.pc-chips { display: flex; gap: 10px; margin-top: 13px; justify-content: flex-end; flex-wrap: wrap; }
.md-chip.is-warn { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.md-chip.is-warn i { background: var(--draft); }

/* every field on the page wears the same edge, the one My Day set */
.pc-fld { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
          border-radius: 24px; box-shadow: var(--lift-1); position: relative; min-width: 0; }

/* the drawer, and the three figures beside it */
.pc-row4 { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
/* the board sets these keys as labels; My Day's own rule has no transform and
   this page must not reach into it, so the casing is scoped here */
.pc-row4 .md-fig-k { text-transform: uppercase; }
.pc-drawer { padding: 26px 30px 22px; display: flex; flex-direction: column; }
.pc-drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pc-drawer-n { margin: 12px 0 0; min-width: 0; }
.pc-drawer-n b { display: block; color: var(--ink); white-space: nowrap;
                 font: 700 clamp(30px, 3.1vw, 46px)/1 var(--serif); }
.pc-drawer-n span { display: block; font: 600 15px var(--sans); color: var(--muted); margin-top: 8px; }
.pc-ringwrap { position: relative; flex: 0 0 122px; width: 122px; height: 122px; }
.pc-ringwrap .md-ring { width: 122px; height: 122px; }
/* the month's arithmetic, said under the figure it explains */
.pc-arith { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
            font: 500 12.5px var(--sans); color: var(--muted); }
/* each clause stays whole: a peso figure split from its own word reads as two facts */
.pc-arith b, .pc-arith u, .pc-arith s { white-space: nowrap; }
.pc-arith b { font-weight: 700; color: var(--ink); }
.pc-arith u { text-decoration: none; font-weight: 700; color: color-mix(in srgb, var(--paid) 84%, #000); }
.pc-arith s { text-decoration: none; font-weight: 700; color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pc-thin { display: flex; align-items: center; gap: 13px; margin-top: auto; padding: 13px 17px;
           border-radius: 16px; background: var(--overdue-tint); color: inherit;
           border: 1px solid color-mix(in srgb, var(--overdue) 22%, #fff); }
.pc-thin:hover { text-decoration: none; box-shadow: var(--lift-1); }
.pc-thin > i { width: 10px; height: 10px; border-radius: 50%; background: var(--overdue); flex: 0 0 10px; }
.pc-thin span { font: 400 12px var(--sans); color: var(--muted); }
.pc-thin span b { font: 700 13px var(--sans); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pc-thin em { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-style: normal;
              font: 700 12.5px var(--sans); color: var(--iris); white-space: nowrap; }

/* a section heading with its one line of explanation */
.pc-secthd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 34px 0 14px; }
.pc-secthd h2 { font: 700 27px var(--serif); color: var(--ink); margin: 0; }
.pc-secthd p { margin: 0 0 1px; font: 400 13px var(--sans); color: var(--muted); }
.pc-secthd p b { font-weight: 700; color: var(--ink); }

/* the three verbs: each its own form, its own field, its own button */
.pc-verbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.pc-verb { padding: 22px 22px 20px; display: flex; flex-direction: column; }
.pc-vf { display: flex; gap: 10px; margin-top: 12px; }
.pc-vf input { flex: 1 1 auto; min-width: 0; }
.pc-vf button { flex: 0 0 auto; white-space: nowrap; }
.pc-verb em { display: block; font-style: normal; font: 400 11.5px var(--sans);
              color: var(--faint); margin-top: 12px; }
/* The two quiet verbs wear their own meaning. The green of "Top up" came from
   here between 3.187.0 and 3.192.1; it now comes from `.btn-paid` itself, which
   is where the other five call sites get it too, so this scope is retired
   rather than left to say the same thing twice. */
.pc-vf button.btn-ghost { color: var(--iris); border-color: color-mix(in srgb, var(--iris) 32%, #fff);
  border-width: 1.5px; font-weight: 700; }
.pc-vf button.btn-ghost:hover { background: var(--iris-tint); border-color: var(--iris); }

/* spend from the box: paired blocks, every field in its own */
.pc-spend { padding: 28px 30px 26px; }
.pc-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.pc-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 26px; }
.pc-g2 + .pc-g2, .pc-g2 + .pc-g3, .pc-g3 + .pc-g2, .pc-g2 + .pc-f, .pc-g3 + .pc-f { margin-top: 18px; }
.pc-f { min-width: 0; }
.pc-f > label { display: block; font: 700 12.5px var(--sans); color: var(--ink); margin: 0 0 7px; }
.pc-f input, .pc-f select { width: 100%; }
.pc-hint { display: block; font: 400 11.5px var(--sans); color: var(--faint); margin-top: 7px; }
.pc-doorblock { margin-top: 22px; }
.pc-doorblock .vseg.xum { margin: 0 0 12px; }
.pc-doorblock select, .pc-doorblock input[type="search"], .pc-doorblock input[type="text"] { width: 100%; }
.pc-paper { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: 26px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.pc-paper i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9px; background: var(--soft);
              color: var(--iris-deep); display: flex; align-items: center; justify-content: center;
              font: 700 12px var(--sans); font-style: normal; }
.pc-paper b { font: 700 14px var(--sans); color: var(--ink); }
.pc-paper span { font: 400 12px var(--sans); color: var(--faint); }
.pc-spend-foot { display: flex; align-items: center; gap: 18px; margin-top: 24px;
                 padding-top: 20px; border-top: 1px solid var(--line); }
.pc-spend-foot p { margin: 0; font: 400 12.5px var(--sans); color: var(--muted); max-width: 560px; }
.pc-spend-foot button { margin-left: auto; }

/* the box, day by day: card-rows, coloured by kind on the left edge */
.pc-months { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pc-mchip { border: 1px solid var(--line); border-radius: 12px; padding: 9px 15px;
            font: 700 12.5px var(--sans); color: var(--muted); }
.pc-mchip:hover { border-color: var(--iris); color: var(--iris); text-decoration: none; }
.pc-mchip.is-on { background: var(--iris); border-color: var(--iris); color: #fff; }
.pc-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(580px,100%), 1fr)); gap: 12px 16px; }
.pc-lrow { display: flex; align-items: center; gap: 15px; padding: 15px 19px; background: var(--surface);
           border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); border-left-width: 5px;
           border-radius: 20px; box-shadow: var(--lift-1); }
.pc-lrow.is-out { border-left-color: var(--overdue); }
.pc-lrow.is-in { border-left-color: var(--paid); }
.pc-lrow.is-count { border-left-color: var(--iris); }
.pc-lfob { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; display: flex;
           align-items: center; justify-content: center; font: 800 11px var(--sans);
           letter-spacing: .06em; font-style: normal; }
.pc-lrow.is-out .pc-lfob { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pc-lrow.is-in .pc-lfob { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.pc-lrow.is-count .pc-lfob { background: var(--iris-tint); color: var(--iris-deep); }
.pc-ltx { min-width: 0; flex: 1 1 auto; }
.pc-ltx b { display: block; font: 700 15px var(--sans); color: var(--ink); }
.pc-ltx > span { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
                 font: 400 12px var(--sans); color: var(--muted); margin-top: 4px; }
.pc-lamt { font: 700 20px var(--serif); font-style: normal; white-space: nowrap; }
.pc-lrow.is-out .pc-lamt { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pc-lrow.is-in .pc-lamt { color: color-mix(in srgb, var(--paid) 84%, #000); }
.pc-lrow.is-count .pc-lamt { color: var(--iris-deep); font-size: 16px; }
.pc-lfoot { display: flex; align-items: center; gap: 16px; margin: 16px 0 0;
            font: 400 12px var(--sans); letter-spacing: .04em; color: var(--faint); }
.pc-lfoot a { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
              font: 700 12.5px var(--sans); color: var(--iris); }
.pc-none { font: 400 13px var(--sans); color: var(--muted); margin: 0; }

/* the narrow end: the grids fold one at a time, in the order they can afford to */
@media (max-width: 1180px) {
  .pc-row4 { grid-template-columns: 1fr 1fr; }
  .pc-verbs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pc-row4 { grid-template-columns: 1fr; }
  .pc-g2, .pc-g3 { grid-template-columns: 1fr; }
  .pc-hd-r { margin-left: 0; text-align: left; }
  .pc-chips { justify-content: flex-start; }
  .pc-drawer-n b { font-size: 34px; }
  .pc-ledger { grid-template-columns: 1fr; }
}
/* ---- end of the cash box block (3.187). Its readability-floor guard reads to
   this line and no further: it used to stop at the invoice life-line that
   followed it, and 3.217 retired that block, which left the guard reading to
   the end of the file. A block states its own end. ---- */

/* ---- the paper's life (3.171): the date is the door, one life-line ---- */
.agl { border: 1px solid #E4E5F0; border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.agl.is-void { opacity: .55; }
.agl-head { display: flex; align-items: center; gap: 10px; }
.agl-head .iv-fob { width: 30px; height: 30px; flex: 0 0 30px; }
.agl-door { font: 700 15px var(--serif); color: var(--iris); text-decoration: underline; text-underline-offset: 3px; }
.agl-door:hover { color: var(--iris-deep); }
.agl-chip { margin-left: auto; font: 800 8.5px var(--sans); letter-spacing: .06em; padding: 4px 10px; border-radius: 9px; }
.agl-chip.is-draft { background: var(--draft-tint); color: #A66A11; }
.agl-chip.is-sent { background: var(--iris-tint); color: var(--iris); }
.agl-chip.is-signed { background: var(--paid-tint); color: var(--paid); }
.agl-chip.is-void { background: var(--soft); color: var(--muted); }
.agl-life { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 2px; padding-left: 40px; }
.agl-stop { flex: 0 0 auto; max-width: 260px; }
.agl-stop i { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff; vertical-align: -2px; margin-right: 6px; }
.agl-stop.is-on i { border-color: var(--iris); background: var(--iris); }
.agl-stop.is-done i { border-color: var(--paid); background: var(--paid); }
.agl-stop b { font: 700 9px var(--sans); letter-spacing: .06em; color: var(--muted); }
.agl-stop.is-on b { color: var(--ink); }
.agl-stop em { display: block; font: 400 9.5px var(--sans); color: var(--muted); font-style: normal; margin: 2px 0 0 20px; }
.agl-line { flex: 1 1 20px; height: 2px; background: var(--line); margin-top: 7px; border-radius: 1px; }
.agl-line.is-on { background: var(--iris); }
.agl-verbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--iris) 8%, #fff); }
.agl-verbs .agl-read { background: var(--iris); color: #fff; }
.agl-verbs .agl-read:hover { background: var(--iris-deep); text-decoration: none; }
.agl-verbs .inline { display: inline; }
@media (max-width: 760px) { .agl-life { flex-wrap: wrap; padding-left: 0; } .agl-line { display: none; } }

/* ---- the blanks, per unit (3.166): the key tag leads, the tenant follows ---- */
.fb-wrap { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
/* .hero bleeds -26px to fill its cockpit card; standing alone it must NOT —
   the doubled class outguns the later .hero rule, so the band starts below
   the bar like everything else (3.166.1, owner's screenshot) */
.hero.fb-hero { margin: 0; }
.fb-hero .hero-date { letter-spacing: .06em; font-size: 10px; }
.fb-card { padding: 18px 20px; }
.fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fb-fob { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 13px; }
.fb-who b { display: block; font: 700 16px var(--serif); }
.fb-who em { display: block; font: 400 10.5px var(--sans); color: var(--muted); font-style: normal; margin-top: 2px; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--iris) 6%, #fff); }
.fb-desc { flex: 1; min-width: 0; }
.fb-desc b { display: block; font: 600 12.5px var(--sans); }
.fb-desc .fb-each { font: 400 11.5px var(--sans); color: var(--muted); font-style: normal; }
.fb-desc em { display: block; font: 400 9.5px var(--sans); color: var(--faint); font-style: normal; margin-top: 2px; }
.fb-in { flex: 0 0 170px; width: 170px; }
.fb-in.fb-cost { flex-basis: 160px; width: 160px; }
.fb-cam { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h);
  padding: 0 14px; border-radius: 10px; background: var(--soft); color: var(--muted);
  font: 400 11.5px var(--sans); cursor: pointer; white-space: nowrap; }
.fb-cam:hover { background: var(--iris-tint); }
.fb-cam.has { background: var(--paid-tint); color: var(--paid); font-weight: 700; }
.fb-go { height: var(--ctl-h); padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 12.5px var(--sans); color: #fff;
  background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 78%, #000)); }
.fb-go:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
.fb-done { gap: 12px; }
.fb-tick { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font: 700 13px var(--sans); font-style: normal;
  color: #fff; background: var(--paid); }
.fb-desc-done { flex: 1; font: 400 12.5px var(--sans); color: var(--muted); }
.fb-done b { font: 700 12px var(--sans); color: var(--paid); }
.fb-ready { background: var(--paid-tint); border-color: color-mix(in srgb, var(--paid) 22%, #fff); }
.fb-r-lbl { font: 800 10.5px var(--sans); letter-spacing: .08em; color: var(--paid); margin: 0 0 10px; }
.fb-r-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.fb-r-row b { font: 600 13px var(--sans); }
.fb-r-row .mono { font-size: 11.5px; color: var(--muted); }
.fb-r-row em { margin-left: auto; font: 700 13.5px var(--serif); font-style: normal; }
.fb-fob-sm { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; font-size: 10.5px; padding: 0 6px; }
.fb-r-send { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.fb-r-send span { font: 400 10.5px var(--sans); color: var(--muted); font-style: italic; }
@media (max-width: 860px) {
  .fb-row { flex-wrap: wrap; }
  .fb-desc { flex: 1 1 100%; }
  .fb-in { flex: 1 1 140px; }
}

/* ---- the Record verb (3.163): green, far right, one tap from anywhere ---- */
.plusdrop { margin-left: auto; align-self: center; }
/* 3.191, owner board: the house language says every primary action is iris, and
   this was the one control on the bar that did not obey it. It gains its word
   at the same time — a plus alone never said what it would do. The plus itself
   is still drawn and never typed: an SVG stroke now, which no font can move. */
.plusbtn { height: 36px; padding: 0 14px 0 11px; border-radius: 13px; border: 0; cursor: pointer;
  color: #fff; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 700 14px var(--sans);
  background: linear-gradient(180deg, var(--iris), var(--iris-deep));
  box-shadow: var(--lift-1); }
.plusbtn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.plusbtn:hover { box-shadow: var(--lift-2); transform: translateY(-1px); }
.plusdrop .navpanel { left: auto; right: -6px; }
.pv-panel { gap: 6px; }
.pv-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px;
  text-decoration: none; color: var(--ink); }
.pv-item:hover { background: var(--soft); text-decoration: none; }
.pv-item i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; font-size: 0;
  font-style: normal; position: relative; display: inline-flex;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
.pv-item i::before, .pv-item i::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: #fff; border-radius: 1px; }
.pv-item i::before { width: 9px; height: 2px; }
.pv-item i::after { width: 2px; height: 9px; }
.pv-item b { display: block; font: 600 12.5px var(--sans); }
.pv-item em { display: block; font: 400 10px var(--sans); color: var(--muted); font-style: normal; margin-top: 1px; }

/* ---- the my-day hero: the greeting in iris ---- */
.ckrail.is-herocard { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.is-herocard .ckfacts { border-top: 0; }
.is-herocard .ckf:last-child { border-bottom: 0; }
.hero { position: relative; overflow: hidden; border-radius: 16px; padding: 20px 24px;
  background: linear-gradient(165deg, var(--iris) 0%, var(--iris-deep) 100%); color: #fff;
  margin: -26px -24px 14px; box-shadow: var(--lift-1); }
.iv-fob.is-rose { background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
.iv-fob.is-rosepale { background: color-mix(in srgb, #FF385C 46%, #fff); }
.hero .hero-n { position: absolute; right: 20px; top: 20px; font: 700 118px/1 var(--serif);
  font-style: normal; color: rgba(255,255,255,.12); pointer-events: none; }
.hero-day { display: inline-block; font: 800 8.5px var(--sans); letter-spacing: .12em;
  background: rgba(0,0,0,.18); color: rgba(255,255,255,.85); padding: 5px 12px; border-radius: 10px; }
.hero-hi { font: 400 16px var(--serif); color: rgba(255,255,255,.82); margin: 12px 0 0; }
.hero-who { font: 700 26px var(--serif); color: #fff; margin: 0; }
.hero-date { font: 400 9.5px var(--sans); color: rgba(255,255,255,.75); margin: 4px 0 0; }
.hero-rule { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 12px 0 8px; }
.hero-lbl { font: 700 7px var(--sans); letter-spacing: .1em; color: rgba(255,255,255,.6); margin: 0 0 6px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-chips .hc { font: 800 8px var(--sans); letter-spacing: .04em; padding: 4px 10px; border-radius: 10px; }
.hc-direct { background: rgba(255,255,255,.18); color: #fff; }
.hc-abnb { background: #FF385C; color: #fff; }
.hc-dim { background: rgba(0,0,0,.12); color: rgba(255,255,255,.85); }
.hc-paid { background: var(--paid); color: #fff; }
.hc-over { background: var(--overdue); color: #fff; }
.hero-sum { font: 700 10px var(--sans); color: #fff; margin: 8px 0 0; }
.hero-need { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink);
  border-radius: 12px; padding: 7px 12px; margin-top: 12px; font: 700 9px var(--sans);
  text-decoration: none; position: relative; z-index: 1; }
.hero-need i { width: 9px; height: 9px; border-radius: 50%; background: #FF385C; }
.hero-need.is-quiet i { background: var(--paid); }
.hero-need em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.hero-need:hover { text-decoration: none; box-shadow: var(--lift-1); }
/* the hero's own desk rows: each need-you item, one tap to its fix */
.hero-row { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 12px; padding: 6px 12px 7px; margin-top: 8px; text-decoration: none;
  position: relative; z-index: 1; border-left: 3px solid #B27C20; }
.hero-row.is-late { border-left-color: #FF385C; }
.hero-row.is-info { border-left-color: var(--paid); }
.hero-row .hr-tx { min-width: 0; }
.hero-row b { display: block; font: 700 9.5px var(--sans); }
.hero-row .hr-tx > span { display: block; font: 400 8.5px var(--sans); color: var(--muted); }
.hero-row em { margin-left: auto; font-style: normal; font: 700 12px var(--sans); color: var(--muted); }
.hero-row:hover { text-decoration: none; box-shadow: var(--lift-1); background: #fff; }

/* ---- the airbnb desk ---- */
.badge-rose { background: #FFEEF1; color: #FF385C; }
.badge-muted { background: var(--paper); color: var(--muted); }
/* The earnings shelves (.abe*), the per-unit cards (.abu*) and the undated
   day squares (.ab-d*) were swept in 3.201.0: the desk draws the house
   calendar and My day's fields now, and nothing else wore them. */
.utile.ch-abnb { --st: #FF385C; --st-tint: #FFEEF1; --ch: #FF385C; }
.utile.ch-vacant { --st: #cdd0d8; --st-tint: #ffffff; --ch: #9AA2B1;
  box-shadow: none; border-color: #E3E5EE; }
/* the rail survives the vacant tile's flat border — it still has to carry what
   the lens says, and for a home with no tenancy that answer is grey too */
.utile.ch-vacant { border-left-color: var(--st); }
.ut-abnb { display: inline-block; font: 800 7.5px var(--sans); letter-spacing: .05em;
  padding: 3px 8px; border-radius: 8px; background: #FFEEF1; color: #FF385C; }
.hkt .hkt-sub.is-turn { color: #B27C20; font-weight: 700; }

/* ---- the contributions desk ---- */
.cbrow { border: 2px solid color-mix(in srgb, var(--iris) 16%, #fff); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 5%, #fff) 0%, #fff 62%); }
.cbrow.is-off { border-color: color-mix(in srgb, var(--overdue) 40%, #fff); }
.cb-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cb-top b { font: 700 13.5px var(--serif); }
.cb-top i { font: 400 8.5px var(--sans); font-style: normal; color: var(--muted); margin-left: auto; }
.cb-t { width: 100%; border-collapse: collapse; }
.cb-t th { font: 700 6.5px var(--sans); letter-spacing: .06em; color: var(--faint); text-align: right; padding: 2px 0; }
.cb-t th:first-child { text-align: left; }
.cb-t td { font: 400 9.5px var(--sans); padding: 3px 0; text-align: right; }
.cb-t td:first-child { text-align: left; }
.cb-t .is-er { color: var(--paid); }
.cb-t .cb-basis { text-align: right; color: var(--faint); font-size: 7.5px; width: 30%; }
.cb-t tr.tot td { border-top: 1px solid var(--line); font-weight: 700; padding-top: 5px; }
.cb-co { border: 3px solid var(--ink); border-radius: 11px; padding: 12px 16px; margin-top: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paid) 6%, #fff) 0%, #fff 70%); }
.cb-co b { font: 700 11px var(--serif); display: block; }
.cb-co span { font: 400 10px var(--sans); color: var(--ink); display: block; margin: 3px 0; }
.cb-co span em { font: 700 15px var(--serif); font-style: normal; }
.cb-co i { font: 400 8px var(--sans); font-style: normal; color: var(--muted); }
.cb-sched { font: 400 9.5px var(--sans); margin: 0 0 7px; }

/* ---- the living payslip: a sheet with a spoken frame ---- */
.lps { display: flex; justify-content: center; }
.lps-frame { position: relative; background: #fff; border: 2px solid #cbced6; border-radius: 4px;
  max-width: 860px; width: 100%; padding: 34px 44px; }
.lps-frame .fx { position: absolute; font: 800 9px var(--sans); letter-spacing: .08em;
  color: color-mix(in srgb, var(--ink) 42%, #fff); white-space: nowrap; font-style: normal; }
.fx-t1 { top: 6px; left: 25%; transform: translateX(-50%); }
.fx-t2 { top: 6px; left: 75%; transform: translateX(-50%); }
.fx-b1 { bottom: 6px; left: 25%; transform: translateX(-50%); }
.fx-b2 { bottom: 6px; left: 75%; transform: translateX(-50%); }
.fx-l1, .fx-l2, .fx-l3 { left: 4px; transform-origin: left top; transform: rotate(90deg) translateY(-100%); }
.fx-l1 { top: 18%; } .fx-l2 { top: 48%; } .fx-l3 { top: 78%; }
.fx-r1, .fx-r2, .fx-r3 { right: 4px; transform-origin: right top; transform: rotate(-90deg) translateY(-100%); }
.fx-r1 { top: 18%; } .fx-r2 { top: 48%; } .fx-r3 { top: 78%; }
.lps-head { display: flex; align-items: flex-start; gap: 12px; }
.lps-mark { width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--serif); }
.lps-biz b { font: 700 19px var(--serif); display: block; }
.lps-biz i { font: 700 6.5px var(--sans); letter-spacing: .1em; color: var(--faint); font-style: normal; }
.lps-badge { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.lps-badge b { font: 800 8px var(--sans); letter-spacing: .06em; padding: 4px 10px; border-radius: 8px; }
.lps-badge b.is-live { background: var(--iris-tint); color: var(--iris-deep); }
.lps-badge b.is-demo { background: #FFEEF1; color: color-mix(in srgb, #FF385C 80%, #000); }
.lps-badge i { font: 400 7px var(--sans); color: var(--muted); font-style: normal; }
.lps-rule { border: 0; border-top: 3px solid var(--ink); margin: 12px 0 14px; }
.lps-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.lps-lbl { font: 700 6.5px var(--sans); letter-spacing: .08em; color: var(--faint); margin: 0 0 3px; }
.lps-name { font: 700 16px var(--serif); margin: 0 0 4px; }
.lps-per { font: 700 12px var(--serif); margin: 0 0 4px; }
.lps-meta { font: 400 8.5px var(--sans); color: var(--muted); margin: 0 0 3px; }
.lps-gov { font: 400 7.5px var(--mono, monospace); color: var(--faint); margin: 4px 0 0; }
.lps-fine { font: 400 7.5px var(--sans); color: var(--faint); margin: 4px 0 0; }
.lps-sec { font: 700 8.5px var(--sans); letter-spacing: .05em; color: var(--iris-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--iris) 26%, #fff); padding-bottom: 4px;
  border-bottom: 2px solid var(--ink); padding-bottom: 3px; margin: 18px 0 8px; }
.lps-sec.is-over { color: var(--overdue); border-bottom-color: color-mix(in srgb, var(--overdue) 24%, #fff); }
.lps-sec i { font: 400 7.5px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 8px; font-style: normal; }
.lps-cols { float: right; } .lps-cols u { text-decoration: none; font-size: 7px; margin-left: 26px; }
.lps-cols u.is-er { color: var(--paid); }
.lps-days { display: flex; gap: 5px; }
.lday { flex: 1; border-radius: 8px; text-align: center; padding: 6px 0 5px; background: #eceef3; }
.lday b { font: 700 12px var(--serif); color: var(--muted); display: block; }
.lday i { font: 700 5.5px var(--sans); font-style: normal; display: block; }
.lday.is-w { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 74%, #000)); } .lday.is-w b { color: #fff; }
.lday.is-hol { background: #095C3A; } .lday.is-hol b, .lday.is-hol i { color: #fff; }
.lday.is-rest { background: color-mix(in srgb, var(--paid) 82%, #fff); box-shadow: inset 0 0 0 3px #B27C20; }
.lday.is-rest b, .lday.is-rest i { color: #fff; }
.lday.is-today { background: var(--iris-tint); box-shadow: inset 0 0 0 3px var(--iris); }
.lday.is-today b, .lday.is-today i { color: var(--iris-deep); }
.lday.is-fut { background: #fff; box-shadow: inset 0 0 0 1px #E4E5F0; } .lday.is-fut b { color: var(--faint); }
.lps-verd { font: 700 7.5px var(--sans); letter-spacing: .04em; color: var(--paid); margin: 8px 0 0; }
.lps-box { display: flex; align-items: center; border: 1px solid #E4E5F0; border-left: 3px solid var(--iris);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0 4px;
  background: #fff; }
.lps-box b { font: 700 8.5px var(--sans); color: var(--iris-deep); display: block; letter-spacing: .04em; }
.lps-box i { font: 400 8px var(--sans); color: var(--muted); font-style: normal; }
.lps-box em { margin-left: auto; font: 700 26px var(--serif); font-style: normal; }
.lps-t { width: 100%; border-collapse: collapse; }
.lps-t td { font: 400 9.5px var(--sans); padding: 3px 0; }
.lps-t td.mono { font: 400 8px var(--mono, monospace); color: var(--muted); }
.lps-t td.num { text-align: right; color: var(--ink); }
.lps-t td.is-you { color: var(--overdue); width: 90px; }
.lps-t td.is-er { color: var(--paid); width: 100px; }
.lps-t tr.tot td { border-top: 1px solid var(--line); font-weight: 700; padding-top: 5px; }
.lps-aside { background: color-mix(in srgb, var(--paid) 11%, #fff); color: var(--paid);
  font: 700 8px var(--sans); text-align: center; border-radius: 7px; padding: 6px 8px; margin: 8px 0; }
.lps-math { background: var(--paper); font: 400 9px var(--mono, monospace); text-align: center;
  border-radius: 7px; padding: 7px 8px; margin: 6px 0 0; }
.lps-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lps-year > div { border: 1px solid #E4E5F0; border-radius: 10px;
  padding: 10px 12px; background: color-mix(in srgb, var(--iris) 5%, #fff); }
.lps-year b { font: 700 6.5px var(--sans); color: var(--iris-deep); display: block; letter-spacing: .04em; }
.lps-year em { font: 700 15px var(--serif); font-style: normal; display: block; margin: 4px 0; }
.lps-year i { font: 400 7px var(--sans); color: var(--muted); font-style: normal; display: block; }
.lps-rule2 { font: 400 7.5px var(--sans); color: var(--muted); margin: 16px 0 0; }
.lps-foot { border: 0; border-top: 1px solid var(--line); margin: 12px 0 6px; }
@media (max-width: 700px) { .lps-two, .lps-year { grid-template-columns: 1fr; } .lps-frame { padding: 30px 26px; } }

/* ---- the directories: tenants on their floors, the team by role ---- */
.fgrid.fgrid2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .fgrid.fgrid2 { grid-template-columns: 1fr; } }
input.d-blank { border-color: color-mix(in srgb, #B27C20 55%, #fff); }
.who-chip { border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
  align-self: end; margin-bottom: 2px; }
.who-chip.is-amber { background: color-mix(in srgb, #B27C20 12%, #fff); }
.who-chip.is-paid { background: color-mix(in srgb, var(--paid) 11%, #fff); }
.who-chip b { font: 800 8.5px var(--sans); letter-spacing: .05em; }
.who-chip.is-amber b { color: #B27C20; }
.who-chip.is-paid b { color: var(--paid); }
.who-chip span { font: 400 7.5px var(--sans); color: var(--muted); }
.hb-hsub { font: 400 8px var(--sans); color: var(--faint); margin-left: 10px; text-transform: none; letter-spacing: 0; }

.cb-fob { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; font-size: 10px;
  display: inline-flex; vertical-align: middle; }
.hero.is-band { margin: 0 0 16px; border-radius: 16px; box-shadow: var(--lift-1); }
/* .lps-desk, .lps-back, .lps-dwho were swept at 3.202 — the desk around the
   paper is My day's head and four fields now. They also carried the last
   hand-written rose outside the Airbnb channel, on a chip that said SPECIMEN. */
/* .gres .cb-fob went with the result row at 3.214 — search wears My day's
   .md-need-fob now, which sizes itself. */
.caserow .cb-fob { flex: 0 0 28px; }
/* The waiting-state amber was a bronze from before --draft existed; it is the
   token now, and reviews.php is the only page that wears it. The BASE border
   keeps its legacy grey deliberately: pulse.php — the employee's own page, and
   not part of the 3.205.0 board — is the only place that border is ever seen,
   because every card on the pulse board carries one of the two state classes.
   The grey is open item 2 in STATUS.md and belongs to that sweep's own board. */
.pulsecard { border: 1px solid #E4E5F0; border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 4%, #fff) 0%, #fff 62%); }
.pulsecard.needs-reply { border-color: color-mix(in srgb, var(--draft) 50%, #fff); }
.pulsecard.is-replied { border-color: color-mix(in srgb, var(--paid) 38%, #fff); }
.caserow { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  border: 2px solid color-mix(in srgb, var(--iris) 18%, #fff); border-radius: 12px; padding: 11px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 5%, #fff) 0%, #fff 64%); }
.caserow:hover { border-color: var(--iris); }
.caserow .case-who { display: flex; flex-direction: column; gap: 2px; }
.caserow .case-who b { font: 700 13px var(--serif); }
.caserow .case-who i { font: 400 8.5px var(--sans); font-style: normal; color: var(--muted); }
.caserow .case-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.caserow .gates { display: flex; gap: 4px; text-decoration: none; }
.caserow .gdot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.caserow .gdot.on { background: var(--paid); }
.ckf.ck-iris dd { color: var(--iris-deep); }

.dirrows.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dirrows.two > form.frow { grid-column: 1 / -1; }
@media (max-width: 760px) { .dirrows.two { grid-template-columns: 1fr; } }
.tnt, .stf { border: 1px solid #E4E5F0; border-radius: 13px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  background: #fff; }
.tnt.has-late { border-left: 3px solid #FF385C; }
.tnt.is-off, .stf.is-off { background: var(--paper); border-color: var(--line); }
.tnt-top { display: flex; align-items: flex-start; gap: 10px; }
.tnt-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tnt-nm a { font: 700 14.5px var(--serif); color: var(--ink); text-decoration: none; }
.tnt-nm a:hover { color: var(--iris-deep); }
.tnt-nm i { font: 400 9px var(--sans); font-style: normal; color: var(--muted); overflow-wrap: anywhere; }
.tnt-money { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.tnt-money .tnt-unit { font: 800 8.5px var(--sans); letter-spacing: .06em; padding: 3px 9px;
  border-radius: 9px; background: var(--iris-tint); color: var(--iris-deep); }
.tnt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kchip { font: 800 7.5px var(--sans); letter-spacing: .05em; padding: 3px 8px; border-radius: 8px; font-style: normal; }
/* the chip grammar (3.150): solid is loud, pale is quiet */
.kchip.k-paid { background: var(--paid); color: #fff; }
.kchip.k-over { background: var(--overdue); color: #fff; }
.kchip.k-iris { background: var(--iris-tint); color: var(--iris-deep); }
.kchip.k-bronze { background: color-mix(in srgb, #B27C20 13%, #fff); color: #B27C20; }
.kchip.k-muted { background: var(--paper); color: var(--muted); }
.tnt-facts { margin: 0; font: 400 8.5px var(--sans); color: var(--muted); }
.tnt-facts.is-late { color: var(--overdue); }
.tnt-verbs { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tnt-verbs s { text-decoration: none; color: var(--faint); font-size: 8px; }
.tnt-verb { all: unset; cursor: pointer; font: 700 9px var(--sans); color: var(--muted); }
.tnt-verb:hover { color: var(--ink); }
.tnt-verb.is-danger { color: color-mix(in srgb, var(--overdue) 70%, #fff); }
.tnt-verb.is-danger:hover { color: var(--overdue); }

.dirrows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.dirrows .invrow { border: 1px solid color-mix(in srgb, var(--iris) 15%, #fff);
  border-radius: 13px; padding: 11px 14px; margin: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 5%, #fff) 0%, #fff 65%); }
.dirrows.is-nopaper .invrow { border-color: color-mix(in srgb, var(--overdue) 42%, #fff); }
.dirrows .clrow, .dirrows .acct { border: 1px solid color-mix(in srgb, var(--iris) 15%, #fff);
  border-radius: 13px; padding: 13px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 5%, #fff) 0%, #fff 65%); }
.dirrows .clrow.has-late { border-color: color-mix(in srgb, var(--overdue) 42%, #fff); }
.dirrows .clrow.is-off, .dirrows .acct.is-off { background: var(--paper); border-color: var(--line); }
.dir-off { margin: 4px 0 14px; }
.dir-off summary { cursor: pointer; font: 700 10px var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); padding: 6px 2px; }
.dir-off summary:hover { color: var(--muted); }
.dir-off[open] summary { margin-bottom: 10px; }

/* ---- housekeeping: the round, and the unit in hand ---- */
.hktrows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.hkt { position: relative; display: flex; flex-direction: column; gap: 3px; margin: 0;
  padding: 12px 14px 12px; border-radius: 12px; text-align: left; justify-content: center;
  background: #fff;
  border: 1px solid #E4E5F0; }
.hkt.is-stale { border-left: 3px solid #FF385C; }
.hkt.is-done { background: #fff; border-color: color-mix(in srgb, var(--paid) 40%, #fff); }
.hkt .iv-fob { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; font-size: 11px; }
.hkt .hkt-top { display: flex; align-items: center; gap: 8px; }
.hkt .hkt-top b { font: 700 14px var(--serif); }
.hkt .hkt-occ { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); text-decoration: none; }
.hkt .hkt-occ.is-lived { background: var(--paid); }
.hkt .hkt-sub { font: 400 8.5px var(--sans); color: var(--muted); padding-right: 84px; }
.hkt .hkt-sub.is-rose { color: #D6568A; }
.ckf.ck-rose dd { color: #D6568A; }
.hkt .q-start { position: absolute; right: 12px; top: 12px; transform: none;
  height: auto; padding: 6px 16px; background: var(--paid); background-image: none; color: #fff;
  border: 2px solid transparent; border-radius: 12px; font: 700 11px var(--sans); line-height: 1;
  box-shadow: none; }
.hkt .q-start:hover { background: color-mix(in srgb, var(--paid) 84%, #000); filter: none; }
.hkt .hkt-donechip { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 800 8px var(--sans); letter-spacing: .06em; padding: 5px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--paid) 14%, #fff); color: var(--paid); }
.run-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: var(--paper); border-radius: 11px; flex-wrap: wrap; }
.run-bar .run-pause { margin: 0; }
.run-bar .rb-back { all: unset; cursor: pointer; font: 700 10.5px var(--sans); color: var(--muted); }
.run-bar .rb-back:hover { color: var(--ink); }
.run-bar .rb-fob { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; font-size: 14px; }
.run-bar .rb-who b { display: block; font: 700 12px var(--sans); color: var(--ink); }
.run-bar .rb-who span { display: block; font: 400 9px var(--sans); color: var(--muted); margin-top: 1px; }
.run-bar .rb-depth { font: 800 8px var(--sans); letter-spacing: .05em; font-style: normal; padding: 4px 10px;
  border-radius: 9px; background: var(--iris-tint); color: var(--iris-deep); }
.run-bar .rb-meta { font: 400 9.5px var(--sans); color: var(--muted); }
.run-bar .rb-count { margin-left: auto; font: 700 10px var(--sans); color: var(--paid); }
.run-prog { margin: 10px 0 4px; }
.run-prog i { display: block; height: 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--paid) 15%, #fff); overflow: hidden; }
.run-prog i b { display: block; height: 100%; border-radius: 4px; background: var(--paid);
  transition: width .3s ease; }
.donerow .done-len { margin-left: auto; font: 700 12px var(--serif); white-space: nowrap; }
.donerow .done-what { font: 400 10.5px var(--sans); color: var(--ink); }
.rec-add { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rec-add .rec-plus { font: 700 15px var(--sans); color: var(--iris-deep); }
.rec-add input[type=text] { flex: 1; }
.rec-note { font: 400 8.5px var(--sans); color: var(--faint); margin: 10px 0 0; }

/* ---- the gate book: one timeline of the door ---- */
.gbfind { display: flex; gap: 10px; margin-bottom: 12px; }
.gbfind input[type=text] { flex: 1; }
.gbpills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gbpills .gbp-gap { width: 8px; }
.gbp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 10px; font: 800 9px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--paper); }
.gbp:hover { text-decoration: none; filter: brightness(.97); }
.gbp s { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); text-decoration: none; }
.gbp.gbp-paid { color: var(--paid); background: color-mix(in srgb, var(--paid) 10%, #fff); }
.gbp.gbp-paid s { background: var(--paid); }
.gbp.gbp-iris { color: var(--iris-deep); background: var(--iris-tint); }
.gbp.gbp-iris s { background: var(--iris-deep); }
.gbp.gbp-over { color: var(--overdue); background: var(--overdue-tint); }
.gbp.gbp-over s { background: var(--overdue); }
.gbp.gbp-bronze { color: #977133; background: color-mix(in srgb, #977133 10%, #fff); }
.gbp.gbp-bronze s { background: #977133; }
.gbp.is-on { outline: 2px solid currentColor; }
.gberows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.gbe { display: flex; align-items: center; gap: 12px; border-radius: 13px; padding: 11px 14px;
  background: #fff;
  border: 1px solid #E4E5F0; }
.gbe.is-visitor { border-color: color-mix(in srgb, var(--overdue) 42%, #fff); }
.gbe.is-taken { background: var(--paper); border: 1px solid var(--line); }
.gbe.is-taken .gbe-who > b { color: var(--faint); text-decoration: line-through; }
.gbe.is-taken .gbe-stay b { color: var(--faint); }
.gbe .gbe-face { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; display: flex; align-items: center;
  justify-content: center; font: 700 9.5px var(--sans); }
.gbe .gbe-face.f-k-paid { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 72%, #000)); }
.gbe .gbe-face.f-k-over { background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
.gbe .gbe-face.f-k-bronze { background: linear-gradient(180deg, #B27C20, color-mix(in srgb, #B27C20 72%, #000)); }
.gbe .gbe-face.gbe-veh { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; }
.gbe.is-taken .gbe-face { background: #fff; border: 1px solid #C8CCD8; color: var(--faint); }
.gbe .gbe-face svg { width: 15px; height: 15px; }
.gbe .gbe-who { flex: 1; min-width: 0; }
.gbe .gbe-who > b { font: 700 12.5px var(--serif); margin-right: 7px; }
.gbe .gbe-who > b.mono { font: 700 12px var(--mono); }
.gbe .gbe-kind { display: inline-block; font: 800 7px var(--sans); letter-spacing: .07em;
  font-style: normal; padding: 2px 7px; border-radius: 7px; vertical-align: 2px;
  background: var(--iris-tint); color: var(--iris-deep); }
.gbe .gbe-kind.k-paid { background: color-mix(in srgb, var(--paid) 12%, #fff); color: var(--paid); }
.gbe .gbe-kind.k-over { background: var(--overdue-tint); color: var(--overdue); }
.gbe .gbe-kind.k-bronze { background: color-mix(in srgb, #977133 12%, #fff); color: #977133; }
.gbe .gbe-kind.k-taken { background: var(--overdue-tint); color: var(--overdue); }
.gbe .gbe-sub { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 2px; }
.gbe .gbe-io { display: flex; align-items: center; gap: 10px; }
.gbe .gbe-t { text-align: left; min-width: 44px; }
.gbe .gbe-t b { display: block; font: 700 11px var(--mono); }
.gbe .gbe-t em { display: block; font: 800 6.5px var(--sans); letter-spacing: .1em;
  color: var(--faint); font-style: normal; margin-top: 1px; }
.gbe .gbe-t.is-x b, .gbe .gbe-t.is-x em { color: #977133; }
.gbe .gbe-arrow { color: var(--faint); font-style: normal; }
.gbe .gbe-inchip { font: 800 8px var(--sans); letter-spacing: .07em; padding: 4px 10px;
  border-radius: 9px; background: color-mix(in srgb, var(--paid) 14%, #fff); color: var(--paid); }
.gbe .gbe-stay { text-align: right; min-width: 62px; }
.gbe .gbe-stay b { display: block; font: 700 12px var(--serif); }
.gbe .gbe-stay em { display: block; font: 800 6.5px var(--sans); letter-spacing: .1em;
  color: var(--faint); font-style: normal; }
.cklens .lens.is-on { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); border-color: transparent; color: #fff; }
.cklens .lens.is-on span, .cklens .lens.is-on em, .cklens .lens.is-on b { color: #fff; }
@media (max-width: 700px) {
  .gbe { flex-wrap: wrap; }
  .gbe .gbe-io { margin-left: 42px; }
}

/* ---- the gate: the door's verbs, the boards, and the ceremony ---- */
.gcard > h2 { font: 700 17px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.gcard > h2 .count { vertical-align: 2px; }
.ck-lbl { font: 800 9px var(--sans); letter-spacing: .12em; color: var(--faint);
  text-transform: uppercase; margin: 0 0 8px; }

/* ---- the flow, dressed as the approved board ---- */
.dr .dr-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--paper); border-radius: 11px; margin-bottom: 4px; }
.dr .dr-back { font: 700 11px var(--sans); color: var(--muted); text-decoration: none; }
.dr .dr-step { margin-left: auto; font: 700 9px var(--sans); letter-spacing: .08em;
  color: var(--faint); text-transform: lowercase; }
.dr .dr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border-radius: 10px; background: var(--iris-tint); font: 800 9px var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--iris-deep); margin: 6px 6px 0 0; }
.dr .dr-chip.lg-resident, .dr .dr-chip.lg-owner { background: color-mix(in srgb, var(--paid) 12%, #fff); color: var(--paid); }
.dr .dr-chip.lg-visitor { background: var(--overdue-tint); color: var(--overdue); }
.dr .dr-chip a { font: 600 9px var(--sans); text-transform: none; letter-spacing: 0; }
.dr .dr-q { font: 700 19px var(--serif); margin: 14px 0 4px; }
.dr .dr-hint { font: 400 10.5px var(--sans); color: var(--muted); margin: 0 0 10px; }
.dr .dr-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.dr .dr-pick { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  margin: 0; width: auto; border-radius: 12px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line); border-left-width: 2px; }
.dr .dr-kinds .dr-pick:hover { box-shadow: none; transform: none; border-left-color: inherit; }
.dr .dr-pick > .dr-dot { margin-left: 0; }
.dr .dr-pick > .dr-t { padding: 0; }
.dr .dr-pick:hover { text-decoration: none; filter: brightness(.98); }
.dr .dr-pick.lg-resident   { background: color-mix(in srgb, var(--paid) 6%, #fff); border-color: color-mix(in srgb, var(--paid) 25%, #fff); }
.dr .dr-pick.lg-guest      { background: color-mix(in srgb, var(--iris) 6%, #fff); border-color: color-mix(in srgb, var(--iris) 25%, #fff); }
.dr .dr-pick.lg-visitor    { background: color-mix(in srgb, var(--overdue) 6%, #fff); border-color: color-mix(in srgb, var(--overdue) 25%, #fff); }
.dr .dr-pick.lg-contractor,
.dr .dr-pick.lg-delivery   { background: color-mix(in srgb, #977133 6%, #fff); border-color: color-mix(in srgb, #977133 25%, #fff); }
.dr .dr-pick.lg-staff      { background: color-mix(in srgb, var(--iris) 6%, #fff); border-color: color-mix(in srgb, var(--iris) 25%, #fff); }
.dr .dr-pick .dr-t b { display: block; font: 700 12.5px var(--sans); }
.dr .dr-pick .dr-t span { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 1px; }
.dr .dr-pick .dr-go { margin-left: auto; color: var(--faint); font-weight: 700; }
.dr .dr-big { display: block; width: 100%; text-align: center; border-radius: 12px;
  padding: 13px 0; font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; margin-top: 12px; }
.dr .dr-big:hover { text-decoration: none; filter: brightness(1.05); }
.dr .dr-big.dr-in { background: var(--paid); color: #fff; }
.dr .dr-big.dr-ink { background: var(--ink); color: #fff; }

/* the refined frame: progress dots and trail separators */
.dr .dr-dots { position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; }
.dr .dr-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dr .dr-dots i.on { background: var(--paid); }
.dr .dr-bar { position: relative; }
.dr .dr-chip + .dr-chip { margin-left: 20px; position: relative; }
.dr .dr-chip + .dr-chip::before { content: '\203A'; position: absolute; left: -14px; top: 3px;
  color: var(--faint); font: 700 11px var(--sans); }

/* the party: the already-in as little ceremonies */

.dr .dr-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px;
  font: 700 9.5px var(--sans); color: var(--iris-deep); }
.dr .dr-or::before, .dr .dr-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.dr .dr-or span { padding: 4px 12px; border-radius: 10px; background: var(--iris-tint); }
.dr .dr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.dr .dr-two .dr-big { margin-top: 0; }
.dr .dr-big.dr-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line);
  text-transform: none; letter-spacing: 0; font: 700 12px var(--sans); }
.dr .dr-big.dr-ghost:hover { background: var(--paper); }
.dr .dr-two .dr-in { text-transform: none; letter-spacing: 0; font: 700 12px var(--sans); }
@media (max-width: 560px) { .dr .dr-two { grid-template-columns: 1fr; } }

/* the unit step's floor headers */
.dr .dr-fh { grid-column: 1 / -1; margin: 6px 0 0; padding-bottom: 5px;
  border-bottom: 1px solid var(--line); font: 800 8.5px var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* the unit step: tiles, not rows — lived-in units in the iris light,
   empty ones honest and dashed, the building's pulse as little chips */
.dr .dr-ulist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.dr .dr-urow { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border-radius: 12px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--iris) 7%, #fff) 0%, #fff 70%);
  border: 2px solid color-mix(in srgb, var(--iris) 22%, #fff); }
.dr .dr-urow:hover { text-decoration: none; filter: brightness(.98); }
/* THE NAMES WERE INVISIBLE (3.236.1). .dr-uleft carries `flex: 1` from the
   row-shaped list two thousand lines up; here the tile is `flex-direction:
   column`, so that `1 1 0%` is a HEIGHT of zero — and its own `overflow:
   hidden` clipped the unit's name and its occupant out of existence. Every
   unit on step 2 was a blank pill with a chevron. In a column the item must
   take its content's height. */
.dr .dr-uleft { flex: 0 0 auto; min-width: 0; }
.dr .dr-urow b { font: 700 15px var(--serif); }
.dr .dr-urow .dr-uwho { font: 400 10px var(--sans); color: var(--muted); }
.dr .dr-urow.is-empty { background: var(--paper); border: 2px dashed var(--line); }
.dr .dr-urow.is-empty b { color: var(--muted); }
.dr .dr-urow.is-empty .dr-uwho { color: var(--faint); font-style: italic; }
.dr .dr-urow .dr-umeta { display: flex; gap: 6px; margin-top: 3px; }
.dr .dr-umeta i { display: inline-flex; align-items: center; gap: 4px; font: 800 8.5px var(--sans);
  font-style: normal; padding: 2px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--paid) 12%, #fff); color: var(--paid); }
.dr .dr-umeta i s { width: 6px; height: 6px; border-radius: 50%; background: var(--paid); text-decoration: none; }
.dr .dr-umeta i.um-car { background: var(--iris-tint); color: var(--iris-deep); }
.dr .dr-umeta i.um-car s { background: var(--iris-deep); }
.dr .dr-urow.dr-nounit { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px;
  background: var(--paper); border: 2px solid var(--line); }
@media (max-width: 560px) { .dr .dr-ulist { grid-template-columns: 1fr; } }


h2 .dg-sub { font: 400 10.5px var(--sans); color: var(--muted); margin-left: 10px;
  letter-spacing: 0; text-transform: none; }
.dvb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.gprows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr));
  gap: 12px; margin-bottom: 16px; }
.gprows .gpc { border-radius: 13px; padding: 12px 14px;
  background: #fff;
  border: 1px solid #E4E5F0; }
.iv-fob.is-gin { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 72%, #000));
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 10px; }
.gpc .iv-fob { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 10px; }
.gprows .gpc.is-visitor { border-color: color-mix(in srgb, var(--overdue) 42%, #fff); }
.gpc .gpc-top { display: flex; align-items: flex-start; gap: 7px; }
.gpc .gpc-name { font: 700 14.5px var(--serif); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpc .gpc-plate { font-weight: 700; font-size: 14px; }
.gpc .gpc-party { font: 800 10px var(--sans); color: var(--iris-deep); font-style: normal; margin-top: 3px; }
.gpc .gpc-in { margin-left: auto; text-align: right; }
.gpc .gpc-in b { display: block; font: 700 12px var(--sans); }
.gpc .gpc-in em { display: block; font: 800 6.5px var(--sans); letter-spacing: .12em;
  color: var(--faint); font-style: normal; }
.gpc .gpc-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.gpc .gpc-line { font: 400 10px var(--sans); color: var(--muted); }

/* the ceremony: the halo, the name, the stamp */
.dr-done .dr-tick { width: 54px; height: 54px; margin: 10px auto 0; border-radius: 50%;
  background: var(--paid); color: #fff; font: 700 24px/54px var(--sans); text-align: center;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--paid) 22%, #fff),
              0 0 0 19px color-mix(in srgb, var(--paid) 10%, #fff);
  animation: dr-halo .45s ease-out; }
@keyframes dr-halo {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--paid) 22%, #fff),
                     0 0 0 0 color-mix(in srgb, var(--paid) 10%, #fff); }
}
.dr-done.out .dr-tick { background: #4A5768;
  box-shadow: 0 0 0 9px color-mix(in srgb, #4A5768 20%, #fff),
              0 0 0 19px color-mix(in srgb, #4A5768 9%, #fff); }
.dr-done h1 { font: 700 24px var(--serif); text-align: center; margin: 22px 0 2px; }
.dr-done .dr-verdict { text-align: center; font: 800 11px var(--sans); letter-spacing: .28em;
  color: var(--paid); margin: 0 0 4px; }
.dr-done.out .dr-verdict { color: #4A5768; }
.dr-stamp { display: flex; gap: 0; max-width: 430px; margin: 16px auto 6px;
  border: 2px solid color-mix(in srgb, var(--paid) 45%, #fff); border-radius: 13px;
  background: #FCFDFC; overflow: hidden; text-align: left; }
.dr-done.out .dr-stamp { border-color: color-mix(in srgb, #4A5768 40%, #fff); }
.dr-stamp .ds-stub { flex: 0 0 104px; padding: 14px 10px; text-align: center;
  border-right: 2px dashed color-mix(in srgb, var(--paid) 40%, #fff); }
.dr-done.out .dr-stamp .ds-stub { border-right-color: color-mix(in srgb, #4A5768 35%, #fff); }
.dr-stamp .ds-stub b { display: block; font: 700 22px var(--serif); }
.dr-stamp .ds-stub em { display: block; font: 800 7px var(--sans); letter-spacing: .08em;
  color: var(--faint); font-style: normal; margin-top: 4px; }
.dr-stamp .ds-stub i { display: block; font: 800 6.5px var(--sans); letter-spacing: .14em;
  color: color-mix(in srgb, var(--paid) 70%, #fff); font-style: normal; margin-top: 10px; }
.dr-stamp .ds-body { flex: 1; min-width: 0; padding: 12px 14px; }
.dr-stamp .ds-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-stamp .ds-line { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 7px; }

/* ---- the P&L unit board (3.186): the day's card, two doors to a row ----
   The card kept everything it had — fob, tenant, net, the in-and-out bars, the
   key chips and the six-month beat. It grew a channel tag and a size you can
   read across a desk. */
.plrows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.plrows .plc { border-radius: 20px; padding: 18px 22px 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-left-width: 5px; border-left-color: var(--line);
  box-shadow: var(--lift-1); }
.plrows .plc.is-black { border-left-color: color-mix(in srgb, var(--paid) 55%, #fff); }
.plrows .plc.is-bleed { border-left-color: var(--overdue); }
.plrows .plc.is-quiet { border-left-color: var(--line); }
.plc .plc-top { display: flex; align-items: center; gap: 14px; }
.plc .iv-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; font-size: 17px; }
.plc .plc-ten { flex: 1; min-width: 0; }
.plc .plc-ten b { display: block; font: 700 15.5px var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plc-tag { display: inline-block; margin-top: 4px; border-radius: 6px; padding: 3px 7px;
  font: 800 9.5px var(--sans); letter-spacing: .12em; font-style: normal;
  background: var(--soft); color: var(--muted); }
.plc-tag.is-airbnb { background: color-mix(in srgb, #FF385C 10%, #fff);
  color: color-mix(in srgb, #FF385C 72%, #000); }
.plc-tag.is-empty { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.plc .plc-net { text-align: right; }
.plc .plc-net b { display: block; font: 700 21px var(--serif); }
.plc .plc-net em { display: block; font: 800 10px var(--sans); letter-spacing: .12em; color: var(--muted); font-style: normal; }
.plc .plc-net.ok b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.plc .plc-net.bad b { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.plc .plc-six { display: flex; align-items: flex-end; gap: 18px; margin-top: 15px;
  padding-top: 13px; border-top: 1px solid var(--line); }
.plc .plc-six .six-ms { gap: 9px; max-width: 340px; }
.plc .plc-six .six-ms i { flex-direction: column; height: auto; gap: 4px; max-width: 22px; }
.plc .plc-six .six-ms i s { height: auto; }
.plc .plc-six .six-ms i u { text-decoration: none; font: 700 9.5px var(--sans); color: var(--muted); }
.plc .plc-sixtot { margin-left: auto; text-align: right; }
.plc .plc-sixtot b { display: block; font: 700 14px var(--serif); }
.plc .plc-sixtot em { display: block; font: 800 9.5px var(--sans); letter-spacing: .11em; color: var(--muted); font-style: normal; }
.plc .plc-sixtot.ok b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.plc .plc-sixtot.bad b { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-quiet-w { font: 400 12px var(--sans); color: var(--muted); margin: 13px 0 0; }
/* the all-units band, as the approved board drew it: one spread line —
   the name left, the five keys distributed across the middle, take-home right */
.purow.is-total { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "who keys net"; column-gap: 26px; align-items: center; }
.purow.is-total .pu-who { grid-area: who; flex: none; }
.purow.is-total .pu-net { grid-area: net; flex: none; }
.purow.is-total .pu-mix { grid-area: keys; flex: none; min-width: 0; }
@media (max-width: 700px) {
  .purow.is-total { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who net" "keys keys"; row-gap: 8px; }
}

.plquiet { margin-top: 14px; padding: 13px 20px; border-radius: 16px; background: var(--soft); }
.plquiet summary { cursor: pointer; font: 600 12.5px var(--sans); color: var(--muted); }
.plquiet p { margin: 8px 0 0; font-size: 12px; }

/* ---- the money-out form, in My Day's language (3.213) ----
   Three pages type into these fields — the cash box, Expenses, and the
   invoice desk's dates — so the grammar is one and it is My Day's: a KEY in
   grey capitals over a hairline, a label in ink sitting on its control, a
   hint in grey underneath. The step numbers stay, because they are the only
   thing on the form that says how far there is left to go. The folded
   <details> rules that lived here went with the fold itself in 3.175.1. */
.x3s { display: flex; align-items: center; gap: 11px; margin: 26px 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.x3s i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 8px;
  background: var(--iris-tint); color: var(--iris-deep);
  font: 800 11px/22px var(--sans); text-align: center; font-style: normal; }
.x3s b { font: 800 11px var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); }
.x3f { min-width: 0; }
.x3f + .x3f, .x3f + .x3g, .x3g + .x3f, .x3g + .x3g { margin-top: 12px; }
/* The invoice desk types four narrow fields into one .x3g row and cannot
   afford the day's 26px column gutter — it wraps its own labels. The roomier
   rhythm belongs to the money-out form, so it is scoped to that panel. */
.x3g { display: grid; gap: 14px; align-items: start; }
.xp-rec .x3f + .x3f, .xp-rec .x3f + .x3g,
.xp-rec .x3g + .x3f, .xp-rec .x3g + .x3g { margin-top: 18px; }
.xp-rec .x3g { gap: 18px 26px; }
.x3g2 { grid-template-columns: 1fr 1fr; }
.x3g3 { grid-template-columns: 1fr 1fr 1fr; }
/* Inside a grid pair the columns are siblings, and the row-spacing rules
   above would stagger every column but the first by their own margin — a
   paired row must split level (DESIGN.md). The reset carries the scoped
   selector's weight as well as the plain one, or it loses to it. */
.x3g > .x3f, .xp-rec .x3g > .x3f { margin-top: 0; }
/* the label sits ON its control. The global label rule carries a 13px hat
   written for a page of stacked questions; a form of fields wants none. */
.x3f > label { display: block; font: 700 12.5px var(--sans); color: var(--ink); margin: 0 0 7px; }
.x3f .x3-hint { display: block; font: 400 9.5px var(--sans); color: var(--faint); margin-top: 5px; }
/* the day reads its hints at 11.5px. The invoice desk keeps 9.5, because its
   hint sits under a 90px column and the bigger type wraps it to three lines. */
.xp-rec .x3f .x3-hint { font-size: 11.5px; margin-top: 7px; }
.x3-until.is-asleep label { color: var(--faint); }
.x3-until.is-asleep input { border: 2px dashed var(--line); background: transparent; color: var(--faint); }

/* ---- the paper: two roads to it (3.194, owner board B) ----
   The section opens with the choice — photograph it or type it — and the
   typing stays open underneath. Every colour here is one of the eight or a
   mix of them; nothing new entered the theme. */
.x3s-note { margin-left: auto; font: 800 10.5px var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); font-style: normal; }
.x3doors { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-top: 14px;
  align-items: stretch; }
.x3d { display: flex; gap: 16px; border-radius: 18px; padding: 22px 24px; min-width: 0; }
/* the wide door is a <label>, and the global label rule would hand it a
   13px hat (see 3.168.1) — the container owns the spacing, the door owns none */
.x3d-snap { margin: 0; cursor: pointer; align-items: flex-start;
  background: linear-gradient(135deg, var(--iris-tint), color-mix(in srgb, var(--sky) 7%, #fff));
  border: 2px dashed color-mix(in srgb, var(--iris) 30%, #fff);
  transition: border-color .14s, box-shadow .14s; }
.x3d-snap:hover, .x3d-snap.is-over { border-color: var(--iris); box-shadow: var(--lift-1); }
.x3d-snap.is-over { background: linear-gradient(135deg, color-mix(in srgb, var(--iris) 13%, #fff),
  color-mix(in srgb, var(--sky) 11%, #fff)); }
.x3d-snap input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.x3d-mark { flex: 0 0 42px; width: 42px; height: 42px; color: var(--iris); display: block; }
.x3d-mark svg { width: 42px; height: 42px; display: block; }
.x3d-tx { min-width: 0; }
.x3d-tx b { display: block; font: 700 17px var(--sans); color: var(--iris-deep); }
.x3d-tx em { display: block; font: 400 12px/1.5 var(--sans); font-style: normal;
  color: var(--muted); margin-top: 4px; }
.x3d-tx i { display: block; font: 400 10.5px/1.5 var(--sans); font-style: normal;
  color: var(--faint); margin-top: 10px; }
.x3d-type { flex-direction: column; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.x3d-hd { display: flex; gap: 14px; align-items: flex-start; }
.x3d-hd .x3d-tx b { font-size: 15px; color: var(--ink); }
.x3d-lines { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--soft);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.x3d-lines i { display: block; height: 2.5px; border-radius: 2px; background: var(--muted); }
.x3d-lines i:nth-child(1) { width: 16px; }
.x3d-lines i:nth-child(2) { width: 12px; }
.x3d-lines i:nth-child(3) { width: 8px; }
.x3d-foot { font: 400 10.5px/1.5 var(--sans); color: var(--faint); }
.x3d-ns { margin: 12px 0 0; }

/* the typing, always open — a soft sheet with the brand down its edge */
.x3typed { margin-top: 16px; padding: 20px 24px 24px; border-radius: 18px;
  background: var(--soft); border-left: 4px solid var(--iris); }
.x3t-lbl { margin: 0 0 4px; font: 800 11px var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--iris-deep); }
.x3typed input, .x3typed select { background: var(--surface); }
.x3typed > .x3f:first-of-type { margin-top: 14px; }

/* VAT stops being a dropdown and wears the segment the Unit row wears.
   Every chip is a <label>: it must zero the global 13px margin, as .xum does. */
.vseg.x3vat { margin: 0; flex-wrap: wrap; }
.vseg.x3vat label { margin: 0; }
.vseg.x3vat span { height: var(--ctl-h); padding: 0 15px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); }
.vseg.x3vat input:checked + span { border-color: transparent; }

/* the verb's strip: it reads the form back before you press it */
.x3-foot { display: flex; align-items: center; gap: 18px; margin-top: 24px;
  padding: 18px 24px; border-radius: 18px; background: var(--iris-tint);
  border-left: 4px solid var(--iris); }
.x3-say { min-width: 0; }
.x3-say em { display: block; font: 800 11px var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--iris-deep); font-style: normal; }
.x3-say b { font: 600 24px var(--serif); color: var(--iris-deep); letter-spacing: -.01em; }
.x3-say span { font: 500 12.5px var(--sans); color: var(--muted); margin-left: 10px; }
.x3-say i { display: block; font: 500 11px var(--sans); font-style: normal;
  color: var(--faint); margin-top: 4px; }
.x3-foot button { margin-left: auto; flex: 0 0 auto; }
.x3-snapform { margin: 0; }
@media (max-width: 760px) {
  .x3doors { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .x3g2, .x3g3 { grid-template-columns: 1fr; }
  .x3-foot { flex-wrap: wrap; }
  .x3-foot button { margin-left: 0; width: 100%; }
}

/* ---- the invoice board: a card per invoice, grouped by floor ---- */
.iv-float { border: 0; }
.ivf-h { display: flex; align-items: baseline; justify-content: space-between;
  margin: 6px 2px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ivf-h em { font: 800 10px var(--sans); letter-spacing: .1em; color: var(--faint);
  font-style: normal; text-transform: uppercase; }
.ivf-h span { font: 400 10.5px var(--sans); color: var(--faint); }
/* THE BOOK'S ROWS (3.192, owner board): one invoice, one line. The floor
   heading still gathers them; inside it every row says who, then the paper —
   number, reference, where it stands, what the tenant has done about it —
   then the verbs, then the money, right-aligned so the column reads down. */
.ivboard { display: flex; flex-direction: column; margin-bottom: 20px; overflow: hidden;
  background: var(--surface); border-radius: 16px; box-shadow: var(--lift-1);
  border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.ivboard .ivc { display: flex; align-items: center; gap: 14px; padding: 13px 18px 13px 21px;
  position: relative; }
.ivboard .ivc + .ivc { border-top: 1px solid var(--line); }
/* the state as a stripe down the left edge — the same four colours the
   composition bar and the dots wear, so one glance carries across the page */
.ivboard .ivc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--iris); }
.ivboard .ivc.is-paid::before { background: var(--paid); }
.ivboard .ivc.is-draft::before { background: var(--draft); }
.ivboard .ivc.is-overdue::before { background: var(--overdue); }
.ivboard .ivc.is-void::before { background: var(--line); }
.ivboard .ivc:hover { background: var(--paper); }
.ivc .ivc-top { display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--ink); flex: 1 1 auto; min-width: 0; }
.ivc .ivc-top:hover { text-decoration: none; }
.iv-fob { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font: 700 12px var(--serif); font-style: normal;
  color: #fff; background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
h2 .iv-fob { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; font-size: 13px;
  vertical-align: middle; margin-right: 6px; }
/* a heading that carries a fob becomes a flex row (3.160): the box and the
   words share one centreline instead of negotiating baselines — the + of
   "Record an expense" sits exactly level with its title, everywhere */
h2:has(> .iv-fob) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h2:has(> .iv-fob) .iv-fob { margin-right: 0; }
/* the + is DRAWN, not typed (3.167.1): two centred bars — no font metric
   in any browser can ever push it off the middle of its box again */
.iv-fob.iv-plus { font-size: 0; position: relative; }
.iv-fob.iv-plus::before, .iv-fob.iv-plus::after { content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%); background: currentColor; border-radius: 1px; }
.iv-fob.iv-plus::before { width: 11px; height: 2px; }
.iv-fob.iv-plus::after { width: 2px; height: 11px; }
.iv-fob.iv-plus { color: #fff; }
.iv-fob.is-gen { background: #EDF0F5; color: var(--muted); }
/* the expense shelves (3.138): the ledger's rows in the book's clothes */
/* one expense, many units (3.156): the door grid */
.xudoors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px,100%), 1fr)); gap: 8px; margin-top: 6px; }
.xudoor input { position: absolute; opacity: 0; pointer-events: none; }
.xudoor span { display: flex; align-items: center; gap: 8px; border: 1px solid #E4E5F0; border-radius: 11px;
  padding: 7px 10px; background: #fff; cursor: pointer; }
.xudoor .iv-fob { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 10px; }
.xudoor b { font: 700 10.5px var(--sans); color: var(--ink); }
.xudoor .xud-amt { margin-left: auto; font: 400 8.5px var(--sans); color: var(--faint); font-style: normal; }
.xudoor input:checked + span { border-color: var(--paid); background: color-mix(in srgb, var(--paid) 5%, #fff); }
.xudoor input:checked + span .iv-fob { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 72%, #000)); }
.xudoor input:checked + span .xud-amt { color: var(--paid); font-weight: 700; }
/* the unit modes stand level with the Type field (3.167, owner screenshot):
   no stray top margin, chips exactly control-height, never two lines */
.vseg.xum { margin: 0 0 12px; }
/* the real culprit (3.168.1): every chip IS a <label>, and the global label
   rule hands each one margin 13px 0 4px — the whole row rode 13px low.
   The chips own no outer margin; the container does the spacing. */
.vseg.xum label { margin: 0; }
.vseg.xum span { height: var(--ctl-h); padding: 0 13px; white-space: nowrap; }

/* the Drive hand-verb in the Expenses rail (3.167) */
.ckdrive { margin: 12px 0 0; display: flex; flex-direction: column; gap: 5px; }
.ckdrive button { width: 100%; }
.ckdrive span { font: 400 10px var(--sans); color: var(--muted); text-align: center; }

.xum-verbs { margin: 8px 0 0; font: 700 9.5px var(--sans); }
.xum-verbs a { color: var(--iris-deep); cursor: pointer; }
.xum-sum { margin: 8px 0 0; background: var(--iris-tint); color: var(--iris-deep);
  border-radius: 10px; padding: 8px 12px; font: 400 10.5px var(--sans); }
.xum-sum b { font: 700 11.5px var(--sans); }
.xrows { display: flex; flex-direction: column; gap: 8px; }
.xrow { display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--iris) 3%, #fff); border-radius: 12px; padding: 10px 12px; }
.xrow-tx { flex: 1; min-width: 0; }
.xrow-tx > b { font: 700 12.5px var(--sans); }
.xrow-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px;
  font: 400 10px var(--sans); color: var(--muted); }
.x-chip { font: 800 8px var(--sans); letter-spacing: .05em; text-transform: uppercase;
  font-style: normal; background: var(--iris-tint); color: var(--iris-deep);
  padding: 2px 8px; border-radius: 6px; }
.xrow-amt { font: 700 13.5px var(--serif); font-style: normal; white-space: nowrap; }
.xrow-del { display: inline; }
.xrow-total { display: flex; justify-content: flex-end; gap: 14px; padding: 8px 12px 0;
  font: 700 11px var(--sans); color: var(--muted); }
.xrow-total em { font: 700 13.5px var(--serif); font-style: normal; color: var(--ink); }
@media (max-width: 640px) { .xrow { flex-wrap: wrap; } .xrow-amt { margin-left: auto; } }
.ivc .ivc-unit { font: 700 17px var(--serif); white-space: nowrap; }
.ivc .ivc-face { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--iris-tint); color: var(--iris-deep); display: inline-flex;
  align-items: center; justify-content: center; font: 800 8.5px var(--sans); font-style: normal; margin-top: 1px; }
.ivc .ivc-who { flex: 1; min-width: 0; }
.ivc .ivc-who > b { display: block; font: 700 13.5px var(--sans); }
.ivc .ivc-prov { font: 400 11px var(--sans); color: color-mix(in srgb, var(--ink) 55%, #fff); }
.ivc .ivc-amt { font: 700 17px var(--serif); font-style: normal; white-space: nowrap;
  flex: 0 0 132px; width: 132px; text-align: right; text-decoration: none; color: var(--ink); }
.ivc.is-overdue .ivc-amt { color: var(--overdue); }
/* the paper, as chips: number, reference, where it stands, when it was due */
.ivc .ivc-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.ivt { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 7px;
  font: 700 11px var(--sans); letter-spacing: .02em; background: var(--soft); color: var(--muted); }
.ivt.is-no { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.ivt.is-due { background: none; padding: 3px 0; color: var(--muted); font-weight: 500; }
.ivc.is-late .ivc-amt { color: var(--overdue); }
/* the settled line: what a paid invoice has left to say, said once. It rides
   the meta line's own grammar, and keeps the green the status chip carried. */
.ivc b.st-late, .ivc b.st-draft, .ivc b.st-sent, .ivc b.st-paid { display: inline-block;
  padding: 3px 9px; border-radius: 8px; font: 800 11px var(--sans); letter-spacing: .04em; }
.ivc b.st-late { background: var(--overdue); color: #fff; }
.ivc b.st-draft { background: var(--draft-tint); color: #B27C20; }
.ivc b.st-sent { background: var(--iris-tint); color: var(--iris-deep); }
.ivc b.st-paid { background: var(--paid); color: #fff; }
.ivc .st-late { color: var(--overdue); }
.ivc .st-draft { color: #B27C20; }
.ivc .st-sent { color: var(--iris); }
.ivc .st-paid { color: var(--paid); }
.ivc .st-void { color: var(--faint); }
.ivc .ivc-verbs { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; }

/* the finder: one box that reaches any invoice in the book */
.invfind { display: flex; align-items: center; gap: 9px; flex: 1 1 210px; min-width: 180px; }
.invfind input { width: 100%; font: 400 12px var(--sans); padding: 8px 13px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.invfind input::placeholder { color: var(--faint); }
.invfind input:focus { outline: none; border-color: var(--iris); }
.invfind-x { flex: 0 0 auto; font: 600 11px var(--sans); color: var(--muted); }
.invfind-x:hover { color: var(--iris-deep); text-decoration: none; }

/* ---- the cockpit family: every page's rail speaks the same grammar ---- */
.ckf .ckf-sub { display: block; font: 400 10.5px var(--sans); color: var(--muted); margin-top: 3px; }
.ckf dd.ck-over { color: var(--overdue); }
.ckf dd.ck-paid { color: var(--paid); }
.ckf dd.ck-iris { color: var(--iris); }
.ckfacts .ckf dd { font: 700 17px var(--serif); }
.ckwarn { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--overdue) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--overdue) 38%, #fff); }
.ckwarn b { display: block; font: 800 10px var(--sans); letter-spacing: .08em; color: var(--overdue); }
.ckwarn span { display: block; font: 400 11px var(--sans); color: var(--ink); margin-top: 4px; }

.ckcomp { display: flex; flex-direction: column; gap: 9px; }
.ckcomp-r i { display: block; height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--iris) 45%, #fff); }
.ckcomp-r:nth-child(2) i { background: color-mix(in srgb, var(--bronze, #b08d57) 55%, #fff); }
.ckcomp-r:nth-child(3) i { background: color-mix(in srgb, var(--paid) 45%, #fff); }
.ckcomp-r span { font: 400 10.5px var(--sans); color: var(--muted); }

.cklens-h { font: 800 9px var(--sans); letter-spacing: .13em; color: var(--faint);
  text-transform: uppercase; margin: 14px 0 6px; }
.cklens { display: flex; flex-direction: column; gap: 6px; }
.cklens .lens { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 11px;
  background: var(--soft); text-decoration: none; color: var(--ink); }
.cklens .lens:hover { background: #EDF1F7; text-decoration: none; }
.cklens .lens b { font: 700 12px var(--sans); }
.cklens .lens span { font: 400 10.5px var(--sans); color: var(--muted); }
.cklens .lens.on { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; }
.cklens .lens.on b, .cklens .lens.on span { color: #fff; }
.cklens .lens.has-work { background: var(--overdue-tint); }
.cklens .lens.has-work b { color: var(--overdue); }
/* the drive map (3.169): which folder takes which paper */
.ckmap { display: flex; flex-direction: column; gap: 10px; }
.ckmap-r { display: flex; align-items: flex-start; gap: 10px; }
.ckmap-r .iv-fob { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 10px; }
.ckmap-r b { display: block; font: 600 12px var(--sans); }
.ckmap-r em { display: block; font: 400 10px var(--sans); color: var(--muted); font-style: normal; margin-top: 1px; }

.ckchase { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.ckchase button { width: 100%; border-radius: 12px; }
.ckchase span { font: 400 9.5px var(--sans); color: var(--faint); text-align: center; }
.ckfindbar { margin: 0; }
/* ---- the client cockpit (design C): identity rail left, work right ---- */
.ckpit { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.ckrail { position: sticky; top: 84px; padding: 26px 24px; }
.ckchips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.ckfacts { margin: 0; border-top: 1px solid var(--line); }
/* My day's four figures stand two by two: same numbers, half the height, so
   the attention rows above them clear the fold on a laptop. Scoped, because
   every other cockpit rail reads better as a single column. */
.ckfacts.is-pairs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.ckfacts.is-pairs .ckf:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.ckfacts.is-pairs .ckf:last-child { border-bottom: 0; }
.ckf { display: block; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.ckf dt { font: 800 9px var(--sans); letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.ckf dd { margin: 4px 0 0; font: 600 13px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ck-warn { color: var(--overdue); }
.ckf .ck-lines .ck-line { display: block; font: 600 12px var(--sans); line-height: 1.5; }
/* the rail ledger (3.136): each fact wears its colour dot; the run card floats; the ticks fold */
.is-herocard .ckf { position: relative; padding-left: 14px; }
.is-herocard .ckf::before { content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.is-herocard .ckf.has-ck-paid::before { background: var(--paid); }
.is-herocard .ckf.has-ck-iris::before { background: var(--iris); }
.is-herocard .ckf.has-ck-over::before { background: var(--overdue); }
.is-herocard .ckf.ck-paid::before { background: var(--paid); }
.is-herocard .ckf.ck-amber::before { background: #B27C20; }
.is-herocard .ckf.ck-iris::before { background: var(--iris); }
.is-herocard .ckf.ck-over::before { background: var(--overdue); }
.ckrun { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px;
  padding: 8px 10px; margin-top: 14px; box-shadow: var(--lift-1); }
.ckrun-fob { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font: 700 12px var(--serif); font-style: normal;
  color: #fff; background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
.ckrun-tx b { display: block; font: 800 8.5px var(--sans); letter-spacing: .06em; color: var(--ink); }
.ckrun-tx > span { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 1px; }
.ckquiet { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.9);
  border-radius: 10px; padding: 6px 10px; margin: 14px 0 0; font: 700 9px var(--sans); color: var(--ink); }
.ckquiet i { width: 8px; height: 8px; border-radius: 50%; background: var(--paid); flex: 0 0 8px; }
.ckverbs { margin: 14px 0 0; font-size: 12.5px; }
.ckwork { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ckwork > .card { margin: 0; }
.ckstats { display: flex; gap: 26px; flex-wrap: wrap; padding: 20px 24px; }
/* the four answers as the iris band (3.154) */
.ckstats.is-band { background: linear-gradient(180deg, var(--iris), var(--iris-deep));
  border: 0; box-shadow: var(--lift-1); }
.ckstats.is-band .ckstat em { color: rgba(255,255,255,.65); }
.ckstats.is-band .ckstat b, .ckstats.is-band .ckstat b.ck-iris { color: #fff; }
.ckstats.is-band .ckstat b.ck-paid { color: #BEF0DC; }
.ckstats.is-band .ckstat b.ck-over { color: #FFC8D4; }
.ckstats.is-band .ckstat span { color: rgba(255,255,255,.72); }
/* the identity row inside a hero */
.hero-idrow { display: flex; align-items: center; gap: 12px; }
.hero-idrow .rb-fob { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; font-size: 15px; }
.hero-idtx { min-width: 0; }
.hero-idtx .hero-who { margin: 0; }
.hero-idtx .hero-date { margin: 2px 0 0; }
.iv-fob.is-ctrf { background: linear-gradient(180deg, #B27C20, color-mix(in srgb, #B27C20 72%, #000)); }
.ckstat { flex: 1 1 150px; min-width: 150px; }
.ckstat em { display: block; font: 800 9px var(--sans); letter-spacing: .13em; color: var(--faint); font-style: normal; }
.ckstat b { display: block; font: 700 22px var(--serif); color: var(--ink); margin-top: 5px; line-height: 1.1; }
.ckstat span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 4px; }
.ckstat .ck-iris, .ckstat b.ck-iris { color: var(--iris); }
.ckstat b.ck-paid { color: var(--paid); }
.ckstat b.ck-over { color: var(--overdue); }
.ckrows { display: flex; flex-direction: column; }
.ckrow { display: grid; grid-template-columns: 150px minmax(0,1fr) auto 120px; gap: 12px; align-items: center;
  padding: 10px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.ckrow:hover { background: color-mix(in srgb, var(--iris) 4%, #fff); }
.ckrow .ckr-n { font-size: 12.5px; color: var(--iris); }
.ckrow .ckr-d { font: 400 12px var(--sans); color: var(--muted); }
.ckrow .ckr-a { font: 700 13.5px var(--sans); text-align: right; }
.ckrow.is-void { opacity: .62; }
.ckroom { margin-top: 8px; }
.ckroom > summary { cursor: pointer; font-size: 12px; color: var(--faint); list-style: none; padding: 6px 2px; }
.ckroom > summary::-webkit-details-marker { display: none; }
.ckroom > summary::before { content: '\203A '; }
@media (max-width: 1080px) {
  .ckpit { grid-template-columns: 1fr; }
  .ckrail { position: static; }
}

/* feedback awaiting a reader: the two quiet verbs beside an unread row */
.fbacts { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; }
.fbacts .inlineform { display: inline; }

/* the WhatsApp people on the tenant's contact card: green chips in a row */
.ptcwas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* the crowned facts: rent large in the brand voice, the smaller facts in one
   even row beneath a hairline — tenancy card design B, in the mockup's own
   geometry: the third grid lane, hairlined off from the status and the ring.
   Two-class selectors throughout: the later shorthands must never win. */
.pth-facts.pth-crowned { grid-column: 3; align-self: stretch; display: flex;
  flex-direction: column; justify-content: center; gap: 0;
  border-left: 1px solid var(--line); padding-left: 30px; }
.pth-facts.pth-crowned .ptf-rent { width: 100%; text-align: center;
  padding: 2px 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.pth-facts.pth-crowned .ptf-rent em { display: block; font: 800 9px var(--sans);
  letter-spacing: .13em; color: var(--faint); font-style: normal; }
.pth-facts.pth-crowned .ptf-rent b { display: block; font: 700 38px var(--serif);
  color: var(--iris); margin-top: 6px; line-height: 1.1; }
.pth-facts.pth-crowned .ptf-rent span { display: block; font: 400 11px var(--sans);
  color: var(--muted); margin-top: 5px; }
.pth-facts.pth-crowned .ptf-row { display: flex; gap: 14px; justify-content: space-evenly; flex-wrap: wrap; }
.pth-facts.pth-crowned .ptf-row .ptf { flex: 1 1 0; min-width: 96px; text-align: center; }
.pth-facts.pth-crowned .ptf-row .ptf b { font: 700 15px var(--sans); }

/* the folded document: one line closed, the whole book on one click */
.hbfold { margin: 6px 0 0; }
.hbfold > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--iris);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; list-style: none; user-select: none; }
.hbfold > summary::-webkit-details-marker { display: none; }
.hbfold > summary::before { content: '\203A'; display: inline-block; margin-right: 8px; transition: transform .15s; }
.hbfold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hbfold[open] > summary::before { transform: rotate(90deg); }
.hbfold[open] > .cdoc, .hbfold[open] > .hbdoc { border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 14px 16px; }

/* a count riding inside a button keeps its distance from the word */
.btn .count { margin-left: 7px; }

/* can this tenant's record produce a complete lease? said before generating */
.ag-ready { font-size: 12.5px; color: var(--paid); margin: 10px 0 0; }
.ag-notready { font-size: 12.5px; color: var(--overdue); margin: 10px 0 0; }

/* the vault row: one bottom line for the field and all three buttons */
.vaultrow { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.vaultjoin { margin: 0; display: flex; gap: 8px; align-items: flex-end; }

/* a mirror night that failed says so in the overdue voice, right on the card */
.mirtrouble { color: var(--overdue); font-weight: 600; }

/* pass-through lines on the invoice editor: the cost field and the bill picker stay small */
.in-cost { width: 128px; height: 30px; font: 400 11.5px var(--sans); padding: 0 9px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.in-cost::placeholder { color: var(--faint); }
.in-bill { width: 168px; height: 30px; font: 400 10.5px var(--sans); color: var(--muted); }

/* the cancelled ones: one grey line on the working book, a plain head in the record room */
.voidline { text-align: right; margin: 8px 3px 0; font: 600 11px var(--sans); }
.voidline a { color: var(--muted); text-decoration: none; }
.voidline a:hover { color: var(--iris-deep); }
.recordhead b { display: block; font: 600 16px var(--serif); }
.recordhead span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 3px; }

/* ---- Clients: a tenant, not a table row ---- */
.cl-who { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.cl-face { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  background: var(--iris-tint); color: var(--iris-deep); display: flex;
  align-items: center; justify-content: center; font: 800 12px var(--sans); }
.cl-nm { min-width: 0; }
.clrow.has-late .cl-face { background: var(--overdue-tint); color: var(--overdue); }
/* the face fobs (3.150): gradient plates — clients green, staff iris, contractors bronze */
.tnt .cl-face { background: linear-gradient(180deg, var(--paid), color-mix(in srgb, var(--paid) 72%, #000)); color: #fff; }
.stf .cl-face { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; }
.stf.is-ctr .cl-face { background: linear-gradient(180deg, #B27C20, color-mix(in srgb, #B27C20 72%, #000)); color: #fff; }
.tnt.is-off .cl-face, .stf.is-off .cl-face { background: #EDF0F5; color: var(--muted); }
.cl-fact b.is-good { color: var(--paid); }
.cl-fact b.is-soon { color: #B0741A; }
.cl-unit b { font: 600 15px var(--serif); }

/* ---- The logbook: the shape of a month before its entries ---- */
/* .hero bleeds -24px to sit under the padding of the card that holds it.
   This one IS the card, so there is nothing to eat and the bleed lands
   outside the page gutter — 6px past the other cards on a desktop, off
   the right of the screen on a phone (3.218). */
.lbhero { padding: 20px 22px 16px; margin-left: 0; margin-right: 0; }
.lbh-top { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.lbh-n em { display: block; font: 800 9.5px var(--sans); letter-spacing: .12em;
  color: var(--faint); font-style: normal; }
.lbh-n b { display: block; font: 600 34px var(--serif); line-height: 1.1; margin-top: 3px; }
.lbh-n span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 3px; }
.lbh-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* every count is a filter you can press */
.lbk { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 84px;
  padding: 9px 12px; border-radius: 13px; background: var(--soft); text-decoration: none;
  color: var(--ink); transition: background .14s, transform .1s; }
.lbk:hover { background: var(--iris-tint); text-decoration: none; transform: translateY(-2px); }
.lbk i { width: 100%; height: 3px; border-radius: 2px; background: var(--muted); margin-bottom: 3px; }
.lbk b { font: 600 19px var(--serif); }
.lbk span { font: 600 9.5px var(--sans); color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; }
.lbk.on { background-image: var(--grad-btn); color: #fff; box-shadow: var(--lift-1); }
.lbk.on span, .lbk.on i { color: #fff; background: rgba(255,255,255,.75); }
.lbk-cleaning i { background: var(--paid); }
.lbk-tickets  i { background: var(--overdue); }
.lbk-door     i { background: var(--sky); }
.lbk-money    i { background: var(--iris); }
.lbk-admin    i { background: var(--faint); }

/* the month as a run of days, each as tall as it was busy */
.lbh-days { display: flex; align-items: flex-end; gap: 3px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.lbh-d { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.lbh-d i { display: block; width: 100%; max-width: 16px; border-radius: 3px;
  background: var(--grad); }
.lbh-d.is-quiet i { background: var(--line); }
.lbh-d.is-wknd i { opacity: .55; }
.lbh-d em { font: 400 8.5px var(--sans); font-style: normal; color: var(--faint); }

/* the entries themselves, now scannable by kind and by person */
.lb-day i { font-style: normal; font: 400 10px var(--sans); color: var(--faint);
  text-transform: none; letter-spacing: 0; margin-left: 8px; }
.lb-k { display: inline-flex; align-items: center; gap: 6px; }
.lb-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 7px; }
.lb-cleaning .lb-k i { background: var(--paid); }
.lb-tickets  .lb-k i { background: var(--overdue); }
.lb-door     .lb-k i { background: var(--sky); }
.lb-money    .lb-k i { background: var(--iris); }
.lb-admin    .lb-k i { background: var(--faint); }
.lb-u { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.lb-face { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; font-style: normal;
  background: var(--iris-tint); color: var(--iris-deep); display: flex; align-items: center;
  justify-content: center; font: 800 8.5px var(--sans); }
.lb-face.is-sys { background: var(--soft); color: var(--faint); }
.lb-u span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .lbh-days { display: none; } }

/* ---- Settings: two columns of the same height ---- */
.grid2 { align-items: stretch; }
.grid2 > .card { display: flex; flex-direction: column; }
.grid2 > .card > .paypreview { margin-top: auto; }
.ta-tall { min-height: 150px; }
/* what the bank details will look like where they actually appear */
.paypreview { margin-top: 16px; padding: 14px 16px; border-radius: 13px;
  background: var(--soft); border: 1px dashed var(--line); }
.paypreview em { display: block; font: 800 8.5px var(--sans); letter-spacing: .12em;
  color: var(--faint); font-style: normal; margin-bottom: 8px; }
.pp-body span { display: block; font: 500 12px var(--mono); color: var(--ink); line-height: 1.7; }
.pp-none { margin: 0; font: 400 11.5px var(--sans); color: var(--faint); font-style: italic; }

/* ---- The gate book: an arrival is an event, not a row of a ledger ---- */
.gbcols { align-items: start; }
.gb-h { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 9px;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gb-h b { font: 600 17px var(--serif); }
.gb-h span { font: 400 11px var(--sans); color: var(--muted); }
.gb-h i { font-style: normal; }
.gb-live { color: var(--paid); font-weight: 700; }
.gb-none { margin: 6px 0; padding: 14px 16px; border-radius: 12px; background: var(--soft);
  font: 400 12px var(--sans); color: var(--muted); font-style: italic; }

.gbrows { display: flex; flex-direction: column; }
.gbrow { display: flex; align-items: center; gap: 11px; padding: 10px;
  border-bottom: 1px solid var(--line); border-radius: 10px; transition: background .12s; }
.gbrow:last-child { border-bottom: 0; }
.gbrow:hover { background: var(--paper); }
.gbrow.is-open { background: var(--paid-tint); }
.gbrow.is-open:hover { background: color-mix(in srgb, var(--paid) 14%, #fff); }
.gbrow.is-void { opacity: .5; }
.gbrow.is-void .gb-who b { text-decoration: line-through; }

.gb-face { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff; display: flex; align-items: center;
  justify-content: center; font: 800 10px var(--sans); }
/* the icon MUST be sized here: an inline svg with only a viewBox renders at its
   natural size, which is how a car ended up the height of three rows */
.gb-veh { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: var(--soft);
  color: var(--muted); display: flex; align-items: center; justify-content: center; }
.gb-veh svg { width: 17px; height: 17px; flex: 0 0 17px; }
.gbrow.is-open .gb-veh { background: #fff; color: var(--paid); }

.gb-who { flex: 1; min-width: 0; }
.gb-who b { display: block; font: 600 13.5px var(--sans); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gb-sub { display: block; font: 400 10.5px var(--sans); color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-kind { font-style: normal; font-weight: 700; color: var(--iris-deep); }
.gb-kind.k-resident { color: var(--paid); }
.gb-kind.k-delivery, .gb-kind.k-contractor { color: #B0741A; }
.gb-kind.k-moto, .gb-kind.k-car { color: var(--muted); }
.gb-tag { font-style: normal; font: 700 9px var(--sans); text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); background: var(--soft);
  padding: 2px 6px; border-radius: 7px; }
.gb-tag.is-void { color: var(--overdue); background: var(--overdue-tint); }

.gb-time { flex: 0 0 96px; text-align: right; }
.gb-time b { display: block; font: 600 12px var(--mono); }
.gb-time span { display: block; font: 400 10px var(--sans); color: var(--muted); margin-top: 1px; }
.gbrow.is-open .gb-time span { color: var(--paid); font-weight: 700; }
.gb-stay { flex: 0 0 62px; text-align: right; font: 600 11.5px var(--mono); color: var(--muted); }
.gb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paid); animation: utpulse 2.4s ease-out infinite; }
@media (max-width: 900px) { .gb-time { flex: 0 0 84px; } .gb-stay { flex: 0 0 52px; } }

/* ---- Payments: the accounts field gets the height, the QR codes get a grid ---- */
/* the field he actually wanted long: it grows to fill whatever the column has */
.ta-accounts { flex: 1 1 auto; min-height: 260px; resize: vertical; font: 500 13px var(--mono);
  line-height: 1.7; }

/* every QR is the same object whether it is here already or about to be */
.qrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px,100%), 1fr));
  gap: 12px; margin: 4px 0 12px; }
.qrslot { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.qrslot.is-set { border-color: color-mix(in srgb, var(--iris) 22%, #fff);
  box-shadow: var(--lift-1); }
.qr-img { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: 11px; background: var(--soft); overflow: hidden; }
.qr-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.qr-img.is-empty { border: 1px dashed var(--line); background: transparent; }
.qr-img.is-empty span { font: 400 10.5px var(--sans); color: var(--faint); font-style: italic; }
.qr-f { display: flex; flex-direction: column; }
.qr-f label { font: 600 11px var(--sans); margin: 0 0 5px; }
.qr-f label.check { font-weight: 400; font-size: 10.5px; color: var(--muted); margin: 8px 0 0; }
.qr-f input[type=text] { margin: 0; }
.qr-f input[type=file] { margin: 0; font-size: 11px; }
.qr-f label + label { margin-top: 9px; }

/* ---- Sending: two columns, each a stack of its own ----
   The test card belongs under the delivery it tests, not beside it — a card
   with one field in it should never be stretched to the height of a card with
   eight. Each column holds its own cards; only the columns match. */
.sendcols { align-items: start; }
.sendcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sendcol > .card { margin-bottom: 0; }
/* the test is a small card by nature: it takes its own height, not its neighbour's */
.sendcol > .card:has(.test-row) { flex: 0 0 auto; }
.test-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.test-row .fld { flex: 1 1 220px; }
.test-row button { flex: 0 0 auto; }

/* ============================================ THE TENANT PORTAL
   The only part of the platform a tenant ever meets. Same design language as
   the staff side, but calmer: soft light on white, and colour only where
   something is true. */

/* ---- the chrome: the building's own mark, on every page ---- */
.ptbar { background:
    linear-gradient(180deg, color-mix(in srgb, var(--iris) 4%, #fff), #fff);
  border-bottom: 1px solid var(--line); }
.ptbar-in { display: flex; align-items: center; gap: 22px; padding: 12px 0; flex-wrap: wrap; }
.ptbrand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  flex: 0 0 auto; }
.ptbrand:hover { text-decoration: none; }
.ptbrand .pt-logo { height: 34px; width: auto; display: block; }
.ptbrand-t b { display: block; font: 700 13px var(--sans); line-height: 1.25; }
.ptbrand-t span { display: block; font: 400 10.5px var(--sans); color: var(--muted); margin-top: 1px; }

.pttabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.pttab { padding: 9px 15px; border-radius: 14px; font: 500 12.5px var(--sans);
  color: var(--muted); text-decoration: none; transition: background .14s, color .14s; }
.pttab:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.pttab.on, .pttab.on:hover { background-image: var(--grad-btn); color: #fff; font-weight: 700;
  box-shadow: var(--lift-1); }
.ptout { font: 500 11px var(--sans); color: var(--faint); text-decoration: none; flex: 0 0 auto; }
.ptout:hover { color: var(--ink); }
@media (max-width: 700px) {
  .ptbar-in { gap: 12px; }
  .pttabs { margin-left: 0; flex: 1 1 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; }
  .pttab { white-space: nowrap; }
  .ptout { margin-left: auto; }
}

/* ---- the portal's home: the one question, answered ---- */
.pth { display: grid; grid-template-columns: minmax(0, 1.02fr) auto minmax(0, 1.28fr);
  gap: 10px 32px; align-items: center;
  padding: 26px 28px; border-radius: 18px; margin: 22px 0 8px;
  border: 1px solid var(--line); box-shadow: var(--lift-1);
  background: linear-gradient(160deg, color-mix(in srgb, var(--iris) 5%, #fff), #fff 70%); }
.pth.is-ok   { border-color: color-mix(in srgb, var(--paid) 26%, #fff);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paid) 6%, #fff), #fff 70%); }
.pth.is-late { border-color: color-mix(in srgb, var(--overdue) 28%, #fff);
  background: linear-gradient(160deg, color-mix(in srgb, var(--overdue) 6%, #fff), #fff 70%); }
.pth-main { flex: 1 1 320px; min-width: 0; }
.pth-main em { display: block; font: 800 9px var(--sans); letter-spacing: .13em;
  color: var(--iris-deep); font-style: normal; }
.pth.is-ok .pth-main em { color: var(--paid); }
.pth.is-late .pth-main em { color: var(--overdue); }
.pth-main b { display: block; font: 600 34px var(--serif); line-height: 1.12; margin-top: 6px; }
.pth.is-late .pth-main b { color: var(--overdue); }
.pth-main > span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 10px; }
.pth-kind { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); font: 400 11.5px var(--sans); color: var(--muted); line-height: 1.55; }
.pth-do { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pth-do .btn { font-size: 12px; }

.pth-gauges { display: flex; gap: 22px; flex: 0 0 auto; }
.ptg { text-align: center; }
.ptg-r { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; }
.ptg-r i { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
  background: #fff; font-style: normal; }
.ptg-r b { display: block; font: 600 16px var(--serif); }
.ptg-r em { display: block; font: 400 8px var(--sans); color: var(--muted); font-style: normal; }
.ptg-c { display: block; font: 800 7.5px var(--sans); letter-spacing: .1em; color: var(--faint);
  margin-top: 8px; }

.pth-facts { flex: 0 0 auto; display: flex; gap: 26px; }
@media (max-width: 940px) {
  .pth { grid-template-columns: 1fr; }
  .pth-gauges { justify-content: flex-start; }
  .pth-facts.pth-crowned { grid-column: 1; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; }
}
.ptf em { display: block; font: 800 7.5px var(--sans); letter-spacing: .11em; color: var(--faint);
  font-style: normal; }
.ptf b { display: block; font: 700 13px var(--sans); margin-top: 4px; }
.ptf span { display: block; font: 400 9.5px var(--sans); color: var(--muted); margin-top: 3px; }

/* ---- what is coming ---- */
.pt-sect { font: 600 18px var(--serif); margin: 26px 0 12px; }
.ptcoming { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: 12px; }
.ptc { padding: 16px 18px; border-radius: 15px; border: 1px solid var(--line);
  background: #fff; position: relative; overflow: hidden; }
.ptc::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 3px; background: var(--iris); }
.ptc-clean::before { background: var(--paid); }
.ptc-lease::before { background: var(--draft); }
.ptc em { display: block; font: 800 8.5px var(--sans); letter-spacing: .12em; color: var(--iris-deep);
  font-style: normal; padding-left: 12px; }
.ptc-clean em { color: var(--paid); } .ptc-lease em { color: #B0741A; }
.ptc i { position: absolute; top: 16px; right: 18px; font: 400 9px var(--sans); color: var(--faint);
  font-style: normal; }
.ptc b { display: block; font: 700 14px var(--sans); margin-top: 8px; padding-left: 12px; }
.ptc > span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 3px;
  padding-left: 12px; }
.ptc p { margin: 10px 0 0 12px; padding-top: 9px; border-top: 1px solid var(--line);
  font: 400 10.5px var(--sans); color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .pth { gap: 20px; padding: 20px; }
  .pth-gauges { flex: 1 1 100%; justify-content: space-between; gap: 10px; }
  .pth-facts { flex: 1 1 100%; flex-wrap: wrap; gap: 18px; }
  .pth-main b { font-size: 28px; }
}

/* ============================================================================
   RESPONSIVE — one scale, and the sizes real devices actually are.
   ----------------------------------------------------------------------------
   The bar carries ten destinations, a logo and a user chip. The steps below
   are MEASURED, not estimated: the bar was laid out in a browser with a real
   business name and a real full name, and its own scrollWidth read at every
   width from 1081 to 1920 (3.218). What it needs:

     full bar + the three-line lockup   1459px
     full bar, lockup stood down        1348px
     compact bar                        1145px
     compact bar, tightened             1081px

   Every step below is that number plus the 36px of page gutter. The old
   ladder released each compaction about 140px too early, so the bar ran off
   the right of the screen in three separate bands — 1081-1141, 1241-1341 and
   1401-1521. A 13" laptop (1280) and a 15" (1440) each sat inside one, which
   is why every page scrolled sideways and the person's name was cut in half.

     >= 1560   full navigation, lockup and all
     1400-1560 the lockup stands down    15"/16" laptops
     1180-1400 compact navigation        13" laptops (1280), 12.9" iPad (1366)
     1080-1180 compact, tightened        11" landscape (1112, 1133)
     <  1080   the drawer                iPad landscape and portrait, phones

   Content follows the same ladder, and at each step the page keeps what
   matters and folds what does not.
   ========================================================================== */

/* ---- 1080-1400: the same nav, tightened rather than broken ---- */
@media (max-width: 1400px) and (min-width: 1081px) {
  .topbar-in { gap: 8px; }
  .topbar nav > a, .topbar .navtop { padding: 8px 9px; font-size: 12.5px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  /* the tools give up their words before the doors give up theirs: the key cap,
     then the verb, then the first name — each one still says what it is by
     shape, and each is back the moment there is room (measured at 1100px) */
  .navsearch .navkey { display: none; }
  /* .navsearch's own padding moved to the repair block (3.218): an
     unconditional .navsearch rule further down outranked it here. */
  .plusbtn span { display: none; }
  .plusbtn { padding: 0 10px; }
  .userdrop .navtop { font-size: 0; gap: 0; padding-left: 8px; padding-right: 8px; }
  .userdrop .navtop .navface { font-size: 11px; margin-right: 4px; }
  .userdrop .navtop .caret { width: 12px; height: 12px; }
}
/* ---- 1080-1180: the last 64px. Compact still wants 1145 and an 11" landscape
   screen has 1081. The doors give up four pixels of padding each side rather
   than one of them giving up its word — measured, not guessed. ---- */
@media (max-width: 1180px) and (min-width: 1081px) {
  .topbar-in { gap: 6px; }
  .topbar nav { margin-left: 12px; margin-right: 8px; }
  .topbar nav > a, .topbar .navtop { padding: 8px 5px; }
}
/* The three-line lockup is the widest thing on the bar that is not a door: it
   costs 111px of a bar that already wants more room than the measure gives.
   Below 1560 the doors need that room, so it stands down first. 1400 was the
   old number and it was 160px short — at 1440 the lockup came back and pushed
   the person's name off the screen (3.191, corrected 3.218). */
@media (max-width: 1560px) and (min-width: 1081px) {
  .topbar .brand-sub { display: none; }
}

/* ---- below 1080: the drawer. Ten items do not fit, and pretending they do
        is how a tablet ends up with a wrapped, half-cut menu. ---- */
/* (the drawer itself is defined above, and now starts at this same width) */

/* ---- tablet portrait and landscape: content keeps its shape ---- */
@media (max-width: 1080px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  /* two columns become one only when one column would be too narrow to read */
  .grid2 { grid-template-columns: 1fr; }
  .bd-units { grid-template-columns: repeat(auto-fill, minmax(min(210px,100%), 1fr)); }
  .roles   { grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); }
  .ptcoming { grid-template-columns: 1fr; }
}

/* ---- 820 and below: portrait tablets and big phones ---- */
@media (max-width: 820px) {
  h1 { font-size: 23px; }
  .secttl { font-size: 19px; }
  .fgrid { grid-template-columns: 1fr; gap: 14px; }
  .bd-units { grid-template-columns: repeat(auto-fill, minmax(min(180px,100%), 1fr)); gap: 10px; }
  /* a table that must stay a table scrolls rather than crushing its columns */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- 640 and below: phones. Now the priority rules bite. ---- */
@media (max-width: 640px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .card { padding: 16px; border-radius: 14px; }

  /* THE PRIORITY: a row keeps who and how much. What is secondary wraps to a
     second line; what is decorative goes. */
  .gb-time { flex: 1 1 auto; text-align: left; }
  .gb-stay, .pu-net { margin-left: auto; }
  .invrow { grid-template-columns: minmax(0, 1fr) auto; }
  .iv-go, .cl-go { display: none; }          /* the chevron: the whole row is the link */
  .invgroup .ig-head em { margin-right: 0; } /* no chevron column to clear on mobile */
  .gb-face, .gb-veh, .cl-face, .acct-face { flex-basis: 26px; width: 26px; height: 26px; }

  /* figures stay legible; decoration does not */
  .ptg-r { width: 66px; height: 66px; }
  .ptg-r i { width: 52px; height: 52px; }
  .pth-main b { font-size: 26px; }

  /* one column for everything that was a grid of cards */
  .bd-units { grid-template-columns: 1fr 1fr; }
  .segbar, .lensbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .segbar::-webkit-scrollbar, .lensbar::-webkit-scrollbar { height: 0; }
}

/* ---- 460 and below: small phones. One column, nothing clever. ---- */
@media (max-width: 460px) {
  h1 { font-size: 21px; }
  .card { padding: 14px; }
  .bd-units { grid-template-columns: 1fr; }
  .pth-gauges { gap: 12px; }
  .pth-facts { gap: 14px; }
  .fgrid { gap: 12px; }
  /* a button that wraps to two lines is a button nobody presses */
  .actions { flex-wrap: wrap; }
  .actions .btn, .actions button { flex: 1 1 auto; }
}

/* ---- a touch device never gets a hover menu: it gets a tap ---- */
@media (hover: none) {
  .navdrop:hover .navpanel { visibility: hidden; opacity: 0; }
  .navdrop.open .navpanel  { visibility: visible; opacity: 1; transform: translateY(0); }
}

/* ---- People: contracts, handbook, staff details ---- */
.hrwarn { padding: 14px 18px; border-radius: 14px; background: var(--draft-tint);
  border: 1px solid color-mix(in srgb, var(--draft) 30%, #fff); margin: 16px 0; }
.hrwarn b { display: block; font: 700 13px var(--sans); color: #B0741A; }
.hrwarn span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 3px; }
.hr-none { margin: 6px 0; padding: 16px 18px; border-radius: 13px; background: var(--soft);
  font: 400 12px var(--sans); color: var(--muted); line-height: 1.6; }

/* the handbook in force */
.hbnow { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 15px;
  border: 1px solid var(--line); background: linear-gradient(160deg,
  color-mix(in srgb, var(--iris) 4%, #fff), #fff 70%); }
.hb-v { flex: 0 0 auto; text-align: center; padding-right: 20px; border-right: 1px solid var(--line); }
.hb-v em { display: block; font: 800 8px var(--sans); letter-spacing: .12em; color: var(--faint);
  font-style: normal; }
.hb-v b { display: block; font: 600 30px var(--serif); line-height: 1.1; }
.hb-v span { display: block; font: 400 9.5px var(--sans); color: var(--muted); }
.hb-t { flex: 1; min-width: 0; }
.hb-t b { display: block; font: 600 15px var(--sans); }
.hb-t span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 2px; }
.hb-hash { font-size: 9.5px !important; color: var(--faint) !important; }

.hbsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.hb-h { font: 800 9px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0 8px; }
.hb-h span { color: var(--iris-deep); }
.hbrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hbrow:last-child { border-bottom: 0; }
.hbrow:hover { background: var(--paper); text-decoration: none; }
.hbrow.is-ok { background: var(--paid-tint); border-bottom-color: transparent; margin-bottom: 3px; }
.hbrow.is-on { background: var(--iris-tint); border-bottom-color: transparent; }
.hb-n { min-width: 0; }
.hb-n b { display: block; font: 600 12.5px var(--sans); }
.hb-n span { display: block; font: 400 10px var(--sans); color: var(--muted); }
.hbsel { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }

.hrcols { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) {
  .hrcols { grid-template-columns: 1fr; }
  .hbsplit { grid-template-columns: 1fr; }
}

/* ---- one staff contract ---- */
.crumbline { font: 400 11.5px var(--sans); color: var(--muted); margin: 0 0 6px; }
.scstate { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px;
  margin: 14px 0 18px; border: 1px solid var(--line); box-shadow: var(--lift-1);
  background: linear-gradient(160deg, color-mix(in srgb, var(--iris) 4%, #fff), #fff 70%); }
.scstate.is-ok { border-color: color-mix(in srgb, var(--paid) 28%, #fff);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paid) 6%, #fff), #fff 70%); }
.scstate.is-draft { border-color: color-mix(in srgb, var(--draft) 28%, #fff);
  background: linear-gradient(160deg, color-mix(in srgb, var(--draft) 5%, #fff), #fff 70%); }
.sc-t { flex: 1; min-width: 0; }
.sc-t em { display: block; font: 800 8.5px var(--sans); letter-spacing: .13em; font-style: normal;
  color: var(--iris-deep); }
.scstate.is-ok .sc-t em { color: var(--paid); }
.scstate.is-draft .sc-t em { color: #B0741A; }
.sc-t b { display: block; font: 600 21px var(--serif); margin-top: 3px; }
.sc-t span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 4px; }
.sc-do { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.sclink { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--soft); margin: 8px 0; flex-wrap: wrap; }
.sclink code { flex: 1; min-width: 0; font: 500 11.5px var(--mono); color: var(--ink);
  overflow-wrap: anywhere; }
@media (max-width: 640px) { .scstate { flex-wrap: wrap; } .sc-do { flex: 1 1 100%; } }

/* ---- the placeholder legend on the contract template ---- */
.phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px,100%), 1fr)); gap: 8px;
  margin-bottom: 6px; }
.ph { display: flex; align-items: baseline; gap: 9px; padding: 7px 11px; border-radius: 10px;
  background: var(--soft); min-width: 0; }
.ph code { font: 600 10.5px var(--mono); color: var(--iris-deep); flex: 0 0 auto; }
.ph em { font: 400 10.5px var(--sans); font-style: normal; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the handbook, read on the page ---- */
.hbstmt { padding: 16px 18px; border-radius: 13px; background: var(--iris-tint);
  font: 400 12.5px var(--sans); color: var(--iris-deep); line-height: 1.65; }
.hbdoc { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--soft); }
.hbdoc object { display: block; border: 0; }

/* ---- a placeholder, findable at a glance inside a long document ---- */
.phmark { color: var(--iris-deep); background: var(--iris-tint);
  border-radius: 5px; padding: 1px 4px; font: 600 .94em var(--mono);
  white-space: nowrap; }
.contract-doc { tab-size: 2; }

/* ---- signing for the handbook ---- */
.sigtype { font: 400 20px var(--serif) !important; letter-spacing: .01em; }

/* ---- the signing certificate ---- */
.cert { border: 1px solid var(--line); border-radius: 15px; overflow: hidden;
  background: var(--surface); }
.cert-h { font: 800 9px var(--sans); letter-spacing: .14em; color: #fff;
  background-image: var(--grad-btn); padding: 9px 16px; }
.cert-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr));
  gap: 1px; background: var(--line); }
.cert-col { background: var(--surface); padding: 14px 16px; }
.cert-col em { display: block; font: 800 8px var(--sans); letter-spacing: .12em;
  color: var(--faint); font-style: normal; margin-bottom: 8px; }
.cert-col span { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.cert-col i { flex: 0 0 74px; font: 400 9.5px var(--sans); font-style: normal; color: var(--muted); }
.cert-col b { font: 600 10.5px var(--sans); min-width: 0; overflow-wrap: anywhere; }
.cert-note { margin: 0; padding: 13px 16px; border-top: 1px solid var(--line);
  background: var(--paper); font: 400 10.5px var(--sans); color: var(--muted); line-height: 1.6; }
.cert-foot { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  font: 400 9.5px var(--sans); color: var(--faint); line-height: 1.55; }

/* ---- v3.34: section headings wear the brand ------------------------------
   One rule set, used everywhere a page groups things: Settings sections, the
   hub shelves, and the small sub-heads inside cards. The brand is the blue. */
.sect-head h2 { color: var(--iris-deep); }
.sect-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.acch { font: 600 18px var(--serif); color: var(--iris-deep);
        display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; }
.acch::before { content: ''; width: 22px; height: 3px; border-radius: 2px;
                background: var(--grad); flex: none; }
.hb-h { color: var(--iris-deep); }
.secintro { border-left: 3px solid var(--iris); background: var(--iris-tint);
            padding: 10px 14px; border-radius: 0; }
/* the day's greeting carries its facts on one quiet line */
.subfacts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.subfacts b { font-weight: 600; color: var(--ink); }

/* ---- v3.40 the big-estate board: a row per floor, counts instead of tiles ---- */
.board-floors { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fl-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--card, #fff); }
.fl-row:last-child { border-bottom: 0; }
.fl-row.is-quiet { background: var(--paper); }
.fl-row.is-quiet .fl-facts i { color: var(--faint); font-style: normal; }
.fl-name { flex: 0 0 72px; font: 600 14px var(--sans); color: var(--ink); }
.fl-n { flex: 0 0 84px; font: 400 11.5px var(--sans); color: var(--muted); }
.fl-facts { flex: 1 1 auto; font: 400 12.5px var(--sans); color: var(--muted); min-width: 0; }
.fl-facts b { font-weight: 600; }
.fl-facts i { font-style: normal; color: var(--faint); padding: 0 2px; }
.fl-bad { color: var(--overdue); }
.fl-due { color: var(--draft, #b45309); }
.fl-now { color: var(--iris-deep, var(--iris)); }
@media (max-width: 700px) { .fl-n { display: none; } }

/* ---- v3.40 the pager: long lists page instead of scrolling the archive ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px 2px; margin-top: 6px; border-top: 1px solid var(--line); }
.pager-at { font: 400 12px var(--sans); color: var(--muted); text-align: center; flex: 1; }
.findbox form, form.findbox { display: flex; gap: 8px; align-items: center; }
.lb-clip { border-left: 3px solid var(--draft, #b45309); background: color-mix(in srgb, var(--draft, #b45309) 6%, #fff); }
/* v3.40.2 — the app footer: the version, visible on every admin page */
.appfoot { margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.appfoot .mono { font-size: 11.5px; }
.appfoot-env { color: var(--draft, #b45309); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
/* v3.41 — the payslip instrument */
.slip { max-width: 720px; }
.slip-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid var(--iris); padding-bottom: 12px; }
.slip-head > div > b.slip-biz { font-family: var(--serif); font-size: 19px; color: var(--iris-deep); display: block; }
.slip-head span { font-size: 12px; color: var(--muted); font-family: var(--mono, monospace); }
.slip-period { text-align: right; }
.slip-period em { display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--iris-deep); font-weight: 700; }
.slip-h { font-family: var(--serif); font-size: 15px; color: var(--iris-deep); margin: 0 0 8px; }
.slip-h.is-ded { color: var(--overdue); }
.slip-line { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: 13px; }
.slip-line i { font-style: normal; font-size: 12px; }
.slip-tot { border-top: 1px solid var(--ink); padding-top: 6px; font-weight: 700; }
.slip-net { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--paid) 10%, #fff); border: 1px solid color-mix(in srgb, var(--paid) 40%, #fff); border-radius: 10px; padding: 14px 18px; margin: 16px 0; }
.slip-net em { display: block; font-style: normal; font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--paid); }
.slip-net > div > span { font-size: 12px; color: color-mix(in srgb, var(--paid) 70%, #000); }
.slip-net b { font-family: var(--serif); font-size: 28px; color: color-mix(in srgb, var(--paid) 70%, #000); }
.slip-ytd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px,100%), 1fr)); gap: 10px; }
.slip-y { background: color-mix(in srgb, var(--ink) 4%, #fff); border-radius: 8px; padding: 10px 12px; }
.slip-y em { display: block; font-style: normal; font-size: 10px; letter-spacing: .05em; color: var(--muted); }
.slip-y.is-acc { background: var(--iris-tint); }
.slip-y.is-acc em, .slip-y.is-acc b { color: var(--iris-deep); }
.slip-foot { font-size: 11px; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 10px; margin: 14px 0 0; }
/* v3.42 — the receipt inbox */
.rcpt { display: grid; grid-template-columns: 150px 1fr; gap: 16px; background: #fff;
  border: 1px solid #E4E5F0; border-radius: 14px; padding: 16px; margin-bottom: 14px; position: relative; }
.rcpt-doc img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.rcpt-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 110px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; color: var(--iris-deep); text-decoration: none; background: var(--iris-tint); }
.rcpt-pdf span { font-size: 11px; font-weight: 400; color: var(--muted); }
.rcpt-x { position: absolute; top: 16px; right: 16px; margin: 0; }
@media (max-width: 700px) { .rcpt { grid-template-columns: 1fr; } }

/* --- the official-receipts doorway on Expenses (v3.47) ------------------ */

/* --- form section headings (v3.48) ------------------------------------- */
.formsec { font: 600 12px/1 var(--sans, inherit); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin: 22px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, #fff); }
form .formsec:first-of-type, #form form .formsec:first-child { margin-top: 6px; }

/* --- the person hub: label/value rows (v3.48) --------------------------- */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap: 4px 24px; }
.kv { display: flex; gap: 12px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, #fff); }
.kv:last-child { border-bottom: 0; }
.kv-k { flex: 0 0 132px; color: var(--muted); font-size: 13px; }
.kv-v { min-width: 0; overflow-wrap: anywhere; }

/* --- v3.48.2: the staff rail --------------------------------------------- */
.rail-slot { display: block; min-height: 30px; }        /* a reserved, empty cell — holds the shape */
.hub-door { color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, #fff); }
.hub-door:hover { color: var(--iris); border-bottom-color: var(--iris); }

/* --- v3.54: the book shows faces, not filenames -------------------------- */
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px,100%), 1fr)); gap: 14px; }
.doctile { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); }
.doc-thumb { display: block; width: 100%; height: 118px; object-fit: cover; border-bottom: 1px solid var(--line); }
.doc-pdfbox { display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--mono, monospace); letter-spacing: .08em;
  color: var(--iris); background: color-mix(in srgb, var(--iris) 7%, #fff); }
.doc-meta { padding: 8px 10px 2px; display: grid; gap: 2px; }
.doc-meta b { font-size: 12.5px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.doc-meta .mono { font-size: 11px; color: var(--muted, #6b6b76); }
.doc-acts { display: flex; gap: 6px; padding: 8px 10px 10px; }
.doc-acts form { margin: 0; }
.sign-annex { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px,100%), 1fr)); gap: 12px; margin: 14px 0; }
.sign-annex img { width: 100%; border: 1px solid var(--line); border-radius: 10px; }

/* --- v3.57: restricted identifiers wear a soft veil --------------------- */
.masked { background: color-mix(in srgb, var(--ink, #17140f) 6%, transparent);
  border: 1px dashed var(--line); border-radius: 6px; padding: 1px 7px;
  letter-spacing: .06em; color: var(--muted, #6b6b76); }

/* ---- v3.61: the guided signing page (every colour from the theme) ---- */
.sgbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--iris-tint);border:1px solid var(--iris);border-radius:6px;padding:10px 14px;margin:0 0 14px}
.sgbar b{color:var(--iris);font-size:14px;white-space:nowrap}
.sgbar span{flex:1;font-size:13.5px}
.sgfield{position:relative;border:2px solid var(--draft);background:var(--draft-tint);border-radius:8px;padding:12px 14px 14px;margin:14px 0}
.sgfield .sgtag{position:absolute;top:-9px;left:12px;background:var(--draft);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:3px}
.sgfield.sgdone{border-color:var(--paid);background:var(--paid-tint)}
.sgfield.sgdone .sgtag{background:var(--paid)}
.sgfield.sgdone .sgtag::after{content:" — DONE"}
.sgdonechip{background:var(--paid-tint);border:1px solid var(--paid);color:var(--paid);border-radius:6px;padding:9px 13px;font-size:13.5px;margin:0 0 12px}
#signbtn:disabled{background:var(--line);border-color:var(--line);cursor:not-allowed}

/* ---- v3.62: the road ahead on a contract not yet sent ---- */
.scpath{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.scstep{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13.5px;color:var(--muted);background:var(--paper)}
a.scstep{text-decoration:none;cursor:pointer}
a.scstep:hover{box-shadow:var(--lift-1)}
.scstep em{font-style:normal;font-weight:700;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;background:var(--line);color:var(--ink)}
.scstep small{font-size:11.5px}
.scstep.is-now{border-color:var(--iris);color:var(--ink);background:var(--iris-tint)}
.scstep.is-now em{background:var(--iris);color:#fff}
.scstep.is-done{border-color:var(--paid);color:var(--paid);background:var(--paid-tint)}
.scstep.is-done em{background:var(--paid);color:#fff}

/* ---- v3.65: document slots in the staff vault ---- */
.sdslot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sdslot a{color:var(--iris);text-decoration:none}
.sdslot a:hover{text-decoration:underline}
.sdslot input[type=file]{font-size:12px;max-width:220px}
.sdrm{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}

/* ---- v3.65.1: the vault slot shows its paper ---- */
.sdpeek{display:inline-flex;align-items:center;gap:8px;color:var(--iris);text-decoration:none}
.sdpeek:hover span{text-decoration:underline}
.sdthumb{height:54px;width:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--paper)}
.sdext{display:inline-flex;align-items:center;justify-content:center;height:54px;width:54px;border-radius:6px;border:1px solid var(--line);background:var(--paper);font-size:11px;font-weight:700;color:var(--muted)}

/* ---- v3.66.2: the logo shows itself on Settings ---- */
.logopeek{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin:0 0 8px}
.logopeek img{max-height:64px;max-width:240px;display:block}

/* ---- the monthly pulse + the disciplinary process (v3.69) ---- */
.pulseask h1 { margin-bottom: 4px; }
.pfaces { display: flex; gap: 10px; margin: 14px 0 18px; flex-wrap: wrap; }
.pface { display: flex; flex-direction: column; align-items: center; gap: 4px;
         padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
         cursor: pointer; flex: 1 1 0; min-width: 86px; text-align: center;
         transition: border-color .15s, background .15s; }
.pface input { position: absolute; opacity: 0; pointer-events: none; }
.pface .pface-e { font-size: 30px; line-height: 1; }
.pface .pface-w { font-size: 12px; color: var(--muted); }
.pface:hover { border-color: var(--iris); }
.pface:has(input:checked) { border-color: var(--iris); background: color-mix(in srgb, var(--iris) 8%, transparent); }
.pulsecard .pface-e { font-size: 22px; vertical-align: -3px; }
.ptrend { display: inline-flex; gap: 4px; margin: 2px 0 10px; }
/* the tick's shape lives here; its COLOUR moved to the pulse board's block at
   3.205.0, where the squares and the key read the same five steps. */
.ptick { width: 14px; height: 14px; border-radius: 4px; display: inline-block; background: var(--line); }
.preply { border-left: 3px solid var(--iris); padding: 8px 12px; margin: 10px 0;
          background: color-mix(in srgb, var(--iris) 5%, transparent); border-radius: 0 8px 8px 0; }
.ntebox .ntetext { white-space: pre-line; border: 1px solid var(--line); border-radius: 10px;
                   padding: 14px 16px; margin: 12px 0; background: var(--paper); }

/* ---- the kiosk (v3.71) ---- */
.kiosk h1 { text-align: center; }
.ktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px,100%), 1fr)); gap: 12px; margin: 16px 0; }
.ktile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
         border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit;
         transition: border-color .15s, background .15s; }
.ktile:hover { border-color: var(--iris); background: color-mix(in srgb, var(--iris) 5%, transparent); }
.ktile .kinit { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                background: color-mix(in srgb, var(--iris) 12%, transparent); color: var(--iris);
                font-size: 20px; font-weight: 700; }
.kpin { font-size: 26px; letter-spacing: 12px; text-align: center; width: 100%; }

/* ---- optional photos on pulses and disciplinary cases (v3.76) ---- */
.pshots { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pshot img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px;
             border: 1px solid var(--line); display: block; }
.pshot:hover img { border-color: var(--iris); }

/* ==========================================================================
   MY DAY (3.185) — the day on the wide measure, in the reference's language
   Owner board, approved: white ground, one field per fact, the number large
   and dark with its label small and grey, and every figure given a shape.
   Nothing here invents a colour: the eight tokens and mixes of them only.
   ========================================================================== */
.wrap.is-wide { max-width: 1360px; }
.mday { margin-top: 18px; }

/* the greeting, and the two chips that say how the day stands */
.md-hd { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin: 4px 0 22px; }
.md-hi { font: 700 34px/1.1 var(--serif); color: var(--ink); margin: 0; }
.md-date { font: 700 12px var(--sans); letter-spacing: .14em; color: var(--muted); margin: 9px 0 0; }
.md-hd-chips { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.md-chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 20px;
           padding: 11px 17px; font: 800 13px var(--sans); letter-spacing: .05em; }
.md-chip i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.md-chip.is-late { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-chip.is-late i { background: var(--overdue); }
.md-chip.is-good { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-chip.is-good i { background: var(--paid); }
.md-chip.is-iris { background: var(--iris-tint); color: var(--iris-deep); }
.md-chip.is-iris i { background: var(--iris); }

/* every field on the day wears the same edge: a hairline you can see on white */
.md-house, .md-fig, .md-chart, .md-next, .gt-panel, .ab-panel, .st-panel, .sup-raise, .cn-panel,
.hrdrawer, .hrwork, .iv-panel, .pr-panel, .sch-ask, .you-panel, .iv-doc,
.xp-band, .xp-pad, .xp-ledger, .xp-rec, .xp-sheet {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); position: relative; min-width: 0; }
.md-k { font: 800 11px var(--sans); letter-spacing: .15em; color: var(--faint); margin: 0; }
.md-k-sub { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }

/* the house tonight, and the money beside it */
.md-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
/* no money to show: the house and the horizon share the row between them */
.md-top.is-alone { grid-template-columns: 1fr 1fr; }
.md-house { padding: 26px 30px 22px; }
.md-house-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.md-house-n { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 0; min-width: 0; }
.md-house-n b { font: 700 72px/1 var(--serif); color: var(--ink); }
.md-house-n span { font: 600 19px var(--sans); color: var(--muted); white-space: nowrap; }
.md-house-ring { position: relative; flex: 0 0 118px; width: 118px; height: 118px; }
.md-ring { display: block; width: 118px; height: 118px; }
.md-ring-t { fill: none; stroke: var(--soft); }
.md-ring-v { fill: none; stroke-linecap: round; }
.md-ring-tx { position: absolute; inset: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: 1px; }
.md-ring-tx b { font: 700 26px var(--serif); color: var(--ink); }
.md-ring-tx em { font: 800 11px var(--sans); letter-spacing: .12em; color: var(--faint); font-style: normal; }
.md-est { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.md-est i { width: 15px; height: 15px; border-radius: 5px; display: block; }
.md-est i.is-let, .md-est-key i.is-let { background: var(--iris); }
.md-est i.is-host, .md-est-key i.is-host { background: #FF385C; }
.md-est i.is-open, .md-est-key i.is-open { background: color-mix(in srgb, #FF385C 30%, #fff); }
.md-est i.is-vac, .md-est-key i.is-vac { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }
.md-est-key { display: flex; gap: 16px; flex-wrap: wrap; margin: 15px 0 0;
              font: 600 11.5px var(--sans); color: var(--muted); }
.md-est-key span { display: inline-flex; align-items: center; gap: 7px; }
.md-est-key i { width: 9px; height: 9px; border-radius: 3px; display: block; }

/* The three-state square: done, in hand, not yet. Written for the round in
   3.199.0 and worn since by the door and by the contractors' stable, so it
   lives here with the rest of the shared language rather than in one page's
   block. Rose is NOT available to it — rose means the Airbnb channel and
   nothing else — so it speaks in the three colours it is actually about. */
.md-est i.is-clean, .md-est-key i.is-clean, .cn-st i.is-clean { background: var(--paid); }
.md-est i.is-hand,  .md-est-key i.is-hand,  .cn-st i.is-hand  { background: var(--iris); }
.md-est i.is-wait,  .md-est-key i.is-wait,  .cn-st i.is-wait  { background: var(--surface);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 20%, #fff); }

/* one money field: the figure, its verdict, the measure, and the verb */
.md-fig { padding: 24px 22px 18px; display: flex; flex-direction: column; }
.md-fig-k { display: flex; align-items: center; gap: 11px; margin: 0;
            font: 800 11px var(--sans); letter-spacing: .13em; }
.md-fig-k i { width: 4px; height: 15px; border-radius: 2px; display: block; flex: 0 0 4px; }
.md-fig-v { font: 700 30px/1.1 var(--serif); margin: 14px 0 0; overflow-wrap: anywhere; }
.md-fig-chip { align-self: flex-start; margin-top: 12px; border-radius: 12px; padding: 6px 11px;
               font: 800 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.md-bar { display: block; position: relative; height: 9px; border-radius: 5px;
          background: var(--soft); margin-top: 20px; }
.md-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; display: block; min-width: 9px; }
.md-bar em { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px;
             background: var(--ink); display: block; }
.md-fig-sub { font: 400 12px var(--sans); color: var(--muted); margin: 11px 0 0; }
.md-fig-note { font: 400 11px var(--sans); color: var(--faint); margin: 6px 0 0; }
.md-fig-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
             font: 700 13px var(--sans); color: var(--iris); align-self: flex-start; }
.md-fig.is-paid  .md-fig-k, .md-fig.is-paid  .md-fig-v { color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-fig.is-over  .md-fig-k, .md-fig.is-over  .md-fig-v { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-fig.is-draft .md-fig-k, .md-fig.is-draft .md-fig-v { color: color-mix(in srgb, var(--draft) 70%, #000); }
.md-fig.is-paid  .md-fig-k i, .md-fig.is-paid  .md-bar i { background: var(--paid); }
.md-fig.is-over  .md-fig-k i, .md-fig.is-over  .md-bar i { background: var(--overdue); }
.md-fig.is-draft .md-fig-k i, .md-fig.is-draft .md-bar i { background: var(--draft); }
.md-fig.is-paid  .md-fig-chip { background: var(--paid-tint);    color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-fig.is-over  .md-fig-chip { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-fig.is-draft .md-fig-chip { background: var(--draft-tint);   color: color-mix(in srgb, var(--draft) 70%, #000); }
/* the neutral figure: a number that is neither good nor bad nor the brand's own
   business. OUT TODAY took --iris until 3.195 and made the row read as two
   brand things sitting beside two coloured ones. */
.md-fig.is-ink   .md-fig-k, .md-fig.is-ink   .md-fig-v { color: var(--ink); }
.md-fig.is-ink   .md-fig-k i, .md-fig.is-ink  .md-bar i { background: color-mix(in srgb, var(--ink) 46%, #fff); }
.md-fig.is-ink   .md-fig-chip { background: var(--soft); color: var(--muted); }
.md-chev { width: 8px; height: 14px; flex: 0 0 8px; }

/* the year in bars, and the thirty days ahead */
.md-mid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.md-chart { padding: 26px 30px 20px; }
.md-chart-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.md-chart-hd b { font: 700 30px var(--serif); color: var(--ink); }
.md-chart-hd span { font: 600 14px var(--sans); color: var(--muted); }
.md-chart-hd em { margin-left: auto; font: 800 11px var(--sans); letter-spacing: .12em; font-style: normal; }
.md-chart-hd em.is-paid { color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-chart-hd em.is-over { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-bars { position: relative; display: flex; align-items: flex-end; gap: 10px;
           height: 122px; margin: 32px 0 32px;
           border-bottom: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.md-b { flex: 1 1 0; height: 100%; position: relative; display: flex;
        flex-direction: column; justify-content: flex-end; align-items: center; }
.md-b i { display: block; width: 100%; max-width: 54px; border-radius: 7px;
          background: color-mix(in srgb, var(--iris) 26%, #fff); }
.md-b.is-live i { background: var(--iris); }
.md-b b { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
          font: 700 11px var(--sans); letter-spacing: .08em; color: var(--faint); }
.md-b.is-live b { color: var(--ink); }
.md-b u { flex: 0 0 auto; text-decoration: none; margin-bottom: 6px; white-space: nowrap;
          font: 800 11px var(--sans); color: var(--iris-deep); }
.md-avg { position: absolute; left: 0; right: 0; height: 0; display: block;
          border-top: 1px dashed color-mix(in srgb, var(--ink) 26%, #fff); }
.md-avg b { position: absolute; left: 0; top: -17px; font: 700 11px var(--sans);
            letter-spacing: .08em; color: var(--faint); }
.md-chart-note { font: 400 12px var(--sans); color: var(--muted); margin: 0; }
.md-chart-note b { font-weight: 700; color: var(--ink); }

.md-next { padding: 26px 26px 20px; }
.md-tl { list-style: none; margin: 20px 0 0; padding: 0 0 0 24px; position: relative; }
.md-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 12px;
                 width: 2px; background: var(--line); }
.md-tl-i { position: relative; margin-bottom: 15px; }
.md-tl-i::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px;
                   border-radius: 50%; background: var(--surface);
                   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--iris) 40%, #fff); }
.md-tl-i.is-now::before { background: var(--iris); box-shadow: 0 0 0 3px var(--iris-tint); }
.md-tl-i a { display: flex; gap: 14px; align-items: baseline; color: inherit; }
.md-tl-i a:hover { text-decoration: none; }
.md-tl-i a:hover .md-tl-tx b { color: var(--iris); }
.md-tl-w { font: 800 11px var(--sans); letter-spacing: .08em; color: var(--faint); flex: 0 0 62px; }
.md-tl-tx { min-width: 0; }
.md-tl-tx b { display: block; font: 700 13.5px var(--sans); color: var(--ink); }
.md-tl-tx > span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 2px; }
.md-next-note { font: 400 11.5px var(--sans); color: var(--faint); margin: 18px 0 0; }
.md-next-none { font: 400 13px var(--sans); color: var(--muted); margin: 18px 0 0; }

/* what needs you: the most important list on the page, at a readable size */
.md-count { font: 800 11px var(--sans); letter-spacing: .13em; margin-left: 12px;
            color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px,100%), 1fr)); gap: 14px 18px; }
.md-need { display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: inherit;
           background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
           border-left-width: 5px; border-radius: 20px; box-shadow: var(--lift-1); }
.md-need.is-late { border-left-color: var(--overdue); }
.md-need.is-warn { border-left-color: var(--draft); }
.md-need:hover { text-decoration: none; box-shadow: var(--lift-2); }
.md-need-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; display: flex;
               align-items: center; justify-content: center; font: 700 18px var(--serif); font-style: normal; }
.md-need.is-late .md-need-fob { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.md-need.is-warn .md-need-fob { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.md-need-tx { min-width: 0; flex: 1 1 auto; }
.md-need-tx b { display: block; font: 700 16px var(--sans); color: var(--ink); }
.md-need-tx > span { display: block; font: 400 13px var(--sans); margin-top: 3px;
                     color: color-mix(in srgb, var(--ink) 78%, #fff); }
.md-need .md-chev { color: var(--faint); }

.md-quiet, .md-allquiet { display: flex; align-items: center; gap: 12px; margin: 18px 0 0;
  padding: 13px 20px; border-radius: 16px; background: var(--paid-tint);
  border: 1px solid color-mix(in srgb, var(--paid) 22%, #fff);
  font: 600 13.5px var(--sans); color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-quiet i, .md-allquiet i { width: 10px; height: 10px; border-radius: 50%;
                              background: var(--paid); flex: 0 0 10px; }
.mday .pagehead { margin-top: 40px; }

/* the ladder: four money fields become two, then one; the horizon drops under
   the year; the week keeps its seven columns until a phone, where it wraps. */
@media (max-width: 1240px) {
  .md-top { grid-template-columns: 1fr 1fr; }
  .md-mid { grid-template-columns: 1fr; }
  .md-needs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .md-top { grid-template-columns: 1fr; }
  .md-house-top { flex-direction: column; align-items: flex-start; }
  .md-hi { font-size: 27px; }
  .md-house-n b { font-size: 58px; }
}

/* ==========================================================================
   INVOICES — THE WORKING BOOK (3.186)
   Owner board, approved. The page answers one question — who owes me, and
   what do I do about it — so it runs the wide measure with no rail, the four
   figures stand in one band, and the whole ladder of lateness and lead time
   is one bar. Nothing invents a colour: the eight tokens and mixes of them.
   ========================================================================== */
.ivpage { margin-top: 18px; }
.ivpage .md-hd { align-items: flex-start; }
/* the one big verb sits where the work is, and still names who it will touch */
.ivpage .ckchase { margin: 0; align-items: flex-end; }
.ivpage .ckchase button { width: auto; padding: 12px 26px; border-radius: 21px;
  font: 700 14px var(--sans); }
.ivpage .ckchase span { font: 400 11px var(--sans); text-align: right; }

/* where the money sits: one bar, every peso in the order its day falls */
.ivsits { margin-top: 16px; padding: 24px 26px 20px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); }
.ivsit-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ivsit-hd > span { font: 400 12.5px var(--sans); color: color-mix(in srgb, var(--ink) 78%, #fff); }
.ivsit-hd .ckrun { margin-left: auto; }
.ivsit-bar { position: relative; display: flex; gap: 2px; height: 30px; margin: 20px 0 0;
  border-radius: 8px; background: var(--soft); overflow: visible; }
.ivsit-bar i { display: flex; align-items: center; justify-content: center; min-width: 4px;
  border-radius: 6px; overflow: hidden; }
.ivsit-bar i b { font: 700 11px var(--sans); color: #fff; white-space: nowrap; }
.ivsit-bar i.is-l1 b, .ivsit-bar i.is-wk b, .ivsit-bar i.is-nx b, .ivsit-bar i.is-far b {
  color: color-mix(in srgb, var(--ink) 82%, #fff); }
.ivsit-bar i.is-l30 { background: color-mix(in srgb, var(--overdue) 88%, #000); }
.ivsit-bar i.is-l8  { background: var(--overdue); }
.ivsit-bar i.is-l1  { background: color-mix(in srgb, var(--overdue) 45%, #fff); }
.ivsit-bar i.is-now { background: var(--iris); }
.ivsit-bar i.is-wk  { background: color-mix(in srgb, var(--iris) 48%, #fff); }
.ivsit-bar i.is-nx  { background: color-mix(in srgb, var(--iris) 30%, #fff); }
.ivsit-bar i.is-far { background: color-mix(in srgb, var(--iris) 17%, #fff); }
/* the rule where today falls: late money to its left, money coming to its right */
.ivsit-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px;
  background: var(--ink); border-radius: 1px; display: block; }
.ivsit-ends { display: flex; justify-content: space-between; margin: 10px 0 0;
  font: 800 11px var(--sans); letter-spacing: .08em; }
.ivsit-ends b { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ivsit-ends span { color: var(--iris-deep); }
.ivsit-key { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 14px 0 0; padding: 0;
  font: 600 11.5px var(--sans); color: color-mix(in srgb, var(--ink) 72%, #fff); }
.ivsit-key li { display: inline-flex; align-items: center; gap: 7px; }
.ivsit-key li.is-none { color: var(--faint); }
.ivsit-key i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.ivsit-key .is-l30 i { background: color-mix(in srgb, var(--overdue) 88%, #000); }
.ivsit-key .is-l8 i  { background: var(--overdue); }
.ivsit-key .is-l1 i  { background: color-mix(in srgb, var(--overdue) 45%, #fff); }
.ivsit-key .is-now i { background: var(--iris); }
.ivsit-key .is-wk i  { background: color-mix(in srgb, var(--iris) 48%, #fff); }
.ivsit-key .is-nx i  { background: color-mix(in srgb, var(--iris) 30%, #fff); }
.ivsit-key .is-far i { background: color-mix(in srgb, var(--iris) 17%, #fff); }
.ivsit-key li.is-none i { background: var(--soft); }
.ivsit-none { font: 400 13px var(--sans); color: var(--muted); margin: 16px 0 0; }
/* the automatic run keeps the fob it has worn since 3.136 */
.ivsits .ckrun { display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--iris-tint); }
.ivsits .ckrun-fob { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
  font: 700 13px var(--sans); color: #fff;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
.ivsits .ckrun-tx b { display: block; font: 800 11px var(--sans); letter-spacing: .08em; color: var(--iris-deep); }
.ivsits .ckrun-tx > span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 1px; }

/* the book's head: the lenses along the top, each keeping search and order */
.ivbook-hd { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 34px 0 14px; }
.ivbook-hd .secttl { margin: 0; font-size: 26px; }
.ivbook-sub { font: 400 12.5px var(--sans); color: color-mix(in srgb, var(--ink) 78%, #fff); margin: 5px 0 0; }
.ivlens { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ivlens .lens { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 108px; padding: 9px 16px; border-radius: 15px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.ivlens .lens:hover { text-decoration: none; border-color: var(--iris); }
.ivlens .lens b { font: 700 13px var(--sans); }
.ivlens .lens span { font: 500 11px var(--sans); color: var(--muted); }
.ivlens .lens.on { background: linear-gradient(180deg, var(--iris), var(--iris-deep));
  border-color: transparent; color: #fff; }
.ivlens .lens.on b, .ivlens .lens.on span { color: #fff; }
.ivlens .lens.has-work b { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ivlens .lens.has-work span { color: color-mix(in srgb, var(--overdue) 70%, #fff); }

/* the finder, the order, and the door to a new invoice — one row */
.ivfind { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ivfind .invfind { flex: 1 1 auto; gap: 12px; }
.ivfind .invfind input[type="search"] { font: 400 13px var(--sans); padding: 12px 16px; border-radius: 14px; }
.ivsort { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 6px 14px 6px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); }
.ivsort > span { font: 800 11px var(--sans); letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.ivsort select { border: 0; background: none; font: 600 12.5px var(--sans); color: var(--ink);
  padding: 6px 2px; }
.ivsort select:focus { outline: none; color: var(--iris-deep); }
.ivnew { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 14px; }
.ivnew .iv-fob { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 7px; background: none; }
.ivnew .iv-fob.iv-plus::before { width: 10px; }
.ivnew .iv-fob.iv-plus::after { height: 10px; }
.ivpage .voidline { margin-top: 8px; }
/* The wide measure would lay the new-invoice form out four across, and four
   columns cannot align when one carries chips under its field and another a
   two-line label. The board he approved shows two rows of two; it stays two. */
.ivpage #new-invoice .fgrid { grid-template-columns: 1fr 1fr; max-width: 980px; }
@media (max-width: 700px) { .ivpage #new-invoice .fgrid { grid-template-columns: 1fr; } }

/* the ladder down: four figures become two, then one; the lenses wrap under
   the heading; the book's cards find their own width all the way to a phone.
   THESE RULES MOVED to the repair block at the end of this file in 3.218 —
   the board of 3.192 re-declared .ivhero / .ivrow2 / .ivdoors further down,
   which killed every one of them at every width. They are not duplicated
   here: a rule that cannot win is worse than no rule, because it reads like
   the page is responsive when it is not. */
@media (max-width: 700px) {
  .ivboard .ivc { flex-wrap: wrap; }
  .ivc .ivc-amt { flex: 1 1 auto; width: auto; text-align: left; }
  .ivfind { flex-wrap: wrap; }
  .ivpage .ckchase { align-items: flex-start; }
  .ivpage .ckchase span { text-align: left; }
}

/* ================= EXPENSES, THE DEDICATED PAGE (3.188) =================
   The owner's word: a page whose only job is expenses should not wear My
   day's furniture. The cockpit rail is gone; the summary is two bands and
   the ledger starts where the eye lands. Every colour below is one of the
   eight, or a mix of them — there is not a hand-written value in here. */

/* The head sat flush against the top bar while every other page breathes —
   26px is what .pagehead has always used, so Expenses now opens like the rest. */
.xp-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; margin: 18px 0 22px; }
.xp-h1 { font: 700 34px/1.1 var(--serif); letter-spacing: -.015em; margin: 0; color: var(--ink); }
.xp-eyebrow { font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 9px 0 0; }
.xp-headr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the chip My Day wears, at the height the month stepper stands — paired
   single-line controls share one height (DESIGN.md, standing preference) */
.xp-pill { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px;
  border-radius: 999px; font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.xp-pill i { width: 10px; height: 10px; border-radius: 50%; display: block; flex: 0 0 10px; }
.xp-pill.is-paid { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 80%, #000); }
.xp-pill.is-paid i { background: var(--paid); }
.xp-pill.is-over { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 78%, #000); }
.xp-pill.is-over i { background: var(--overdue); }
.xp-step { display: inline-flex; align-items: center; gap: 14px; height: 38px; padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); border-radius: 13px;
  background: var(--surface); }
.xp-step b { font: 600 13px var(--sans); white-space: nowrap; }
.xp-step a { color: var(--iris); font-size: 15px; line-height: 1; text-decoration: none; }
.xp-step a:hover { color: var(--iris-deep); }
.xp-step em { color: var(--line); font-style: normal; font-size: 15px; line-height: 1; }

/* ---- band one ---- */
.xp-band { display: grid; grid-template-columns: 1.05fr 1.3fr .95fr; padding: 0; overflow: hidden; }
.xp-bcol { padding: 22px 26px 24px; min-width: 0; }
.xp-bcol + .xp-bcol { border-left: 1px solid var(--line); }
/* My day's .md-k metrics, at the contrast P&L settled on in 3.189: a small
   caps key on a money page reads --muted, not --faint (3:1 becomes 6:1). */
.xp-lbl { font: 800 11px var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0; }
.xp-lbl2 { margin-top: 20px; }
.xp-fig { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.xp-fig > b { font: 600 34px var(--serif); letter-spacing: -.02em; line-height: 1; color: var(--draft); }
.xp-ring { width: 96px; height: 96px; border-radius: 50%; position: relative; display: grid;
  place-items: center; flex: 0 0 96px;
  background: conic-gradient(var(--iris) 0 calc(var(--pct) * 1%),
              color-mix(in srgb, var(--iris) 13%, #fff) calc(var(--pct) * 1%) 100%); }
.xp-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); }
.xp-ring u { position: relative; z-index: 2; text-align: center; text-decoration: none; }
.xp-ring u b { display: block; font: 600 20px var(--serif); line-height: 1; }
.xp-ring u i { display: block; font: 700 11px var(--sans); letter-spacing: .02em;
  color: var(--muted); font-style: normal; margin-top: 3px; }
.xp-chipline { margin: 12px 0 0; }
.xp-chip { display: inline-block; padding: 4px 11px; border-radius: 999px;
  font: 700 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.xp-chip.is-draft { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 72%, #000); }
.xp-say { font: 400 12px var(--sans); color: var(--ink); opacity: .82; line-height: 1.55; margin: 11px 0 0; }

.xp-brow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.xp-usual { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: .04em; }
.xp-usual i { width: 18px; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 30%, #fff); display: block; }
.xp-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end;
  height: 104px; margin-top: 16px; position: relative; }
.xp-chart::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--usual, 0) * 1%);
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 26%, #fff); pointer-events: none; }
.xp-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%; text-decoration: none; }
.xp-cv { font: 600 11px var(--sans); color: var(--muted); margin-bottom: 5px; }
.xp-col.on .xp-cv { color: var(--iris); }
.xp-bar { display: block; width: 100%; border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--iris) 14%, #fff); }
.xp-col:hover .xp-bar { background: color-mix(in srgb, var(--iris) 28%, #fff); }
.xp-col.on .xp-bar, .xp-col.on:hover .xp-bar { background: var(--iris); }
.xp-xlab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 8px; }
.xp-xlab span { font: 700 11px var(--sans); letter-spacing: .1em; color: var(--muted); text-align: center; }
.xp-xlab span.on { color: var(--iris); }
.xp-cap { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin: 12px 0 0; line-height: 1.5; }

.xp-facts { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.xp-fact { position: relative; padding: 9px 0 11px 12px; border-bottom: 1px solid var(--line); }
.xp-fact:last-child { border-bottom: 0; }
.xp-fact::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 14px; width: 3px; border-radius: 3px; }
.xp-fact.is-paid::before  { background: var(--paid); }
.xp-fact.is-draft::before { background: var(--draft); }
.xp-fact.is-over::before  { background: var(--overdue); }
.xp-fk { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.xp-fact.is-paid  .xp-fk { color: color-mix(in srgb, var(--paid) 80%, #000); }
.xp-fact.is-draft .xp-fk { color: color-mix(in srgb, var(--draft) 74%, #000); }
.xp-fact.is-over  .xp-fk { color: color-mix(in srgb, var(--overdue) 78%, #000); }
.xp-frow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 4px; }
.xp-frow b { font: 600 19px var(--serif); }
.xp-fact.is-paid  .xp-frow b { color: var(--paid); }
.xp-fact.is-draft .xp-frow b { color: var(--draft); }
.xp-fact.is-over  .xp-frow b { color: var(--overdue); }
.xp-frow em { font: 600 11px var(--sans); font-style: normal; color: var(--muted); white-space: nowrap; }
.xp-track { display: block; height: 5px; border-radius: 3px; margin-top: 7px; position: relative;
  background: color-mix(in srgb, var(--ink) 7%, #fff); }
.xp-track i { display: block; height: 100%; border-radius: 3px; }
.xp-track u { position: absolute; top: -3px; width: 2px; height: 11px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 58%, #fff); }
.xp-fact.is-paid  .xp-track i { background: var(--paid); }
.xp-fact.is-draft .xp-track i { background: var(--draft); }
.xp-fact.is-over  .xp-track i { background: var(--overdue); }

/* ---- band two ---- */
.xp-band2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.xp-pad { padding: 22px 26px 24px; }
.xp-stack { display: flex; height: 22px; border-radius: 7px; overflow: hidden; margin-top: 14px; }
.xp-stack i { display: block; height: 100%; }
.xp-s1 { background: var(--iris); }
.xp-s2 { background: color-mix(in srgb, var(--iris) 78%, var(--sky)); }
.xp-s3 { background: color-mix(in srgb, var(--iris) 52%, var(--sky)); }
.xp-s4 { background: color-mix(in srgb, var(--iris) 26%, var(--sky)); }
.xp-s5 { background: var(--sky); }
.xp-slegend { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 13px; }
.xp-sl { display: flex; align-items: center; gap: 8px; font: 400 12px var(--sans); color: var(--ink); min-width: 0; }
.xp-sl em { width: 9px; height: 9px; border-radius: 3px; display: block; flex: 0 0 9px; font-style: normal; }
.xp-sl i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-sl b { margin-left: auto; font: 600 12px var(--sans); white-space: nowrap; }
.xp-sl s { text-decoration: none; font: 600 11px var(--sans); color: var(--muted);
  width: 36px; text-align: right; flex: 0 0 36px; }
.xp-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.xp-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.xp-pbar { display: flex; height: 11px; border-radius: 6px; overflow: hidden; margin-top: 12px; }
.xp-pbar i { display: block; height: 100%; }
.xp-dots i.is-doc, .xp-pbar i.is-doc { background: var(--paid); }
.xp-dots i.is-or,  .xp-pbar i.is-or  { background: var(--draft); }
.xp-dots i.is-none { background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--overdue) 45%, #fff); }
.xp-pbar i.is-none { background: color-mix(in srgb, var(--overdue) 20%, #fff); }
.xp-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 12px;
  font: 500 11.5px var(--sans); color: var(--ink); opacity: .84; }
.xp-legend span { display: flex; align-items: center; gap: 6px; }
.xp-legend em { width: 9px; height: 9px; border-radius: 50%; display: block; font-style: normal; }
.xp-legend em.is-doc { background: var(--paid); }
.xp-legend em.is-or { background: var(--draft); }
.xp-legend em.is-none { background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--overdue) 45%, #fff); }
.xp-none { font: 400 12px var(--sans); color: var(--muted); margin: 10px 0 0; line-height: 1.55; }

.xp-reps { margin-top: 10px; }
.xp-rep { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.xp-rep:last-child { border-bottom: 0; }
.xp-rep b { font: 600 12.5px var(--sans); }
.xp-rep i { font-style: normal; font: 400 11px var(--sans); color: var(--muted); margin-left: 8px; }
.xp-rep em { font-style: normal; font: 600 13px var(--serif); white-space: nowrap; }
.xp-acct { display: flex; gap: 11px; align-items: stretch; margin-top: 11px; flex-wrap: wrap; }
.xp-acct .btn { align-self: center; }
.xp-lens { display: block; border: 1px solid var(--line); border-radius: 11px; padding: 8px 15px;
  background: var(--surface); text-decoration: none; color: var(--ink); }
.xp-lens b { display: block; font: 600 12.5px var(--sans); }
.xp-lens span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 1px; }
.xp-lens:hover { border-color: color-mix(in srgb, var(--iris) 34%, #fff); text-decoration: none; }
.xp-lens.on { background: var(--iris); border-color: var(--iris); box-shadow: var(--lift-1); }
.xp-lens.on b, .xp-lens.on span { color: #fff; }
.xp-lens.on span { opacity: .82; }
.xp-back { margin: 14px 0 0; font: 600 12.5px var(--sans); }

/* ---- the inbox line ---- */
.xp-inbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px;
  padding: 12px 20px; border-radius: 12px; background: var(--draft-tint);
  color: color-mix(in srgb, var(--draft) 80%, #000); font: 400 12.5px var(--sans); }
.xp-inbox > i { width: 8px; height: 8px; border-radius: 50%; background: var(--draft); flex: 0 0 8px; }
.xp-inbox.is-clear { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 82%, #000); }
.xp-inbox.is-clear > i { background: var(--paid); }
.xp-itx { min-width: 0; }
.xp-itx b { font-weight: 700; }
.xp-verbs { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.xp-drive { margin: 0; display: inline; }
.xp-verb { display: inline-flex; align-items: center; height: var(--ctl-h-sm); padding: 0 13px;
  border-radius: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--draft) 34%, #fff);
  font: 700 11.5px var(--sans); color: color-mix(in srgb, var(--draft) 76%, #000);
  text-decoration: none; cursor: pointer; }
.xp-verb:hover { text-decoration: none; box-shadow: var(--lift-1); }
.xp-inbox.is-clear .xp-verb { border-color: color-mix(in srgb, var(--paid) 32%, #fff);
  color: color-mix(in srgb, var(--paid) 80%, #000); }

/* ---- section heads, the ledger, the doors ---- */
.xp-shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; margin: 34px 0 14px; }
.xp-shead h2 { font: 700 27px var(--serif); letter-spacing: -.015em; color: var(--ink); margin: 0; }
.xp-ssub { font: 400 13px var(--sans); color: var(--muted); margin: 6px 0 0; }
.xp-shead h2 .count { display: inline-block; vertical-align: 4px; margin-left: 6px;
  padding: 3px 9px; border-radius: 999px; background: var(--iris-tint); color: var(--iris-deep);
  font: 700 11px var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.xp-lenses { display: flex; gap: 9px; flex-wrap: wrap; }
.xp-ledger { padding: 14px 16px; }
.xp-ledger .xrows { gap: 0; }
.xp-ledger .xrow { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.xp-ledger .xrow:last-child { border-bottom: 0; }
.xp-ledger .xrow-total { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }

.xp-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(248px,100%), 1fr)); gap: 16px; }
.xp-ucard { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); border-radius: 20px;
  box-shadow: var(--lift-1); overflow: hidden; display: flex; flex-direction: column; }
.xp-uhead { display: flex; align-items: center; gap: 11px; padding: 13px 15px 12px;
  border-bottom: 1px solid var(--line); }
.xp-uhead .iv-fob { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; font-size: 12px; }
.xp-uhead b { display: block; font: 600 13.5px var(--sans); }
.xp-uchip { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 5px;
  font: 700 11px var(--sans); letter-spacing: .08em; font-style: normal;
  background: var(--iris-tint); color: var(--iris-deep); }
.xp-ubody { padding: 13px 15px 14px; display: flex; flex-direction: column; flex: 1; }
.xp-u2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp-u2 i { display: block; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-style: normal; }
.xp-u2 b { display: block; font: 600 16px var(--serif); margin-top: 4px; }
.xp-u2 s { display: block; text-decoration: none; font: 400 11px var(--sans); color: var(--muted); margin-top: 2px; }
.xp-ubar { margin-top: 13px; }
.xp-uh { display: flex; justify-content: space-between; align-items: baseline; }
.xp-uh i { font-style: normal; font: 700 11px var(--sans); letter-spacing: .12em; color: var(--muted); }
.xp-uh em { font-style: normal; font: 700 11px var(--sans); }
.xp-uh em.is-paid { color: var(--paid); }
.xp-uh em.is-draft { color: var(--draft); }
.xp-uh em.is-over { color: var(--overdue); }
.xp-ut { display: block; height: 6px; border-radius: 4px; margin-top: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, #fff); }
.xp-ut i { display: block; height: 100%; border-radius: 4px; }
.xp-ut i.is-paid { background: var(--paid); }
.xp-ut i.is-draft { background: var(--draft); }
.xp-ut i.is-over { background: var(--overdue); }
.xp-utot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font: 600 11.5px var(--sans); color: var(--muted); }
.xp-utot b { font: 600 14px var(--serif); color: var(--ink); }
.xp-glines { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.xp-glines span { display: flex; justify-content: space-between; gap: 10px; font: 400 11.5px var(--sans); }
.xp-glines i { font-style: normal; min-width: 0; }
.xp-glines b { font: 600 11.5px var(--sans); white-space: nowrap; }
.xp-ucard.is-fold .xp-ubody, .xp-ucard.is-gen .xp-ubody { justify-content: flex-start; }
.xp-grand { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px;
  margin: 16px 4px 0; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.xp-grand b { font: 600 19px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---- record an expense (3.213) ----
   The form stopped being a card with a small grey heading and became a field
   of the day: the heading is the page's own .xp-shead, and the panel wears
   the one edge My day set — the rule at the top of that block is where the
   colour and the radius are declared, so this is only the room inside it. */
.xp-rec { padding: 24px 30px 28px; margin-bottom: 18px; }
/* the accountant's month is two sheets of the same field — it keeps .card for
   the small-caps h2 that rule owns, and takes the edge and the room from here */
.xp-sheet { padding: 24px 30px 26px; }
.xp-rec > .x3s:first-of-type { margin-top: 4px; }
/* the ones that come round again: a row of chips under its own key */
.xp-again { margin: 0 0 4px; }
.xp-again .justnow { margin-top: 9px; }

@media (max-width: 1040px) {
  .xp-band { grid-template-columns: 1fr; }
  .xp-bcol + .xp-bcol { border-left: 0; border-top: 1px solid var(--line); }
  .xp-band2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* a phone has no 30px to give either side of a form */
  .xp-rec, .xp-sheet { padding: 18px 16px 22px; }
  .xp-bcol, .xp-pad { padding: 18px 16px 20px; }
}
@media (max-width: 640px) {
  .xp-h1 { font-size: 27px; }
  .xp-slegend { grid-template-columns: 1fr; }
  .xp-verbs { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   PROFIT & LOSS (3.189) — the month on the wide measure, in My day's language
   Owner board, approved: the cockpit rail retires, the verdict and the year
   stand side by side, and every small caps label reads at --muted rather than
   --faint (3:1 becomes 6:1 — the one deliberate departure from the day).
   Nothing here invents a colour: the eight tokens, mixes of them, and the one
   whitelisted rose that means the Airbnb channel.
   ========================================================================== */
.pnl { margin-top: 18px; }

/* the head: the month, how the estate stands, and the way to the other months */
.pl-hd { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin: 4px 0 22px; }
.pl-hi { font: 700 34px/1.1 var(--serif); color: var(--ink); margin: 0; }
.pl-date { font: 700 12px var(--sans); letter-spacing: .14em; color: var(--muted); margin: 9px 0 0; }
.pl-hd-chips { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pl-chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 20px;
  padding: 11px 17px; font: 800 13px var(--sans); letter-spacing: .05em;
  background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-chip i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; background: var(--paid); }
.pl-pager { display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: 20px; padding: 10px 16px; background: var(--surface); box-shadow: var(--lift-1);
  font: 700 13px var(--sans); }
.pl-pager a { color: var(--muted); }
.pl-pager a:hover { color: var(--iris); text-decoration: none; }
.pl-pager em { color: var(--iris-deep); font-style: normal; font-weight: 800; }
.pl-now { font: 700 13px var(--sans); color: var(--iris); }

/* every field on the page wears the same edge: a hairline you can see on white */
.pl-fld { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); position: relative; min-width: 0; }
.pl-k { font: 800 11px var(--sans); letter-spacing: .15em; color: var(--muted); margin: 0; }
.pl-row1 { display: grid; grid-template-columns: 1.15fr 1.5fr .95fr; gap: 16px; align-items: stretch; }
.pl-row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }

/* the verdict: the number, the share of the money it is, and its channels */
.pl-verdict { padding: 26px 30px 22px; display: flex; flex-direction: column; }
.pl-v-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; }
.pl-v-n { font: 700 34px/1.15 var(--serif); color: var(--ink); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pl-v-n span { display: block; font: 600 13px var(--sans); color: var(--muted); margin-top: 9px; }
.pl-verdict.is-paid .pl-v-n { color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-verdict.is-over .pl-v-n { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.pl-ring .md-ring { width: 96px; height: 96px; }
.pl-ring .md-ring-tx b { font: 700 21px var(--serif); }
.pl-ring .md-ring-tx em { font-size: 10px; color: var(--muted); }
.pl-v-chip { align-self: flex-start; margin-top: 18px; border-radius: 12px; padding: 7px 12px;
  font: 800 11px var(--sans); letter-spacing: .05em; }
.pl-v-chip.is-up { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-v-chip.is-down { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-v-sub { font: 400 12.5px/1.55 var(--sans); color: color-mix(in srgb, var(--ink) 80%, #fff); margin: 14px 0 0; }
.pl-v-sub b { font-weight: 700; color: var(--ink); }
.pl-v-note { font: 400 11.5px var(--sans); color: var(--muted); margin: 8px 0 0; }
.pl-vsplit { margin-top: auto; padding-top: 20px; }

/* the year in bars: the one figure that answers "is this month normal" */
.pl-chart { padding: 26px 30px 20px; }
.pl-chart-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.pl-chart-hd b { font: 700 30px var(--serif); color: var(--ink); }
.pl-chart-hd span { font: 600 14px var(--sans); color: var(--muted); }
.pl-chart-hd em { margin-left: auto; font: 800 11px var(--sans); letter-spacing: .12em; font-style: normal; }
.pl-chart-hd em.is-paid { color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-chart-hd em.is-over { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-bars { position: relative; display: flex; align-items: flex-end; gap: 11px; height: 132px;
  margin: 34px 0 34px; border-bottom: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.pl-b { flex: 1 1 0; height: 100%; position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; }
.pl-b i { display: block; width: 100%; max-width: 56px; border-radius: 8px; position: relative;
  overflow: hidden; background: color-mix(in srgb, var(--iris) 26%, #fff); }
.pl-b i s { position: absolute; left: 0; right: 0; top: 0; display: block; text-decoration: none;
  background: color-mix(in srgb, #FF385C 34%, #fff); }
.pl-b.is-live i { background: var(--iris); }
.pl-b.is-live i s { background: #FF385C; }
.pl-b.is-bad i { background: color-mix(in srgb, var(--overdue) 55%, #fff); }
.pl-b.is-live.is-bad i { background: var(--overdue); }
.pl-b b { position: absolute; bottom: -23px; left: 0; right: 0; text-align: center;
  font: 700 11px var(--sans); letter-spacing: .08em; color: var(--muted); }
.pl-b.is-live b { color: var(--ink); }
.pl-b u { text-decoration: none; margin-bottom: 7px; white-space: nowrap;
  font: 800 11px var(--sans); color: var(--iris-deep); }
.pl-avg { position: absolute; left: 0; right: 0; height: 0; display: block; z-index: 2;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 30%, #fff); }
.pl-avg b { position: absolute; left: 0; top: -19px; font: 700 11px var(--sans);
  letter-spacing: .08em; color: var(--muted); background: var(--surface); padding: 0 7px 0 0;
  border-radius: 4px; }
.pl-chart-note { font: 400 12px var(--sans); color: var(--muted); margin: 0;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pl-lg { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--sans);
  color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.pl-lg i { width: 10px; height: 10px; border-radius: 3px; }

/* the three measures: collected, went out, and what is still owed */
.pl-three { padding: 22px 22px 18px; display: flex; flex-direction: column; }
.pl-m { padding: 14px 0; }
.pl-m + .pl-m { border-top: 1px solid var(--line); }
.pl-m-k { display: flex; align-items: center; gap: 10px; margin: 0;
  font: 800 11px var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.pl-m-k i { width: 4px; height: 15px; border-radius: 2px; flex: 0 0 4px; }
.pl-m-v { font: 700 26px var(--serif); margin: 10px 0 0; overflow-wrap: anywhere; }
.pl-mbar { display: block; position: relative; height: 9px; border-radius: 5px;
  background: var(--soft); margin-top: 14px; }
.pl-mbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; min-width: 9px; display: block; }
.pl-m-sub { font: 400 12px var(--sans); color: var(--muted); margin: 9px 0 0; }
.pl-m-note { font: 400 11.5px var(--sans); color: var(--muted); margin: 5px 0 0; }
.pl-m.is-paid .pl-m-k, .pl-m.is-paid .pl-m-v { color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-m.is-paid .pl-m-k i, .pl-m.is-paid .pl-mbar i { background: var(--paid); }
.pl-m.is-draft .pl-m-k, .pl-m.is-draft .pl-m-v { color: color-mix(in srgb, var(--draft) 68%, #000); }
.pl-m.is-draft .pl-m-k i, .pl-m.is-draft .pl-mbar i { background: var(--draft); }
.pl-m.is-over .pl-m-k, .pl-m.is-over .pl-m-v { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-m.is-over .pl-m-k i, .pl-m.is-over .pl-mbar i { background: var(--overdue); }

/* where it came from, where it went, and one dot per door */
.pl-flow { padding: 26px 30px 22px; }
.pl-flow-k { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.pl-flow-k b { font: 700 15px var(--serif); color: var(--ink); }
.pl-flow-k span { font: 600 12px var(--sans); color: var(--muted); margin-left: auto; }
.pl-comp { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--soft); }
.pl-comp i { display: block; height: 100%; }
.pl-keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.pl-key { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--sans); color: var(--muted); }
.pl-key i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.pl-key b { color: var(--ink); font-weight: 700; }
.pl-key em { font-style: normal; color: var(--muted); font-weight: 600; }
.pl-doors { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pl-dots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.pl-dots i { width: 15px; height: 15px; border-radius: 50%; display: block; }
.pl-dots i.is-ok, .pl-dotkey i.is-ok { background: var(--paid); }
.pl-dots i.is-bad, .pl-dotkey i.is-bad { background: var(--overdue); }
.pl-dots i.is-nil, .pl-dotkey i.is-nil { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }
.pl-dotkey { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 0;
  font: 600 11.5px var(--sans); color: var(--muted); }
.pl-dotkey span { display: inline-flex; align-items: center; gap: 7px; }
.pl-dotkey i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* the facts a statement is made of, and the verbs under them */
.pl-facts { padding: 26px 26px 22px; display: flex; flex-direction: column; }
.pl-f { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pl-f em { font: 600 12.5px var(--sans); color: var(--muted); font-style: normal; }
.pl-f b { margin-left: auto; font: 700 16px var(--serif); color: var(--ink); text-align: right; }
.pl-f b.ok { color: color-mix(in srgb, var(--paid) 84%, #000); }
.pl-f b.bad { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-f-sub { font: 400 11.5px var(--sans); color: var(--muted); margin: 0; padding: 10px 0 2px; }
.pl-verbs { display: flex; align-items: center; gap: 16px; margin: auto 0 0; padding-top: 20px; }
.pl-ghost { font: 700 13px var(--sans); color: var(--iris); }

/* the one exception, said in words */
.pl-band { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 16px 22px;
  border-radius: 20px; background: var(--overdue-tint);
  border: 1px solid color-mix(in srgb, var(--overdue) 22%, #fff); flex-wrap: wrap; }
.pl-band i { width: 11px; height: 11px; border-radius: 50%; background: var(--overdue); flex: 0 0 11px; }
.pl-band b { font: 700 14px var(--sans); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.pl-band span { font: 400 13px var(--sans); color: color-mix(in srgb, var(--ink) 80%, #fff); }
.pl-band a { margin-left: auto; font: 700 13px var(--sans);
  color: color-mix(in srgb, var(--overdue) 80%, #000);
  border: 1px solid color-mix(in srgb, var(--overdue) 35%, #fff); border-radius: 14px;
  padding: 9px 15px; background: var(--surface); white-space: nowrap; }
.pl-band a:hover { text-decoration: none; box-shadow: var(--lift-1); }

/* by door: the section head, and the three ways in */
.pl-sect { display: flex; align-items: flex-end; gap: 14px; margin: 44px 0 16px; flex-wrap: wrap; }
.pl-sect h2 { font: 700 26px var(--serif); margin: 0; }
.pl-sect p { font: 400 13px var(--sans); color: var(--muted); margin: 0 0 3px; }
.pl-seg { margin-left: auto; display: flex; gap: 6px; background: var(--soft); border-radius: 16px; padding: 5px; }
.pl-seg a { border-radius: 12px; padding: 9px 15px; font: 700 12.5px var(--sans);
  color: var(--muted); text-align: center; }
.pl-seg a:hover { text-decoration: none; color: var(--ink); }
.pl-seg a b { display: block; font: 800 11px var(--sans); letter-spacing: .06em;
  color: var(--muted); margin-top: 3px; }
.pl-seg a.on { background: var(--iris); color: #fff; box-shadow: var(--lift-1); }
.pl-seg a.on b { color: color-mix(in srgb, #fff 82%, var(--iris)); }
.pl-empty { font: 400 13px var(--sans); color: var(--muted); margin: 18px 0 0; padding: 20px 24px;
  border-radius: 20px; background: var(--soft); }

/* how it is counted: method, under the work rather than over it */
.pl-method { margin: 26px 0 0; padding: 16px 22px; border-radius: 16px;
  border: 1px dashed var(--line); font: 400 12px/1.7 var(--sans); color: var(--muted); }
.pl-method b { color: var(--ink); font-weight: 700; }

/* the ladder: three fields become two, then one; the doors go single file */
@media (max-width: 1240px) {
  .pl-row1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-row2 { grid-template-columns: minmax(0, 1fr); }
  /* one door to a row — and a track that may be narrower than the card wants,
     or a 408px unit card sits in a 362px phone and pushes the page (3.218) */
  .plrows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pl-row1 { grid-template-columns: 1fr; }
  .pl-hi { font-size: 27px; }
  .pl-v-n { font-size: 30px; }
  .pl-hd-chips { margin-left: 0; }
}

/* ==========================================================================
   THE RECEIPT INBOX (3.190) — the inbox on the wide measure, owner board
   approved. Same language as My day: white ground, a hairline round every
   field, the figure large and dark over a small grey label, and every number
   given a shape. The one thing this page does that no other does is make the
   SCAN big — reading the paper is the work, so the picture is not a thumbnail.
   No colour is written here: the eight tokens and colour-mixes of them only,
   and no label is set in --faint — 3.189 ruled that small caps read at --muted
   (3:1 becomes 6:1), and that ruling is the platform's, not one page's.
   ========================================================================== */
.rinb { margin-top: 18px; }

/* the greeting, and how the inbox stands */
.ri-hd { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin: 4px 0 22px; }
.ri-hi { font: 700 34px/1.1 var(--serif); color: var(--ink); margin: 0; }
.ri-date { font: 700 12px var(--sans); letter-spacing: .14em; color: var(--muted); margin: 9px 0 0; }
.ri-hd-chips { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ri-chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 20px;
           padding: 11px 17px; font: 800 13px var(--sans); letter-spacing: .05em; }
.ri-chip i { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.ri-chip.is-late { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ri-chip.is-late i { background: var(--overdue); }
.ri-chip.is-warn { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.ri-chip.is-warn i { background: var(--draft); }
.ri-chip.is-good { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-chip.is-good i { background: var(--paid); }

/* every field on the page wears the same edge */
.ri-pile, .ri-fig, .ri-chart, .ri-map, .rc, .ri-done {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); position: relative; min-width: 0; }
.ri-k { font: 800 11px var(--sans); letter-spacing: .15em; color: var(--muted); margin: 0;
        display: flex; align-items: center; gap: 12px; }

/* the pile, and the three money facts beside it */
.ri-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.ri-pile { padding: 26px 30px 22px; display: flex; flex-direction: column; }
.ri-pile-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ri-pile-n { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 0; min-width: 0; }
.ri-pile-n b { font: 700 72px/1 var(--serif); color: var(--ink); }
.ri-pile-n span { font: 600 17.5px var(--sans); color: var(--muted); white-space: nowrap; }
/* the pile's ring is a size smaller than My day's, so the sentence beside the
   figure stays on one line at the width this card actually gets */
.ri-pile-ring { position: relative; flex: 0 0 108px; width: 108px; height: 108px; }
.ri-pile-ring .md-ring { width: 108px; height: 108px; }
.ri-pile-ring .md-ring-tx b { font-size: 23px; }
.ri-sq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ri-sq i, .ri-sq-key i { display: block; border-radius: 5px; }
.ri-sq i { width: 15px; height: 15px; }
.ri-sq i.is-all,  .ri-sq-key i.is-all  { background: var(--iris); }
.ri-sq i.is-some, .ri-sq-key i.is-some { background: color-mix(in srgb, var(--iris) 34%, #fff); }
.ri-sq i.is-none, .ri-sq-key i.is-none { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }
.ri-sq-key { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 0;
             font: 600 11.5px var(--sans); color: var(--muted); }
.ri-sq-key span { display: inline-flex; align-items: center; gap: 7px; }
.ri-sq-key i { width: 9px; height: 9px; border-radius: 3px; }
.ri-pile-foot { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line);
                font: 800 11px var(--sans); letter-spacing: .11em; color: var(--muted); }

.ri-fig { padding: 24px 22px 18px; display: flex; flex-direction: column; }
.ri-fig-k { display: flex; align-items: center; gap: 11px; margin: 0;
            font: 800 11px var(--sans); letter-spacing: .13em; }
.ri-fig-k i { width: 4px; height: 15px; border-radius: 2px; display: block; flex: 0 0 4px; }
.ri-fig-v { font: 700 30px/1.1 var(--serif); margin: 14px 0 0; overflow-wrap: anywhere; }
.ri-fig-chip { align-self: flex-start; margin-top: 12px; border-radius: 12px; padding: 6px 10px;
               font: 800 11px var(--sans); letter-spacing: .02em; white-space: nowrap; }
.ri-bar { display: block; position: relative; height: 9px; border-radius: 5px;
          background: var(--soft); margin-top: 20px; }
.ri-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; display: block; }
.ri-fig-sub { font: 400 12px var(--sans); color: var(--muted); margin: 11px 0 0; }
.ri-fig-note { font: 400 11px var(--sans); color: var(--muted); margin: 6px 0 0; }
.ri-fig-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
             font: 700 13px var(--sans); color: var(--iris); align-self: flex-start; }
.ri-fig.is-paid  .ri-fig-k, .ri-fig.is-paid  .ri-fig-v { color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-fig.is-over  .ri-fig-k, .ri-fig.is-over  .ri-fig-v { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ri-fig.is-draft .ri-fig-k, .ri-fig.is-draft .ri-fig-v { color: color-mix(in srgb, var(--draft) 70%, #000); }
.ri-fig.is-paid  .ri-fig-k i, .ri-fig.is-paid  .ri-bar i { background: var(--paid); }
.ri-fig.is-over  .ri-fig-k i, .ri-fig.is-over  .ri-bar i { background: var(--overdue); }
.ri-fig.is-draft .ri-fig-k i, .ri-fig.is-draft .ri-bar i { background: var(--draft); }
.ri-fig.is-paid  .ri-fig-chip { background: var(--paid-tint);    color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-fig.is-over  .ri-fig-chip { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ri-fig.is-draft .ri-fig-chip { background: var(--draft-tint);   color: color-mix(in srgb, var(--draft) 70%, #000); }

/* how the paper arrives, and where it goes */
.ri-mid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.ri-chart { padding: 26px 30px 20px; }
.ri-usual { margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
            font: 800 11px var(--sans); letter-spacing: .12em; color: var(--muted); font-style: normal; }
.ri-usual s { width: 26px; height: 0; text-decoration: none; display: block;
              border-top: 1px dashed color-mix(in srgb, var(--ink) 26%, #fff); }
.ri-bars { position: relative; display: flex; align-items: flex-end; gap: 10px;
           height: 122px; margin: 34px 0 32px;
           border-bottom: 1px solid color-mix(in srgb, var(--iris) 18%, #fff); }
.ri-b { flex: 1 1 0; height: 100%; position: relative; display: flex;
        flex-direction: column; justify-content: flex-end; align-items: center; }
.ri-b i { display: block; width: 100%; max-width: 54px; border-radius: 7px;
          background: color-mix(in srgb, var(--iris) 26%, #fff); }
.ri-b.is-live i { background: var(--iris); }
.ri-b b { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
          font: 700 11px var(--sans); letter-spacing: .08em; color: var(--muted); }
.ri-b.is-live b { color: var(--ink); }
.ri-b u { flex: 0 0 auto; text-decoration: none; margin-bottom: 6px;
          font: 800 11px var(--sans); color: var(--iris-deep); }
.ri-avg { position: absolute; left: 0; right: 0; height: 0; display: block;
          border-top: 1px dashed color-mix(in srgb, var(--ink) 26%, #fff); }
.ri-src { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--soft); }
.ri-src i { display: block; height: 12px; }
.ri-src i.is-first, .ri-src-key i.is-first { background: var(--iris); }
.ri-src i.is-rest,  .ri-src-key i.is-rest  { background: color-mix(in srgb, var(--sky) 55%, #fff); }
.ri-src-key { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 13px 0 0;
              font: 400 12.5px var(--sans); color: var(--ink); }
.ri-src-key span { display: inline-flex; align-items: center; gap: 8px; }
.ri-src-key i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.ri-src-key em { margin-left: auto; font: 800 11px var(--sans); letter-spacing: .11em;
                 color: var(--muted); font-style: normal; }
.ri-none { font: 400 12.5px var(--sans); color: var(--muted); margin: 16px 0 0; }

.ri-map { padding: 26px 28px 22px; display: flex; flex-direction: column; }
.ri-map-r { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; }
.ri-map-r .iv-fob { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px;
                    display: flex; align-items: center; justify-content: center; font: 700 12px var(--sans); }
.ri-map-r b { display: block; font: 700 14px var(--sans); color: var(--ink); }
.ri-map-r em { display: block; font: 400 11.5px/1.45 var(--sans); color: var(--muted);
               font-style: normal; margin-top: 2px; }
.ri-drive { margin: auto 0 0; padding-top: 20px; }
.ri-drive button { width: 100%; height: var(--ctl-h); border: 0; border-radius: 12px;
                   background: var(--grad-btn); color: #fff; cursor: pointer;
                   font: 800 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ri-drive button:hover { box-shadow: var(--lift-2); }
.ri-drive span { display: block; text-align: center; margin-top: 12px;
                 font: 800 11px var(--sans); letter-spacing: .1em; color: var(--muted); }

/* the section headings, and the two lines under them */
.rinb .pagehead { margin-top: 40px; }
.ri-h2 { align-items: center; }
.ri-h2 .secttl { font: 700 28px var(--serif); color: var(--ink); margin: 0; }
.ri-count { border-radius: 12px; padding: 6px 12px; background: var(--soft); color: var(--muted);
            font: 800 11px var(--sans); letter-spacing: .11em; }
.ri-count.is-warn { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.ri-count.is-good { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-lead { font: 400 13.5px var(--sans); color: var(--muted); margin: 8px 0 20px; }
.ri-lead b { color: var(--ink); font-weight: 700; }
.ri-clear { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 18px;
            background: var(--paid-tint); border: 1px solid color-mix(in srgb, var(--paid) 22%, #fff);
            font: 400 13.5px var(--sans); color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-clear i { width: 10px; height: 10px; border-radius: 50%; background: var(--paid); flex: 0 0 10px; }
.ri-clear b { font-weight: 700; }
.ri-more { font: 800 11px var(--sans); letter-spacing: .11em; color: var(--muted); margin: 14px 0 0; }

/* ---- one receipt: the scan, then the eight fields at a readable size ---- */
.rc { display: flex; gap: 26px; padding: 26px; margin-bottom: 18px; }
.rc.is-held { border-color: color-mix(in srgb, var(--draft) 42%, #fff); }
.rc-doc { flex: 0 0 236px; width: 236px; }
.rc-shot { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.rc-shot img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: top; }
.rc-shot:hover { border-color: var(--iris); }
.rc-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
          height: 250px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); }
.rc-pdf b { font: 700 26px var(--serif); color: var(--iris-deep); }
.rc-pdf em { font: 800 11px var(--sans); letter-spacing: .11em; color: var(--muted); font-style: normal; }
.rc-file { font: 700 11.5px var(--sans); color: var(--ink); margin: 13px 0 0; overflow-wrap: anywhere; }
.rc-when { font: 400 11px var(--sans); color: var(--muted); margin: 4px 0 0; }
.rc-again { margin: 12px 0 0; }
.rc-again button { height: var(--ctl-h-sm); padding: 0 16px; border-radius: 10px; cursor: pointer;
                   background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 30%, #fff);
                   color: var(--iris-deep); font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rc-again button:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; }

.rc-form { flex: 1 1 auto; min-width: 0; }
.rc-head { display: flex; align-items: flex-start; gap: 20px; }
.rc-who { min-width: 0; flex: 1 1 auto; }
.rc-who b { display: block; font: 700 17px var(--sans); color: var(--ink); }
.rc-who span { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 4px; }
.rc-amt { text-align: right; flex: 0 0 auto; }
.rc-amt b { display: block; font: 700 28px var(--serif); color: var(--ink); }
.rc-conf { display: inline-block; margin-top: 8px; border-radius: 11px; padding: 5px 10px;
           font: 800 11px var(--sans); letter-spacing: .02em; font-style: normal; white-space: nowrap; }
.rc-conf.is-good { background: var(--paid-tint);  color: color-mix(in srgb, var(--paid) 84%, #000); }
.rc-conf.is-warn { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.rc-conf.is-none { background: var(--soft); color: var(--muted); }
.rc-warn { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 18px;
           border-radius: 12px; background: var(--draft-tint);
           font: 700 12.5px/1.5 var(--sans); color: color-mix(in srgb, var(--draft) 70%, #000); }
.rc-warn i { width: 12px; height: 12px; border-radius: 50%; background: var(--draft); flex: 0 0 12px; }

.rc-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.rc-f { min-width: 0; }
.rc-f input, .rc-f select { width: 100%; }
.rc-l { display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
        font: 800 11px var(--sans); letter-spacing: .13em; color: var(--muted); text-transform: uppercase; }
.rc-l.is-read { color: var(--iris-deep); }
.rc-l.is-read i { width: 7px; height: 7px; border-radius: 50%; background: var(--iris); display: block; }
.rc-l.is-blank { color: color-mix(in srgb, var(--draft) 70%, #000); }
.rc-l em { font-style: normal; letter-spacing: .1em; }
.rc-hint { font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: none; }
.rc-l.is-blank + input, .rc-l.is-blank + select, .rc-l.is-blank + .rc-peso input {
  border-color: color-mix(in srgb, var(--draft) 34%, #fff);
  background: color-mix(in srgb, var(--draft) 5%, #fff); }
.rc-peso { position: relative; display: block; }
.rc-peso i { position: absolute; left: 14px; top: 0; height: var(--ctl-h); line-height: var(--ctl-h);
             font: 400 14px var(--sans); color: var(--muted); font-style: normal; }
.rc-peso input { padding-left: 32px; }

.rc-foot { display: flex; align-items: center; gap: 20px; margin-top: 22px; padding-top: 18px;
           border-top: 1px solid var(--line); }
.rc-x { height: var(--ctl-h); padding: 0 22px; border-radius: 12px; cursor: pointer;
        background: var(--surface); border: 1px solid color-mix(in srgb, var(--overdue) 34%, #fff);
        color: color-mix(in srgb, var(--overdue) 80%, #000);
        font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rc-x:hover { background: var(--overdue-tint); }
.rc-note { flex: 1 1 auto; font: 400 12px/1.55 var(--sans); color: var(--muted); margin: 0; }
.rc-go { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px;
         border: 0; border-radius: 14px; cursor: pointer; background: var(--grad-btn); color: #fff;
         font: 800 12.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.rc-go:hover { box-shadow: var(--lift-2); }
.rc-xform { display: none; }
.md-check { width: 15px; height: 15px; flex: 0 0 15px; }

/* what you have handled — the memory the inbox used to throw away */
.ri-done { padding: 8px 24px; }
.ri-done-r { display: flex; align-items: center; gap: 18px; padding: 15px 0;
             border-bottom: 1px solid var(--line); }
.ri-done-r:last-child { border-bottom: 0; }
.ri-done-f { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px; display: flex;
             align-items: center; justify-content: center; background: var(--paid-tint);
             color: color-mix(in srgb, var(--paid) 84%, #000); }
.ri-done-r.is-no .ri-done-f { background: var(--soft); color: var(--muted); }
.ri-done-t { min-width: 0; flex: 1 1 auto; }
.ri-done-t b { display: block; font: 700 14.5px var(--sans); color: var(--ink); }
.ri-done-r.is-no .ri-done-t b { color: var(--muted); }
.ri-done-t span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 3px; }
.ri-done-a { font: 700 19px var(--serif); color: var(--ink); font-style: normal; }
.ri-done-r.is-no .ri-done-a { color: var(--muted); }
.ri-done-go { flex: 0 0 auto; font: 800 11px var(--sans); letter-spacing: .11em; color: var(--iris-deep); }
.ri-done-go.is-none { color: var(--muted); }

/* the ladder: four fields become two, then one; the card stacks on a phone */
@media (max-width: 1240px) {
  .ri-top { grid-template-columns: 1fr 1fr; }
  .ri-mid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rc { flex-direction: column; }
  .rc-doc { flex: 1 1 auto; width: auto; }
  .rc-foot { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .ri-top { grid-template-columns: 1fr; }
  .ri-hi { font-size: 27px; }
  .ri-pile-n b { font-size: 58px; }
  .rc-row > .rc-f { flex: 1 1 100% !important; }
}
/* ==========================================================================
   THE NAVIGATION (3.191) — the bar tells you where the work is
   Owner board, approved. The sections and panels keep every destination they
   had; what is new is a count where there is work, a line under each door, a
   search that is a tool rather than a word, and a bar on the phone.
   ========================================================================== */

/* the count a section or a door carries. It appears ONLY where there is work
   to do — see nav_counts() for the three rules that decide that. */
.navcount { font: 800 11px var(--sans); font-style: normal; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 9px; white-space: nowrap; line-height: 1.4; }
.navcount.is-late { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.navcount.is-warn { background: var(--draft-tint);   color: color-mix(in srgb, var(--draft) 70%, #000); }
.topbar nav > a.on .navcount, .topbar .navtop.on .navcount { background: #fff; }

/* search: its glass and the key that already opens it. A full field and nine
   sections do not both fit the 1360px measure — measured, not guessed. */
.navsearch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px;
  border: 1px solid var(--line); border-radius: 13px; color: var(--muted);
  background: var(--surface); align-self: center; flex: 0 0 auto; margin-right: 10px; }
.navsearch:hover { border-color: color-mix(in srgb, var(--iris) 30%, #fff); color: var(--iris-deep);
  text-decoration: none; }
.navsearch.on { border-color: var(--iris); color: var(--iris-deep); background: var(--iris-tint); }
.navsearch svg { width: 17px; height: 17px; flex: 0 0 17px; }
.navkey { font: 700 12px var(--sans); color: var(--muted); background: var(--soft);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }

/* the person: a face before the name */
.navface { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 27px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 3px;
  font: 800 11px var(--sans); background: var(--iris-tint); color: var(--iris-deep); }

/* a door, with the line that says what is behind it */
.navpanel.is-doors { min-width: 398px; gap: 2px; }
.nav-tx { display: block; min-width: 0; }
.nav-tx b { display: block; font: 700 14px var(--sans); color: var(--ink); }
.nav-tx em { display: block; font: 400 11.5px var(--sans); font-style: normal; color: var(--muted);
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navitem .navcount { margin-left: auto; }
.navitem.cur .nav-tx b { color: var(--iris-deep); }
.pv-item .navcount { margin-left: auto; align-self: center; }

/* ---- the phone bar: one thumb, four doors, and the verb beside them ---- */
.mobar { display: none; }
@media (max-width: 760px) {
  .mobar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
    display: flex; align-items: center; gap: 2px; padding: 6px 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 26px;
    box-shadow: var(--lift-3); }
  /* the More handle carries .mburger so it opens the same drawer — which means
     it also inherits the burger's own 44px box and auto margin. Both are
     answered here, or the row would shove itself to the right. */
  .mobar-i { flex: 1 1 0; min-width: 0; width: auto; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 2px; border-radius: 19px; border: 0; background: none; cursor: pointer;
    appearance: none; box-shadow: none;
    color: var(--muted); font: 700 11px var(--sans); text-decoration: none; }
  .mobar-i svg { width: 20px; height: 20px; }
  .mobar-i span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobar-i.on { background: var(--iris-tint); color: var(--iris-deep); }
  .mobar-i:hover { text-decoration: none; }
  .mobar-plus { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; margin-left: 4px;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(180deg, var(--iris), var(--iris-deep)); box-shadow: var(--lift-2); }
  .mobar-plus svg { width: 22px; height: 22px; }
  .mobar-plus:hover { text-decoration: none; }
  /* the page must be able to reach its own end above the bar */
  body { padding-bottom: 88px; }
  /* the drawer opens over everything, so the bar steps aside while it is open */
  body.mnav-open .mobar { display: none; }
  /* the burger in the header goes: More is the handle on a phone */
  .topbar .mburger { display: none; }
}

/* the identity, at the head of its own menu: the bar has room for a face and a
   first name, and no more — the whole name and the role stand here (3.191) */
.navwho { display: flex; align-items: center; gap: 11px; padding: 4px 14px 12px;
  margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.navwho > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.navwho b { font: 700 14px var(--sans); color: var(--ink); }
.navwho .navface { width: 34px; height: 34px; flex: 0 0 34px; font-size: 13px; margin: 0; }

/* ==========================================================================
   INVOICES — THE BOARD (3.192)
   Owner board, approved. The page keeps its one job and gains the shape My
   day wears: a hero row saying what you are owed and how the months have
   gone, a row saying where the book stands and what bills itself, the doors,
   and a form in three steps. Every colour is one of the eight or a mix of
   them, and nothing here is set below 11px.
   ========================================================================== */
.ivcard { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); padding: 22px 24px 20px;
  display: flex; flex-direction: column; }
.ivhero { display: grid; grid-template-columns: 1.05fr 1.5fr 1fr; gap: 16px; }
.ivrow2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; margin-top: 16px; }

/* what you are owed — the figure, the share of the money out, and the paper */
.ivh-owed-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-top: 16px; }
.ivh-big { font: 700 38px/1 var(--serif); margin: 0; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ivh-big.is-over { color: var(--overdue); }
.ivh-big.is-paid { color: color-mix(in srgb, var(--paid) 84%, #000); }
.ivh-chip { display: inline-block; margin: 13px 0 0; padding: 6px 11px; border-radius: 12px;
  font: 600 11.5px var(--sans); }
.ivh-chip.is-over { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 76%, #000); }
.ivh-chip.is-paid { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 80%, #000); }
/* THE RING FILLS ITS OWN SLOT (3.230). ring_svg() writes width and height
   attributes for the size the caller asked for, but `.md-ring` sets 118px in
   CSS and CSS beats an attribute — so a ring asked for at 96 was drawn at 118
   and hung 22px over the sentence beneath it. Every wrapper that asks for
   something other than 118 now says so, as .ri-pile-ring already did. */
.ivh-ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.ivh-ring .md-ring { width: 96px; height: 96px; }
.ivh-ring-tx { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.ivh-ring-tx b { font: 700 17px var(--serif); }
.ivh-ring-tx em { font: 800 11px var(--sans); letter-spacing: .04em; color: var(--muted);
  font-style: normal; margin-top: 1px; }
.ivh-says { font: 400 12.5px/1.55 var(--sans); color: color-mix(in srgb, var(--ink) 74%, #fff); margin: 16px 0 0; }

/* the months, as bars, against the usual one */
.ivh-mos-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ivmos { display: flex; align-items: flex-end; gap: 12px; height: 150px; margin-top: 26px; position: relative; }
.ivmos-usual { position: absolute; left: 0; right: 0; display: block; z-index: 2;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 34%, #fff); }
.ivmo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%; text-decoration: none; color: var(--muted); }
.ivmo:hover { text-decoration: none; }
.ivmo b { font: 700 11px var(--sans); color: var(--muted); margin-bottom: 5px; }
.ivmo u { width: 100%; text-decoration: none; border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--iris) 12%, #fff); }
.ivmo i { font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  font-style: normal; margin-top: 7px; }
.ivmo:hover u { background: color-mix(in srgb, var(--iris) 26%, #fff); }
.ivmo.on u { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }
.ivmo.on b, .ivmo.on i { color: var(--iris-deep); }
.ivmos-tap { font: 800 11px var(--sans); letter-spacing: .1em; color: var(--muted); margin: 14px 0 0; }
.ivmos-facts { display: flex; gap: 14px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.ivmf { flex: 1; border-left: 3px solid var(--line); padding-left: 12px; }
.ivmf em { font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-style: normal; }
.ivmf b { display: block; font: 700 20px var(--serif); margin-top: 5px; overflow-wrap: anywhere; }
.ivmf span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 4px; }
.ivmf.is-iris { border-left-color: var(--iris); }
.ivmf.is-iris b { color: var(--iris-deep); }
.ivmf.is-paid { border-left-color: var(--paid); }
.ivmf.is-paid b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.ivmf.is-over { border-left-color: var(--overdue); }
.ivmf.is-over b { color: color-mix(in srgb, var(--overdue) 82%, #000); }

/* the three that are not in your hands yet */
.ivh-mets { gap: 18px; justify-content: space-between; }
.ivmet { border-left: 3px solid var(--line); padding-left: 13px; }
.ivmet em { font: 800 11px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-style: normal; }
.ivmet b { display: block; font: 700 23px var(--serif); margin: 5px 0 9px; overflow-wrap: anywhere; }
.ivmet-track { display: block; height: 5px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, #fff); }
.ivmet-track i { display: block; height: 100%; border-radius: 3px; background: var(--iris); }
.ivmet-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; }
.ivmet-foot u { text-decoration: none; font: 400 11px var(--sans); color: var(--muted); }
.ivmet-foot u + u { font-weight: 700; white-space: nowrap; }
.ivmet.is-soon { border-left-color: var(--iris); }
.ivmet.is-soon b { color: var(--iris-deep); }
.ivmet.is-soon .ivmet-track i { background: var(--iris); }
.ivmet.is-paid { border-left-color: var(--paid); }
.ivmet.is-paid b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.ivmet.is-paid .ivmet-track i { background: var(--paid); }
.ivmet.is-draft { border-left-color: var(--draft); }
.ivmet.is-draft b { color: color-mix(in srgb, var(--draft) 82%, #000); }
.ivmet.is-draft .ivmet-track i { background: var(--draft); }

/* where the book stands: the composition, then a dot per invoice */
.ivcomp { display: flex; height: 15px; border-radius: 8px; overflow: hidden;
  margin: 16px 0 15px; background: var(--soft); }
.ivcomp i { display: block; height: 100%; }
.ivcomp i.is-paid { background: var(--paid); }
.ivcomp i.is-sent { background: var(--iris); }
.ivcomp i.is-overdue { background: var(--overdue); }
.ivcomp i.is-draft { background: var(--draft); }
.ivcomp-key { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 22px; list-style: none; margin: 0; padding: 0; }
.ivcomp-key li { display: flex; align-items: center; gap: 8px; font: 400 12.5px var(--sans); }
.ivcomp-key i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ivcomp-key li.is-paid i { background: var(--paid); }
.ivcomp-key li.is-sent i { background: var(--iris); }
.ivcomp-key li.is-overdue i { background: var(--overdue); }
.ivcomp-key li.is-draft i { background: var(--draft); }
.ivcomp-key b { margin-left: auto; font-weight: 700; }
.ivcomp-key u { text-decoration: none; color: var(--muted); width: 34px; text-align: right; font: 400 11.5px var(--sans); }
.ivdots { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ivdots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.ivdots i.is-paid { background: var(--paid); }
.ivdots i.is-sent { background: var(--iris); }
.ivdots i.is-overdue { background: var(--overdue); }
.ivdots i.is-draft { background: var(--draft); }
/* hollow: it was sent, and the person who owes it has never once opened it */
.ivdots i.is-shut { background: #fff; box-shadow: inset 0 0 0 1.5px currentColor; }
.ivdots i.is-sent.is-shut { color: var(--iris); }
.ivdots i.is-overdue.is-shut { color: var(--overdue); }
.ivdots-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0;
  font: 400 11.5px var(--sans); color: var(--muted); }
.ivdots-key span { display: inline-flex; align-items: center; gap: 7px; }
.ivdots-key i { width: 9px; height: 9px; border-radius: 50%; }
.ivdots-key .is-paid i { background: var(--paid); }
.ivdots-key .is-sent i { background: var(--iris); }
.ivdots-key .is-overdue i { background: var(--overdue); }
.ivdots-key .is-draft i { background: var(--draft); }
.ivdots-key .is-shut i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--overdue); }
.ivnote { font: 400 11.5px/1.55 var(--sans); color: var(--muted); margin: 12px 0 0; }

/* what bills itself, and the accountant's doorway */
.ivrep { margin-top: 14px; }
.ivrep-r { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font: 400 13px var(--sans); }
.ivrep-r:last-child { border-bottom: 0; }
.ivrep-who { font: 600 13px var(--sans); }
.ivrep-when { color: var(--muted); font: 400 11.5px var(--sans); }
.ivrep-amt { margin-left: auto; font: 600 13px var(--sans); font-style: normal; white-space: nowrap; }
.ivrep-foot { font: 800 11px var(--sans); letter-spacing: .06em; color: var(--muted); margin: 12px 0 0; }
.ivexport { display: flex; align-items: center; gap: 14px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--line); }
.ivexport-box { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; background: var(--soft); }
.ivexport-box b { display: block; font: 700 13px var(--sans); }
.ivexport-box > span { font: 400 11.5px var(--sans); color: var(--muted); }
.ivexport-go { background: var(--paid); border-color: var(--paid); color: #fff; white-space: nowrap; }
.ivexport-go:hover { background: color-mix(in srgb, var(--paid) 86%, #000); color: #fff; }

/* the chase: the one big verb, on the strip that names the late money */
.ivchase { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 0;
  padding: 14px 20px; border-radius: 18px; background: var(--draft-tint);
  border: 1px solid color-mix(in srgb, var(--draft) 34%, #fff); }
.ivchase-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--draft); flex: 0 0 9px; }
.ivchase > b { font: 700 13.5px var(--sans); color: color-mix(in srgb, var(--draft) 82%, #000); }
.ivchase > span { flex: 1 1 220px; min-width: 0;
  font: 400 12.5px var(--sans); color: color-mix(in srgb, var(--ink) 74%, #fff); }
.ivchase-verbs { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  margin-left: auto; justify-content: flex-end; }
/* the quiet verb beside the loud one: an anchor needs the tag in the selector,
   or a.btn-sm's own background outranks the ghost rule */
.ivchase-verbs a.btn-sm { background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--draft) 40%, #fff); }
.ivchase-verbs a.btn-sm:hover { border-color: var(--draft); color: var(--ink); }
.ivchase .ckchase { margin: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
.ivchase .ckchase button { width: auto; padding: 9px 20px; border-radius: 15px; font: 700 13px var(--sans); }
.ivchase .ckchase span { font: 400 11px var(--sans); color: var(--muted); text-align: right; }
.ivbook-month { font: 600 12px var(--sans); color: var(--iris-deep); margin: 4px 0 0; }

/* by door: who owes, on which door, and how much of the month has settled */
.ivdoors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ivdoor { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 18px; box-shadow: var(--lift-1); overflow: hidden; }
.ivdoor-hd { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.ivdoor-hd b { display: block; font: 600 14px var(--sans); }
.ivdoor-hd em { display: block; font: 800 11px var(--sans); letter-spacing: .06em;
  color: var(--muted); font-style: normal; margin-top: 2px; }
.ivdoor-body { display: flex; gap: 12px; padding: 13px 15px 0; }
.ivdoor-body > div { flex: 1; min-width: 0; }
.ivdoor-body em { font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-style: normal; }
.ivdoor-body b { display: block; font: 700 19px var(--serif); margin-top: 5px; overflow-wrap: anywhere; }
.ivdoor-body span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 3px; }
.ivdoor-meter { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 12px 15px 13px; border-top: 1px solid var(--line); }
.ivdoor-meter em { font: 800 11px var(--sans); letter-spacing: .1em; color: var(--muted); font-style: normal; }
.ivdoor-meter .ivmet-track { flex: 1; }
.ivdoor-meter u { text-decoration: none; font: 700 11px var(--sans); }
.ivdoor.is-late .ivdoor-body > div + div b { color: var(--overdue); }
.ivdoor.is-late .ivmet-track i { background: var(--overdue); }
.ivdoor.is-late u { color: var(--overdue); }
.ivdoor.is-soon .ivdoor-body > div + div b { color: var(--iris-deep); }
.ivdoor.is-soon u { color: var(--iris-deep); }
.ivdoor.is-clear .ivdoor-body > div + div b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.ivdoor.is-clear .ivmet-track i { background: var(--paid); }
.ivdoor.is-clear u { color: color-mix(in srgb, var(--paid) 84%, #000); }

/* raise an invoice: three steps on the left, and on the right the paper it is
   about to make. The panel answers one question — what will land on the draft —
   so the answer is drawn as the draft, not described in a grey box. */
.ivform { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); padding: 22px 26px 20px; }

/* AGAIN: the five raised last, each saying what its draft would open at */
.ivagain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.ivagain > em { grid-column: 1 / -1; font: 800 11px var(--sans); letter-spacing: .12em;
  color: var(--muted); font-style: normal; margin-bottom: 2px; }
/* A CARD-SHAPED BUTTON IS A CARD (3.230). Every full-size button in the house
   is exactly --ctl-h tall, which is right for a control and wrong for this: two
   stacked rows and a fob need 68px, so the name and the figure spilled over
   their own border. height:auto lets it be as tall as what it holds. */
.ivagain-b { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  height: auto; min-height: var(--ctl-h);
  min-width: 0; text-align: left; padding: 11px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.ivagain-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ivagain-b b { font: 600 12px var(--sans); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.ivagain-bot { display: flex; align-items: baseline; gap: 8px; }
.ivagain-b span { font: 400 11px var(--sans); color: var(--muted); }
.ivagain-b u { text-decoration: none; margin-left: auto; white-space: nowrap;
  font: 700 12.5px var(--serif); color: var(--iris-deep); }
.ivagain-b:hover { border-color: var(--iris); }
.ivagain-b.on { background: var(--iris-tint); border-color: color-mix(in srgb, var(--iris) 34%, #fff); }

.ivraise { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }
.ivraise-ask { min-width: 0; }
/* the paper rides down the page with the questions, so what you are making is
   never scrolled off while you are answering for it */
.ivraise-doc { position: sticky; top: 16px; }
.ivstep { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ivstep i { width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; font-style: normal;
  background: linear-gradient(180deg, var(--iris), var(--iris-deep)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--sans); }
.ivstep b { font: 600 14px var(--sans); }
.ivstep span { font: 400 11.5px var(--sans); color: var(--muted); }
.ivform .fgrid { grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-bottom: 22px; }
.ivdates + .ivstep, .ivchoices + .ivstep { margin-top: 22px; }

/* the client control wears the face of whoever is picked, and says the two
   things about them this form cannot work out for itself */
.ivpick { display: flex; align-items: center; gap: 10px; height: var(--ctl-h); padding: 0 6px 0 12px;
  border-radius: 12px; background: var(--soft); border: 1px solid transparent; }
.ivpick .iv-fob { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; font-size: 9.5px; }
/* the control keeps its own caret — background-COLOR is what the fob's row
   takes over, not the picture that draws the arrow */
.ivpick select, .ivpick input[type=text] { height: 100%; background-color: transparent;
  border: 0; padding: 0 30px 0 0; }
.ivpick select { background-image: var(--caret-img); background-position: right 6px center; }
/* ONE ring, not two: the row wears the focus for the pair, and the control
   inside it stays bare — otherwise the field draws its own ring and gradient
   inside the row's, and the two read as a control inside a control. */
.ivpick select:hover, .ivpick input[type=text]:hover,
.ivpick select:focus, .ivpick input[type=text]:focus {
  background-color: transparent; border-color: transparent; box-shadow: none; }
.ivpick input[type=text]:focus { background-image: none; }
.ivpick select:focus { background-image: var(--caret-img); background-size: auto;
  background-position: right 6px center; }
.ivpick:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--iris) 34%, #fff);
  box-shadow: var(--ring); }
.ivpick-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; min-height: 22px; }
.ivtag { font: 600 11px var(--sans); padding: 4px 9px; border-radius: 999px;
  background: var(--soft); color: var(--muted); }
.ivtag.is-brand { background: var(--iris-tint); color: var(--iris-deep); }
/* the reference is optional, and an optional field left grey is a field nobody
   fills — so it offers the three answers it already knows */
.ivsugg { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ivsugg button { height: 26px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--iris) 24%, #fff); background: var(--surface);
  font: 500 11px var(--sans); color: var(--iris-deep); }
.ivsugg button:hover { border-style: solid; border-color: var(--iris); }

/* the dates are one fact — the terms — so the gap between them is drawn */
.ivdates { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 14px; background: var(--paper); }
.ivspan { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 14px; }
.ivdate { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.ivdate > label { font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 3px; }
.ivdate > input[type=date] { background: none; height: 28px; padding: 0;
  font: 700 18px var(--serif); color: var(--ink); }
.ivdate .fhelp { margin-top: 2px; }
.ivdate.is-due { border-color: color-mix(in srgb, var(--iris) 30%, #fff); }
.ivdate.is-due > input[type=date] { color: var(--iris-deep); }
.ivrail { display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 116px; padding-top: 22px; }
.ivrail u { text-decoration: none; font: 700 11px var(--sans); color: var(--iris-deep); }
.ivrail span { font: 400 11px var(--sans); color: var(--muted); }
.ivrail-line { width: 100%; height: 2px; border-radius: 2px; background: var(--grad); position: relative; }
.ivrail-line::before, .ivrail-line::after { content: ''; position: absolute; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--iris); }
.ivrail-line::before { left: 0; }
.ivrail-line::after { right: 0; background: var(--sky); }
.ivdates-bot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.ivdates-bot .dchips, .ivdates-bot .dsays { margin-left: 0; }
/* money falling due on a weekend is a fact worth saying calmly, and a nudge
   worth offering — never one the form takes on your behalf */
.ivdates-bot .dsays { color: color-mix(in srgb, var(--draft) 82%, #000); }
.dmove { height: 28px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: var(--draft-tint); border: 1px solid color-mix(in srgb, var(--draft) 34%, #fff);
  font: 700 11px var(--sans); color: color-mix(in srgb, var(--draft) 82%, #000); }
.dmove:hover { border-color: var(--draft); }
/* a button carries a display from the button rule, which outranks [hidden] in
   the browser's own sheet — so the offer says so itself when there is none */
.dmove[hidden] { display: none; }

.ivchoices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ivcheck { display: flex; align-items: flex-start; gap: 11px; margin: 0;
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.ivcheck b { display: block; font: 600 13px var(--sans); }
.ivcheck > span > span { display: block; font: 400 11.5px/1.5 var(--sans); color: var(--muted); margin-top: 4px; }
.ivcheck:has(input:checked) { background: var(--iris-tint); border-color: color-mix(in srgb, var(--iris) 26%, #fff); }

/* THE PAPER — what will land on the draft, drawn as the draft */
.ivdraft { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--iris) 20%, #fff); background: var(--surface); box-shadow: var(--lift-1); }
.ivdraft-hd { padding: 13px 18px 12px; border-bottom: 1px solid var(--line); background: var(--iris-tint); }
.ivdraft-hd em { font: 800 11px var(--sans); letter-spacing: .14em; color: var(--muted); font-style: normal; }
.ivdraft-hd b { display: block; font: 700 18px var(--serif); margin-top: 4px; }
.ivdraft-pill { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 82%, #000);
  font: 800 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ivdraft-who { padding: 13px 18px; border-bottom: 1px dashed var(--line); }
.ivdraft-who em { display: block; font: 800 11px var(--sans); letter-spacing: .12em;
  color: var(--muted); font-style: normal; text-transform: uppercase; }
.ivdraft-who b { display: block; font: 600 13.5px var(--sans); margin-top: 4px; }
.ivdraft-who span { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 3px; }
.ivdraft-who.is-ghost b { color: var(--muted); }
.ivdraft-lines { padding: 6px 18px 10px; }
.ivpl { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ivpl:last-child { border-bottom: 0; }
.ivpl b { font: 500 12px var(--sans); }
.ivpl-s { display: block; margin-top: 2px; font: 400 11px var(--sans); color: var(--muted); }
.ivpl u { text-decoration: none; margin-left: auto; font: 700 13px var(--serif); }
.ivpl.is-zero u, .ivpl.is-ghost u, .ivpl.is-ghost b { color: var(--muted); }
.ivdraft-tot { display: flex; align-items: baseline; gap: 10px; padding: 13px 18px 14px;
  border-top: 1px solid var(--line); background: var(--soft); }
.ivdraft-tot em { font: 800 11px var(--sans); letter-spacing: .12em; color: var(--muted);
  font-style: normal; text-transform: uppercase; }
.ivdraft-tot b { margin-left: auto; font: 700 22px var(--serif); }
.ivdraft-tot.is-ghost b { color: var(--muted); }
.ivdraft-ft { padding: 11px 18px 13px; border-top: 1px solid var(--line);
  font: 400 11px/1.55 var(--sans); color: var(--muted); }

/* the verb sits under the thing it makes */
.ivform-bot { margin-top: 14px; }
.ivform-bot p { font: 400 11.5px/1.55 var(--sans); color: var(--muted); margin: 0 0 12px; }
.ivform-go { width: 100%; background: linear-gradient(135deg, var(--iris), var(--iris-deep));
  border-color: transparent; color: #fff; border-radius: 16px; font: 700 14px var(--sans); }
.ivform-go:hover { color: #fff; }
@media (max-width: 900px) {
  .ivmos-facts { flex-direction: column; gap: 12px; }
  .ivform .fgrid, .ivchoices { grid-template-columns: 1fr; }
  .ivagain { grid-template-columns: 1fr 1fr; }
  /* narrow: the paper stops riding alongside and stacks under the questions */
  .ivraise, .ivspan { grid-template-columns: 1fr; }
  .ivraise-doc { position: static; }
  .ivrail { flex-direction: row; min-width: 0; padding-top: 0; }
  .ivrail-line { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE GATE (3.195) — the door, and who is inside it right now.

   The page is a clock: one axis from the first arrival still inside to this
   minute, the door's traffic drawn on it hour by hour, every stay a bar
   measured against it. Length is duration.

   Everything the Gate shares with My day it shares by RULE, not by copy — the
   head (.md-hd), the figure (.md-fig), the needs row (.md-needs), the
   timeline (.md-tl) and the quiet line (.md-quiet) are all that page's, worn
   here. Only what is genuinely the door's own is
   written below.
   ═══════════════════════════════════════════════════════════════════════════ */
.gate { margin-top: 18px; }

/* ---- the door: four verbs, and the crossing drawn on each ---- */
.gt-door-k, .sup-k { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; }
.gt-door-k span, .sup-k span { font: 400 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.gt-door, .sup-door { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
           gap: 16px; margin-bottom: 30px; }
.gt-verb, .sup-verb { display: block; border-radius: 24px; background: var(--surface); color: inherit;
           border: 1px solid var(--line); box-shadow: var(--lift-1); overflow: hidden;
           transition: box-shadow .14s, transform .14s; }
.gt-verb:hover, .gt-verb:focus-visible, .sup-verb:hover { text-decoration: none; box-shadow: var(--lift-2); transform: translateY(-1px); }
.gt-verb:active, .sup-verb:active { transform: scale(.995); }
/* the stage the crossing happens on — the only new shape on the page */
.gt-stage, .sup-stage { display: block; padding: 18px 0 16px; text-align: center; border-bottom: 1px solid var(--line); }
.gt-cross { display: inline-block; vertical-align: middle; }
.gt-cross .gt-a { stroke: var(--ink); }
.gt-verb.is-res { border-color: color-mix(in srgb, var(--paid) 26%, #fff); }
.gt-verb.is-res .gt-stage { background: color-mix(in srgb, var(--paid) 5%, #fff); border-bottom-color: color-mix(in srgb, var(--paid) 20%, #fff); }
.gt-verb.is-res .gt-g { fill: var(--paid); }
.gt-verb.is-res .gt-p { fill: color-mix(in srgb, var(--paid) 46%, #fff); }
.gt-verb.is-res .gt-a { stroke: color-mix(in srgb, var(--paid) 84%, #000); }
.gt-verb.is-res .gt-vt em, .gt-verb.is-res .gt-vf { color: color-mix(in srgb, var(--paid) 84%, #000); }
.gt-verb.is-gst { border-color: color-mix(in srgb, var(--iris) 26%, #fff); }
.gt-verb.is-gst .gt-stage { background: color-mix(in srgb, var(--iris) 5%, #fff); border-bottom-color: color-mix(in srgb, var(--iris) 20%, #fff); }
.gt-verb.is-gst .gt-g { fill: var(--iris); }
.gt-verb.is-gst .gt-p { fill: color-mix(in srgb, var(--iris) 46%, #fff); }
.gt-verb.is-gst .gt-a { stroke: var(--iris-deep); }
.gt-verb.is-gst .gt-vt em, .gt-verb.is-gst .gt-vf { color: var(--iris-deep); }
.gt-vt, .sup-vt { display: block; padding: 16px 22px 18px; position: relative; }
.gt-vt b, .sup-vt b { display: block; font: 500 11px var(--sans); color: var(--muted); }
.gt-vt em, .sup-vt em { display: block; font: 700 25px/1.15 var(--serif); font-style: normal; margin-top: 2px; }
.gt-vh, .sup-vh { display: block; font: 400 11px var(--sans); color: var(--faint); margin-top: 8px; }
.gt-vf, .sup-vf { position: absolute; right: 22px; bottom: 18px; font: 800 11px var(--sans); letter-spacing: .02em; }
.gt-nodoor { font: 400 13px var(--sans); color: var(--muted); margin: 0 0 26px; }
.gt-flow { padding: 22px 26px; margin-bottom: 30px; }

/* The door's week is not drawn. He took the seven-day strip off My day in
   3.197.1 by marked screenshot, so the Gate does not put it back — the rules
   would have leaned on .md-week/.md-day, which went with it. */

/* ---- inside right now, and the three figures ---- */
.gt-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.gt-now { padding: 26px 30px 22px; }
.gt-now-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gt-now-n { display: flex; align-items: baseline; gap: 12px; margin: 12px 0 0; min-width: 0; }
.gt-now-n b { font: 700 72px/1 var(--serif); color: var(--ink); }
.gt-now-n span { font: 600 15px var(--sans); color: var(--muted); max-width: 130px; }
.gt-now-ring { position: relative; flex: 0 0 118px; width: 118px; height: 118px; }
.gt-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.gt-dots i { width: 15px; height: 15px; border-radius: 5px; display: block; }
.gt-dots i.is-res, .gt-key i.is-res { background: var(--paid); }
.gt-dots i.is-gst, .gt-key i.is-gst { background: var(--iris); }
.gt-dots i.is-vis, .gt-key i.is-vis { background: var(--overdue); }
.gt-dots i.is-wrk, .gt-key i.is-wrk { background: var(--draft); }
.gt-dots-more { font: 400 11px var(--sans); color: var(--faint); margin: 9px 0 0; }
.gt-key { display: flex; gap: 16px; flex-wrap: wrap; margin: 15px 0 0;
          font: 500 11.5px var(--sans); color: var(--muted); }
.gt-key span { display: inline-flex; align-items: center; gap: 7px; }
.gt-key i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.gt-now-note { font: 400 12px var(--sans); color: var(--faint); margin: 14px 0 0; }
.gt-now-empty { font-size: 13px; color: var(--muted); }

/* ---- the clock: the door's own hours, on the axis the stays hang from ---- */
.gt-inside { padding: 24px 30px 22px; margin-top: 26px; }
.gt-clockrow { display: flex; align-items: flex-end; gap: 30px; margin: 10px 0 30px; }
.gt-clocksum { flex: 0 0 300px; }
.gt-cs { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.gt-cs b { font: 700 34px/1 var(--serif); color: var(--iris-deep); }
.gt-cs span { font: 400 11.5px var(--sans); color: var(--muted); }
.gt-cs em { display: block; font: 800 11px var(--sans); letter-spacing: .11em;
            font-style: normal; color: var(--iris-deep); }
.gt-cs.is-dim b { color: color-mix(in srgb, var(--ink) 44%, #fff); }
.gt-cs.is-dim em { color: var(--faint); }
.gt-clock { flex: 1 1 auto; min-width: 0; position: relative; padding-left: 34px; }
/* Two definite rows, so the baseline between arrivals and departures is a real
   line at a known height and the average can be placed against the arrivals
   half rather than against the whole box. The page reads these two lengths
   back out when it positions the average, so they live here and only here. */
.gt-cl { --gt-in-h: 58px; --gt-out-h: 26px;
         display: flex; align-items: stretch; gap: 6px; position: relative;
         height: calc(var(--gt-in-h) + var(--gt-out-h)); margin-bottom: 24px; }
.gt-cl::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--gt-out-h);
                height: 1px; background: color-mix(in srgb, var(--ink) 15%, #fff); }
.gt-cl-b { flex: 1 1 0; min-width: 0; position: relative;
           display: grid; grid-template-rows: var(--gt-in-h) var(--gt-out-h); }
.gt-cl-in { display: block; align-self: end; border-radius: 4px 4px 0 0; min-height: 2px;
            background: linear-gradient(180deg, var(--iris), var(--sky)); }
.gt-cl-b.is-busy .gt-cl-in { background: linear-gradient(180deg, var(--iris-deep), var(--iris)); }
.gt-cl-out { display: block; align-self: start; border-radius: 0 0 4px 4px; min-height: 2px;
             background: color-mix(in srgb, var(--iris) 24%, #fff); }
.gt-cl-b b { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center;
             font: 500 11px var(--sans); color: var(--faint); }
.gt-cl-b.is-busy b { color: var(--iris-deep); font-weight: 800; }
.gt-cl-k { position: absolute; left: 0; font: 800 11px var(--sans); letter-spacing: .09em; }
.gt-cl-kin { top: 16px; color: var(--iris-deep); }
.gt-cl-kout { top: 62px; color: var(--faint); }
.gt-avg { position: absolute; left: 0; right: 0; height: 0; display: block; z-index: 1;
          border-top: 1px dashed color-mix(in srgb, var(--ink) 26%, #fff); }
.gt-avg b { position: absolute; right: 0; top: -16px; font: 700 11px var(--sans);
            letter-spacing: .05em; color: var(--faint);
            background: var(--surface); padding: 0 6px; }
/* NOW labels the right-hand end of the axis, so it sits on the hour ruler with
   the hours rather than floating above the chart into the section's sentence */
.gt-cl-now { position: absolute; right: 0; bottom: -18px; margin: 0;
             font: 800 11px var(--sans); letter-spacing: .09em; color: var(--ink);
             background: var(--surface); padding-left: 8px; }

/* ---- one stay, one bar ---- */
.gt-fh { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px;
         font: 800 11px var(--sans); letter-spacing: .12em; color: var(--faint); }
.gt-fh em { font-style: normal; text-transform: uppercase; }
.gt-fh::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); order: 1; }
.gt-fh span { order: 2; font: 500 11px var(--sans); letter-spacing: 0; }
/* The tones below are written against .gt-line, which BOTH the Gate's stay row
   and the book's entry row carry — one rule, two rows, no second wardrobe. */
.gt-row { display: grid; align-items: center; gap: 0 10px; padding: 3px 0;
          grid-template-columns: 34px 178px 116px 54px 104px 58px 1fr 82px; }
.gt-row.is-look { background: color-mix(in srgb, var(--overdue) 6%, #fff);
                  box-shadow: inset 3px 0 0 var(--overdue); border-radius: 8px; padding-left: 9px;
                  margin-left: -12px; grid-template-columns: 34px 178px 116px 54px 104px 58px 1fr 82px; }
.gt-fob { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
          justify-content: center; font: 800 11px var(--sans); color: #fff; font-style: normal; }
.gt-line.is-res .gt-fob { background: var(--paid); }
.gt-line.is-gst .gt-fob { background: var(--iris); }
.gt-line.is-vis .gt-fob { background: var(--overdue); }
.gt-line.is-wrk .gt-fob { background: var(--draft); }
.gt-nm { font: 700 12px var(--sans); color: var(--ink); overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.gt-nm u { text-decoration: none; font: 800 11px var(--sans); margin-left: 5px; vertical-align: 1px; }
.gt-line.is-res .gt-nm u { color: var(--paid); }
.gt-line.is-gst .gt-nm u { color: var(--iris); }
.gt-line.is-vis .gt-nm u { color: var(--overdue); }
.gt-line.is-wrk .gt-nm u { color: color-mix(in srgb, var(--draft) 72%, #000); }
.gt-kind { justify-self: start; font: 800 11px var(--sans); letter-spacing: .05em;
           padding: 3px 8px; border-radius: 5px; }
.gt-line.is-res .gt-kind { background: color-mix(in srgb, var(--paid) 11%, #fff); color: color-mix(in srgb, var(--paid) 84%, #000); }
.gt-line.is-gst .gt-kind { background: var(--iris-tint); color: var(--iris-deep); }
.gt-line.is-vis .gt-kind { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.gt-line.is-wrk .gt-kind { background: var(--draft-tint); color: color-mix(in srgb, var(--draft) 70%, #000); }
.gt-unit { font: 700 11px var(--mono); color: var(--muted); }
.gt-plate { font: 400 11px var(--mono); color: var(--iris-deep); justify-self: start;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px; }
.gt-plate:not(:empty) { background: color-mix(in srgb, var(--iris) 9%, #fff);
                        padding: 4px 6px; border-radius: 4px; }
.gt-at { font: 400 11px var(--mono); color: var(--faint); text-align: right; }
.gt-track { position: relative; height: 15px; }
.gt-bar { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 7px; display: block; min-width: 6px; }
.gt-line.is-res .gt-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--paid) 46%, #fff), var(--paid)); }
.gt-line.is-gst .gt-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--iris) 46%, #fff), var(--iris)); }
.gt-line.is-vis .gt-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--overdue) 46%, #fff), var(--overdue)); }
.gt-line.is-wrk .gt-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--draft) 46%, #fff), var(--draft)); }
.gt-dur { font: 800 11px var(--sans); text-align: right; }
.gt-line.is-res .gt-dur { color: color-mix(in srgb, var(--paid) 84%, #000); }
.gt-line.is-gst .gt-dur { color: var(--iris-deep); }
.gt-line.is-vis .gt-dur { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.gt-line.is-wrk .gt-dur { color: color-mix(in srgb, var(--draft) 70%, #000); }
.gt-empty { font: 400 13px var(--sans); color: var(--muted); margin: 8px 0 0; }
.gt-more { display: flex; align-items: center; justify-content: space-between; gap: 16px;
           margin: 18px 0 0; font: 500 11.5px var(--sans); color: var(--muted); }
.gt-more a { display: inline-flex; align-items: center; gap: 8px;
             font: 700 12px var(--sans); color: var(--iris); }

/* ---- what is parked with nobody upstairs, and what just happened ---- */
.gt-both { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.gt-park, .gt-moves { padding: 24px 26px 20px; }
.gt-park .md-k, .gt-moves .md-k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gt-pk { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px;
         border-radius: 14px; color: inherit; background: var(--iris-tint); }
.gt-pk:hover { text-decoration: none; box-shadow: var(--lift-1); }
.gt-pk.is-old { background: var(--draft-tint); }
.gt-pk-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex;
            align-items: center; justify-content: center; background: var(--iris); color: #fff; }
.gt-pk.is-old .gt-pk-ic { background: var(--draft); }
.gt-pk-ic svg { width: 15px; height: 15px; }
.gt-pk-tx { flex: 1 1 auto; min-width: 0; }
.gt-pk-tx b { display: block; font: 700 14px var(--mono); color: var(--ink); }
.gt-pk-tx > span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 2px; }
.gt-pk .md-chev { color: var(--faint); }
.gt-park-note { font: 400 12px var(--sans); color: var(--faint); margin: 16px 0 0; }
.gt-moves-go { margin: 18px 0 0; }
.gt-moves-go a { display: inline-flex; align-items: center; gap: 8px;
                 font: 700 12px var(--sans); color: var(--iris); }

@media (max-width: 1100px) {
  .gt-top { grid-template-columns: 1fr 1fr; }
  .gt-both { grid-template-columns: 1fr; }
  .gt-clockrow { flex-direction: column; align-items: stretch; gap: 18px; }
  .gt-clocksum { flex: 1 1 auto; display: flex; gap: 34px; }
}
@media (max-width: 760px) {
  .gt-top { grid-template-columns: 1fr; }
  .gt-row, .gt-row.is-look { grid-template-columns: 34px 1fr 58px 82px; gap: 0 8px; }
  .gt-kind, .gt-unit, .gt-plate, .gt-track { display: none; }
}

/* ==========================================================================
   HOUSEKEEPING — THE ROUND, IN MY DAY'S LANGUAGE (3.199.0)
   Owner board, approved. The page borrows My day's own classes by RULE —
   .md-hd, .md-top, .md-house, .md-fig, .md-needs, .md-quiet, .md-tl and the
   calendar all come from there unchanged. Only the four things My day has no
   word for live here: the books, a proposal that has to be answered in place,
   and closing the day. The door's three states moved up into the shared
   language in 3.204.0, because the contractors' stable wears them too.
   Nothing invents a colour.
   ========================================================================== */

/* the books: the same chevron row My day uses for a need, at rail weight */
.ckbooks { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.ckbook { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: 13px; color: inherit; text-decoration: none; }
.ckbook:hover { background: var(--soft); text-decoration: none; }
.ckbook span { flex: 1 1 auto; min-width: 0; }
.ckbook b { display: block; font: 700 13.5px var(--sans); color: var(--ink); }
.ckbook em { display: block; font: 400 11.5px var(--sans); color: var(--muted);
  font-style: normal; margin-top: 2px; }
.ckbook:hover b { color: var(--iris); }
.ckbook .md-chev { color: var(--faint); }

/* a proposal is a decision, so it keeps its two buttons where it is read */
.ckask { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 15px 18px; border-radius: 16px;
  background: var(--draft-tint);
  border: 1px solid color-mix(in srgb, var(--draft) 26%, #fff); }
.ckask-tx { flex: 1 1 220px; min-width: 0; }
.ckask-tx b { display: block; font: 700 14px var(--sans); color: var(--ink); }
.ckask-tx > span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 3px; }
.ckask-acts { display: flex; align-items: center; gap: 9px; flex: 1 1 100%; }
.ckask-yes, .cktick-yes { background: var(--paid); flex: 0 0 auto; }
.ckask-why { flex: 1 1 90px; width: auto; min-width: 0; height: var(--ctl-h-sm); font-size: 12px; }
.ckask-acts .btn-ghost, .ckask-acts button { height: var(--ctl-h-sm); }

/* closing the day: one reach — the note, then the verb */
.ckday { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ckday-row { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; flex-wrap: wrap; }
.ckday-row input[type=text] { flex: 1 1 200px; height: var(--ctl-h); font-size: 13px; }
.ckday-row .btn-go { flex: 0 0 auto; height: var(--ctl-h); display: flex;
  align-items: center; justify-content: center; }
.ckday-note { font: 400 11px var(--sans); color: var(--faint); margin: 9px 0 0; }

/* the round's own two panels sit side by side until the measure runs out */
.ckday-page .md-mid { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1240px) { .ckday-page .md-mid { grid-template-columns: 1fr; } }


/* ==========================================================================
   THE DOOR (3.200.0) — clean.php?u=N in the round's own language.

   Almost nothing, deliberately: the header, the fields, the rows, the timeline
   and the quiet line are My day's rules that the round already borrowed in
   3.199.0, and the door borrows the same ones. What is here is only what a
   page whose rows carry a BUTTON needs and a page of links does not.
   ========================================================================== */

/* the way back, under the door's name */
.ckback { margin: 9px 0 0; font: 600 12px var(--sans); }
.ckback a { color: var(--iris); }

/* a need row that DOES something. The control sits where the chevron sits on
   a link row, so the two kinds of row still line up down the page. */
.cktick { margin: 0; flex: 0 0 auto; display: flex; align-items: center; }
.cktick-yes { min-width: 104px; }
.cktick-yes:hover { background: color-mix(in srgb, var(--paid) 88%, #000); }

/* a task past its day is late; one merely waiting is not. The round paints its
   doors done / in hand / waiting, and the door paints its tasks the same way. */
.md-est i.is-late, .md-est-key i.is-late { background: var(--overdue); }

/* a timeline entry that carries a control beside its words */
.md-tl-i > .cktl { display: flex; gap: 14px; align-items: baseline; }
.cktl .md-tl-tx { flex: 1 1 auto; min-width: 0; }
.cktl-back { margin: 0; flex: 0 0 auto; }

/* one section, one measure: a door with no stock behind it */
.ckday-page .md-mid.is-alone { grid-template-columns: minmax(0, 1fr); }

/* The stock form sits on the same sheet as the timeline beside it, which is a
   column and not a page: five controls in one flex row put "What happened" on
   two lines and cut the item name in half. Two by two, and the verb across. */
.ckstock-lead { margin: 14px 0 4px; }
.ckstock { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 12px; }
.ckstock > div { min-width: 0; }
.ckstock label { margin-top: 0; white-space: nowrap; }
.ckstock > .actions { grid-column: 1 / -1; margin-top: 6px; }
.ckstock > .actions button { width: 100%; }

.ckday-page .md-mid { align-items: start; }

@media (max-width: 760px) {
  .md-need { flex-wrap: wrap; }
  .cktick, .cktick-yes { width: 100%; }
}

/* ==========================================================================
   THE AIRBNB DESK (3.201.0) — the channel in My day's language.
   Owner board, approved. The rose hero slab and the two-column cockpit are
   gone; the page runs the wide measure, wears My day's head, its fields, its
   bars and its timeline, and draws the month on the HOUSE calendar instead of
   thirty-one undated squares a door.

   Nothing here invents a colour: the eight tokens, mixes of them, and the one
   whitelisted rose (#FF385C), which on this page means the channel itself.
   ========================================================================== */
.abd { margin-top: 18px; }
.ab-sect { margin-top: 26px; }

/* the two chips the head wears that My day had no need of */
.md-chip.is-rose { background: color-mix(in srgb, #FF385C 10%, #fff);
                   color: color-mix(in srgb, #FF385C 72%, #000); }
.md-chip.is-rose i { background: #FF385C; }
.md-chip.is-quiet { background: var(--soft); color: var(--muted); }
.md-chip.is-quiet i { background: color-mix(in srgb, var(--ink) 30%, #fff); }

/* the verbs stand in a row of their own under the head, as they do in the
   cash box — a rail that exists only to hold two buttons is a wasted column */
.ab-verbs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.ab-verbs form { margin: 0; }
.ab-cta { display: inline-flex; align-items: center; justify-content: center; height: 46px;
          padding: 0 24px; border-radius: 14px; font-size: 14.5px; }
a.ab-cta:hover { text-decoration: none; }
.ab-note { font: 400 11.5px/1.5 var(--sans); color: var(--faint); margin-left: auto;
           max-width: 380px; text-align: right; }

/* every sheet on the desk wears My day's edge, from the shared rule above */
.ab-panel { padding: 24px 28px 20px; }

.ab-mid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
          gap: 16px; margin-top: 16px; align-items: start; }

/* the doors: one lane a door, on the month's own scale, so a square in the
   lane and a cell in the calendar above are the same day */
.ab-lanes { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
            background: var(--surface); margin-top: 18px; }
.ab-lane, .ab-scale { display: grid; grid-template-columns: 258px minmax(0, 1fr) 78px;
            align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.ab-lane:last-child { border-bottom: 0; }
.ab-lane.is-dorm { background: var(--paper); }
.ab-scale { background: var(--paper); padding: 7px 14px; }
.ab-scale > span { font: 800 11px var(--sans); letter-spacing: .12em;
                   text-transform: uppercase; color: var(--faint); }
.ab-scale .ab-days b { font: 700 11px var(--sans); color: var(--faint); text-align: center; }
.ab-days { display: grid; gap: 2px; }
.ab-c { height: 22px; border-radius: 5px; display: block; background: var(--surface);
        box-shadow: inset 0 0 0 1px var(--line); }
.ab-c.is-s { background: color-mix(in srgb, #FF385C 30%, #fff); box-shadow: none; }
.ab-c.is-t { background: var(--draft-tint); box-shadow: inset 2px 0 0 var(--draft); }
.ab-c.is-today { box-shadow: inset 0 0 0 2px var(--iris); }
.ab-lane.is-dorm .ab-c { background: var(--soft); box-shadow: none; }
.ab-swatch { width: 22px; }
.ab-dorm { margin: 0; font: 400 11.5px var(--sans); color: var(--faint); }
.ab-more { margin: 12px 2px 0; font: 400 11.5px var(--sans); color: var(--muted); }

.ab-who { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; }
.ab-who:hover { text-decoration: none; }
.ab-who:hover .ab-who-tx b { color: var(--iris); }
.ab-fob { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px; display: inline-flex;
          align-items: center; justify-content: center; font: 700 13px var(--serif);
          font-style: normal; color: color-mix(in srgb, #FF385C 72%, #000);
          background: color-mix(in srgb, #FF385C 12%, #fff); }
.ab-fob.is-in  { color: #fff;
                 background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
.ab-fob.is-off { color: var(--muted); background: var(--soft); }
.ab-who-tx { min-width: 0; }
.ab-who-tx b { display: block; font: 700 13.5px var(--sans); color: var(--ink); }
.ab-who-tx > span { display: block; font: 400 11px/1.4 var(--sans); color: var(--muted); margin-top: 2px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the reports that have landed: a shelf a month, its fee bite drawn */
.ab-reps { display: grid; gap: 10px; margin-top: 14px; }
.ab-rep { display: flex; align-items: center; gap: 15px; padding: 14px 18px; color: inherit;
          border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.ab-rep:hover { text-decoration: none; box-shadow: var(--lift-1); }
.ab-rep-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; display: inline-flex;
              align-items: center; justify-content: center; font: 700 12px var(--sans);
              font-style: normal; letter-spacing: .06em; color: #fff;
              background: linear-gradient(180deg, #FF385C, color-mix(in srgb, #FF385C 74%, #000)); }
.ab-rep-tx { flex: 1 1 auto; min-width: 0; }
.ab-rep-tx b { display: block; font: 700 14.5px var(--sans); color: var(--ink); }
.ab-rep-sub { display: block; font: 400 11px var(--sans); color: var(--muted); margin-top: 2px; }
.ab-rep-bar { display: block; height: 7px; border-radius: 4px; background: var(--soft); margin: 9px 0 8px; }
.ab-rep-bar u { display: block; height: 100%; border-radius: 4px; background: var(--paid); }
.ab-rep-figs { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ab-rep-figs em { font: 800 11px var(--sans); letter-spacing: .1em; font-style: normal; color: var(--faint); }
.ab-rep-figs b { font: 700 12.5px var(--sans); color: var(--ink); margin-right: 9px; }
.ab-rep-figs b.is-fee { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.ab-rep-net { text-align: right; flex: 0 0 auto; }
.ab-rep-net b { display: block; font: 700 20px var(--serif); color: color-mix(in srgb, var(--paid) 84%, #000); }
.ab-rep-net em { font: 800 11px var(--sans); letter-spacing: .12em; font-style: normal; color: var(--faint); }

@media (max-width: 1100px) {
  .ab-mid { grid-template-columns: minmax(0, 1fr); }
  .ab-lane, .ab-scale { grid-template-columns: 180px minmax(0, 1fr) 70px; }
  .ab-note { margin-left: 0; text-align: left; max-width: none; }
}

/* ==========================================================================
   EMPLOYMENT (3.207.0) — the people side in My day's language.
   Owner board, two sheets, approved. The iris hero slab and the 360px rail
   came off: the page runs the wide measure, wears My day's head, fields, bars
   and Needs you rows, and the four drawers stand across the top of the work.
   Everything that could be borrowed was borrowed by rule; what is below is
   only what My day had no word for — the drawers, the work's own edge, the
   split the details drawer runs, and a row-sized status pill.

   Nothing here invents a colour: the eight tokens and mixes of them only.
   ========================================================================== */
.hrpage { margin-top: 18px; }

/* how one person's paper stands, a square each — the estate's grammar, worn
   by people. The estate's own words (let/host/open/vac) would have lied. */
.md-est i.is-ok,   .md-est-key i.is-ok   { background: var(--paid); }
.md-est i.is-wait, .md-est-key i.is-wait { background: var(--draft); }
.md-est i.is-none, .md-est-key i.is-none { background: var(--overdue); }
.md-est i.is-con,  .md-est-key i.is-con  { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }

/* the four drawers, across the top of the work rather than down its side */
.hr-drawers-k { margin-top: 30px; }
.hrdrawers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
             gap: 16px; margin: 10px 0 26px; }
.hrdrawer { display: block; padding: 16px 20px 17px; border-radius: 20px; color: inherit; }
.hrdrawer b { display: block; font: 700 15px var(--sans); color: var(--ink); }
.hrdrawer span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 5px; }
.hrdrawer:hover { text-decoration: none; box-shadow: var(--lift-2); }
.hrdrawer.is-on { background: var(--iris); border-color: var(--iris); }
.hrdrawer.is-on b { color: #fff; }
.hrdrawer.is-on span { color: color-mix(in srgb, #fff 82%, var(--iris)); }

/* every sheet of the work wears My day's edge, from the shared rule above */
.hrwork { padding: 24px 26px 20px; margin-bottom: 18px; }
.hrwork > h2 { font: 600 20px var(--serif); color: var(--ink); margin: 0 0 14px;
               padding-bottom: 11px; border-bottom: 1px solid var(--line);
               display: flex; align-items: baseline; gap: 12px; text-transform: none;
               letter-spacing: 0; }
.hrwork > h2 .hr-h2sub { font: 400 12px var(--sans); color: var(--muted); }
.hrwork > h2 .hr-h2n { margin-left: auto; font: 800 11px var(--sans);
                       letter-spacing: .13em; color: var(--faint); }

/* THE MEASURE. The page got wider; the prose and the forms did not. A
   paragraph 1,240px wide is a paragraph nobody finishes, and a text box does
   not hold more words for being 600px instead of 300. */
.hrwork > p, .hrwork > .fhelp { max-width: 76ch; }
.hrwork .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; }
.hrwork .contract-doc, .hrwork .hbstmt, .hrwork .test-row,
.hrwork .hbfold, .hrwork .hbdoc { max-width: 940px; }
/* the document sheet keeps its own 860px measure but stands with everything
   else on the sheet rather than centring itself in the wide card */
.hrwork .cdoc { margin-left: 0; }
@media (max-width: 640px) { .hrwork .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* the details drawer: the form keeps a readable measure, and the width it
   gained says how the person picked actually stands */
.hrsplit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
           gap: 16px; align-items: start; }
.hr-rail { padding: 24px 26px 22px; }
.hr-rail .md-tl-i { display: flex; gap: 14px; align-items: baseline; }
/* on the day, a lit node means NOW; on a person it means this is the thing
   that is wrong, so the node carries the state's own colour */
.hr-rail .md-tl-i.is-now::before { background: var(--overdue); box-shadow: 0 0 0 3px var(--overdue-tint); }
.hr-rail .md-tl-i.is-warn::before { background: var(--draft); box-shadow: 0 0 0 3px var(--draft-tint); }
.hr-rail .md-tl-w { flex: 0 0 84px; }
.hr-who { display: flex; align-items: center; gap: 15px; margin: 18px 0 4px; }
.hr-who .gb-face { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 18px; font-size: 17px; }
.hr-who-tx b { display: block; font: 700 17px var(--sans); color: var(--ink); }
.hr-who-tx span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 3px; }
.hr-paper { list-style: none; margin: 4px 0 0; padding: 0; }
.hr-paper li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
               font: 600 12.5px var(--sans); color: var(--ink); }
.hr-paper li span { margin-left: auto; font-weight: 400; color: var(--muted); text-align: right; }

/* the two handbook ledgers on the wide measure. One tall column of names
   beside an empty one is what the narrow page did; here the names flow into
   as many columns as the sheet can hold, and the two sides keep their halves
   so "agreed" and "still to agree" are still read as a pair. */
.hrwork .hb-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px,100%), 1fr));
                    gap: 0 14px; align-content: start; }

/* a status word at row size: the chip vocabulary, shrunk to fit a line */
.hrpill { display: inline-flex; align-items: center; border-radius: 12px; padding: 5px 11px;
          font: 800 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.hrpill.is-paid  { background: var(--paid-tint);    color: color-mix(in srgb, var(--paid) 84%, #000); }
.hrpill.is-over  { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.hrpill.is-draft { background: var(--draft-tint);   color: color-mix(in srgb, var(--draft) 70%, #000); }

/* the ladder: the drawers go two-up, then stack; the details split unstacks
   its rail under the form before the form ever gets narrow enough to hurt */
@media (max-width: 1100px) {
  .hrdrawers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrsplit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hrdrawers { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   SUPPORT (3.202) — the page opens with its own verb

   The owner's ruling: "we should be able to raise support tickets from the very
   top, not by scrolling down nearly the bottom of the page". So the form is no
   longer a section of Support; it IS Support's opening, and the four kinds lead
   it as four tiles in the same language the Gate's four verbs already speak.
   Everything else on this page is worn, not written: the head is .md-hd, the
   figures are .md-fig, the rows are .md-need, the month is the house calendar
   and the rail beside it is .hkr. Only what is genuinely new to Support lives
   below — the tile as a RADIO (the Gate's tiles are links, and a link cannot be
   chosen), the four drawn glyphs, and the ticket row.
   ------------------------------------------------------------------------- */

/* the tile is a label around a hidden radio, so the whole tile is the target */
.sup-door input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.sup-verb { cursor: pointer; position: relative; }
.sup-stage { background: color-mix(in srgb, var(--iris) 5%, #fff);
             border-bottom-color: color-mix(in srgb, var(--iris) 20%, #fff); padding: 16px 0 14px; }
.sup-vt em { color: var(--ink); }
.sup-vf { color: var(--iris-deep); }
.sup-vf.is-late { color: color-mix(in srgb, var(--overdue) 80%, #000); }
/* the chosen one: the brand edge, the lit stage, and a drawn tick — so the
   choice is legible without hovering and without colour doing the work alone */
.sup-door input:checked + .sup-verb { border-color: var(--iris); box-shadow: var(--lift-2); }
.sup-door input:checked + .sup-verb .sup-stage { background: var(--iris-tint); }
.sup-door input:checked + .sup-verb .sup-vt em { color: var(--iris-deep); }
.sup-door input:focus-visible + .sup-verb { outline: 2px solid var(--iris); outline-offset: 2px; }
.sup-tick { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
            background: var(--iris); display: none; align-items: center; justify-content: center; }
.sup-tick svg { width: 13px; height: 13px; color: #fff; }
.sup-door input:checked + .sup-verb .sup-tick { display: flex; }

/* the four drawn kinds. The tile owns the colour so a rebrand carries them. */
.tkg { display: block; margin: 0 auto; }
.tkg-s { fill: color-mix(in srgb, var(--iris) 13%, #fff);
         stroke: color-mix(in srgb, var(--iris) 72%, #fff); stroke-width: 3;
         stroke-linejoin: round; }
.tkg-f { fill: color-mix(in srgb, var(--iris) 72%, #fff); }
.tkg-l { fill: none; stroke: color-mix(in srgb, var(--iris) 72%, #fff); stroke-width: 3;
         stroke-linejoin: round; stroke-linecap: round; }
.tkg-h { fill: none; stroke: color-mix(in srgb, var(--iris) 72%, #fff); stroke-width: 11; stroke-linecap: round; }
.tkg-j { fill: none; stroke: color-mix(in srgb, var(--iris) 72%, #fff); stroke-width: 8; stroke-linecap: round; }
.sup-door input:checked + .sup-verb .tkg-s { fill: color-mix(in srgb, var(--iris) 18%, #fff); stroke: var(--iris); }
.sup-door input:checked + .sup-verb .tkg-f,
.sup-door input:checked + .sup-verb .tkg-l,
.sup-door input:checked + .sup-verb .tkg-h,
.sup-door input:checked + .sup-verb .tkg-j { fill: none; stroke: var(--iris); }
.sup-door input:checked + .sup-verb .tkg-f { fill: var(--iris); stroke: none; }

/* the one line, and everything it needs, under the tiles */
.sup-door { margin-bottom: 14px; }
.sup-raise { padding: 22px 26px 20px; margin: 0 0 10px; }
.sup-raise .fgrid { margin: 0 0 14px; }
.sup-raise .fgrid:last-of-type { margin-bottom: 0; }
/* the line that matters is the widest thing on the page, because it is the one
   field that is genuinely required — the rest of the form can be skipped */
.sup-raise .fgrid.is-say  { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.sup-raise .fgrid.is-more { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) 178px;
                            align-items: end; }
/* symmetry: the three controls on that row end on the same line, so the box you
   type in is a box and not a well */
.sup-raise textarea { height: 62px; min-height: 62px; }
.sup-said { font: 400 15px var(--sans); }
.sup-go { display: flex; align-items: flex-end; }
.sup-go button { width: 100%; }
.sup-promise { font: 400 11.5px var(--sans); color: var(--faint); margin: 14px 0 0; }
/* the media pair, laid on its side — the column form stands on the tenant
   portal and is not touched here */
.mediapick.is-row .mediabtn { flex-direction: row; align-items: center; gap: 12px;
  border-radius: 13px; border-color: var(--line); padding: 0 16px; height: var(--ctl-h); }
.mediapick.is-row .mediabtn:hover { border-color: var(--iris); background: var(--iris-tint); }
.mediapick.is-row .mediabtn .mi-ico { margin-bottom: 0; color: var(--iris); }
.mediapick.is-row .mediabtn svg { width: 19px; height: 19px; }
.mediapick.is-row .mediabtn b { flex: 0 0 auto; }
.mediapick.is-row .mediabtn em { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* the lenses. `a.btn-ghost` sits in the base button rule, which outranks the
   plain `.btn-ghost` that is supposed to empty it — so EVERY ghost link on the
   platform has been rendering solid, and a row of lenses where all seven look
   chosen tells you nothing. Fixed here, scoped to this row, because the same
   line unscoped would repaint sixty-nine links across twenty-seven pages and
   that is a board. STATUS.md names it. */
.sup-lens { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.sup-lens .sup-gap { width: 12px; }
.sup-lens a.btn-ghost { background-image: none; background-color: var(--surface);
  color: var(--muted); border-color: var(--line); box-shadow: none; }
.sup-lens a.btn-ghost:hover { background-color: var(--iris-tint); border-color: var(--iris);
  color: var(--iris-deep); filter: none; }
.sup-lens .btn .count { background: color-mix(in srgb, #fff 30%, transparent); color: #fff; }

/* the oldest still open: the ticket's own words are the point of the row, so
   the lane gives them the room the share bar takes everywhere else */
.sup-oldest .hkr-lane { color: inherit; }
.sup-oldest .hkr-lane:hover { text-decoration: none; }
.sup-oldest .hkr-lane:hover .hkr-who { color: var(--iris); }
.sup-oldest .hkr-who { flex: 1 1 auto; }
.sup-oldest .hkr-num { color: var(--faint); }

/* four figures, four equal columns — My day's first column is its house, and
   Support has no house to put there */
.sup-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* one ticket, one row. The old card was 250px of story for a line of fact;
   what was actually needed is the fact, the trail, and the field that closes
   it — on the row itself, so closing a ticket is never a scroll either. */
.sup-t { display: block; background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
         border-left-width: 5px; border-radius: 20px; box-shadow: var(--lift-1);
         padding: 15px 20px 15px 18px; margin-bottom: 12px; }
.sup-t.is-open { border-left-color: var(--overdue); }
.sup-t.is-shut { border-left-color: var(--paid); }
.sup-t-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sup-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; display: flex;
           align-items: center; justify-content: center; font: 700 18px var(--serif); font-style: normal; }
.sup-t.is-open .sup-fob { background: var(--overdue-tint); color: color-mix(in srgb, var(--overdue) 80%, #000); }
.sup-t.is-shut .sup-fob { background: var(--paid-tint); color: color-mix(in srgb, var(--paid) 84%, #000); }
.sup-t-tx { flex: 1 1 300px; min-width: 0; }
.sup-t-tx b { display: block; font: 700 16px var(--sans); color: var(--ink); }
.sup-t-no { font: 400 12px var(--mono); color: var(--faint); margin-right: 8px; }
.sup-t-sub { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 3px; }
/* the tenant who reported it is named inside the trail, not on a line of its
   own — .sup-t-tx b is a block, and a nested one would break the sentence */
.sup-t-sub b { display: inline; font: inherit; font-weight: 700; color: var(--ink); }
.sup-t-bx { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sup-t-body { margin: 10px 0 0 62px; font: 400 13px var(--sans); color: color-mix(in srgb, var(--ink) 82%, #fff);
              white-space: pre-wrap; }
.sup-t-shot { display: block; margin: 10px 0 0 62px; max-width: 300px; border-radius: 12px; border: 1px solid var(--line); }
.sup-t .medialist { margin: 10px 0 0 62px; }
.sup-close { display: flex; align-items: center; gap: 10px; margin: 11px 0 0 62px; flex-wrap: wrap; }
.sup-close label { margin: 0; flex: 0 0 auto; font: 800 11px var(--sans); letter-spacing: .13em;
                   text-transform: uppercase; color: var(--faint); }
.sup-close input[type=text] { flex: 1 1 260px; height: var(--ctl-h-sm); margin: 0; }
.sup-done { margin: 11px 0 0 62px; padding: 10px 14px; border-radius: 12px;
            background: var(--paid-tint); border: 1px solid color-mix(in srgb, var(--paid) 22%, #fff); }
.sup-done b { display: block; font: 800 11px var(--sans); letter-spacing: .13em; text-transform: uppercase;
              color: color-mix(in srgb, var(--paid) 84%, #000); }
.sup-done p { margin: 5px 0 0; font: 400 13px var(--sans); white-space: pre-wrap; }
.sup-done .sup-done-w { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* what the tenants said, on the same row shape as everything else */
.sup-fb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px,100%), 1fr)); gap: 12px; }
.sup-fb .ptk { margin: 0; }
.sup-empty { font: 400 13.5px var(--sans); color: var(--muted); margin: 0; padding: 22px 24px;
             background: var(--soft); border-radius: 18px; }

@media (max-width: 1100px) { .sup-figs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .sup-raise .fgrid.is-say, .sup-raise .fgrid.is-more { grid-template-columns: minmax(0, 1fr); }
  .sup-figs { grid-template-columns: 1fr; }
  .sup-t-body, .sup-t-shot, .sup-close, .sup-done, .sup-t .medialist { margin-left: 0; }
}
/* ---- end of the Support block (3.202). The floor guard reads to this line
   and no further, so nothing appended behind it is judged by mistake. ---- */
/* The day cell can carry a measure (3.206). Housekeeping's days carry chips,
   because a clean is a thing that happened to a door. A door's own traffic is
   only a number, so the Gate's week draws it as a bar with the figure under it.
   Nothing else passes a tally, so no other calendar gains a bar. */
.cal-tally { display: block; height: 6px; border-radius: 3px; background: var(--soft);
             margin: auto 14px 0; overflow: hidden; }
.cal-tally i { display: block; height: 100%; border-radius: 3px; min-width: 2px;
               background: color-mix(in srgb, var(--iris) 34%, #fff); }
.cal-d.is-today .cal-tally i { background: var(--grad); }
.cal-tallyn { display: block; text-align: center; margin: 5px 0 2px;
              font: 800 11px var(--sans); color: var(--faint); }
.cal-d.is-today .cal-tallyn { color: var(--iris-deep); }
/* the door's week is a strip, so its cells stand shorter than a month's */
.gt-week.cal-wk .cal-d { min-height: 96px; display: flex; flex-direction: column; }
.gt-week { margin-bottom: 0; }
.gt-weekcap { margin-bottom: 26px; font: 700 11px var(--sans); letter-spacing: .09em;
              color: var(--faint); text-transform: uppercase; }
.gt-weekcap .cal-key-tail { letter-spacing: .04em; text-transform: none; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE GATE BOOK (3.201) — the record, on the Gate's axis.

   The Gate's bar always ends at now. The book's has TWO ends, because an entry
   that finished has a finish — so a day gets a shape you can read: the morning
   cluster, the afternoon gap, the one stay that crosses into tomorrow.

   It wears the Gate's head, panel, figure, fob, kind chip and unit by rule
   (.md-hd, .gt-panel, .md-fig, .gt-line). Only the two-ended bar, the year
   ribbon and the two closing panels are the book's own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- the year: twelve months, twelve doors ---- */
.gb-year { padding: 22px 26px 18px; margin-bottom: 16px; }
.gb-year .md-k, .gb-copy .md-k { display: flex; align-items: baseline;
                                 justify-content: space-between; gap: 12px; }
.gb-ribbon { display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; }
.gb-mo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
         align-items: center; gap: 7px; color: inherit; border-radius: 12px;
         padding: 8px 4px 9px; }
.gb-mo:hover { background: var(--iris-tint); text-decoration: none; }
.gb-mo-n { font: 800 11px var(--sans); color: var(--faint); }
.gb-mo-b { display: block; width: 100%; max-width: 62px; border-radius: 5px;
           background: color-mix(in srgb, var(--iris) 26%, #fff); }
.gb-mo-l { font: 800 11px var(--sans); letter-spacing: .08em; color: var(--faint); }
.gb-mo.is-now { background: var(--iris-tint); }
.gb-mo.is-now .gb-mo-n, .gb-mo.is-now .gb-mo-l { color: var(--iris-deep); }
.gb-mo.is-now .gb-mo-b { background: var(--grad); }

/* ---- the finder ---- */
.gb-find { padding: 20px 26px; margin-bottom: 16px; }
.gb-top { margin-bottom: 16px; }

/* ---- one entry, one bar, two ends ---- */
.gb-book { padding: 24px 30px 20px; }
/* The ruler is laid on the SAME grid as the rows beneath it and its labels sit
   in the same cell the bars do, so the hours cannot drift away from the day —
   there is one column definition here and nothing repeats it. */
.gb-ruler, .gb-row { display: grid; align-items: center; gap: 0 10px;
                     grid-template-columns: 34px 178px 116px 54px 84px 1fr 92px; }
.gb-ruler { height: 18px; margin: 4px 0 2px; }
.gb-ruler i { grid-column: 6; position: relative; height: 100%; display: block; }
.gb-ruler b { position: absolute; transform: translateX(-50%); font: 500 11px var(--sans);
              color: var(--faint); }
.gb-row { padding: 3px 0; }
.gb-row .gt-nm.mono { font: 700 12px var(--mono); }
/* a plate's fob carries the drawn vehicle rather than two initials */
.gb-fob-v svg { width: 15px; height: 15px; }
.gb-note { font: 400 11px var(--sans); color: var(--faint); overflow: hidden;
           white-space: nowrap; text-overflow: ellipsis; }
.gb-track { position: relative; height: 22px; }
.gb-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; display: block; }
.gt-line.is-res .gb-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--paid) 44%, #fff), color-mix(in srgb, var(--paid) 78%, #fff)); }
.gt-line.is-gst .gb-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--iris) 44%, #fff), color-mix(in srgb, var(--iris) 78%, #fff)); }
.gt-line.is-vis .gb-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--overdue) 44%, #fff), color-mix(in srgb, var(--overdue) 78%, #fff)); }
.gt-line.is-wrk .gb-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--draft) 44%, #fff), color-mix(in srgb, var(--draft) 78%, #fff)); }
/* the two ends, said in the margins of the bar rather than in two more columns */
.gb-in, .gb-out { position: absolute; top: 50%; transform: translateY(-50%);
                  font: 400 11px var(--mono); color: var(--faint); text-decoration: none;
                  white-space: nowrap; }
.gb-in { margin-left: -8px; transform: translate(-100%, -50%); }
.gb-out { margin-left: 8px; }
.gb-end { text-align: right; font: 800 11px var(--sans); }
.gt-line.is-res .gb-stay { color: color-mix(in srgb, var(--paid) 84%, #000); }
.gt-line.is-gst .gb-stay { color: var(--iris-deep); }
.gt-line.is-vis .gb-stay { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.gt-line.is-wrk .gb-stay { color: color-mix(in srgb, var(--draft) 70%, #000); }
.gb-open { color: var(--paid); }
.gb-next em { display: block; font: 800 11px var(--sans); letter-spacing: .04em;
              font-style: normal; color: var(--faint); }
.gb-taken { color: var(--overdue); }
/* a taken-back entry is struck through and kept, never removed */
.gb-row.is-void .gt-nm { color: var(--faint); text-decoration: line-through; }
.gb-row.is-void .gt-fob { background: var(--surface); border: 1px solid var(--line); color: var(--faint); }
.gb-row.is-void .gb-bar { background: repeating-linear-gradient(135deg,
    var(--line) 0 5px, var(--surface) 5px 10px); }
.gb-row.is-void .gt-kind { background: var(--soft); color: var(--faint); }
.gt-line.is-void .gt-fob { background: var(--surface); }

/* ---- take a copy, and the regular ---- */
.gb-both { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 16px; }
.gb-copy, .gb-reg { padding: 22px 26px 20px; }
.gb-copy-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 18px; }
.gb-copy-btns .btn { width: 100%; text-align: center; }
/* The CSV is the quiet one: the PDF is the certified page and gets the brand.
   This is scoped on purpose. `a.btn-ghost` in the shared button rule carries
   the gradient at (0,1,1) and `.btn-ghost` answers at (0,1,0), so EVERY ghost
   anchor on the platform — 50 of them — renders as a filled primary unless a
   page overrides it locally, which is what .daycard already does.
   Fixing that properly moves pixels on a dozen pages and wants a board of its
   own; it is named in STATUS.md. Until then the book patches its own two. */
.gb-copy-btns a.btn-ghost { background: var(--surface); background-image: none;
                            color: var(--ink); border: 2px solid var(--line); }
.gb-copy-btns a.btn-ghost:hover { border-color: color-mix(in srgb, var(--iris) 34%, #fff);
                                  color: var(--iris-deep); }
.gb-copy-note { font: 400 12px var(--sans); color: var(--muted); margin: 0 0 6px; }
.gb-copy-fine { font: 400 12px var(--sans); color: var(--faint); margin: 14px 0 0; }
.gb-reg-row { display: flex; align-items: center; gap: 16px; margin: 16px 0 14px;
              color: inherit; }
.gb-reg-row:hover { text-decoration: none; }
.gb-reg-row:hover .gb-reg-tx b { color: var(--iris); }
.gb-reg-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; display: flex;
              align-items: center; justify-content: center; font-style: normal;
              font: 800 15px var(--sans); color: #fff; background: var(--overdue); }
.gb-reg-tx { flex: 1 1 auto; min-width: 0; }
.gb-reg-tx b { display: block; font: 700 20px var(--serif); color: var(--ink); }
.gb-reg-tx > span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 3px; }
.gb-reg .md-chev { color: var(--faint); }

@media (max-width: 1100px) {
  .gb-both { grid-template-columns: 1fr; }
  .gb-ruler, .gb-row { grid-template-columns: 34px 150px 100px 46px 0 1fr 84px; }
}
@media (max-width: 760px) {
  .gb-row { grid-template-columns: 34px 1fr 92px; }
  .gb-row .gt-kind, .gb-row .gt-unit, .gb-note, .gb-track, .gb-ruler { display: none; }
  .gb-copy-btns { grid-template-columns: 1fr; }}
/* ---- end of the gate book block (3.203). Its floor guard reads to this line
   and no further, so nothing appended behind it is judged as the book's. ---- */


/* ==========================================================================
   CONTRACTORS (3.204.0) — the stable, in My day's language.
   Owner board, approved. Almost nothing lives here, deliberately: the header,
   the chips, the panel edge, the ring, the three-state square, the figures,
   the need rows and the quiet line are all My day's own rules, worn by this
   room the same way the round and the door wear them. What is written below
   is only the ROSTER — a list of people with their standing beside them,
   which My day has no shape for. Nothing invents a colour.
   ========================================================================== */
.cnpage .cn-panel { padding: 24px 26px 22px; }
.cn-lead { font: 400 13px/1.55 var(--sans); color: var(--muted); margin: 14px 0 0; }
.cn-lead b { font-weight: 700; color: var(--ink); }
.cn-none { font: 400 13px/1.55 var(--sans); color: var(--muted); margin: 0; }

/* One contractor, one line. TWO sibling links, never one inside the other:
   an <a> nested in an <a> is invalid, and the parser splits the row where it
   finds one — which is exactly what took this list apart before 3.204.0. */
.cn-stable { padding: 6px 26px; }
.cn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center;
  gap: 14px; border-bottom: 1px solid var(--line); }
.cn-row:last-child { border-bottom: 0; }
.cn-face { flex: 0 0 40px; height: 40px; border-radius: 13px; display: flex;
  align-items: center; justify-content: center; background: var(--soft);
  font: 700 14px var(--serif); color: var(--iris-deep); }
.cn-face:hover { background: var(--iris-tint); text-decoration: none; }
.cn-open { display: grid; grid-template-columns: minmax(0, 1fr) auto 86px 8px;
  align-items: center; gap: 16px; padding: 11px 0; color: inherit; min-width: 0; }
.cn-open:hover { text-decoration: none; }
.cn-open:hover .cn-who b { color: var(--iris); }
.cn-who { min-width: 0; }
.cn-who b { display: block; font: 700 14px var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-who > span { display: block; font: 400 11.5px var(--sans); color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 700 12px var(--sans); }
.cn-st i { width: 9px; height: 9px; border-radius: 3px; display: block; flex: 0 0 9px; }
.cn-st.is-signed { color: color-mix(in srgb, var(--paid) 84%, #000); }
.cn-st.is-out    { color: color-mix(in srgb, var(--draft) 70%, #000); }
.cn-st.is-none   { color: color-mix(in srgb, var(--overdue) 80%, #000); }
.cn-n { text-align: right; font: 700 15px var(--serif); color: var(--ink); white-space: nowrap; }
.cn-open .md-chev { color: var(--faint); }

/* the ladder: the email goes first, then the doc count, then the standing
   drops under the name — the row never scrolls sideways */
@media (max-width: 900px) {
  .cn-open { grid-template-columns: minmax(0, 1fr) auto 8px; }
  .cn-n { display: none; }
}
@media (max-width: 620px) {
  .cn-open { grid-template-columns: minmax(0, 1fr) 8px; gap: 10px; }
  .cn-st { grid-column: 1; grid-row: 2; margin-top: 3px; }
  .cn-who > span { display: none; }
}
.cn-more { font: 400 11.5px var(--sans); color: var(--faint); margin: 14px 0 6px; }
.cn-more a { color: var(--iris); }
/* ---- end of the Contractors block (3.204.0). The colour guard reads to this
   line and no further, so nothing appended behind it is judged by mistake. ---- */

/* ==========================================================================
   THE PULSE BOARD (3.205.0) — Reviews in My day's language.
   Owner board, approved. The hero slab and the 360px rail came off, the same
   removal My day, the Gate, Housekeeping and the Airbnb desk each took, and
   the page runs the wide measure. Everything structural is borrowed from My
   day by rule — .md-hd, .md-house, .md-fig, .md-chart, .md-next, .md-needs,
   .md-quiet — so this section only has to say the things that are the
   pulse's own: a face as a colour, and the cards two abreast.
   ========================================================================== */
.rvpage { margin-top: 18px; }

/* A FACE, AS A COLOUR. One vocabulary, worn by the squares in the mood panel,
   by the key beneath them, and by the trend ticks on every card — five steps
   from the overdue red through the calm amber to the paid green, plus the
   hollow square for a voice that has not spoken. .ptick keeps its own names
   because it is the older caller and the pulse page is not its only reader. */
.md-est i.rv-f5, .md-est-key i.rv-f5, .ptick.f5 { background: var(--paid); }
.md-est i.rv-f4, .md-est-key i.rv-f4, .ptick.f4 { background: color-mix(in srgb, var(--paid) 55%, var(--draft)); }
.md-est i.rv-f3, .md-est-key i.rv-f3, .ptick.f3 { background: var(--draft); }
.md-est i.rv-f2, .md-est-key i.rv-f2, .ptick.f2 { background: color-mix(in srgb, var(--overdue) 55%, var(--draft)); }
.md-est i.rv-f1, .md-est-key i.rv-f1, .ptick.f1 { background: var(--overdue); }
.md-est i.rv-f0, .md-est-key i.rv-f0 { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }

/* the count beside "Every pulse" is a fact, not a warning — it wears the
   paid green, where the one beside "Needs you" wears the overdue red */
.md-count.is-in { color: color-mix(in srgb, var(--paid) 84%, #000); }

/* the cards, two abreast at the wide measure. They ran in a 360px-narrower
   single column beside the rail, which is why eight pulses were 3,700px tall. */
.rv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px,100%), 1fr));
            gap: 16px 18px; align-items: start; }
.rvpage .pulsecard { margin: 0; }
/* the trend says what it is. Six unlabelled squares were a mystery on a page
   whose whole subject is faces. */
.rv-trend-k { font: 700 11px var(--sans); letter-spacing: .12em; color: var(--faint);
              font-style: normal; margin-left: 9px; align-self: center; }
.rvpage .ptrend { align-items: center; }

/* "AUG 2026" is eight characters and My day's timeline column is sized for
   "THU 20" — the month wrapped onto two lines without this. */
.rvpage .md-tl-w { flex: 0 0 74px; }

@media (max-width: 1000px) {
  .rv-cards { grid-template-columns: 1fr; }
}
/* ==========================================================================
   PAYROLL, THE CONTRIBUTIONS DESK AND THE LIVING PAYSLIP (3.208)
   Owner board, approved. Three pages that were still wearing the hero slab
   and the 360px rail, brought into My day's language: the head with its
   chips, the four fields, Needs you, the timeline. Everything structural is
   borrowed BY RULE from the My day block above — .md-hd, .md-chip, .md-top,
   .md-house, .md-fig, .md-need, .md-quiet, .md-tl — and only what those do
   not already say is written here. Nothing invents a colour.
   ========================================================================== */
.prpage { margin-top: 18px; }
/* My day's house figure is a two-digit tally, so it is 72px. These three panels
   lead with money or a date instead, and at 72px the figure walks straight into
   the ring. It wraps at its spaces, never inside a figure — a peso amount broken
   across two lines is a different number to the eye — and the selector carries
   the element, because .md-house-n b is (0,1,1) and outranks a bare class. */
.md-house-n b.pr-big { font: 700 34px/1.18 var(--serif); }
.prpage .md-house-n { flex-wrap: wrap; row-gap: 2px; }
.prpage .md-house-n span { font-size: 16px; }
/* a third mark on the estate strip: the person the run cannot compute at all.
   Rose means the Airbnb channel and nothing else, so this one is --overdue. */
.md-est i.is-nowage, .md-est-key i.is-nowage { background: var(--overdue); }
/* the count beside a section title is overdue-red by default; a plain tally
   of people is not a warning */
.md-count.is-iris { color: var(--iris-deep); }
/* a card that is also a door */
a.pr-person { color: inherit; display: block; }
a.pr-person:hover { text-decoration: none; box-shadow: var(--lift-2); }
.pr-panel { padding: 24px 28px 20px; }
.pr-sect { margin-top: 26px; }

/* the two shoulders every fund is carried on: theirs, then the company's */
.pr-shoulders { display: block; position: relative; height: 22px; border-radius: 8px;
                background: var(--soft); margin: 18px 0 0; overflow: hidden; }
.pr-shoulders i, .pr-shoulders u { position: absolute; top: 0; bottom: 0; display: block;
                                   border-radius: 8px; text-decoration: none; }
.pr-shoulders i { left: 0; background: var(--iris); }
.pr-shoulders u { right: 0; background: color-mix(in srgb, var(--iris) 30%, #fff); }
.pr-ends { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0;
           font: 600 11.5px var(--sans); }
.pr-ends b { color: var(--iris-deep); font-weight: 600; }
.pr-ends span { color: var(--muted); }
.pr-said { font: 400 12px/1.5 var(--sans); color: var(--muted); margin: 14px 0 0; }

/* one person's month: a card, a fob, and the three funds under each other */
.pr-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px,100%), 1fr));
             gap: 14px 18px; margin-top: 16px; align-items: start; }
.pr-person { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
             border-radius: 20px; box-shadow: var(--lift-1); padding: 22px 24px 18px; min-width: 0; }
.pr-person.is-off { background: var(--paper); }
.pr-who { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.pr-fob { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 15px; display: inline-flex;
          align-items: center; justify-content: center; font: 700 17px var(--serif);
          font-style: normal; color: var(--iris-deep); background: var(--iris-tint); }
.pr-person.is-off .pr-fob { color: color-mix(in srgb, var(--overdue) 80%, #000);
                            background: var(--overdue-tint); }
.pr-who-tx { min-width: 0; flex: 1 1 auto; }
.pr-who-tx b { display: block; font: 700 16px var(--sans); color: var(--ink); }
.pr-who-tx span { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 3px; }
/* the 7.5px kchip is below the platform's 11px floor; on a card this roomy it
   has no reason to whisper, so it is raised here and nowhere else */
.pr-person .kchip { font-size: 11px; letter-spacing: .06em; padding: 5px 10px; border-radius: 9px; }
.pr-t { width: 100%; border-collapse: collapse; margin: 12px 0 0; }
.pr-t th { font: 800 11px var(--sans); letter-spacing: .1em; color: var(--faint);
           text-align: right; padding: 0 0 8px; white-space: nowrap; }
.pr-t th:first-child { text-align: left; }
.pr-t th.is-tot { color: var(--iris-deep); }
.pr-t td { font: 400 13px var(--sans); color: var(--ink); padding: 7px 0 0; text-align: right;
           vertical-align: top; }
.pr-t td:first-child { text-align: left; }
.pr-t td em { display: block; font: 400 11px var(--sans); font-style: normal; color: var(--faint);
              margin-top: 1px; }
.pr-t td.num { font: 400 12.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-t td.num.is-tot { color: var(--ink); font-weight: 700; }
/* the shoulder split, drawn under the fund it belongs to */
.pr-split { display: block; height: 6px; border-radius: 3px; background: var(--soft); margin: 7px 0 2px; }
.pr-split i { display: block; height: 100%; border-radius: 3px; background: var(--iris); min-width: 3px; }
.pr-t tr.tot td { border-top: 1px solid var(--line); padding-top: 12px;
                  font-weight: 700; color: var(--ink); }
.pr-t tr.tot td.num { color: var(--ink); font-weight: 700; }

/* the compact roster: above sixty people the cards stop and the list goes on */
.pr-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr));
             gap: 2px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.pr-roster li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
                border-bottom: 1px solid var(--line); font: 400 12.5px var(--sans); color: var(--muted); }
.pr-roster li b { color: var(--ink); font-weight: 700; flex: 1 1 auto; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-roster li span { font: 400 12px var(--mono); font-variant-numeric: tabular-nums; }

/* the iris band: what the company remits, and the ceremony that freezes a run */
.pr-band { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 16px;
           padding: 22px 28px; border-radius: 24px; background: var(--iris-tint);
           border: 1px solid color-mix(in srgb, var(--iris) 22%, #fff); }
.pr-band-tx { flex: 1 1 320px; min-width: 0; }
.pr-band-tx b { display: block; font: 700 20px var(--serif); color: var(--iris-deep); }
.pr-band-tx span { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 6px; }
.pr-band-tx em { display: block; font: 400 11px/1.5 var(--sans); font-style: normal;
                 color: var(--faint); margin-top: 6px; }
.pr-band-v { font: 700 34px var(--serif); color: var(--iris-deep); margin-left: auto; }
.pr-band form { margin: 0 0 0 auto; }
.pr-band .btn-go { width: auto; }

/* the schedules in force: a line each, the rule in the monospace face */
.pr-sched { display: grid; grid-template-columns: 190px 170px minmax(0, 1fr); gap: 10px 18px;
            align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line);
            margin: 0; }
.pr-sched:last-of-type { border-bottom: 0; }
.pr-sched b { font: 700 13.5px var(--sans); color: var(--ink); }
.pr-sched span { font: 400 12px var(--sans); color: var(--muted); }
.pr-sched code { font: 400 11.5px var(--mono); color: var(--iris-deep); word-break: break-word; }

/* the runs, on My day's timeline: a period, its state, and what it paid */
.pr-run { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pr-run b { font: 700 14.5px var(--sans); color: var(--ink); flex: 0 0 auto; }
.pr-run .badge { flex: 0 0 auto; }
.pr-run span { font: 400 12.5px var(--sans); color: var(--muted); }
.pr-run em { margin-left: auto; font: 700 14px var(--mono); font-style: normal; color: var(--ink);
             font-variant-numeric: tabular-nums; }

/* open a run: the words on the left, the two periods as verbs on the right */
.pr-open { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pr-open-tx { flex: 1 1 380px; min-width: 0; }
.pr-open-tx b { display: block; font: 700 21px var(--serif); color: var(--ink); }
.pr-open-tx span { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 8px; }
.pr-open-verbs { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.pr-open-verbs form { margin: 0; }
.pr-open-verbs > *, .pr-open-verbs form > * { min-width: 210px; }
.pr-open-verbs p { font: 400 11px var(--sans); color: var(--faint); text-align: center;
                   margin: 8px 0 0; min-width: 0; }

/* one employee in a draft run: the eight fields the run has always had */
.pr-row { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
          border-radius: 20px; box-shadow: var(--lift-1); padding: 20px 24px 18px; margin-top: 12px; }
.pr-row-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; }
.pr-live { margin-left: auto; text-align: right; flex: 0 0 auto; }
.pr-live b { display: block; font: 700 26px var(--serif); color: color-mix(in srgb, var(--paid) 84%, #000); }
.pr-live em { font: 800 11px var(--sans); letter-spacing: .08em; font-style: normal; color: var(--faint); }
.pr-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0 0; }
.pr-fields > div { flex: 1 1 96px; min-width: 96px; }
.pr-fields label { display: block; margin: 0 0 4px; font: 800 11px var(--sans);
                   letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.pr-fields input { width: 100%; }
.pr-fields .pr-save { flex: 0 0 118px; min-width: 118px; }
.pr-fields .pr-save button { width: 100%; }
.pr-more { font: 400 12px var(--sans); color: var(--faint); margin: 14px 2px 0; }

/* the living payslip: the desk changes, the paper below it does not */
.lps-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 0; }
.lps-strip b { flex: 0 0 26px; width: 26px; height: 30px; border-radius: 8px; display: flex;
               align-items: center; justify-content: center; font: 700 11px var(--sans);
               background: var(--surface); color: var(--faint);
               box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 14%, #fff); }
.lps-strip b.is-w    { background: var(--iris); color: #fff; box-shadow: none; }
.lps-strip b.is-hol  { background: var(--draft); color: #fff; box-shadow: none; }
.lps-strip b.is-rest { background: color-mix(in srgb, var(--iris) 22%, #fff);
                       color: var(--iris-deep); box-shadow: none; }
.lps-strip b.is-today { box-shadow: inset 0 0 0 2px var(--iris); color: var(--iris-deep); }
.lps-verdict { font: 800 11px var(--sans); letter-spacing: .08em; color: var(--muted); margin: 12px 0 0; }
.pr-paper-hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 34px 0 0; }
.pr-paper-hd .sub { margin: 0; }
.pr-paper-hd .btn-sm { margin-left: auto; }

/* the ladder: the fields fold in pairs, then singly; the people cards go to
   one column; the eight inputs wrap rather than shrink below a thumb's width */
@media (max-width: 1240px) {
  .pr-people { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pr-sched { grid-template-columns: 1fr; gap: 3px; }
  .pr-open-verbs { margin-left: 0; }
  .pr-band-v { margin-left: 0; }
}
/* ---- end of the payroll block (3.208.0). The colour guard reads to this line
   and no further, so nothing appended behind it is judged by mistake. ---- */

/* ==========================================================================
   THE STAFF DESK (3.209) — My day's language, counting people

   Almost nothing is new here. The header, the roster panel, the three fields,
   the timeline, the need-you rows and the quiet line are My day's own classes,
   worn unchanged. What follows is only the two shapes My day has no word for:
   a role with its share of the team, and a person card that says at a glance
   whether a paper is waiting on them.
   ========================================================================== */

/* a person whose paper is missing, on the roster beside the ring. Rose is not
   available for this — rose means the Airbnb channel and nothing else. */
.md-est i.is-miss, .md-est-key i.is-miss { background: var(--overdue); }

.st-panel { padding: 26px 30px 20px; }
.st-role { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.st-role > i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--sans); font-style: normal;
  background: var(--iris-tint); color: var(--iris-deep); }
.st-role > b { flex: 0 0 118px; font: 700 13.5px var(--sans); color: var(--ink); }
/* the headcount has its own name rather than being "the span": .st-role > span
   would out-specify .st-track and pin the share bar to the headcount's width. */
.st-role > .st-n { flex: 0 0 76px; font: 600 12px var(--sans); color: var(--muted); }
.st-role > em { flex: 0 0 auto; min-width: 92px; text-align: right; font-style: normal;
  font: 700 11.5px var(--sans); color: var(--faint); }
.st-role > em.is-all { color: var(--iris-deep); }
/* a role nobody holds is drawn, not hidden: "nobody yet" is a fact about the
   team, and an absent lane would read as a role that does not exist. */
.st-role.is-none > i { background: var(--soft); color: var(--faint); }
.st-role.is-none > b { color: var(--muted); font-weight: 600; }
.st-role.is-none > .st-n { color: var(--faint); }
.st-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--soft);
  overflow: hidden; }
.st-track > i { display: block; height: 100%; border-radius: 999px; background: var(--iris); }
.st-note { font: 400 11.5px var(--sans); color: var(--faint); margin: 20px 0 0; }

/* the team: three to a row on the wide measure, and each card carries its own
   state on the left edge — the same 5px rule My day's need-you rows wear. */
/* auto-FILL, not auto-fit: a role with two people would otherwise stretch its
   two cards across the whole measure while the role below it ran three narrow
   ones, and the groups would not line up down the page. */
.st-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(390px,100%), 1fr));
  gap: 14px; margin-bottom: 18px; }
.st-team .stf { border-radius: 20px; padding: 15px 19px; gap: 9px;
  border-color: color-mix(in srgb, var(--iris) 18%, #fff);
  border-left: 5px solid var(--paid); box-shadow: var(--lift-1); }
.st-team .stf.has-gap { border-left-color: var(--overdue); }
.st-team .stf.is-off { border-left-color: var(--line); }
/* the team's own count: the brand's, not the overdue red .md-count wears —
   how many people there are is a fact, not a warning. */
.st-count { font: 700 13px var(--sans); letter-spacing: .04em; color: var(--iris-deep);
  align-self: flex-end; margin-bottom: 3px; }
.st-sub { margin-top: 0; }
.st-actnote { margin-left: 12px; }
.st-inline { display: inline; margin: 0; }

@media (max-width: 860px) {
  .st-role > b { flex: 0 0 96px; }
  .st-role > .st-n { flex: 0 0 62px; }
}

/* ==========================================================================
   CLIENTS — THE BOOK, IN MY DAY'S LANGUAGE (3.210.0)
   Owner board, three passes, approved. The page borrows My day's own classes
   by RULE — .md-hd, .md-top, .md-house, .md-fig, .md-chart, .md-next, .md-tl,
   .md-needs, .md-quiet and the calendar all come from there unchanged. Only
   what the tenancies genuinely own is written below. Nothing invents a colour.
   ========================================================================== */
.clbook-page { margin-top: 18px; }

/* The book runs four across on the same grid the fields below it run, because
   a tenancy IS one of those fields — his word, board 3. */
.tnfs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px; margin: 0 0 26px; }

/* A tenancy wears .md-fig entire. The only deliberate difference is the 4px
   colour tab, which is the tenant's initials here: a person needs a face. */
.tnf { padding: 20px 20px 16px; }
.tnf .md-fig-k { align-items: flex-start; gap: 10px; }
.tnf .md-fig-k .tnf-fob { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px var(--sans); font-style: normal; letter-spacing: 0; }
.tnf-nm { flex: 1 1 auto; min-width: 0; padding-top: 6px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tnf-unit { flex: 0 0 auto; padding-top: 6px; font-style: normal;
  font: 800 11px var(--sans); letter-spacing: .11em; color: var(--muted); }
.tnf-co { margin: 3px 0 0 38px; font: 400 10.5px var(--sans); color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the figure and its unit are one phrase: they sit on a baseline together and,
   when there is not room, the unit drops WHOLE to the next line — "No rent
   line / nothing recurs yet" broke mid-phrase before this */
.tnf .md-fig-v { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tnf .md-fig-v small { font: 600 11.5px var(--sans); color: var(--muted); white-space: nowrap; }
.tnf .md-fig-sub, .tnf .md-fig-note { overflow-wrap: anywhere; }
/* The measure under a tenancy is that TENANT'S RECORD — the share of their
   invoices settled by the due date — and a record is a good thing whatever the
   card's tone is. A rose bar on a card whose sub reads "100% on time" said the
   opposite of the truth, so the bar keeps the paid green and only its length
   carries the meaning. */
.md-fig.tnf .md-bar i { background: color-mix(in srgb, var(--paid) 72%, #fff); }
/* the card's own verbs sit on their own hairline; the primary verb below is the
   single verb every field on My day ends with */
.tnf-foot { margin-top: auto; padding-top: 14px; }
.tnf-foot .tnt-verbs { border-top: 1px solid var(--line); padding-top: 11px; margin: 0 0 4px; }
.tnf-foot .md-fig-go { margin-top: 0; padding-top: 6px; }
.tnf.is-off { opacity: .72; }

/* how a tenancy stands, as one square: settled, owing, or running out. The
   estate's own three, and not one of them is rose — rose is the Airbnb
   channel and nothing else. */
.md-est i.is-settled, .md-est-key i.is-settled { background: var(--paid); }
.md-est i.is-owing,   .md-est-key i.is-owing   { background: var(--overdue); }
.md-est i.is-ending,  .md-est-key i.is-ending  { background: var(--draft); }

/* the calendar's other fobs. The default fob is the paid green, which is a
   clean and a move-in alike; a move-out and a billing day are their own. */
.hkcal-f.is-out  { background: linear-gradient(180deg, var(--draft), color-mix(in srgb, var(--draft) 74%, #000)); }
.hkcal-f.is-bill { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 46%, #fff),
                                                       color-mix(in srgb, var(--ink) 62%, #fff)); }
.hkcal-f.is-due  { background: linear-gradient(180deg, var(--iris), var(--iris-deep)); }

/* the seven days ahead, when what they carry is a word and not a person. A
   quiet day here is NOT an exception, so it never wears the rota's rose mark. */
.hkr-wk.is-words .hkr-on { width: auto; min-width: 26px; padding: 0 7px; border-radius: 9px;
  font-size: 8px; letter-spacing: .06em; }
.hkr-on.is-quiet { background: var(--soft); color: var(--faint); }
/* the rail's lane is a door into the tenancy now, not a label */
a.hkr-lane { color: inherit; text-decoration: none; border-radius: 9px; padding: 3px 5px; margin-left: -5px; }
a.hkr-lane:hover { background: var(--soft); text-decoration: none; }
a.hkr-lane i { background: linear-gradient(180deg, var(--overdue), color-mix(in srgb, var(--overdue) 74%, #000)); }
a.hkr-lane .hkr-track em { background: var(--overdue); }

@media (max-width: 1180px) { .tnfs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tnfs { grid-template-columns: 1fr; } }

/* ==========================================================================
   DISCIPLINE — THE DOCKET, IN MY DAY'S LANGUAGE (3.211.0)
   Owner board, approved. Everything this page shares with My day it shares by
   RULE and not by copy: .md-hd, .md-chip, .md-house, .md-est, .md-fig,
   .md-bar, .md-needs, .md-next/.md-tl, .md-quiet and .md-chart all come from
   there unchanged. Only what is genuinely this page's own is written below —
   the four gates, the outcome ledger, a case row, and the notice typeset as
   the document it is. Nothing here invents a colour.
   ========================================================================== */
.disc { margin-top: 18px; }

/* A square in the docket wall is coloured by WHOSE MOVE it is, never by
   status. Rose here is not the channel — it is a case that has been sitting
   on the owner's desk for over a week, which is the one thing on this page
   that is actually wrong. */
.md-est i.is-them, .md-est-key i.is-them { background: var(--iris); }
.md-est i.is-you,  .md-est-key i.is-you  { background: var(--draft); }
.md-est i.is-late, .md-est-key i.is-late { background: var(--overdue); }
.md-est i.is-done, .md-est-key i.is-done { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }

/* ---- the four gates: the only shape My day has no word for ---- */
.dc-gates { display: flex; gap: 4px; flex: 0 0 auto; text-decoration: none; }
.dc-g { display: block; text-decoration: none; border-radius: 8px; padding: 7px 10px;
        background: var(--soft); min-width: 0; }
/* The readability floor is 11px and it applies here too — the gates were drawn
   at 8.5px, which is exactly the sub-floor type every redesign since 3.185 has
   been for. */
.dc-g b { display: block; font: 800 11px var(--sans); letter-spacing: .04em; color: var(--faint); }
.dc-g.is-done { background: var(--iris-tint); }
.dc-g.is-done b { color: var(--iris-deep); }
.dc-g.is-them { background: var(--iris); }
.dc-g.is-them b { color: #fff; }
.dc-g.is-you { background: var(--draft-tint); }
.dc-g.is-you b { color: color-mix(in srgb, var(--draft) 70%, #000); }
.dc-g.is-late { background: var(--overdue); }
.dc-g.is-late b { color: #fff; }
.dc-g.is-todo b { color: color-mix(in srgb, var(--ink) 30%, #fff); }
/* on the case itself the gates run the width and carry their dates */
.dc-gates.is-full { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                    gap: 10px; margin-top: 15px; }
.dc-gates.is-full .dc-g { padding: 15px 17px; border-radius: 16px; }
.dc-gates.is-full .dc-g b { font-size: 11px; letter-spacing: .13em; }
.dc-gates.is-full .dc-g em { display: block; font: 600 12.5px var(--sans); font-style: normal;
                             margin-top: 6px; color: var(--muted); }
.dc-gates.is-full .dc-g.is-done em { color: var(--iris-deep); }
.dc-gates.is-full .dc-g.is-them em, .dc-gates.is-full .dc-g.is-late em { color: #fff; }
.dc-gates.is-full .dc-g.is-you em { color: color-mix(in srgb, var(--draft) 70%, #000); }
.dc-gates.is-full .dc-g.is-todo em { color: var(--faint); }

/* ---- the outcome ledger: the shape of how this place is run ---- */
.dc-outs { display: flex; flex-direction: column; gap: 11px; margin: 24px 0 20px; }
.dc-out { display: grid; grid-template-columns: 190px minmax(0, 1fr) 34px;
          gap: 16px; align-items: center; }
.dc-out b { font: 700 13px var(--sans); color: var(--ink); }
.dc-out .md-bar { margin-top: 0; }
.dc-out .md-bar i { background: var(--iris); }
.dc-out em { font: 700 15px var(--serif); font-style: normal; color: var(--ink); text-align: right; }
.dc-out.is-none b, .dc-out.is-none em { color: var(--faint); }

/* ---- a case in the book ---- */
.dc-band { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; }
.dc-band em { font: 800 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
              font-style: normal; color: var(--ink); }
.dc-band span { font: 400 11.5px var(--sans); color: var(--muted); }
.dc-cases { display: flex; flex-direction: column; gap: 10px; }
.dc-case { display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: inherit;
           background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
           border-radius: 20px; box-shadow: var(--lift-1); }
.dc-case:hover { text-decoration: none; box-shadow: var(--lift-2); }
.dc-fob { background: var(--iris-tint); color: var(--iris-deep); }
.dc-who { flex: 1 1 auto; min-width: 0; }
.dc-who b { display: block; font: 700 15px var(--sans); color: var(--ink); }
.dc-who em { display: block; font: 400 12px var(--sans); font-style: normal; margin-top: 3px;
             color: color-mix(in srgb, var(--ink) 70%, #fff); }
.dc-case .md-chev { color: var(--faint); }
.dc-more { font: 400 12px var(--sans); color: var(--muted); margin: 14px 0 0; }

/* ---- one case: the ladder, the document, the control ---- */
.dc-back { margin: 0 0 14px; font: 700 12.5px var(--sans); }
.dc-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--iris); }
.dc-back .md-chev { transform: scaleX(-1); }
.dc-ladder { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
             border-radius: 24px; box-shadow: var(--lift-1); padding: 24px 26px 22px; }
.dc-ladder-note { font: 400 12.5px var(--sans); color: var(--muted); margin: 15px 0 0; }
.dc-two { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.dc-doc, .dc-side { background: var(--surface);
                    border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
                    border-radius: 24px; box-shadow: var(--lift-1); padding: 26px 30px 24px; min-width: 0; }
/* the notice reads like the document it is: the capitals it was written with
   become headings, and not one word of it is rewritten */
.dc-nte { margin-top: 18px; max-width: 68ch; }
.dc-nte p { font: 400 14px/1.65 var(--sans); color: var(--ink); margin: 0 0 14px; }
.dc-nte-k { font: 800 11px var(--sans) !important; letter-spacing: .15em; color: var(--faint) !important;
            margin: 26px 0 10px !important; }
.dc-nte-k:first-child { margin-top: 0 !important; }
.dc-reply { border-left: 4px solid var(--iris); padding: 4px 0 4px 18px; margin-top: 16px; }
.dc-reply p { font: 400 14px/1.6 var(--sans); color: var(--ink); margin: 0; }
.dc-reply-w { font: 400 11.5px var(--sans) !important; color: var(--faint) !important; margin-top: 10px !important; }
.dc-none { font: 400 13.5px var(--sans); color: var(--muted); margin: 16px 0 0; }
.dc-side-say { font: 400 13px/1.6 var(--sans); color: var(--muted); margin: 16px 0 18px; }
.dc-side .fgrid.is-one { grid-template-columns: minmax(0, 1fr); }
.dc-verdict { font: 700 24px/1.2 var(--serif); color: var(--ink); margin: 16px 0 0; }
.dc-reason { border-left: 4px solid color-mix(in srgb, var(--ink) 14%, #fff);
             padding: 2px 0 2px 16px; margin: 16px 0 0; }
.dc-reason p { font: 400 13.5px/1.6 var(--sans); color: var(--ink); margin: 0; }
.dc-promise { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 16px;
              background: var(--paid-tint); border: 1px solid color-mix(in srgb, var(--paid) 22%, #fff);
              font: 600 12.5px/1.5 var(--sans); color: color-mix(in srgb, var(--paid) 84%, #000); margin: 0; }
.dc-promise i { width: 10px; height: 10px; border-radius: 50%; background: var(--paid); flex: 0 0 10px; }
.dc-side-go { margin: 22px 0 0; font: 700 12.5px var(--sans); }
.dc-side-go a { display: inline-flex; align-items: center; gap: 8px; color: var(--iris); }
.dc-new { background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
          border-radius: 24px; box-shadow: var(--lift-1); padding: 26px 30px 24px; }
.dc-new .btn.primary { display: inline-flex; align-items: center; gap: 10px; }
.dc-new .btn.primary .iv-fob { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px;
                               background: color-mix(in srgb, #fff 26%, transparent); }

@media (max-width: 1100px) {
  .dc-two { grid-template-columns: minmax(0, 1fr); }
  .dc-out { grid-template-columns: 140px minmax(0, 1fr) 30px; }
}
@media (max-width: 760px) {
  .dc-gates.is-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-case { flex-wrap: wrap; }
}
/* ---- end of the Discipline block (3.211). Its colour guard reads to this
   line and no further, so nothing appended behind it is judged as ours. ---- */


/* ==========================================================================
   SEARCH — ONE FIELD FOR THE WHOLE PLATFORM, IN MY DAY'S LANGUAGE (3.214.0)
   The page borrows .md-hd, .md-chip, .md-k, .md-needs/.md-need, .md-next-note
   and .md-quiet from My day unchanged, so a hit here reads exactly like a
   thing that needs you there. Only two things are genuinely this page's own:
   the field, which My day has no word for, and the two calm tones a RESULT
   needs — a hit is not late and not amber, and a dead thing found is neither.
   Nothing here invents a colour.
   ========================================================================== */
.sch { margin-top: 18px; }

/* ---- the field: the page has one verb and this is it ---- */
.sch-ask { padding: 22px 26px 18px; margin-bottom: 30px; }
.sch-field { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sch-field input[type=search] { flex: 1 1 auto; min-width: 0; height: 54px;
  padding: 0 18px 0 52px; font: 500 17px var(--sans); border-radius: 16px; }
.sch-field .btn { height: 54px; padding: 0 30px; font-size: 15px; }
.sch-mag { position: absolute; left: 19px; width: 19px; height: 19px; color: var(--faint);
  pointer-events: none; }
.sch-note { font: 400 11.5px/1.7 var(--sans); color: var(--faint); margin: 14px 0 0; }

/* ---- a result row: My day's need-you row, in the two tones a hit can have ----
   The count beside a group is not a debt either, so it drops the overdue
   colouring .md-count carries where it was born. */
.md-need.is-hit { border-left-color: var(--iris); }
.md-need.is-hit .md-need-fob { background: var(--iris-tint); color: var(--iris-deep); }
.md-need.is-quiet { border-left-color: color-mix(in srgb, var(--ink) 18%, #fff); }
.md-need.is-quiet .md-need-fob { background: var(--soft); color: var(--muted); }
.md-need.is-quiet .md-need-tx b { color: var(--muted); }
.sch .md-count { color: var(--faint); padding-bottom: 3px; }
/* prose is bounded at the reading measure even when the page is not — a
   sentence running the full 1360px is a paragraph nobody finishes */
.sch .md-next-none, .sch .md-next-note { max-width: 76ch; }

@media (max-width: 620px) {
  .sch-field { flex-wrap: wrap; }
  .sch-field .btn { width: 100%; }
}
/* ---- end of the Search block (3.214). Its colour guard reads to this line
   and no further, so nothing appended behind it is judged as ours. ---- */

/* ==========================================================================
   MY ACCOUNT — YOUR OWN DOOR, IN MY DAY'S LANGUAGE (3.212.0)
   The page every person on the platform has, and the only page a cleaner and
   a superadmin read the same way. It answers three questions and stops: who
   am I here, how well is my door locked, and has anybody else tried it.

   Everything it shares with My day it shares by RULE, not by copy — .md-hd,
   .md-chip, .md-top, .md-house, .md-fig, .md-mid, .md-next, .md-tl,
   .md-needs and .md-quiet are all that page's, worn here. Only what an
   account genuinely has of its own is written below: what this account can
   do, the authenticator's own setup, and the recovery codes.
   Nothing invents a colour.
   ========================================================================== */
.you { margin-top: 18px; }
.you .pagehead { margin-top: 40px; }

/* the wall of the last thirty days: one square an event, oldest on the left */
.md-est i.is-arrive,  .md-est-key i.is-arrive  { background: var(--iris); }
.md-est i.is-leave,   .md-est-key i.is-leave   { background: var(--surface);
                                                 box-shadow: inset 0 0 0 1.5px var(--line); }
.md-est i.is-refused, .md-est-key i.is-refused { background: var(--overdue); }

/* the row inside My day's timeline item, for a record rather than a link:
   an arrival is history and history goes nowhere, so it is not an <a>.
   The gutter is wider than My day's 62px because this column carries ago()
   and "JUST NOW" wraps to two lines at that width. */
.you-row { display: flex; gap: 14px; align-items: baseline; }
.you-row .md-tl-w { flex: 0 0 76px; }
.you-row .md-tl-tx { flex: 1 1 auto; min-width: 0; }
.md-tl-i.is-refused::before { background: var(--overdue);
                              box-shadow: 0 0 0 3px var(--overdue-tint); }

/* what this account can do: one line a capability, the ones it has not in
   the same list rather than hidden, because "why can't I see that?" is the
   question this panel exists to answer */
.you-cans { list-style: none; margin: 18px 0 0; padding: 0; }
.you-can { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0;
           font: 400 12.5px/1.45 var(--sans); color: var(--faint); }
.you-can .md-check { margin-top: 2px; }
.you-can.is-on { color: color-mix(in srgb, var(--ink) 82%, #fff); font-weight: 500; }
.you-can.is-on .md-check { color: var(--paid); }

/* the three panels that hold the forms wear the same edge as every field */
.you-panel { padding: 26px 30px 24px; }
/* symmetry: a label that wraps to two lines must not drop its own box below
   the row. .fgrid aligns its cells to the START, so the tallest label pushes
   only its own control down; ending them instead puts every control on one
   line, whatever its label did. */
.you-panel .fgrid { align-items: end; }
.you-say { font: 400 13.5px/1.6 var(--sans); color: var(--muted); margin: 0 0 16px; }
.you-say b { color: var(--ink); }

/* a form with one field is one field wide — a lone password box stretched
   across the measure looks like a mistake, not a design */
.you-one { display: grid; grid-template-columns: minmax(0, 300px); margin-bottom: 16px; }

/* the authenticator's own setup: a numbered step, the code, and the key */
.you-step { display: flex; align-items: center; gap: 11px; margin: 0 0 14px;
            font: 500 13.5px var(--sans); color: var(--ink); }
.you-step b { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px;
              background: var(--iris-tint); color: var(--iris-deep);
              display: flex; align-items: center; justify-content: center;
              font: 700 12px var(--sans); }
.you-qr { display: block; width: 190px; height: 190px; margin: 0 auto 12px;
          border: 1px solid var(--line); border-radius: 16px; padding: 8px; background: #fff; }
.you-key { text-align: center; font: 400 12px var(--sans); color: var(--muted); margin: 0 0 22px; }
.you-key code { font-family: var(--mono); color: var(--ink); }
.you-digits { letter-spacing: .3em; font-family: var(--mono); }

/* the recovery codes are shown once, so they are drawn to be copied */
.you-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px,100%), 1fr));
             gap: 8px; margin: 0 0 18px; }
.you-code { font-family: var(--mono); font-size: 12.5px; text-align: center;
            background: var(--paper); border: 1px solid var(--line);
            border-radius: 10px; padding: 7px 10px; }

@media (max-width: 760px) {
  .you-panel { padding: 22px 20px 20px; }
  .you-one { grid-template-columns: minmax(0, 1fr); }
}
/* ---- end of the My account block (3.212). Its colour guard reads to this
   line and no further, so nothing appended behind it is judged as ours. ---- */
/* ==========================================================================
   SETTINGS — THE COUNTER (3.215)
   Owner board. He asked for My day's theme held across the site and sent
   settings.php. The page is borrowed, not copied: .md-hd, .md-hi, .md-date,
   .md-chip, .md-house, .md-est, .md-fig, .md-needs, .md-quiet, .md-k,
   .pagehead/.secttl and .md-count are My day's own classes worn unchanged,
   and the smoke suite names each one so a .set- twin turns it red.

   Only three things here are settings' own, because only three things are:
   the grid the rooms stand in, the row that walks between them, and the
   card edge — every card already on this page joins the shared edge rather
   than keeping the 16px legacy one.
   ========================================================================== */

/* the rooms: four across, on the same grid the tenancies run */
.setrooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px; margin-top: 16px; align-items: stretch; }
.setrooms .md-fig { padding: 22px 20px 16px; }
.setrooms .md-fig-v { font-size: 24px; }

/* the room switcher: eight rooms read one after another, so a room has to be
   leavable without walking back to the counter first. These are LINKS, not
   .btn-ghost — see the standing note about a ghost link rendering solid. */
.setswitch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.setswitch a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 18px;
               font: 700 12px var(--sans); color: var(--iris-deep); text-decoration: none;
               background: var(--surface); border: 1px solid color-mix(in srgb, var(--iris) 20%, #fff); }
.setswitch a:hover { background: var(--iris-tint); text-decoration: none; }
.setswitch a.is-here { background: var(--iris); border-color: var(--iris); color: #fff; }
.setswitch a:first-child { color: var(--muted); border-color: var(--line); }
.setswitch a:first-child:hover { color: var(--iris-deep); }

/* every card in the counter's rooms wears the day's edge and the day's key */
.setpage .card { border-radius: 24px; border-color: color-mix(in srgb, var(--iris) 18%, #fff);
                 box-shadow: var(--lift-1); }
.setpage .card > h2 { font: 800 11px var(--sans); letter-spacing: .15em; color: var(--faint);
                      text-transform: uppercase; }
.setpage .sect { margin-top: 4px; }
.setpage .secintro { margin-bottom: 18px; }
/* the head already names the room, so the counter's own h1 is the only one */
.setpage .pagehead { margin-top: 40px; }

@media (max-width: 1180px) { .setrooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .setrooms { grid-template-columns: minmax(0, 1fr); } }
/* ---- end of the Settings block (3.215). ---- */
/* 
==================================================================
   ONE INVOICE — THE DOCUMENT, IN MY DAY'S LANGUAGE (3.217)
   He asked for My day's theme held across the site and sent invoice.php. It
   was the last money page still in the 3.154 dialect: an iris slab with the
   total painted on it, a life-line stood upright because the rail was 360px
   wide, six full-width buttons stacked under it — and, beside all that, two
   thirds of the page holding one line of text.

   Borrowed BY RULE and not copied: .md-hd, .md-hi, .md-date, .md-chip,
   .md-top, .md-house, .md-est, .md-fig (through md_fig()), .md-mid,
   .md-next, .md-tl, .md-needs, .md-quiet, .md-k and the .pagehead/.secttl
   heading are all My day's, worn unchanged. The smoke suite names every one
   of them, so an .iv- twin of a class the day already owns turns it red.

   Six things are written under this page's name, because only six are: the
   wrapper, the verb strip, the money in the house (a total is longer than a
   count and will not sit at 72px), the two-panel column, the document panel
   and the rows of the document itself. Nothing here invents a colour.
   ========================================================================== */
.ivday { margin-top: 18px; }
.ivday .pagehead { margin-top: 40px; }

/* THE VERBS. They were a stack of six full-width buttons in the rail, which
   made Void as loud as Download. On the wide measure they are one strip, in
   the order the story runs, sized by their own words. */
.iv-verbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.iv-verbs form { display: contents; }
.iv-verbs .md-k { flex: 0 0 auto; margin-right: 4px; }
/* the one verb that undoes the document stays quiet until it is wanted */
.iv-verbs .btn-void { height: var(--ctl-h); padding: 0 20px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; background-image: none; color: var(--overdue);
  border: 2px solid color-mix(in srgb, var(--overdue) 40%, #fff);
  font: 700 13.5px var(--sans); box-shadow: none; cursor: pointer; }
.iv-verbs .btn-void:hover { background: var(--overdue-tint); border-color: var(--overdue);
  color: var(--overdue); filter: none; }

/* the total in the house: money is longer than a count, so it takes the size
   the day gives a figure rather than the size it gives a number. The word
   beside it WRAPS: at 72px My day's count leaves room for "of 40 earning",
   and a peso total does not — nowrap there ran the word under the ring. */
.md-house-n b.iv-big { font: 700 40px/1.15 var(--serif); }
.ivday .md-house-n { flex-wrap: wrap; }
.ivday .md-house-n span { white-space: normal; }

/* the left of the two columns: the details and the lines, stacked. The two
   columns START rather than stretch — a document of twelve lines beside a
   life-line of three stops otherwise draws a tall empty card. */
.ivday .md-mid { align-items: start; }
.iv-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* .iv-doc joins the shared card-edge rule at the head of the My day block —
   the edge has exactly one spelling and this page does not write a second. */
.iv-doc { padding: 26px 30px 24px; }
.iv-doc > .md-next-note { margin-top: 8px; }

/* THE LINES. One line, one shelf: what it is, what it cost, what it carries,
   and — while the document is a draft — what can be done to it. */
.ilrows { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ilrows .ilc { border-radius: 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); }
.ilrows .ilc.is-pending { border-left: 3px solid var(--draft); }
.ilrows .ilc.dragging { opacity: .5; }
.ilrows .ilc.drop-above { box-shadow: 0 -3px 0 0 var(--iris); }
.ilrows .ilc.drop-below { box-shadow: 0 3px 0 0 var(--iris); }
.ilc .ilc-top { display: flex; align-items: flex-start; gap: 10px; }
.ilc .draghandle { cursor: grab; color: var(--faint); font-size: 11px; margin-top: 3px; }
.ilc .ilc-desc { flex: 1; min-width: 0; font: 700 13.5px var(--sans); color: var(--ink); }
.ilc .ilc-right { text-align: right; }
.ilc .ilc-right em { display: block; font: 400 11.5px var(--sans); color: var(--muted); font-style: normal; }
.ilc .ilc-right b { display: block; font: 700 15.5px var(--serif); margin-top: 2px; }
.ilc.is-pending .ilc-right b { color: var(--faint); }
.ilc .ilc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ilc .ilc-verbs { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--iris) 12%, #fff); }
.ilc .ilc-rm { margin-left: auto; }
/* the cost form is two controls that belong together: inline lets the row
   break between the box and its Set, which reads as an orphaned button */
.ilc .ilc-verbs form.inline { display: flex; align-items: center; gap: 8px; }
/* the line, tappable and openable (3.159): a closed shelf is one tap from
   its own little editor — iris edge, live total, honest green Save */
.ilc .ilc-tap { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0;
  color: inherit; text-decoration: none; }
.ilc .ilc-tap:hover { text-decoration: none; }
.ilc .ilc-tap:hover .ilc-desc { color: var(--iris); }
.ilc.is-open { border: 2px solid var(--iris);
  background: color-mix(in srgb, var(--iris) 2%, #fff); }
.ile { display: grid; grid-template-columns: 2.4fr .6fr .9fr auto; gap: 10px 14px; align-items: start; }
.ile .ile-f label { display: block; font: 700 11px var(--sans); letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 5px; }
.ile .ile-eq { padding-top: 2px; }
.ile .ile-eq i { display: block; font: 800 11px var(--sans); letter-spacing: .1em;
  color: var(--faint); font-style: normal; }
.ile .ile-eq b { display: block; font: 700 19px var(--serif); margin-top: 3px; }
.ile .ile-eq span { display: block; font: 400 10.5px var(--sans); color: var(--faint); }
.ile .ile-verbs { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--iris) 12%, #fff); }

/* the band that foots the document */
.ilc-total { display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 15px 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--iris) 22%, #fff);
  background: color-mix(in srgb, var(--iris) 4%, #fff); }
.ilc-total .ilt-sub { font: 400 11.5px var(--sans); color: var(--muted); }
.ilc-total .ilt-big { margin-left: auto; font: 700 21px var(--serif); color: var(--ink); }

/* the two field grids the document types into, kept from 3.159/3.160 */
.ivdet { grid-template-columns: 1fr 1fr 1.4fr auto; align-items: start; }
/* the go-cell (3.160): a button beside fields centres against the control row
   itself — no 2px guesswork, one rule for every grid that ends in a verb */
.ivdet .ivdet-go, .ivadd .ivdet-go { align-self: end; display: flex; align-items: center;
  height: var(--ctl-h); padding-bottom: 0; }
.ivadd { grid-template-columns: 2.2fr .7fr 1fr auto; align-items: start; margin-top: 8px; }

/* THE LIFE. My day's timeline, with the two ends a document can reach: green
   when the money is in, red when the day went past and it is still out. A
   stop is a record and a record goes nowhere, so it is not a link. */
.iv-stop { display: flex; gap: 14px; align-items: baseline; }
.iv-stop .md-tl-w { flex: 0 0 62px; }
.iv-stop .md-tl-tx { flex: 1 1 auto; min-width: 0; }
.md-tl-i.is-done::before { background: var(--paid); box-shadow: 0 0 0 3px var(--paid-tint); }
.md-tl-i.is-late::before { background: var(--overdue); box-shadow: 0 0 0 3px var(--overdue-tint); }
.md-tl-i.is-done .md-tl-tx b { color: color-mix(in srgb, var(--paid) 84%, #000); }
.md-tl-i.is-late .md-tl-tx b { color: color-mix(in srgb, var(--overdue) 80%, #000); }

/* the paper it becomes, with a mark of its own — drawn, never typed */
.ivpaper { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px;
  color: var(--faint); }
.ivpaper.is-on { color: var(--paid); }
.ivpaper b { display: block; font: 700 13px var(--sans); color: var(--ink); }
.ivpaper em { display: block; font: 400 11.5px var(--sans); color: var(--muted);
  font-style: normal; margin-top: 3px; }

@media (max-width: 760px) {
  .iv-doc { padding: 22px 20px 20px; }
  .ivdet, .ivadd { grid-template-columns: 1fr 1fr; }
  .ilc .ilc-verbs { flex-wrap: wrap; }
  .md-house-n b.iv-big { font-size: 32px; }
}
@media (max-width: 700px) { .ile { grid-template-columns: 1fr 1fr; } .ile .ile-desc { grid-column: 1 / -1; } }
/* ---- end of the invoice block (3.217). Its colour guard reads to this line
   and no further, so nothing appended behind it is judged as ours. ---- */

/* ==========================================================================
   INVENTORY — THE STOREROOM, IN MY DAY'S LANGUAGE (3.216.0)
   Owner board. Everything this page shares with My day it shares by RULE and
   not by copy: .md-hd, .md-chip, .md-house, .md-est, .md-fig, .md-bar,
   .md-needs, .md-chart, .md-next/.md-tl and .md-quiet all come from there
   unchanged, and .iv-panel is added to the one shared surface rule rather
   than restating it. Only what this page genuinely owns is written below —
   the three doors of the module, the panel the verb sits in, the top-up form
   on a shelf that has run out, and a movement row that is not a link.
   Nothing here invents a colour: the eight tokens and mixes of them.
   ========================================================================== */
.invp { margin-top: 18px; }
/* A storeroom can be worth seven figures where a month's rent is six, and a
   figure that breaks across two lines is not a figure. It steps down instead. */
.invp .md-fig-v { font-size: clamp(21px, 2.05vw, 30px); }

/* A square in the storeroom wall says what the SHELF holds of that item —
   iris above its line, amber at it, overdue with none left, and an outline
   for an item nobody asked to be warned about. */
.md-est i.is-stocked,   .md-est-key i.is-stocked   { background: var(--iris); }
.md-est i.is-low,       .md-est-key i.is-low       { background: var(--draft); }
.md-est i.is-out,       .md-est-key i.is-out       { background: var(--overdue); }
.md-est i.is-untracked, .md-est-key i.is-untracked { background: var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 24%, #fff); }

/* ---- the three doors of the module ---- */
.iv-lens { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.iv-lens a { display: inline-flex; align-items: center; border-radius: 20px;
  padding: 8px 16px; font: 700 12px var(--sans); letter-spacing: .04em;
  color: var(--muted); background: var(--soft); }
.iv-lens a:hover { text-decoration: none; color: var(--iris-deep); background: var(--iris-tint); }
.iv-lens a.is-on { background: var(--iris); color: #fff; }
.iv-lens a.is-on:hover { background: var(--iris); color: #fff; }

/* ---- the verb, in the same clothes as every field above it ---- */
.iv-panel { margin-top: 16px; padding: 24px 26px 22px; }
.iv-panel > .md-k { margin-bottom: 4px; }
.iv-panel .seg { margin-top: 6px; }
.iv-more { padding: 18px 26px; }
.iv-more summary { cursor: pointer; list-style: none; }
.iv-more summary::-webkit-details-marker { display: none; }
.iv-more summary::before { content: "+ "; color: var(--iris); font-weight: 800; }
.iv-more[open] summary::before { content: "− "; }
.iv-more summary:hover { color: var(--iris-deep); }

/* ---- topping a shelf up from the row that reported it empty ---- */
.iv-top { display: flex; align-items: center; gap: 8px; margin: 0; flex: 0 0 auto; }
.iv-top input { width: 78px; height: 36px; margin: 0; padding: 4px 10px; font-size: 13px; }
.iv-top button { height: 36px; padding: 4px 14px; white-space: nowrap; }

/* The stock report's per-row controls. The declarations are the verbatim twins
   of the five inline styles they replaced, so the row is pixel-for-pixel what
   it was — the wardrobe moved, the design did not. */
.iv-rowacts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.iv-rowacts .iv-top { gap: 6px; }
.iv-rowacts .iv-top input { width: 74px; height: 34px; padding: 4px 8px; font-size: 13px; }
.iv-rowacts .iv-top button { height: 34px; padding: 4px 12px; }
.iv-rowacts .iv-top button.btn-ghost { padding: 4px 10px; }

/* A movement has no page of its own, so a row on the timeline is not a link.
   It still stands exactly where .md-tl-i a would have put it. */
.iv-mv { display: flex; gap: 14px; align-items: baseline; }

@media (max-width: 640px) {
  .md-need { flex-wrap: wrap; }
  .iv-top { width: 100%; }
  .iv-top button { flex: 1 1 auto; }
}
/* ---- end of the Inventory block (3.216). ---- */

/* ==========================================================================
   THE HANDBOOK, FOR STAFF (3.218)
   My day's language, spent unchanged: .md-hd, .md-chip, .md-house, .md-fig,
   .md-needs, .md-next/.md-tl, .md-quiet. Only two shapes are written under
   this page's own name, because My day has no word for either: the contents
   map (a way INTO a long document, which is how a handbook is actually read
   after the first time) and the panel the document sits in. Nothing here
   invents a colour — the eight tokens and mixes of them.
   ========================================================================== */
.hbpage { margin-top: 18px; }
.hbpage .md-top { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
/* the one thing to do stands above the fields, full measure, on its own */
.hb-needs { margin: 0 0 18px; }
.hb-needs .md-need { max-width: none; }
/* the panel the document and the signing sit in: the same edge as every
   field on My day, at the width of a page rather than a card */
.hb-panel { background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--iris) 18%, #fff);
  border-radius: 24px; box-shadow: var(--lift-1); position: relative;
  min-width: 0; padding: 26px 30px 24px; }
.hb-sign { padding-bottom: 28px; }
/* you sign at the foot of the paper, so the signing reads at the paper's
   measure — a name typed into a control thirteen hundred pixels wide is not
   a signature, it is a field */
.hb-sign > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.hb-sign .actions { display: flex; justify-content: flex-start; }
.hb-mid { margin-top: 22px; grid-template-columns: 1fr; }

/* the contents map: every numbered section, a door into the text below */
.hb-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px,100%), 1fr));
  gap: 8px 14px; margin: 0; }
.hb-s { display: flex; align-items: baseline; gap: 11px; padding: 9px 14px;
  border-radius: 14px; color: inherit; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--iris) 14%, #fff); min-width: 0; }
.hb-s:hover { text-decoration: none; border-color: color-mix(in srgb, var(--iris) 40%, #fff);
  box-shadow: var(--lift-1); }
.hb-s:hover span { color: var(--iris); }
.hb-s i { font: 800 11px var(--sans); font-style: normal; letter-spacing: .04em;
  color: var(--faint); flex: 0 0 24px; }
.hb-s span { font: 600 13px/1.35 var(--sans); color: var(--ink); min-width: 0;
  overflow-wrap: anywhere; }
.hb-map-more { font: 400 12px var(--sans); color: var(--faint); margin: 12px 0 0; }
/* a count that is a fact rather than a warning wears the quiet colour */
.md-count.is-quiet { color: var(--faint); }
/* the written handbook is paper and stands as paper, on the page itself */
.hbpage > .cdoc { margin: 0 auto; }
.hbpage .md-quiet { margin-top: 24px; }

@media (max-width: 1240px) {
  .hbpage .md-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hbpage .md-top { grid-template-columns: 1fr; }
  .hb-panel { padding: 20px 18px 22px; border-radius: 18px; }
  .hb-map { grid-template-columns: 1fr; }
}
/* ---- end of the handbook block (3.218). Its colour guard reads to this
   line and no further, so nothing appended behind it is judged as ours. ---- */
/* =====================================================================
   HOUSEKEEPING SETUP (3.219) — the estate, the round and the pattern.

   The page wears My day's language by rule: .md-hd and its chips, .md-top,
   .md-house with a ring and a square a home, .md-fig, .md-needs/.md-need,
   .md-quiet and .md-allquiet all come from there unchanged. Only the shapes
   My day has no word for are written here — the pattern grid, the verbs that
   sit at the end of a row, and the flag on a home that cannot print a lease.
   ===================================================================== */

.hkset { --hk-gap: 14px; }
.hkset .pagehead { margin-top: 30px; }
.hk-back { margin: 8px 0 0; font: 400 13px var(--sans); }
.hk-back a { color: var(--muted); }
.hk-back a:hover { color: var(--iris-deep); }
.hk-sub { margin: 0 0 2px; }

/* The drawn plus. A typed one is a glyph in a font we do not control, and it
   lands at a different height on every machine. */
.hk-plus { width: 13px; height: 13px; flex: 0 0 13px; margin-right: 6px;
  vertical-align: -2px; color: var(--iris); }

/* ---- the standing pattern: a day is an object, not a row of a ledger ---- */
.hk-rota { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--hk-gap); }
.hk-rota-day { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 14px 16px; min-width: 0; }
.hk-rota-day > b { display: block; font: 700 14px var(--sans); color: var(--ink); margin-bottom: 12px; }
.hk-rota-slot { display: block; margin: 0 0 10px; }
.hk-rota-slot:last-child { margin-bottom: 0; }
.hk-rota-slot > span { display: block; font: 600 9.5px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.hk-rota-slot select, .hk-rota-slot input { width: 100%; margin: 0; height: 36px;
  font-size: 12.5px; padding-left: 10px; padding-right: 26px; }

/* ---- the week: a day that nobody is down for says so ---- */
.hk-weeknav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.hk-note { font: 400 12px var(--sans); color: var(--muted); }
.hk-nobody { margin: 10px 0 0; padding: 5px 0; border-radius: 8px; text-align: center;
  font: 700 9.5px var(--sans); letter-spacing: .07em;
  color: color-mix(in srgb, var(--overdue) 80%, #000); background: var(--overdue-tint); }

/* ---- the verbs at the end of a .md-need row ---- */
.hk-verbs { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.hk-verbs form { margin: 0; display: flex; align-items: center; gap: 7px; }
.hk-verbs .btn-sm { white-space: nowrap; }
.hk-again input[type=date] { width: 148px; height: 34px; margin: 0; font-size: 12.5px; }
/* the nudge goes out on the green channel it actually travels down, and the
   green is the one the rest of the platform already uses for that channel */
.hk-wa { background: var(--wa); }
.hk-wa:hover { background: var(--wa); }
.hk-done { background: var(--paid); }
.hk-done:hover { background: var(--paid); }

/* ---- the register: a home that cannot print a lease wears it ---- */
.hk-flag { display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 8px;
  font: 700 9.5px var(--sans); letter-spacing: .06em;
  color: color-mix(in srgb, var(--overdue) 80%, #000); background: var(--overdue-tint); }

/* ---- the ask: the short form that opens a move checklist or a visit ---- */
.hk-ask { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px 20px; margin: 0 0 14px; }
.hk-ask .fgrid { margin: 0; }
.hk-ask button { width: 100%; }

/* ---- the two openers: adding a home, adding a task ----
   A hairline, not a 2px ink rule: the heavy rule is the P&L band's alone, and
   a second one on this page would be a second hero. */
.hk-new { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 10px; }
.hk-newhd { display: flex; align-items: center; margin: 0 0 4px;
  font: 700 13px var(--sans); color: var(--iris); }
.hk-seed { margin: 4px 0 14px; }
.hk-item.is-off { opacity: .55; }
.hk-item { border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0; }

@media (max-width: 1100px) {
  .hk-rota { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hk-rota { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-verbs { width: 100%; justify-content: flex-end; }
  .hk-again input[type=date] { width: 100%; }
}
/* ---- end of the Housekeeping setup block (3.219). ---- */

/* ---- the sign-in page (3.222): the gate the staff arrive at ---------------
   The work on the left, what the platform DOES on the right. It breaks the
   1020px measure on purpose — a gate is a whole screen, not a card floating
   on one. Negative side margins rather than 100vw, so a scrollbar can never
   push the page sideways. */
.sgn { display: flex; align-items: stretch; min-height: calc(100vh - 92px);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* the left half: ONE stack — the mark, then the one thing you came to do —
   centred in the half. The mark used to float at the top of an empty panel
   with the form adrift below it (owner, 3.221, by eye). */
.sgn-form { flex: 0 0 47%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 44px 40px; }
.sgn-col { width: 100%; max-width: 396px; }
/* the hairline closes the identity and opens the sign-in, so the two read as
   one object rather than two things in a column */
.sgn-id { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
  text-align: center; }   /* mark and both lines centred in the field (owner, 3.224) */
.sgn-id .sgn-nm { font: 700 25px/1.1 var(--serif); color: var(--ink); margin: 0; }
.sgn-id img { display: block; margin: 0 auto; max-height: 46px; max-width: 210px;
  object-fit: contain; }
.sgn-line { font: 700 9px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin: 7px 0 0; }
.sgn-eyebrow { font: 700 9.5px var(--sans); letter-spacing: .21em; text-transform: uppercase;
  color: var(--iris-deep); margin: 0 0 8px; }
.sgn-h { font: 700 38px/1.05 var(--serif); color: var(--ink); margin: 0 0 10px; }
.sgn-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }
/* the label and its escape hatch share one line, so the field below keeps
   the same height as every other field in the platform */
.sgn-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sgn-lrow label { margin-bottom: 4px; }
.sgn-lrow a { font-size: 12.5px; }
/* Show sits INSIDE the password field — beside it, it would break the row */
.sgn-pw { position: relative; }
.sgn-pw input { padding-right: 64px; }
.sgn-see { position: absolute; right: 6px; top: 0; height: 42px; padding: 0 10px;
  background: none; border: 0; box-shadow: none; color: var(--muted);
  font: 600 12px var(--sans); cursor: pointer; }
.sgn-see:hover { background: none; color: var(--ink); filter: none; box-shadow: none; }
.sgn-go { width: 100%; margin-top: 22px; box-shadow: 0 6px 18px -6px var(--iris); }
.sgn-go svg { width: 15px; height: 15px; margin-left: 9px; }
.sgn-or { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px;
  color: var(--muted); font-size: 12px; }
.sgn-or::before, .sgn-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sgn-oa { display: block; width: 100%; margin-bottom: 8px; }
.sgn-col .login-foot { max-width: none; margin: 26px 0 0; text-align: center;
  font: 700 9.5px var(--sans); letter-spacing: .21em; text-transform: uppercase;
  color: var(--faint); }

/* the right half, on white (3.225). It was a brand-coloured hero: iris into
   iris-deep, white people drawn on it. He asked to see it on a white ground and
   chose it — so the colour stops being the room. What divides the two halves
   now is a hairline and a two-percent shift in the paper, not a wall of paint,
   and the six drawings carry the page on their own.
   The weave stays, at a whisper. Without it the half reads as unfinished
   rather than calm — but at 3% it is texture you feel and do not see. */
.sgn-rail { flex: 1 1 auto; position: relative; overflow: hidden; color: var(--ink);
  background: var(--paper); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center;
  padding: 44px 48px; }
.sgn-rail::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    transparent 0 33px,
    color-mix(in srgb, var(--iris) 3%, transparent) 33px 34px); }
.gr-in { position: relative; width: 100%; max-width: 620px; }
.gr-id { display: none; }
.gr-cap { font: 700 9.5px var(--sans); letter-spacing: .21em; text-transform: uppercase;
  color: var(--iris-deep); margin: 0 0 12px; }
.gr-h { font: 700 36px/1.2 var(--serif); color: var(--ink); margin: 0 0 16px; }
.gr-sub { font-size: 15.5px; color: var(--muted); margin: 0 0 30px; }

/* the offer: one door a tile, each wearing the nav icon it wears in the bar
   and the words it already carries in the menu. One line each — two lines
   over six tiles was eighteen lines of small type (owner, 3.221). */
.gr-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gr-door { position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;   /* the drawing inside must never set the column's floor */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--lift-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
/* On the old ground a tile was a lit pane and the light on its top edge was
   what made it read as raised. On white the shadow does that work, so the edge
   highlight is gone rather than merely invisible. The hover is the platform's
   own field hover — rise, deepen, take the brand on the edge — so this tile now
   behaves like every other clickable field in the house. */
.gr-door:hover { transform: translateY(-2px); box-shadow: var(--lift-2);
  border-color: color-mix(in srgb, var(--iris) 42%, #fff); }
.gr-sc { display: block; background: var(--soft);
  border-bottom: 1px solid var(--line); }
.gr-sc svg { display: block; width: 100%; height: auto; }
.gr-tx { padding: 13px 16px 15px; }
.gr-door b { display: block; font: 600 14px var(--sans); }
.gr-door em { display: block; font-style: normal; font-size: 12.5px;
  color: var(--muted); margin-top: 3px; }
.gr-also { font-size: 13px; color: var(--muted); margin: 20px 0 0; }

/* the promise that has to be true, and is: two locks, a seal at rest, a ledger
   of every sign-in. The day-line that stood here until 3.224 stood down for the
   six scenes — both will not fit, and the scenes say more. */
.gr-true { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0 0;
  font-size: 12.5px; color: var(--muted); }
.gr-true svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.gr-true svg circle { fill: var(--iris-tint); }
.gr-true svg path { fill: none; stroke: var(--iris); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }

/* the doors again, in one line each, for the phone — where they sit UNDER the
   form. Same PHP array as the tiles above, so there is one list, not two. */
.sgn-more { display: none; }

/* on a phone the rail folds into a band above the form, the day folds with it,
   and the offer follows the sign-in as a row of names */
@media (max-width: 900px) {
  .sgn { flex-direction: column; min-height: 0; }
  .sgn-rail { order: -1; flex: none; padding: 24px 22px 20px;
    border-left: 0; border-bottom: 1px solid var(--line); }
  .sgn-form { flex: none; padding: 26px 22px 4px; }
  .sgn-id { display: none; }
  .sgn-col { max-width: none; }
  .gr-id { display: block; margin: 0 0 14px; }
  .gr-id .sgn-nm { font: 700 21px/1.1 var(--serif); color: var(--ink); margin: 0; }
  .gr-id img { display: block; max-height: 40px; max-width: 180px; object-fit: contain; }
  .gr-id .sgn-line { color: var(--faint); }
  .gr-h { font-size: 20px; line-height: 1.25; margin-bottom: 14px; }
  .gr-cap, .gr-sub, .gr-also, .gr-true { display: none; }
  .gr-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }  /* pictures stay */
  .sgn-id { text-align: center; }
  .sgn-more { display: block; padding: 22px 22px 28px; }
  .sgn-mh { font: 700 9px var(--sans); letter-spacing: .2em; text-transform: uppercase;
    color: var(--iris-deep); margin: 0 0 12px; padding-top: 20px;
    border-top: 1px solid var(--line); }
  .sgn-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sgn-mgrid span { display: flex; align-items: center; gap: 10px; background: var(--soft);
    border-radius: 10px; padding: 9px 12px; font: 600 12px var(--sans); color: var(--ink); }
  .sgn-mgrid span::before { content: ""; flex: none; width: 7px; height: 7px;
    border-radius: 50%; background: var(--iris); }
  .sgn-mall { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; }
}

/* the refusal and the wait wear their own colour: one is wrong, the other is
   only early. Grey for both told you nothing. */
.flash.is-late { background: var(--overdue-tint); border-left-color: var(--overdue); }
.flash.is-wait { background: var(--draft-tint);   border-left-color: var(--draft); }
/* ---- the drawn world (3.224, re-inked for a white ground in 3.225) -------
   Six scenes, one hand. The paint is shared so they cannot drift apart, and
   every loop is slow and staggered: six things pulsing in time would read as a
   fairground, not a platform. All of it stops dead under the reduced-motion
   rule at the top of this file, like everything else the platform animates.

   Until 3.225 every figure was white, because it stood on the brand. On the
   white ground white is nothing, so the whole hand is re-inked in --iris-deep
   and the props drop to washes of the brand. Not one path changed: the drawings
   in lib/scenes.php are the same markup, wearing different paint.

   The FOUR MEANING-COLOURS BELOW DO NOT MOVE, in any rebrand or on any ground:
   gold is money and keys, rose is the barrier, green is a paid tick, sky is a
   leak. They are the whole reason the rest of the drawing is monochrome. */
.scn .gnd { stroke: color-mix(in srgb, var(--ink) 20%, #fff); stroke-width: 2;
  stroke-linecap: round; }
.scn .bd  { fill: none; stroke: var(--iris-deep); stroke-width: 4; stroke-linecap: round;
  stroke-linejoin: round; }
.scn .th  { fill: none; stroke: var(--iris-deep); stroke-width: 2.6; stroke-linecap: round; }
.scn .fl  { fill: var(--iris-deep); }
.scn .sft { fill: color-mix(in srgb, var(--iris) 22%, #fff); }
/* paper is white ON a wash, so it needs an edge or it dissolves into the panel */
.scn .pap { fill: #fff; stroke: color-mix(in srgb, var(--iris) 30%, #fff);
  stroke-width: 1.4; }
.scn .ln  { stroke: var(--iris-deep); stroke-width: 2; stroke-linecap: round; fill: none; }
.scn .shadow { fill: color-mix(in srgb, var(--ink) 9%, #fff); }
.scn .warmc  { fill: color-mix(in srgb, var(--iris) 10%, #fff); }
.scn .mote   { fill: color-mix(in srgb, var(--iris) 45%, #fff); }
/* The light behind the opening door. It had a motion rule and NO FILL from
   3.224 until now, so for the last second of every loop the browser fell back
   to its default and the Clients tile flashed a solid black rectangle. It is
   the light of a home someone has just been let into: warm, not branded. */
.scn .warm { fill: color-mix(in srgb, var(--draft) 30%, #fff); }
/* the four colours that mean something, and nothing else */
.scn .pn   { stroke: var(--draft); stroke-width: 3.4; stroke-linecap: round; fill: none; }
.scn .strp { stroke: var(--overdue); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.scn .coin { fill: var(--draft); stroke: color-mix(in srgb, var(--draft) 55%, #000);
  stroke-width: 1; }
.scn .tick { fill: none; stroke: var(--paid); stroke-width: 2.4; stroke-linecap: round; }
.scn .drip { fill: var(--sky); }
.scn .key  { fill: none; stroke: var(--draft); stroke-width: 2.2; stroke-linecap: round; }
.scn * { transform-box: view-box; }

/* the doors arrive in order, once — one entrance, not six twitches.
   FILL MODE IS 'backwards', NEVER 'both': with 'both' the resting state comes
   from the keyframe, so anything that stops the clock before the animation runs
   leaves six invisible tiles and a rail that says nothing. Backwards holds the
   hidden state only through the delay; the visible state is the stylesheet's.
   Found by capturing the page in a browser that freezes animation time. */
.gr-door { animation: sgnrise .5s cubic-bezier(.2,.7,.3,1) backwards; }
.gr-door:nth-child(1) { animation-delay: .05s; } .gr-door:nth-child(2) { animation-delay: .13s; }
.gr-door:nth-child(3) { animation-delay: .21s; } .gr-door:nth-child(4) { animation-delay: .29s; }
.gr-door:nth-child(5) { animation-delay: .37s; } .gr-door:nth-child(6) { animation-delay: .45s; }
@keyframes sgnrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 1 · she sweeps, and the dust lifts */
.scn .sweep { transform-origin: 85px 44px; animation: scnSweep 2.4s ease-in-out infinite; }
@keyframes scnSweep { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(10deg); } }
.scn .mote { animation: scnMote 2.4s ease-out infinite; }
.scn .mote:nth-of-type(2) { animation-delay: .5s; }
.scn .mote:nth-of-type(3) { animation-delay: 1s; }
@keyframes scnMote { 0% { opacity: 0; transform: none; } 35% { opacity: .9; }
  100% { opacity: 0; transform: translate(9px,-20px); } }

/* 2 · the pen works, a coin lands, and the tick says paid */
.scn .pen { transform-origin: 85px 42px; animation: scnPen 1.9s ease-in-out infinite; }
@keyframes scnPen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.scn .coin.fall { animation: scnFall 2.8s cubic-bezier(.4,0,.7,1) infinite; }
@keyframes scnFall { 0% { opacity: 0; transform: translateY(-46px); } 18% { opacity: 1; }
  55%, 100% { opacity: 1; transform: none; } }
.scn .tick { animation: scnTick 2.8s ease-out infinite; }
@keyframes scnTick { 0%, 55% { opacity: 0; } 70%, 100% { opacity: 1; } }

/* 3 · she waves the visitor in, and the barrier lifts */
.scn .wave { transform-origin: 58px 40px; animation: scnWave 1.6s ease-in-out infinite; }
@keyframes scnWave { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
.scn .barrier { transform-origin: 150px 52px; animation: scnLift 3.4s ease-in-out infinite; }
@keyframes scnLift { 0%, 20% { transform: none; } 45%, 75% { transform: rotate(-58deg); }
  100% { transform: none; } }

/* 4 · he turns the wrench, and the drip stops when he does */
.scn .wrench { transform-origin: 80px 43px; animation: scnTurn 2.6s ease-in-out infinite; }
@keyframes scnTurn { 0%, 55% { transform: none; } 75% { transform: rotate(24deg); }
  100% { transform: none; } }
.scn .drip { animation: scnDrip 2.6s ease-in infinite; }
@keyframes scnDrip { 0% { opacity: 0; transform: none; } 12% { opacity: 1; }
  46% { opacity: 1; transform: translateY(26px); }
  52%, 100% { opacity: 0; transform: translateY(26px); } }

/* 5 · the key crosses to the lock and the door opens on the light */
.scn .key { animation: scnKey 3.2s ease-in-out infinite; }
@keyframes scnKey { 0% { opacity: 0; transform: none; } 15% { opacity: 1; }
  60% { opacity: 1; transform: translateX(22px); }
  75%, 100% { opacity: 0; transform: translateX(22px); } }
.scn .leaf { transform-origin: 170px 18px; animation: scnOpen 3.2s ease-in-out infinite; }
@keyframes scnOpen { 0%, 55% { transform: none; } 80%, 100% { transform: scaleX(.22); } }
.scn .warm { animation: scnWarm 3.2s ease-in-out infinite; }
@keyframes scnWarm { 0%, 58% { opacity: 0; } 85%, 100% { opacity: 1; } }

/* 6 · he holds his payslip up, and the others come down */
.scn .hold { transform-origin: 58px 40px; animation: scnHold 2.2s ease-in-out infinite; }
@keyframes scnHold { 0%, 100% { transform: none; }
  50% { transform: translateY(-2.5px) rotate(-3deg); } }
.scn .flut { animation: scnFlut 3s ease-in infinite; }
.scn .flut:nth-of-type(2) { animation-delay: 1.1s; }
@keyframes scnFlut { 0% { opacity: 0; transform: none; } 15% { opacity: 1; }
  55% { transform: translate(-6px,34px) rotate(-14deg); }
  85% { opacity: 1; transform: translate(3px,64px) rotate(7deg); }
  100% { opacity: 0; transform: translate(3px,66px) rotate(7deg); } }

/* the tile you point at is the one that plays */
.gr-door:hover .sweep, .gr-door:hover .wave, .gr-door:hover .hold,
.gr-door:hover .pen { animation-duration: 1.1s; }
.gr-door:hover .barrier, .gr-door:hover .wrench, .gr-door:hover .key,
.gr-door:hover .leaf, .gr-door:hover .warm, .gr-door:hover .coin.fall,
.gr-door:hover .tick, .gr-door:hover .drip, .gr-door:hover .flut { animation-duration: 1.7s; }

/* three across needs the room for it; two below that, one on a phone */
@media (max-width: 1280px) { .gr-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- end of the sign-in block (3.224). ---- */

/* ═══════════════════════════════════════════════════════════════════════
   THE CLICKABLE FIELD (3.223.0)

   A field that ends in a verb — Top them up, The ledger, The stock report,
   Open automation — was a 300×284 card carrying an 88×16 link at the bottom
   of it, and nothing at all happened when the pointer crossed the field. The
   action was there; it simply was not readable. Two answers, and they are the
   same two everywhere the platform draws something you can click:

     AT REST   the verb wears a pill, so it reads as a control before the
               pointer ever arrives.
     ON HOVER  the whole field is the link — it rises, its edge takes the
               brand, the pill fills, and the chevron steps forward.

   It costs no markup: md_fig() in lib/common.php already emits every one of
   these fields, so the card-wide target is drawn by the verb's own ::after.
   This block sits at the end of the file on purpose — it has to win over both
   the .md-fig block and the .ri-fig copy of it, which are declared earlier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- the verb at rest: a pill, so the action can be found without hunting */
.md-fig-go, .ri-fig-go {
  margin-top: auto; padding: 0 13px; height: var(--ctl-h-sm);
  border-radius: calc(var(--ctl-h-sm) / 2);
  background: var(--soft); border: 1px solid var(--line);
  transition: background .16s ease, border-color .16s ease, color .16s ease; }
/* the filled pill IS the hover mark — a rule drawn through it reads as damage */
.md-fig-go:hover, .ri-fig-go:hover { text-decoration: none; }

/* margin-top:auto puts the pill on the floor of the field, so the gap above it
   cannot live on the pill: whatever sits immediately before it carries it. */
.md-fig > *:has(+ .md-fig-go), .ri-fig > *:has(+ .ri-fig-go) { margin-bottom: 16px; }
.tnf-foot .tnt-verbs { margin-bottom: 10px; }

/* ---- the whole field is the link ----
   The pill's ::after covers the card, which takes the target from 88×16 to the
   whole of it. Anything else inside a field that can be clicked — a tenancy
   card carries Tenant view, Edit, Archive, Delete — is lifted above the
   overlay, so those verbs keep their own clicks. */
.md-fig-go::after, .ri-fig-go::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 24px; }
.md-fig :is(a, button, input, select, textarea, summary):not(.md-fig-go),
.ri-fig :is(a, button, input, select, textarea, summary):not(.ri-fig-go) {
  position: relative; z-index: 1; }

/* ---- and what the field does when the pointer arrives ---- */
.md-fig:has(.md-fig-go), .ri-fig:has(.ri-fig-go) {
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
.md-fig:has(.md-fig-go:hover), .md-fig:has(.md-fig-go:focus-visible),
.ri-fig:has(.ri-fig-go:hover), .ri-fig:has(.ri-fig-go:focus-visible) {
  border-color: color-mix(in srgb, var(--iris) 42%, #fff);
  box-shadow: var(--lift-2); transform: translateY(-2px); }
.md-fig-go:hover, .md-fig-go:focus-visible,
.ri-fig-go:hover, .ri-fig-go:focus-visible {
  background: var(--iris-tint); color: var(--iris-deep);
  border-color: color-mix(in srgb, var(--iris) 35%, #fff); }

/* ---- the needs-you row lifted already; now it says WHICH one ----
   The left edge is the row's verdict — late is rose, wanting is amber — so the
   hover colours the other three sides and leaves that edge alone. */
.md-need { transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease; }
.md-need:hover, .md-need:focus-visible {
  border-block-color: color-mix(in srgb, var(--iris) 42%, #fff);
  border-inline-end-color: color-mix(in srgb, var(--iris) 42%, #fff);
  transform: translateY(-2px); }
.md-need:hover .md-need-tx b, .md-need:focus-visible .md-need-tx b { color: var(--iris-deep); }
.md-need:hover .md-chev, .md-need:focus-visible .md-chev { color: var(--iris); }

/* ---- the book rows already wash and colour their title; they get the step */
.ckbook { transition: background .16s ease; }
.ckbook:hover .md-chev, .ckbook:focus-visible .md-chev { color: var(--iris); }

/* ---- the bare verb: text and a chevron, with no field around it ---- */
.gt-more a:hover, .pl-ghost:hover, .dc-side-go a:hover, .dc-back a:hover,
.gt-more a:focus-visible, .pl-ghost:focus-visible { color: var(--iris-deep); }

/* ---- ONE RULE FOR EVERY CHEVRON IN THE PLATFORM ----
   The chevron is the promise that something opens, so on hover it steps
   forward — wherever it is drawn, on whichever page. It is `translate` and not
   `transform` on purpose: the back arrow on a case file is this same chevron
   flipped with transform: scaleX(-1), and a transform here would straighten it
   out mid-hover. A leading chevron does not travel; only one that ends the
   link, which is where it means "onward". */
.md-chev { transition: translate .16s ease, color .16s ease; }
a:hover > .md-chev:last-child, a:focus-visible > .md-chev:last-child { translate: 3px; }
.pc-thin:hover .md-chev { translate: 3px; }
/* the one chevron that points backwards travels backwards */
.dc-back a:hover .md-chev, .dc-back a:focus-visible .md-chev { translate: -3px; }

/* ---- and when the machine has been told to hold still, the colour stays and
        the movement goes. Nothing about WHICH field is clickable is lost. */
@media (prefers-reduced-motion: reduce) {
  .md-fig:has(.md-fig-go:hover), .md-fig:has(.md-fig-go:focus-visible),
  .ri-fig:has(.ri-fig-go:hover), .ri-fig:has(.ri-fig-go:focus-visible),
  .md-need:hover, .md-need:focus-visible { transform: none; }
  a:hover > .md-chev:last-child, a:focus-visible > .md-chev:last-child,
  .pc-thin:hover .md-chev,
  .dc-back a:hover .md-chev, .dc-back a:focus-visible .md-chev { translate: 0; }
}
/* ---- end of the clickable field (3.223). ---- */
/* ---- the page marks (3.227): the login drawing, beside every page title ---
   He asked for exactly this: "as big as the login icons and as wide also...
   the same that we have there, but with the rounded edges all around, and then
   next to the title of the page, with the font exactly the same size as it is
   now." So the mark IS the sign-in tile's picture — same width, same wash,
   rounded on every corner — and .md-hi and .md-date are untouched.
   .md-hd was already a flex row, so the mark is its first child and nothing
   else on any page moves. */
.pm { flex: none; width: 193px; border-radius: 18px; overflow: hidden;
  background: var(--soft); border: 1px solid var(--line); }
.pm svg { display: block; width: 193px; height: auto; }
/* the pages whose heading was a bare <h1> get the row the others already had.
   The title and its sub keep their own styles — only the row is new. */
/* THE HEAD ROW IS ONE ROW, EVERYWHERE (3.229.1). He read it by eye: the title
   on Repeating invoices wore a different font from Invoices beside it, and sat
   at a different height against its drawing. It did — a bare <h1> is 27px/600
   and this row centred its text against a 104px picture, while .md-hd (the row
   twenty-five pages use) is 34px/700 aligned to the TOP of the mark. Six pages
   were on the wrong side of that line: repeating, contracts, today, hkreports,
   logbook and the style guide. These two declarations are now the twins of
   .md-hd and .md-hi, so a page cannot wear a smaller title merely by using the
   other helper. Measured in a browser afterwards on all 31 pages. */
.pmhead { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin: 18px 0 22px; }
.pmhead-tx { flex: 1 1 320px; min-width: 0; }
.pmhead-tx > h1 { font: 700 34px/1.1 var(--serif); color: var(--ink); margin: 0 0 6px; }
.pmhead-tx > .sub { margin: 0 0 6px; }
.pmhead-tx > .sub:last-child { margin-bottom: 0; }
/* Expenses distributes its head with space-between, so a third child (the
   mark) pushed the title into the middle of the row. The words keep the left
   and the month switcher keeps the right. */
.xp-head .pm + div { margin-right: auto; }

/* the paint the twenty-one newer drawings need, in the same language as the
   six the gate already used: the ink is the brand, and a colour only appears
   where it MEANS something */
.scn .coinf { fill: var(--draft); }
.scn .tickf { fill: color-mix(in srgb, var(--paid) 18%, #fff); }
.scn .rosef { fill: color-mix(in srgb, var(--overdue) 26%, #fff); }
.scn .ln2   { fill: none; stroke: color-mix(in srgb, var(--iris) 30%, #fff); stroke-width: 2; }
.scn .ring  { fill: none; stroke: color-mix(in srgb, var(--iris) 26%, #fff); stroke-width: 3; }
.scn .pn2   { fill: none; stroke: var(--draft); stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; }

/* one loop each, and every one ENDS where the drawing rests, so a stopped
   clock still shows a whole picture */
@keyframes pmSun2  { 0% { transform: scale(.55); opacity: .15; }
  60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pmRise2 { 0% { transform: translateY(-16px) rotate(-8deg); opacity: 0; }
  40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pmBars  { 0% { transform: scaleY(.06); } 100% { transform: none; } }
@keyframes pmStamp { 0% { transform: scale(2.2) translateY(-14px); opacity: 0; }
  55% { opacity: 1; } 75% { transform: scale(.94); } 100% { transform: none; opacity: 1; } }
@keyframes pmTurn2 { 0% { transform: none; } 55% { transform: rotate(22deg); }
  100% { transform: none; } }
@keyframes pmTick2 { 0% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes pmPage  { 0% { transform: none; } 45% { transform: scaleX(.12); }
  100% { transform: none; } }
@keyframes pmWave2 { 0% { transform: none; } 28% { transform: rotate(-15deg); }
  64% { transform: rotate(15deg); } 100% { transform: none; } }
@keyframes pmDrop2 { 0% { transform: translateY(-26px); opacity: 0; } 45% { opacity: 1; }
  100% { transform: none; opacity: 1; } }
@keyframes pmPop2  { 0% { transform: scale(.35); opacity: 0; }
  62% { transform: scale(1.1); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pmSwing2 { 0% { transform: none; } 35% { transform: rotate(-8deg); }
  70% { transform: rotate(5deg); } 100% { transform: none; } }
@keyframes pmDraw2 { 0% { stroke-dasharray: 252; stroke-dashoffset: 252; }
  100% { stroke-dasharray: 252; stroke-dashoffset: 0; } }
@keyframes pmSign  { 0% { stroke-dasharray: 60; stroke-dashoffset: 60; }
  100% { stroke-dasharray: 60; stroke-dashoffset: 0; } }
@keyframes pmPen2  { 0% { transform: none; } 50% { transform: translate(3px, 1px); }
  100% { transform: none; } }
.scn .p-sun    { transform-origin: 150px 26px; animation: pmSun2 1.1s cubic-bezier(.2,.8,.3,1); }
.scn .p-rise2  { animation: pmRise2 1s ease-out; }
.scn .p-bars > * { transform-box: fill-box; transform-origin: center bottom;
  animation: pmBars .9s cubic-bezier(.2,.8,.3,1); }
.scn .p-bars > *:nth-child(2) { animation-delay: .1s; }
.scn .p-bars > *:nth-child(3) { animation-delay: .2s; }
.scn .p-stamp  { transform-origin: 150px 46px; animation: pmStamp 1s cubic-bezier(.3,1.4,.5,1); }
.scn .p-turn2  { transform-origin: 112px 40px; animation: pmTurn2 1.2s ease-in-out; }
.scn .p-tick   { transform-origin: 108px 58px; animation: pmTick2 1s cubic-bezier(.2,.8,.3,1); }
.scn .p-page   { transform-origin: 126px 57px; animation: pmPage 1.4s ease-in-out; }
.scn .wave2    { transform-origin: 61px 40px; animation: pmWave2 1.2s ease-in-out; }
.scn .p-drop2  { animation: pmDrop2 1s cubic-bezier(.4,0,.7,1); }
.scn .p-pop2   { transform-origin: 150px 46px; animation: pmPop2 1.1s cubic-bezier(.2,.8,.3,1); }
.scn .p-swing2 { transform-origin: 96px 40px; animation: pmSwing2 1.3s ease-in-out; }
.scn .p-draw circle { animation: pmDraw2 1.3s ease-out; }
.scn .p-sign   { animation: pmSign 1.2s ease-out; }
.scn .pen2     { transform-origin: 57px 40px; animation: pmPen2 1.4s ease-in-out; }
/* the settings cog turns about its own centre, not the frame's */
.scn .p-turn2 circle, .scn .p-turn2 path { transform-box: view-box; }

/* THE ONE RULE THAT SEPARATES A GATE FROM A DESK: on the sign-in page the six
   scenes loop, because it is a moment you pass through. Beside a page title the
   same drawing plays ONCE — and again while the reader points at the heading.
   This sits after the scene animations so it outranks them without !important. */
.pm .scn * { animation-iteration-count: 1; }
.md-hd:hover .pm .scn * { animation-iteration-count: infinite; }

/* on a phone the head has no room for a 193px picture beside 27px of title */
@media (max-width: 760px) {
  .pm { width: 140px; border-radius: 14px; }
  .pm svg { width: 140px; }
}
@media (max-width: 520px) { .pm { display: none; } }
/* ---- end of the page marks block (3.227). ---- */

/* =====================================================================
   REPEATING INVOICES (3.228) — the schedules that write the drafts.

   The page borrows nearly everything it wears: .ivcard and .md-k for the
   three measures, .ivraise/.ivraise-doc for the editor beside its paper,
   .ivdraft* for the paper itself. Only the schedule CARD is new, because
   nothing in the house said "three days in the order they happen" before.
   ===================================================================== */
/* a schedule line's verbs stay on ONE row: five buttons that wrap read as
   three separate rows of controls, and the table already scrolls if it must */
form.rpacts, .rpacts { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.rpacts .btn-sm { white-space: nowrap; }
.rpmeasures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .rpmeasures { grid-template-columns: 1fr; } }
.rpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 14px; margin: 14px 0 6px; }
.rpcard { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px 13px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: var(--lift-1); color: inherit; text-decoration: none; }
.rpcard:hover { border-color: var(--iris); box-shadow: var(--lift-2); }
.rpcard.is-off { background: var(--soft); box-shadow: none; }
.rpcard.is-off .rpcard-hd b, .rpcard.is-off .rpcard-sum { color: var(--muted); }
.rpcard-hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rpcard-hd b { font: 600 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpcard-hd em { margin-left: auto; font: 400 11px var(--sans); font-style: normal;
  color: var(--muted); white-space: nowrap; }
.rpcard-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rpcard-days > span { display: block; padding: 7px 9px; border-radius: 9px; background: var(--soft); min-width: 0; }
.rpcard-days em { display: block; font: 800 9.5px var(--sans); letter-spacing: .1em;
  color: var(--faint); font-style: normal; }
.rpcard-days b { display: block; margin-top: 2px; font: 600 12px var(--sans); }
.rpcard-ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--line); }
.rpcard-sum { font: 600 12px var(--sans); }
.rpcard-next { margin-left: auto; font: 400 11px var(--sans); color: var(--muted); }

/* ==========================================================================
   THE RESPONSIVE REPAIR (3.218)
   --------------------------------------------------------------------------
   He said some pages had a problem and asked for the whole site checked at
   phone, tablet, 13"/15"/16" laptop and large-desktop size. Every rule below
   answers a defect that was MEASURED in a browser at those widths, not one
   that was suspected. Nothing here is a new design: each one lets a layout
   the house already approved actually reach a narrow screen.

   This block sits at the END of the file on purpose. Four of the defects
   were responsive rules that a LATER unconditional rule outranked — same
   selector, same specificity, further down the file, so the media query
   never won. A media query written here cannot lose that argument, and
   tests/smoke.php now goes red if a new one is ever buried again.
   ========================================================================== */

/* ---- Invoices: the whole ladder was dead ----
   .ivhero / .ivrow2 / .ivdoors were made responsive at L4620, and the board
   of 3.192 re-declared them at L5434 further down. The later rule won at
   every width, so the three-column hero stayed three columns on a phone: the
   page ran 548px off the side of a 360px screen and ₱241,890.00 wrapped onto
   three lines. Same numbers as the original rules — only the position moves. */
@media (max-width: 1100px) {
  .ivhero, .ivrow2 { grid-template-columns: minmax(0, 1fr); }
  .ivdoors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivlens { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
  .ivdoors { grid-template-columns: minmax(0, 1fr); }
}
/* the same argument, lost by one padding value on the search glass */
@media (max-width: 1400px) and (min-width: 1081px) {
  .navsearch { padding: 0 9px; }
}

/* ---- tracks that could not shrink ----
   `1fr` is `minmax(auto, 1fr)`, and `auto` is the content's MIN-content width.
   Where a cell holds a figure that will not break, the track keeps that width
   whatever the screen does, and the page is pushed sideways instead. The three
   that did it — .plrows, .hktrows and .ivcomp-key — are fixed where they are
   DECLARED rather than restated here, so their own media queries keep working.
   Only the step that has no home above lives here. */
@media (max-width: 430px) { .hktrows { grid-template-columns: minmax(0, 1fr); } }

/* ---- a client's invoice line: four fixed columns, 356px of them ----
   On a phone it keeps everything and folds: the number and the money on the
   first line, the dates and the standing under them. Nothing is dropped. */
@media (max-width: 560px) {
  .ckrow { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
  .ckrow .ckr-n { grid-column: 1; grid-row: 1; }
  .ckrow .ckr-a { grid-column: 2; grid-row: 1; }
  .ckrow .ckr-d { grid-column: 1; grid-row: 2; }
  .ckrow > span:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
}

/* ---- the stock report's row: name / level / count / verbs ----
   The declarations are the verbatim twins of the inline style they replace,
   so above 760px the row is pixel-for-pixel what it was. Below it, the verbs
   drop under the row they belong to instead of hanging 158px off the page. */
.iv-srow { display: grid; grid-template-columns: minmax(min(150px,100%),1fr) 2fr minmax(min(96px,100%),auto) minmax(min(150px,100%),auto);
  gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .iv-srow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .iv-srow > :nth-child(2) { grid-column: 1 / -1; }
  .iv-srow > .iv-rowacts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---- the save bar bleeds to the page edge, and the page edge moves ----
   margin: 0 -18px matches an 18px gutter. Below 640 the gutter is 14, so the
   bar hung 4px off both sides of every phone. */
@media (max-width: 640px) { .savebar { margin-left: -14px; margin-right: -14px; } }

/* ---- feedback cards on Support: a 520px floor is wider than a phone ----
   (the floor itself is clamped above; the card's own row wraps here) */
@media (max-width: 560px) {
  .ptk { flex-wrap: wrap; }
  .fbacts { margin-left: 0; }
}

/* ---- nothing may reach past the page, ever ----
   The last line of defence, and deliberately the narrowest one: a media
   object with no intrinsic size, and a long unbroken word — an email address,
   a file name, a reference — are the two things that reach past a phone
   whatever the layout does. */
/* NOT svg: every icon in this app is sized in the stylesheet and sits in a
   shrink-to-fit flex button, where a percentage max-width has no definite
   containing block to resolve against — Chromium answers 0 and the caret
   beside Money, Gate and Team disappears. Caught by the pixel diff, which is
   why the pixel diff exists (3.218). */
img, video, canvas, iframe { max-width: 100%; }
.mday, .card, .ivcard { overflow-wrap: break-word; }

/* ---- second pass (3.218): four the first pass uncovered ----
   Each of these was standing behind a bigger overflow. They are only visible
   once the page in front of them stops running off the side. */

/* The segmented control's hidden radio, again. `.vseg input` was already told
   to take no room, and `.pc-f input { width: 100% }` sits further down the
   file at the SAME specificity — so it won, exactly as the invoices ladder
   lost above. Restated here, where nothing can outrank it. */
.vseg input { width: 1px; height: 1px; min-width: 0; padding: 0; }

/* the invoice book's key: two columns of a figure that will not break.
   The two-column form is set where .ivcomp-key is declared; this is the fold. */
@media (max-width: 460px) { .ivcomp-key { grid-template-columns: minmax(0, 1fr); } }

/* the stock row's verbs: two forms, each told to be the whole width */
@media (max-width: 760px) {
  .iv-rowacts { flex-wrap: wrap; }
  .iv-rowacts .iv-top { width: auto; flex: 1 1 auto; }
  .iv-rowacts .iv-top input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* a role's line on Staff: five fixed widths adding up to 348px */
@media (max-width: 560px) {
  .st-role { flex-wrap: wrap; gap: 6px 10px; }
  .st-role > b { flex: 1 1 auto; }
  .st-role > em { flex: 0 0 auto; min-width: 0; margin-left: auto; }
}

/* the seven months on the invoice board: a 12px gap between them is right on a
   desk and 17px too much on a 360px phone. The bars keep their shape; only the
   air between them closes. */
/* THE MONTHS FIT THE PHONE (3.230). `flex: 1` still refuses to shrink past its
   own content, because a flex item's min-width is auto — so seven months at
   390px pushed the last one 39px off the screen, the only page in the estate
   still doing it. min-width: 0 lets the columns share what there is, and the
   two labels step down a point where the screen is narrow. */
.ivmo { min-width: 0; }
@media (max-width: 430px) { .ivmos { gap: 7px; } }
@media (max-width: 560px) { .ivmo b, .ivmo i { font-size: 10px; letter-spacing: .03em; } }

/* ---- the bar's tools travel together (3.218) ----
   `.plusdrop` and `.userdrop` BOTH carried `margin-left: auto`. Two auto
   margins in one flex row do not both push right — they SPLIT the free space
   between them. At 1920 there is no free space so nothing showed, but on a
   13" laptop it opened a 106px hole between the search glass and New and
   another 96px between New and the person, with the three tools scattered
   across the bar instead of sitting together as they do everywhere else.
   One auto margin, on the first tool, moves the whole group as one. */
.navsearch { margin-left: auto; }
.plusdrop  { margin-left: 0; }
.userdrop  { margin-left: 0; }

/* ---- third pass (3.222.1): what the merges brought in ----
   Housekeeping setup (3.219.0) and the estate line it shares with My day.
   `.md-house-n span` is `white-space: nowrap`, so "of 40 managed homes let"
   cannot break; beside a 58px numeral it needs 342px and a 360px phone has
   332. The caption wraps under the figure on a small phone — which is what
   `.prpage` already does with the same line on Payroll, so this is the
   house's own answer, applied where the house shares the class. */
@media (max-width: 430px) {
  .md-house-n { flex-wrap: wrap; row-gap: 2px; }
  .md-house-n span { white-space: normal; }
}