/* studio surface styles — Jessica's. Slice 1 placeholder: enough to read the
   page and the styleguide, nothing more. */
body.studio { margin: 0; font-family: var(--font-ui); color: var(--color-ink); background: var(--color-paper); }
body.studio:not(.framed) main { max-width: 48rem; margin: 0 auto; padding: var(--space); }
/* Slice 7: signed-in pages live in THE FRAME (below); pages not yet restyled
   sit in this plain column inside it — FLAGGED for Jessica, not restyled by
   stealth. The styleguide's foundation samples need the full width.
   Sep 3: the wrapper adopts the frame's CONTENT COLUMN instead of its own —
   the same negative-margin/--content-edge move as .sec, so a list page's
   first text and Home's h1 share one x; content-box so --content (944) is
   the text's ceiling, the edges outside it; type inherited (body.framed's
   base type), not the legacy --font-ui. What's INSIDE stays as built — the
   rows, tables, and links await their sitting. */
.frame .legacy { box-sizing: content-box; max-width: var(--content); margin: 0 calc(-1 * var(--gx)); padding: calc(4 * var(--u)) var(--content-edge) calc(6 * var(--u)); }   /* .frame-qualified: the frame's universal border-box would otherwise win the tie and eat the edges out of the 944 */
.legacy:has(.styleguide-intro) { max-width: none; }
.legacy-foot { margin-top: calc(6 * var(--u)); font-size: 0.85rem; }
html:has(body.framed){background:var(--outside)}   /* the ground outside the frame, past ~1300 — on the morning's list since Aug 31, landed with the panel */
html { scrollbar-gutter: stable; }   /* the frame doesn't shift when the scrollbar appears (Sep 3): measured .frame at x = 2 on Home (scrolls) and x = 9 on Clients (doesn't), a 7px jump on every tab change; the gutter is reserved whether or not the page scrolls. Pinned here, not in PHPUnit — a test that the frame's left is identical on a scrolling and a non-scrolling page isn't cheap there, so this measurement is the pin */
body.framed { background: var(--outside); margin: 0; font: 400 15px/1.5 var(--ui); }   /* the foundation's base type (spec) — body.studio's Circular is the LEGACY stand-in layer and stays for unstyled slice-1 pages */
body.studio:not(.framed) header, body.studio:not(.framed) footer { padding: var(--space); display: flex; gap: var(--space); align-items: baseline; }   /* legacy stand-in pages only — the frame's masthead and footer are <header>/<footer> too (Sep 3) and were catching this padding */
body.studio:not(.framed) nav a { margin-right: var(--space); }   /* legacy stand-in pages only — this was reaching the frame's rail and insetting every cell's line 16px short of the canvas (Aug 31) */
.field { margin-bottom: var(--space); }
.field label { display: block; margin-bottom: 0.25rem; }
.field--error input { outline: 2px solid var(--late); }   /* ONE RED (Sep 8): --late everywhere an error reads */
.field-error { color: var(--late); margin: 0.25rem 0 0; }
body.studio:not(.framed) .flash { padding: 0.75rem var(--space); margin-bottom: var(--space); background: var(--highlight); }   /* the UNFRAMED pages' stand-in (login, reset); the framed flash is THE ROW below (Sep 8) */
body.studio:not(.framed) .flash--error { background: var(--late); color: white; }
.styleguide-component { border-top: 1px solid var(--color-ink); padding-top: var(--space); }
.styleguide-sample { padding: var(--space); border: 1px dashed #ccc; }
.error-trace { overflow-x: auto; font-size: 0.8rem; }

/* (The slice-3 picker and asset-slot placeholders retired Sep 8 — Kickoff 11 built the Brand tab from the prototype.) */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--space); }
.fieldset legend { font-weight: bold; margin-bottom: 0.5rem; }

/* Slice 4 — clients & people, transcribed from the Figma 3.30 frames
   (7353:3426 list, 7108:18135 client, 7670:15492 person). STRUCTURE only:
   the brand blue tints and the GT Flexa display face are REFRESH-layer
   (Chris-selected tokens, not a session's call), so every tint below rides
   a token with a neutral fallback — Jessica/Chris swap the tokens, the
   anatomy holds. The ui-green/ui-red are Figma's own semantic UI colors,
   carried as defaults and flagged in the build log. */
:root {
    --color-rule: #9a9a9a;        /* Figma: brand @ 70% */
    --color-rule-soft: #d9d9d9;   /* Figma: brand @ 85–90% */
    --color-tint: #ececec;        /* Figma: brand @ 85% (table heads) */
    --color-faded: #9a9a9a;       /* Figma: brand @ 70% (archived rows) */
    --color-ui-green: #00ad43;
    --color-ui-red: #ff5320;
    --font-display: var(--font-ui);
}

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space); border-bottom: 4px solid var(--color-rule); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.page-header h1 { margin: 0; }
/* Every page title is Lorien 34/400 (the Wave 3 walk, Sep 2: the legacy pages' h1 rendered in the Circular stand-in at 700/30 — a stale rule). The masthead's 26px is its own scale, ruled later in this file; the size question is Chris's. */
body.studio h1 { font: 400 34px/1.1 var(--display); letter-spacing: 0; color: var(--ink); }
.page-actions { margin: 0; }
a.button { display: inline-block; background: var(--color-ui-green); color: #fff; border-radius: 3px; padding: 0.85rem 1rem; font-size: 1rem; line-height: 1.15; text-decoration: none; text-align: center; }

.clients .empty-state, .client .empty-state, .person .empty-state { font-family: var(--font-text); font-size: 1.1rem; }
.clients-table { border-collapse: collapse; width: 100%; }
.clients-table th, .clients-table td { border: 2px solid var(--color-rule); text-align: left; padding: 0.6rem 1.25rem; }
.clients-table th { background: var(--color-tint); font-size: 1rem; font-weight: 900; }
.clients-table td { background: #fff; font-size: 1.15rem; padding: 1rem 1.25rem; }
.clients-table td a { color: inherit; font-weight: 600; }

.client-details, .person-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2rem; margin: 0 0 2rem; }
.client-details > div, .person-details > div { display: flex; gap: 0.5rem; }
.client-details dt, .person-details dt { font-size: 0.85rem; font-weight: 900; line-height: 1.6; white-space: nowrap; }
.client-details dt::after, .person-details dt::after { content: ":"; }
.client-details dd, .person-details dd { margin: 0; font-size: 0.95rem; line-height: 1.4; }

.client h2, .person h2 { font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; margin: 2.5rem 0 0.75rem; }
.client-people h2, .client-projects h2, .person-clients h2 { border-bottom: 4px solid var(--color-rule); padding-bottom: 0.75rem; }

.people-list, .projects-list, .person-clients-list { list-style: none; margin: 0; padding: 0; }
.people-list li, .person-clients-list li { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-rule-soft); }
.people-list li > a:first-child, .person-clients-list li > a:first-child { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; color: inherit; }
.person-role, .relationship-role { font-size: 1.15rem; }
.person--archived, .relationship--archived { color: var(--color-faded); }
.person--archived a, .relationship--archived a { color: var(--color-faded); }
.person-status, .relationship-status { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.person-edit, .relationship-edit { margin-left: auto; font-size: 0.85rem; }

.projects-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-rule-soft); }
.projects-list .form, .client-projects > .form { display: flex; align-items: flex-end; gap: 0.75rem; }
.projects-list .form .field, .client-projects > .form .field { margin-bottom: 0; flex: 1; }

.client-danger, .person-danger { border-top: 1px solid var(--color-rule-soft); margin-top: 2.5rem; padding-top: 0.5rem; text-align: right; }
.client-danger h2, .person-danger h2 { display: none; }
.client-danger p, .person-danger p { font-size: 0.85rem; text-align: left; }
.client-danger button, .person-danger button { background: none; border: 0; padding: 0; color: var(--color-ui-red); font-size: 0.85rem; font-weight: 900; cursor: pointer; }

.partial-date-inputs { display: flex; gap: 0.5rem; }
.partial-date-inputs input { width: 5rem; }

/* Slice 5 — invoices core. The list and the client list's money columns ride
   slice 4's ruled-table anatomy (the hub frames share it). NOT transcribed —
   shipped plain and FLAGGED in the build log: the invoice list frame proper
   (figma 6767-66709), the edit frame (6767-71744), the status badge, the
   filter row, the document detail, the edit form's row tables. */
.invoices-table { border-collapse: collapse; width: 100%; }
.invoices-table th, .invoices-table td { border: 2px solid var(--color-rule); text-align: left; padding: 0.6rem 1.25rem; }
.invoices-table th { background: var(--color-tint); font-size: 1rem; font-weight: 900; }
.invoices-table td { background: #fff; font-size: 1.15rem; padding: 1rem 1.25rem; }
.invoices-table td a { color: inherit; font-weight: 600; }
.invoices-table th.numeric, .invoices-table td.numeric,
.clients-table th.numeric, .clients-table td.numeric { text-align: right; }
.client-billed { display: block; white-space: nowrap; }
.list-filter { margin-bottom: var(--space); }
.list-filter a { margin-right: var(--space); }
.list-filter a[aria-current="page"] { font-weight: 900; text-decoration: none; }
.invoice-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2rem; margin: 0 0 2rem; }
.invoice-meta dt { font-size: 0.85rem; font-weight: 900; }
.invoice-meta dd { margin: 0 0 0.5rem; }
.invoice-lines { border-collapse: collapse; width: 100%; margin-bottom: 2rem; }
.invoice-lines th, .invoice-lines td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-rule-soft); }
.invoice-lines .numeric { text-align: right; }
.invoice-lines td small { display: block; opacity: 0.7; }
.invoice-total th, .invoice-total td { font-weight: 900; border-bottom: 0; border-top: 2px solid var(--color-rule); }
.invoice-edit-lines, .invoice-edit-adjustments { width: 100%; }
.invoice-edit-lines th, .invoice-edit-adjustments th { text-align: left; font-size: 0.85rem; }
.invoice-edit-lines input, .invoice-edit-adjustments input { width: 100%; box-sizing: border-box; }
.invoice-activity ul { list-style: none; margin: 0; padding: 0; }
.invoice-activity li { display: flex; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-rule-soft); }
.activity-when { font-size: 0.85rem; opacity: 0.7; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE FOUNDATION — Aug 27–29 design sitting, transcribed slice 6c.
   design/invoice-edit.html WAS the spec (deleted Aug 31 — the built page is the spec now; git has the prototype); its CSS and markup are the design
   (its <script> was demo harness — none of it ported). Adaptations here are
   mechanical scoping only, each noted at its rule:
     · the prototype's body/html frame rules  → .frame (the shell adopts it
       when slice 7 restyles the studio surface)
     · bare label/input rules                 → .f, the labeled-field class
     · .sec:first-child masthead placement    → .sec--mast, an explicit class
     · the ··· menu toggle                    → <details class="more"> — the
       platform's own disclosure (no JS for what the platform does, Aug 29)
   Tokens live in tokens.css. Where the prototype is silent we ship plain and
   FLAG in the build log — never invent.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the frame: a column — the MASTHEAD, then the BODY (rail beside content),
   then the footer (the chrome pass, Sep 3) — one bordered box centred on the
   deeper tint. In the shell this is body (html gets --outside); as a
   component it is .frame inside the styleguide. The body is a grid; the
   frame is a flex column so the footer is a sibling of the grid, not a cell
   of it (Chrome bounds a sticky element by the grid CONTAINER, not its area
   — a footer inside the grid gets overlapped by the sticky rail). ── */
.frame, .frame *, .paper, .paper * { box-sizing: border-box; }
.frame{font:15px/1.5 var(--ui);color:var(--ink);background:var(--panel);display:flex;flex-direction:column;min-height:100vh;
  max-width:calc(var(--rail-w) + var(--content) + 2*var(--cardpad) + 2*var(--gx) + 6px);margin:0 auto;border-left:var(--line);border-right:var(--line)}   /* 6px: the frame's two edges and the content column's left (THE BORDER RULE, below) */
/* THE BORDER RULE (ruled Sep 2, evening, both axes): a rule belongs to the thing AFTER it — a cell draws its TOP, a section its top, a panel its top, the footer its top, a column its LEFT; a table's outer box draws the outside. Nothing is drawn twice, so nothing doubles or misaligns. Every cell below follows it: the rail's items draw their top, the content column its left, a tab its left, an action its left, a line item its top. */
.frame>.body{flex:1;display:grid;grid-template-columns:var(--rail-w) 1fr}
.frame>.body>.main{border-left:var(--line);min-width:0}   /* the content column draws its left — the rail draws nothing on its right */
.frame a{color:inherit;text-decoration:none}

/* ── THE MASTHEAD (ruled Sep 3): the lockup and the bar are ONE sticky row
   across the frame — 9u plus its line — so the rule under the lockup and the
   rule under the bar are the same border of the same element, aligned by
   construction. It is the one sticky exception to the border rule (its line
   must travel with it), so it is sized as its cell PLUS its line (--mast).
   This retires the intersection bug: the bar was 48 border-box with its line
   inside (46–48) against the rail's first line (48–50); now there is one
   line, the masthead's. Named for the view transition so it stays ABOVE the
   rows in the transition layer (unnamed, rows surfaced over the bar — Aug 31). ── */
.frame>.mast{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:var(--rail-w) 1fr;height:var(--mast);border-bottom:var(--line);background:var(--tint);view-transition-name:mast}
.mast .brand{height:var(--bar);display:flex;align-items:center;padding:0 16px;color:var(--ink)}   /* 16 not 24: the lockup's artwork wants the width — at 16 it lands at the legacy's own scale (~21px of art), the one cell that bleeds past the text column */
.mast .brand .swmark{width:100%;height:auto;display:block}   /* height from the cropped ratio (294:40) — never set; the chevron is var(--acting) inside the SVG */

/* ── rail: a column of cells — the nav items only, since the mark moved up
   into the masthead (Sep 3). Cells run edge to edge — their lines meet the
   rail's border, the canvas's edge. The first item draws no top: the
   masthead already drew that line. ── */
.rail{background:var(--tint);display:flex;flex-direction:column;position:sticky;top:var(--mast);height:calc(100vh - var(--mast) - var(--foot))}   /* the frame is the light L (rail + masthead on --tint); the content panel behind is --panel (Aug 31). Sticky under the masthead, its height leaves room for the FOOTER — 100vh − masthead − footer — so at the bottom of the scroll its bottom meets the footer's top with nothing to push it up (measured Sep 3: rail 74–1217, HOME 74–122 unmoved, footer 1217.8 — nothing slides) */
.rail::after{content:"";flex:1;border-top:var(--line)}   /* the rail's rule under its last item: the empty rest of the rail is "the thing after it" and draws its top */
.frame>.body{background:linear-gradient(to right,var(--tint) 0 var(--rail-w),transparent var(--rail-w))}   /* mid-scroll the rail element stops --foot short of the body's bottom; the body paints the rail's tint into its first --rail-w so the column below it is still the rail's ground, derived from the same token */
.rail a.item{height:var(--fh);display:flex;align-items:center;padding:0 24px;border-top:var(--line);font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-decoration:none;overflow-wrap:anywhere}   /* nothing crosses the rail's border: a word that can't fit wraps at the edge. (The studio's NAME no longer lives here — F34 revised Sep 1, the first item is "Home" — so no cell ever needs to grow; the corpus's long names are the list pages' concern.) */
.rail a.item:first-child{border-top:0}   /* the masthead already drew this line */
.rail a.item.on{color:var(--ink);background:var(--highlight)}   /* the studio's highlight */
/* ── chrome hover (Aug 31, late): a cell takes the PANEL — the content's own ground — and ink, saying "this is about to be the page"; the active cell keeps its highlight. One ease for all chrome; CSS transitions are the platform's.
   THE OTHER GROUND (ruled Sep 3): where a chrome cell sits ON --panel — the content's ground — its hover goes LIGHTER, to --tint; same rule, the other ground (the Home clock is the first case; `.card .go.quiet` already does it). Every hover-to-panel below sits on --tint: the rail, the tabs, the ··· menu, the list's rows, the footer. ── */
.rail a.item,.bar .tabs a,.bar .btn,.menu a,.menu button{transition:background-color .15s ease,color .15s ease}
.rail a.item:hover,.bar .tabs a:hover{background:var(--panel);color:var(--ink)}
.rail a.item.on:hover,.bar .tabs a.on:hover{background:var(--highlight)}

/* ── the bar: a CELL of the masthead (Sep 3) — static, no bottom border (the
   masthead draws it), drawing its LEFT: the content column's line. Inside
   the 72 bar everything is a 48 cell with 12 of air above and below, never
   full-height (RULED Sep 3 afternoon, tried live against full-height tabs).
   Tabs on the left as ONE ENCLOSED BOX on the content edge — each tab
   bordered like a clock cell, the first drawing its left; the on-tab in the
   highlight (a place). The ··· and the actions on the right take the same
   48-with-air, the filled primary included, the last closing the strip on
   the content's right edge. ── */
.bar{display:flex;align-items:center;height:var(--bar);background:var(--tint);border-left:var(--line)}
.bar>*{display:flex;align-items:center;height:var(--fh)}
.bar .tabs{margin-left:var(--content-edge);margin-right:auto}   /* border-box: outer edges meet the fields' outer edges, no arithmetic */
.bar .tabs:empty{display:none}   /* a page with no tabs draws no stray box at the content edge */
.bar .tabs a{height:100%;display:flex;align-items:center;padding:0 16px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:var(--line);border-left:0;text-decoration:none}   /* the clock strip's grammar one size up: 11px caps, each cell drawing its top, right and bottom; the strip's first draws the left */
.bar .tabs a:first-child{border-left:var(--line)}
.bar .tabs a.on{background:var(--highlight);color:var(--ink)}   /* WHERE YOU ARE = the studio's highlight, like the active nav cell (ruled Aug 31, Chris — settles the Aug 28 open question). What you CHOSE (Fixed|Per unit) stays white: a chosen value is a field. What the product DOES is --acting. */

/* ── the ··· menu: a <details> disclosure (adaptation: the prototype toggled
   a class from script; the platform already does this). A column of --fh
   cells hanging off the ··· cell, made of the line, its top border
   overlapping the masthead's so there is one line. Record actions first;
   destructive ones last, quieter. Template CHOICE is not here (it belongs
   to creation); Change template… is. ── */
details.more{position:relative}
.bar>.more,.bar>.acts:not(:empty){border-top:var(--line);border-bottom:var(--line)}   /* the right-hand box: the ··· and the actions share one enclosure of the line; each cell draws its left, the last its right */
.bar>.more:has(+.acts:empty) summary{border-right:var(--line)}   /* a record with only the ··· (voided): the cell closes itself */
.more summary{list-style:none;height:100%;display:flex;align-items:center;font-size:18px;color:var(--ink2);padding:0 20px;letter-spacing:.1em;border-left:var(--line);cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{background:#fff}   /* an open menu's cell is "selected": white, like a tab */
.menu{position:absolute;top:100%;right:-2px;min-width:calc(28*var(--u));background:var(--tint);border:var(--line);z-index:6}
.bar .menu{top:calc(var(--fh) - 2px + (var(--bar) - var(--fh)) / 2)}   /* drops from the masthead's LINE, not the cell's: from the cell's padding box (2 inside its own top line) down the cell's 48 and the 12 of air — so the menu's top border lies exactly ON the masthead's line and its first row starts under it. (Before Sep 8 it was `100% + air`, and 100% of a border-box cell is 44, not 48: the menu landed 4 too high, its first row's top clipped under the bar's line — Chris saw it.) */
.bar>.more:has(+.acts:empty) .menu{right:0}   /* when the ··· closes itself, the menu's right edge is its own */
.menu a{display:flex;align-items:center;height:var(--fh);padding:0 24px;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-top:var(--line);text-decoration:none}
.menu a:first-child{border-top:0}
.menu a:hover{background:var(--panel);color:var(--ink)}
.menu a.danger{color:var(--ink2)}
.menu a.on{background:var(--highlight);color:var(--ink)}   /* a folded nav (Sep 9): the whole list in its order, the current one lit IN PLACE — nothing jumps */
.menu a.on:hover{background:var(--highlight)}
.bar .acts{margin-right:var(--content-edge)}
.bar .btn{height:100%;border:0;border-left:var(--line);border-radius:0;padding:0 24px;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--ink);cursor:pointer}
.bar .btn.primary{background:var(--fill);color:var(--on-fill)}   /* FILLED SURFACES (ruled Sep 8, the olive): the fill is the brand under the relaxed cap and the text is chosen by its lightness (tokens: --fill/--on-fill) */

/* ── THE FOOTER IS THE SESSION (ruled Sep 6; the chrome pass of Sep 3 gave it its shape): the frame's last row, a sibling
   of the body so the sticky rail stops where it begins. A grid on the line, left to right: the STUDIO in the rail-width
   cell — short, matching the lockup column, its rule one line with the content column's left — then equal centred cells,
   each drawing its LEFT: the signed-in PERSON's email (→ Settings ▸ Account: "who am I logged in as"), support, LOG OUT
   as a POST cell (the Keep pattern: the form is display:contents, the button the cell), and PAY CREATIVES BETTER™
   rightmost (the mark must appear in the product or the trademark lapses). The social icons retired to the marketing
   site and the hub. Caps voice; hover = panel + ink, the chrome's ease. --foot is its height plus its line. ── */
.foot{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:var(--bar);border-top:var(--line);background:var(--tint);font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.foot .cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.foot .cells form{display:contents}
.foot .studio,.foot .cells a,.foot .cells button{display:flex;align-items:center;justify-content:center;gap:0 .5ch;padding:0 16px;min-height:var(--bar);border-left:var(--line);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border-top:0;border-right:0;border-bottom:0;border-radius:0;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.foot .studio{border-left:0;color:var(--ink);display:block;line-height:var(--bar)}   /* the rail's column: the studio's name, short — an ellipsis rather than a wrap */
.foot .who{text-transform:none;letter-spacing:0}   /* an address is a code */
.foot .us{color:var(--ink)}
.foot .studio:hover,.foot .cells a:hover,.foot .cells button:hover{background:var(--panel);color:var(--ink)}
@media (max-width:855px){.foot{grid-template-columns:1fr}.foot .cells{grid-auto-flow:row;grid-auto-columns:auto}.foot .studio,.foot .cells a,.foot .cells button{border-left:0;border-top:var(--line);white-space:normal}.foot .studio{border-top:0}}

/* ── the form is rows of the page; sections are edge-to-edge cells; THE grid
   lives inside each row (adaptation: the prototype's #form is .page) ── */
.page{padding:0 var(--gx)}
.card{padding:0 var(--cardpad);position:relative;container-type:inline-size;container-name:card}
.card h2{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 calc(3*var(--u))}   /* a heading is a row; rows are 3u apart */
.sec{margin:0 calc(-1*var(--gx) - var(--cardpad));padding:calc(4*var(--u)) calc(var(--gx) + var(--cardpad));border-top:var(--line)}   /* 4u above and below, every section; rows 3u apart; cells 6u — one lattice */
.sec:first-child{border-top:0}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rowgap) var(--gutter);align-items:start}   /* ERRORS NEVER MOVE THE ROW (ruled Sep 5): the row aligns to the TOP of its cells, so a message under one field (part of the field's own cell) never lifts its neighbours — by construction, once, for every row; the prototype's align-items:end was the lift */
.g>:where(:not(.f):has(>.mode)){align-self:end}   /* the one label-less cell in a labelled row — the line's Fixed · Per unit toggle — sits on the fields' baseline; :where keeps it below any cell's own align-self */
.c12{grid-column:span 12}.c11{grid-column:span 11}.c10{grid-column:span 10}.c9{grid-column:span 9}.c8{grid-column:span 8}.c7{grid-column:span 7}
.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}.c1{grid-column:span 1}
.g.pair{align-items:start}   /* a row of a field beside a control group aligns to the top, so their labels and their controls are level */
/* THE LEFT HALF (Chris, Sep 8 — Kickoff 11, prototypes/settings.html ▸ BUSINESS): a form whose fields live in columns 1–6 — a c6 is a
   row of its own, two c3s share a row — reads as one column and nothing looks stranded on the right. Explicit starts, as the
   address: nothing packs beside anything. Under 640 every field is the full width (the explicit starts are the wide layout's). */
.g.left>.c6{grid-column:1 / span 6}
.g.left>.c3:nth-child(odd){grid-column:1 / span 3}
.g.left>.c3:nth-child(even){grid-column:4 / span 3}
/* THE ADDRESS STACKS IN THE LEFT HALF (ruled Sep 8): Address · line 2 · City each on its own row (1–6), State (1–3) · Postal (4–6) on
   one row, Country (1–6). It reads as a postal address, because it is one. */
.addr .a1,.addr .a2,.addr .city,.addr .country{grid-column:1 / span 6}
.addr .state{grid-column:1 / span 3}
.addr .post{grid-column:4 / span 3}
@container card (max-width:800px){.g.left>.c3:nth-child(odd){grid-column:1 / span 6}.g.left>.c3:nth-child(even){grid-column:7 / span 6}}   /* RWD (Chris, Sep 9): a c3 pair goes side by side at the FULL width before it stacks — never tiny */
@container card (max-width:640px){.g.left>.c6,.g.left>.c3:nth-child(n),.addr .a1,.addr .a2,.addr .city,.addr .state,.addr .post,.addr .country{grid-column:span 12}}
/* the field's own line beneath it (Sep 8: the target's "Home’s graph draws this line.") — the checkbox hint's voice */
.f .hint{display:block;margin-top:6px;font:400 13px/1.4 var(--ui);color:var(--ink3)}
/* ── PROFILE (Kickoff 11, Sep 8 — prototypes/settings.html ▸ PROFILE · BRAND) ── */
/* THE PICTURES: the Image block's .pic (the file input covers the box, so a drop lands — no script for the platform's own drop).
   The cover 4:3 beside its label cell; the work grid a row of 4:3 cells, the empty one last, saying only what it is; the logo
   3:1, CONTAINED, any proportion. The empty state: the verb, then how, quieter — the same two lines on every picture cell. */
.pics .pic{aspect-ratio:4/3;background:var(--tint)}
.pics .pic img{object-fit:cover}
.pics .pic.empty{background:#fff}
.pics .pic .word{display:none;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 12px}
.pics .pic .word small{font:400 12px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink3)}
.pics .pic:not(:has(img)) .word{display:flex}
.pics .pic:not(:has(img)){background:#fff}
.pics .pic.logo{aspect-ratio:3/1;background:#fff}
.pics .pic.logo img{object-fit:contain;padding:24px;box-sizing:border-box}
@container card (max-width:640px){.pics .pic.cover{grid-column:span 12}.pics.work .pic{grid-column:span 6}}
/* THE PREFIX BOX (the person record's construction, in the .f grammar): a fixed mono cell on the tint + the input, one line around
   both; focus = the box's line in ink, the input on the highlight. Reach STACKS: each social on its own row at the website's width. */
.f .pre-box{display:grid;grid-template-columns:auto minmax(0,1fr);border:2px solid var(--field);background:#fff;height:var(--fh);box-sizing:border-box}
.f .pre-box .pre{display:flex;align-items:center;padding:0 12px;border-right:2px solid var(--field);background:var(--tint);font:13px var(--mono);color:var(--ink2);white-space:nowrap}
.f .pre-box input{border:0;height:100%}
.f .pre-box:focus-within{border-color:var(--ink)}
.f .pre-box input:focus{background:var(--highlight)}
.f.err .pre-box{border-color:var(--late)}
/* ONLINE (Chris, Sep 9): all five at the half, or all five at the full width — never mixed. The switch is where the half stops
   fitting a handle in the widest box — LinkedIn's, now prefix-only ("linkedin.com/company/" ≈ 200) since the dial moved out of
   it: 200 + a handle (≈130) → the half must be ≥ ~330, the container ≥ ~700. */
.f.soc{grid-column:1 / span 6}
@container card (max-width:700px){.f.soc{grid-column:1 / span 12}}
/* RWD (Chris, Sep 9): on a phone the prefix goes — the input is the whole box and the server normalises whatever is typed (a
   handle, a pasted URL); the prefix was a hint the width can't afford. The dial stays (it is under the label). */
@container card (max-width:520px){.f .pre-box .pre{display:none}.f .pre-box{grid-template-columns:minmax(0,1fr)}}
/* LINKEDIN'S DIAL, OUT OF THE BOX (Chris, Sep 9; the Sep 8 in-box pair retired — too wide for a handle at the half): a
   COMPANY | PERSON pair UNDER the label, left, the app's segmented control (the line items' Fixed fee | Per unit) — the chosen
   one WHITE; the prefix follows it, linkedin.com/company/ or linkedin.com/in/, so the box reads as the whole URL like every
   other box. min-height 0 at the label rule's own specificity: `.f>span` reserves two lines for every span in a field. */
.f.li>.dial{display:inline-flex;align-items:stretch;min-height:0;flex-wrap:nowrap;column-gap:0;line-height:1;height:32px;border:var(--line);box-sizing:border-box;margin:0 0 8px;align-self:flex-start}
.f.li .dial label{display:flex;align-items:center;padding:0 10px;border-left:var(--line);background:var(--tint);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.f.li .dial label:first-child{border-left:0}
.f.li .dial input{position:absolute;opacity:0;width:0;height:0}
.f.li .dial label:has(:checked){background:#fff;color:var(--ink)}
.f.li .dial label:hover{background:var(--panel);color:var(--ink)}
.f.li .dial label:has(:checked):hover{background:#fff}
.f.li .pre .k-in{display:none}
.f.li:has(.dial input[value=in]:checked) .pre .k-company{display:none}
.f.li:has(.dial input[value=in]:checked) .pre .k-in{display:inline}

/* ── BRAND (Kickoff 11, Sep 8 — prototypes/settings.html ▸ BRAND) ── */
/* TYPE: each set as THE PAPER — white (the one white thing, by design), a small masthead: the set's name as the caps kicker, the
   display h1 (the studio's own name, sized from the CELL so a wide face shrinks before it truncates), the line in the UI face, the
   amount in the mono, right. Four lines, three jobs, nothing truncated. Chosen = the ink outline. Faces by --sd/--su/--sm on the cell. */
.specs .spec{position:relative;display:grid;gap:8px;padding:22px 24px 20px;border:2px solid var(--field);background:#fff;cursor:pointer;min-width:0;container-type:inline-size}
.specs .spec input{position:absolute;opacity:0;width:0;height:0}
.specs .spec:has(:checked){outline:2px solid var(--ink);outline-offset:-2px}
.specs .spec:hover{background:var(--highlight)}
.specs .spec:has(:checked):hover{background:#fff}
.specs .spec .k{font:500 11px/1 var(--su),sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.specs .spec .h{font:400 clamp(22px,15cqi,30px)/1.05 var(--sd),serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specs .spec .t{display:block;font:400 15px/1.4 var(--su),sans-serif;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.specs .spec>span{min-width:0}   /* a grid item's min-width is auto — without this no line can ellipsise, and the mono amount walks through the right border (the phone, Sep 9) */
.specs .spec .m{font:400 clamp(12px,8cqi,16px)/1.4 var(--sm),monospace;color:var(--ink);text-align:right;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* sized from the cell like the name; never wraps, never overflows (Sep 9) */
/* PALETTE: a theme is brand · highlight · text; everything else DERIVES. The cell shows the palette LAID BARE — five blocks derived
   from the cell's OWN three (re-declared here, the tokens' own expressions), so six themes compare side by side without a click. */
.themes .theme{position:relative;display:grid;gap:10px;padding:12px;border:2px solid var(--field);background:#fff;cursor:pointer;--tint:color-mix(in oklab,var(--brand) 6%,white);--panel:color-mix(in oklab,var(--brand) 14%,white);--acting:oklch(from var(--brand) min(l,0.5) c h);--field:color-mix(in oklab,var(--acting) 40%,white);--fill:oklch(from var(--brand) min(l,0.82) c h)}
.themes .theme input{position:absolute;opacity:0;width:0;height:0}
.themes .theme:has(:checked){outline:2px solid var(--ink);outline-offset:-2px}
.themes .theme .sw{display:grid;grid-template-columns:repeat(5,1fr);height:48px;border:2px solid var(--field)}
.themes .theme .sw i{display:block}
.themes .theme .sw .b{background:var(--fill)}.themes .theme .sw .l{background:var(--field)}.themes .theme .sw .p{background:var(--panel)}.themes .theme .sw .t{background:var(--tint)}.themes .theme .sw .h{background:var(--highlight)}
.themes .theme .nm{display:flex;align-items:center;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.themes .theme:has(:checked) .nm::before{content:"";width:12px;height:12px;margin-right:8px;flex:none;background:var(--ink);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}
/* the overrides: the theme is the value; each shows the theme's current colour; typing or picking makes the palette custom */
.over{margin-top:calc(3*var(--u))}
.f .pre-box.sw{grid-template-columns:var(--fh) minmax(0,1fr)}
/* the swatch IS the platform's colour picker: clicking it opens the picker, no script; the hex beside it is the same value as text */
.f .pre-box.sw input[type=color]{width:100%;height:100%;padding:0;border:0;border-right:2px solid var(--field);background:none;cursor:pointer;border-radius:0}
.f .pre-box.sw input[type=color]::-webkit-color-swatch-wrapper{padding:10px}
.f .pre-box.sw input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
/* the strips: THE WHOLE CELL IS THE COLOUR, the name on it in whichever ink reads (the fill rule's lightness step), the chosen one
   with a check in the cell's own ink. A highlight cell looks exactly like the "where you are" cell it will become. */
.choices{display:flex;height:var(--fh);border:2px solid var(--field);box-sizing:border-box}
.choices .opt{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:0 8px;border-left:2px solid var(--field);background:var(--c);color:oklch(from var(--c) clamp(0,(0.62 - l)*100,1) 0 0);font:500 12px/1 var(--ui);letter-spacing:.04em;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.choices .opt:first-child{border-left:0}
.choices .opt input{position:absolute;opacity:0;width:0;height:0}
.choices .opt:has(:checked)::before{content:"";width:14px;height:14px;margin-right:8px;flex:none;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}
.choices .opt:hover{filter:brightness(.96)}
@container card (max-width:640px){.choices .opt{padding:0 6px;font-size:11px}.over .f{grid-column:span 12}.specs .spec{grid-column:span 6}.themes .theme{grid-column:span 6}.choices.hl .opt .nm{display:none}.choices.hl .opt:has(:checked)::before{margin-right:0}}   /* narrow: the highlight names go (the colours say it); the text names stay — short, and the blacks need them (Chris, Sep 9) */

/* ── THE TIERS AS CELLS (ruled Sep 9, Kickoff 13 — prototypes/settings.html ▸ SUBSCRIPTION): the type-set grammar (name kicker ·
   the price in the mono · one line), the chosen one ringed with the check; AUTO-FIT so three or four fill the row by construction —
   the grandfathered cell is the fourth, first, shown only when it's yours. AGENCY IS SOON: muted, no ring, disabled, the kicker says
   so. The join step wears the same cells on the marketing shell (its styling there is Jessica's). ── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.tiers .tier{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:22px 24px 20px;border:2px solid var(--field);background:#fff;cursor:pointer;min-width:0}
.tiers .tier input{position:absolute;opacity:0;width:0;height:0}
.tiers .tier:has(:checked){outline:2px solid var(--ink);outline-offset:-2px}
.tiers .tier:hover{background:var(--highlight)}
.tiers .tier:has(:checked):hover{background:#fff}
.tiers .tier .k{display:flex;align-items:center;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.tiers .tier:has(:checked) .k::before{content:"";width:12px;height:12px;margin-right:8px;flex:none;background:var(--ink);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}
.tiers .tier .p{font:400 30px/1 var(--mono);color:var(--ink);white-space:nowrap}
.tiers .tier .p small{font:400 13px/1 var(--ui);color:var(--ink3);margin-left:6px}
.tiers .tier .d{font:400 14px/1.45 var(--ui);color:var(--ink2)}
.tiers .tier.soon{cursor:default;color:var(--ink3)}
.tiers .tier.soon .p,.tiers .tier.soon .d{color:var(--ink3)}
.tiers .tier.soon:hover{background:#fff}
.tiers .tier.soon .k::after{content:"\a0\b7\a0Soon";color:var(--ink3)}
.tiers+.note.after{margin-top:calc(3*var(--u))}   /* the line under the cells — the proration, said before the review page says it again */
.tiers+.msg{margin-top:8px}
.card .sec>form>.tiers+.go,.card .sec>form>p+.go{margin-top:calc(3*var(--u))}

/* ── the labeled field (adaptation: the prototype's bare label/input rules,
   scoped to .f — the labeled-field component's class). Three states: on;
   off = the same line, the ground showing through (Aug 31: the fill carries
   the state; the faded line was retired), text at caption grey; computed = no box,
   right-aligned text. ── */
.f{display:block;min-width:0}
.f>span,.lbl{display:block;font:500 13px/1 var(--ui);color:var(--ink);margin-bottom:6px}   /* .lbl: the same label on things that aren't <label>s */
/* THE LABEL ROW RESERVES TWO LINES (ruled Sep 8, Kickoff 11 — app-wide): the label sits on the lower one, so a label that wraps
   ("Preferred first name optional" in a 3-col cell) grows UP into reserved space instead of pushing its input down — every input
   in a row sits on one line by construction, and the error rule (Sep 5: errors never move the row) is untouched because every
   label block is the same height. Cost: ~17px per field row. */
.f>span,.lbl{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:4px;min-height:2lh;line-height:1.3}
.f>span em{font-style:normal;font-weight:400;color:var(--ink3);margin-left:0}   /* "optional" — in the label, quieter, never a placeholder; the flex gap is its space */
.f input,.f select,.f textarea{width:100%;min-width:0;font:15px/1.3 var(--ui);color:var(--ink);background:#fff;border:2px solid var(--field);border-radius:0;padding:0 12px;height:var(--fh)}
.f textarea{height:auto;min-height:80px;resize:vertical;padding:12px}
/* alternative "A" for the palette sitting — hairline on white paper:
   .card{background:var(--paper);border:1px solid var(--rule);border-radius:4px}
   .f input{border:1px solid var(--rule2);border-radius:4px}  with --bg:#f3f1ec --rail:#ebe8e1 --rule:#e4e1da */
.f input.mono{font-family:var(--mono);font-size:14px}
.f input.n{text-align:right}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--ink);background:var(--highlight)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink3)}
.f .ro{height:var(--fh);display:flex;align-items:center;font-family:var(--mono);font-size:14px;color:var(--ink2);justify-content:flex-end}
.f:has(> .ro)>span{justify-content:flex-end}   /* a label aligns with what it labels: inputs are left-aligned boxes, computed values are right-aligned text */
/* THE SELECT'S CHEVRON (ruled Sep 8, Kickoff 11 — every .f select, Time zone and Country alike; the person record's rule promoted):
   the app's glyph mechanism — a masked polyline, ONE stroke, 2px like the line, --ink2, 14 in from the right, centred on the
   FIELD (the bottom --fh of the block), not the label. The platform's arrow is gone. With a message or a hint under the field
   the block's bottom is that line, so those cases anchor from the top instead (the label block is a fixed 2lh + 6). */
.f:has(>select){position:relative}
.f select{appearance:none;-webkit-appearance:none;padding-right:44px}
.f:has(>select)::after{content:"";position:absolute;right:14px;bottom:calc(var(--fh)/2);width:14px;height:14px;transform:translateY(50%);background:var(--ink2);pointer-events:none;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}
.f:has(>select):has(>.msg,>.hint)::after{bottom:auto;top:calc(2 * 1.3 * 13px + 6px + var(--fh) / 2);transform:translateY(-50%)}
.f.off>span{color:var(--ink3)}
.f.off input{border:var(--line);background:transparent;color:var(--ink3)}   /* off = THE line, unfaded; the fill says it (on = white window, off = the ground showing through). The faded 20% line (Aug 30) was a second signal for the same state and vanished on the deeper panel — retired Aug 31. */

/* ── the masthead: the paper's own header — a row of its own: h1, status as
   a quiet line. The business box sits beside the two fixed field rows and
   STRETCHES to them — a FIELD whose editor lives in Settings: the line,
   yellow on hover, a pencil. Custom fields drop to a third row.
   (Adaptation: .sec--mast, an explicit class for the prototype's
   .sec:first-child placement rules.) ── */
/* The field pairs alternate 7–9 / 10–12 by CHILD position (slice 11: the Send
   dial is a <div class="f">, not a <label>, so nth-of-type would break the
   alternation): children are .mast, .c6, .bizcell, then the fields. */
.sec--mast .g>.f:nth-child(even){grid-column:7 / span 3}
.sec--mast .g>.f:nth-child(odd){grid-column:10 / span 3}
.mast{grid-column:1 / span 6}
.mast h1{font:400 26px/1.1 var(--display);margin:0 0 6px;color:var(--ink)}   /* with 4u section padding its centre lands ~on the rail's first line — a happy consequence, not the rule */
.mast .st{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0}
.mast .tpl a:hover{color:var(--ink);text-decoration:underline}   /* the template the invoice came from — the one place templates are advertised */
.bizcell{grid-column:1 / span 6;grid-row:2 / span 2;align-self:stretch;display:flex;flex-direction:column}   /* a proper half: shares the h1's right edge */
.biz{flex:1;display:block;border:var(--line);padding:12px 16px;position:relative;color:var(--ink2);font-size:13px;line-height:1.5;text-decoration:none}   /* the paper's own voice (13/1.5): six lines = 117 inside 12px paddings fit the two field rows (145) — the block is BOUNDED by construction (InvoiceController::businessBlock caps it), never measured (ruled Sep 2) */
.biz b{color:var(--ink);font-weight:500}
.biz:hover{background:var(--highlight);color:var(--ink)}
.biz::after{content:'';position:absolute;top:10px;right:10px;width:14px;height:14px;opacity:0;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1.5l3 3L5 14H2v-3z' fill='none' stroke='%2317171a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.biz:hover::after{opacity:1}
/* ADDS ARE ACTIONS, NOT LINKS (ruled Sep 4, the editor sitting — lands here ONCE, the rule for every editor): the bar's
   box construction at 32 — a `+` cell and the word, divided by the line, both on the ground; the whole button lifts to
   the TINT on hover (the adds sit on the panel; hover is always the OTHER ground). Ink +, 11 caps. Tried and rejected: the
   + cell on acting green (competes with PUBLISH — seven of them on the invoice editor), on --field, on --rule (four points
   from the panel, invisible), a two-tone hover. The OFF state of a presence-as-data add is the same button with a −
   (− REMOVE ITEM DATES): one button in two states. <a class="add"> and <button class="add"> are the same thing. */
.add,button.add{display:inline-flex;align-items:center;height:calc(4*var(--u));padding:0 12px 0 0;margin:0;border:var(--line);border-radius:0;background:transparent;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.add:before{content:"+";display:flex;align-items:center;justify-content:center;width:calc(4*var(--u) - 2px);height:100%;margin-right:12px;border-right:var(--line);font-size:14px;font-weight:400;color:var(--ink)}
.add.off:before{content:"\2212"}   /* the minus sign, not a hyphen */
.add:hover,button.add:hover{background:var(--tint);color:var(--ink)}
.adds{display:flex;gap:8px;flex-wrap:wrap;margin-top:calc(3*var(--u))}
.adds .grp{display:flex;gap:8px;flex-wrap:wrap}
.adds .grp.end{margin-left:auto}   /* right-aligned in the row; when the row wraps, still right-aligned on its own line — by construction */

/* ── line items: fixed three-row shape under a header row (number ·
   move up/down · delete) that replaces the extra air between items;
   connectives are LABELS (× Rate, per); the row ends in its Amount; dim not
   vanish ── */
.line{padding:calc(3*var(--u)) 0}
.line+.line,.line+.adj,.adj+.adj{border-top:1px solid var(--rule)}   /* the soft 1px rule — the one deliberately soft stroke on the page; the row after draws it (the border rule) */
h2+.line{padding-top:0}   /* the first item's air is the heading's own */
.itemrow{display:flex;align-items:center;gap:16px;height:calc(3*var(--u));margin-bottom:calc(2*var(--u));font:500 12px/1 var(--ui);color:var(--ink3)}
.itemrow .n{font-family:var(--mono);color:var(--ink2)}
.itemrow a{color:var(--ink3);text-decoration:none}
.itemrow a:hover{color:var(--ink)}
.itemrow .del{margin-left:auto}
.line .g{row-gap:calc(2*var(--u))}
.mode{display:flex;border:2px solid var(--field);border-radius:0;overflow:hidden;width:100%;height:var(--fh);align-items:stretch}
.mode a{flex:1;display:flex;align-items:center;justify-content:center;font:500 12px/1 var(--ui);white-space:nowrap;color:var(--ink3);text-decoration:none}
.mode a.on{background:#fff;color:var(--ink)}   /* a chosen segment is white, like a selected tab; the brand hue belongs to the primary action alone */
.mode a+a{border-left:var(--line)}   /* the divider: the toggle IS the tab component at field size */
/* TOGGLES (ruled Sep 4, lands here once): the chosen segment stays white; an unselected segment lifts to the tint on
   hover — the same family as the adds: cells on the line, hover lifts the cell to the other ground. */
.mode a,.mode button{transition:background-color .15s ease,color .15s ease}
.mode a:hover,.mode button:hover{background:var(--tint);color:var(--ink)}
.mode a.on:hover,.mode button.on:hover{background:#fff}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:var(--u) 0;margin:calc(3*var(--u)) 0 0 auto;font-size:14px;
  width:calc((100% - 11*var(--gutter))/12*4 + 3*var(--gutter))}   /* cols 9–12 by construction; labels left on col 9, values right on col 12; no column gap so the rule is one line */
.totals .k{color:var(--ink2)}.totals .v{text-align:right;font-family:var(--mono)}
.totals .big{font:400 18px/1 var(--display);padding-top:calc(1.5*var(--u));border-top:1px solid var(--ink)}
.totals .big.v{font-family:var(--mono);font-weight:500;font-size:18px}

/* ── pay by (SILENT in the spec beyond this: checkbox styling should become
   the line — FLAGGED, shipped plain as the prototype had it; the pay-by
   block itself is parked, Aug 28, and is NOT on the paper) ── */
.chk{display:flex;align-items:center;gap:10px;font-size:14px;height:32px;color:var(--ink2)}
.chk i{width:15px;height:15px;border:1px solid var(--rule2);border-radius:3px;display:inline-block}
.chk.on{color:var(--ink)}.chk.on i{background:var(--ink);border-color:var(--ink)}

/* ── the paper lives in paper.css (slice 9): ONE stylesheet for the one
   document, linked by the studio shell AND the client shell — the pay page
   renders the same partial with the same CSS, never a copy. ── */

/* ── reorder animation: VIEW TRANSITIONS, same-document only. Each item
   carries a stable view-transition-name (its id, never its position); this
   one rule animates tiles from where they were to where they are when
   live.js swaps the page in. NOT cross-document (Aug 31): the platform can't
   hold scroll across two documents, so a cross-document transition animated
   the scroll reset — with JS off the ops simply navigate (PRG, instant, top
   of page), which is the honest fallback. Movement only: the old/new
   snapshot cross-fade is off and the root never animates. ── */
::view-transition-group(*){animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-group(root){animation:none}
::view-transition-old(*),::view-transition-new(*){animation-duration:.15s}   /* the browser's own cross-fade, short: a row that changes in place (the toggle, the format) eases instead of cutting; a row that moves fades as it slides. display:none on the old snapshot was the fix for two OPAQUE images ghosting — with the fade back, the blend is correct (Aug 31, late) */

/* ── the one viewport breakpoint: rail beside content, or rail as a top bar
   (856 = rail + 2×gutter + a 640 form container). Finer stacked-nav styling
   under 856 is on the silent list — FLAGGED, shipped as the prototype had
   it. ── */
/* ── THE NAV AT EVERY WIDTH (ruled Sep 9, Kickoff 13 — prototypes/settings.html ▸ header item 8; REPLACES the Sep 8 in-flow
   picker). One object, folded as the width demands, no JS anywhere: the STRIP above 1040; THE BAND (856–1040 — seven tabs need 657
   in the bar; with the rail, the actions and both content edges the strip overflows below ~1040) where the strip becomes ONE CELL in
   its place, a <details class=tabmenu> reading the current tab in the highlight (it IS where you are) that drops the ···'s own
   .menu — the WHOLE strip in its order, the current row lit in place, a rule between every row, open = white (the ···'s rule); the
   rail stays; and NARROW (≤855, the app's one breakpoint) where the masthead is TWO ROWS — the lockup alone, then a bar-height row
   on the bar's ground of two such cells side by side, SETTINGS ▾ · BUSINESS ▾, exclusive by the platform (<details name=picker>).
   The cells are border-box 48 so the menu lands on the masthead's line by arithmetic: top = the cell's 100% + the bar's 12 of air
   (the ···'s −2 is wrong here — measured: mast 74 border-box, line at 72–74, cell at 12–60). LIGHT DISMISS without script: an open
   cell's summary grows an invisible fixed backdrop over the page ([open] summary::before), so a tap off the menu is a tap on the
   summary, which closes it; the menu paints above it (its z-index) and the tap never passes through. ── */
.bar .tabmenu{display:none}
.tabmenu summary,.pick summary{box-sizing:border-box;list-style:none;position:relative;height:100%;display:flex;align-items:center;padding:0 40px 0 16px;border:var(--line);background:var(--highlight);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;white-space:nowrap}
.tabmenu summary::-webkit-details-marker,.pick summary::-webkit-details-marker{display:none}
.tabmenu summary::after,.pick summary::after{content:"";position:absolute;right:14px;top:50%;width:12px;height:12px;transform:translateY(-50%);background:var(--ink);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}   /* the select's chevron, the app's glyph mechanism */
.tabmenu[open] summary::after,.pick[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.tabmenu[open] summary,.pick[open] summary{background:#fff}   /* an open menu's cell is selected — white, the ···'s rule */
.tabmenu[open] summary::before,.pick[open] summary::before{content:"";position:fixed;inset:0;cursor:default}   /* light dismiss (above) */
.bar .tabmenu .menu,.pick .menu{left:0;right:auto;top:calc(100% + (var(--bar) - var(--fh)) / 2)}   /* the menu's top border ON the masthead's line */
.picks{display:none}
.h1acts{display:none}   /* the h1 band's act: narrow only (below) */
@media (min-width:856px) and (max-width:1040px){
  .bar .tabs{display:none}
  .bar .tabmenu{display:flex;position:relative;height:var(--fh);margin-left:var(--content-edge);margin-right:auto}   /* in the strip's place, on the content's left edge */
}
@media (max-width:855px){
  .frame>.mast{grid-template-columns:auto 1fr;grid-template-rows:var(--bar) auto;height:auto}   /* two rows: the lockup (its cell as wide as the mark), then the picks row; the mast's own line closes it */
  .mast .brand{padding-left:var(--content-edge)}   /* the lockup on the content's left edge, with the cells, the flash and the h1 — one x */
  .mast .brand .swmark{height:calc(3*var(--u));width:calc(3*var(--u) * 294.2 / 40.2)}   /* the width DERIVED from the viewBox (294.2:40.2), never auto: on the phone Safari read the base rule's 100% and the lockup took most of the bar (Chris, Sep 9) */
  .bar .tabs{display:none}
  .bar .acts{margin-left:auto;margin-right:var(--content-edge)}   /* without the tabs the actions take the edge themselves — a page with no h1-band act keeps its primary in the bar */
  body:has(.h1acts) .bar .acts{display:none}   /* THE PRIMARY ACT MOVES TO THE H1 BAND where the page renders one (h1-acts): one button shown per width, nothing moves */
  body:has(.h1acts) .bar{border-left:0}   /* the first row is then the lockup alone: no empty cell drawn beside it */
  .picks{grid-column:1 / -1;display:flex;gap:8px;align-items:center;height:var(--bar);padding:0 var(--content-edge);background:var(--tint);border-top:var(--line);position:relative;z-index:5}   /* the masthead's second row: the bar's height, the bar's ground, the content's x; it draws its top (the first row's line) */
  .pick{position:relative;height:var(--fh)}
  .rail{display:none}
  .frame>.body{grid-template-columns:1fr;background:none}
  .frame>.body>.main{border-left:0}
  .card>.sec:first-child:has(>h1.title){display:flex;justify-content:space-between;align-items:center}   /* the act beside its noun */
  .card>.sec:first-child:has(>h1.title) h1{margin:0}   /* centred on the band: the rail's line it aligned to is gone at this width */
  .h1acts{display:flex;height:var(--fh);border:var(--line);flex:none}
  .h1acts form{display:contents}
  .h1acts .btn{height:100%;display:flex;align-items:center;border:0;border-left:var(--line);border-radius:0;padding:0 24px;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
  .h1acts>:first-child,.h1acts>form:first-child .btn{border-left:0}
  .h1acts .btn.primary{background:var(--fill);color:var(--on-fill)}
  .h1acts .btn:hover{background:var(--tint)}
  .h1acts .btn.primary:hover{background:var(--fill);filter:brightness(1.08)}
  /* the narrow universals (Chris, Sep 9): facts stack to ONE column — the rule lives UNDER the facts base rules below (Kickoff 14: here it
     came first in the file and lost to them; the Sep 9 shoot never caught it) */
}
/* ── everything inside responds to its container, not the viewport ── */
@container card (max-width:640px){
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11{grid-column:span 12}
  .currency,.fmt,.notecell{grid-column:span 12}
  .fmt,.notecell{grid-row:auto}   /* the money cluster stacks like everything else under 640 */
  .deposit .dial{grid-column:span 12;margin-top:0}
}

/* ── designer's grid overlay, derived from --gutter. Inset matches each
   host's real padding. The prototype's `g` keypress was demo harness; no
   production toggle ships — add body.grid from devtools. ── */
body.grid .page .card::before{inset:0 var(--cardpad)}
body.grid .paper::before{inset:0 var(--content-edge)}
body.grid .page .card::before,
body.grid .paper::before{content:'';position:absolute;
  --ov:color-mix(in oklab, var(--brand) 10%, transparent);
  background:repeating-linear-gradient(to right,
    var(--ov) 0,
    var(--ov) calc((100% - 11*var(--gutter))/12),
    transparent calc((100% - 11*var(--gutter))/12),
    transparent calc((100% - 11*var(--gutter))/12 + var(--gutter)));
  pointer-events:none;z-index:9}

/* ── styleguide accommodation: foundation samples are wider than the neutral
   48rem column ── */
.styleguide-sample{overflow-x:auto}

/* ═══════════════════════════════════════════════════════════════════════════
   SLICE 7 — the lifecycle wired onto the foundation. Everything here is
   either (a) the platform's own controls wearing the prototype's rules —
   buttons where the prototype drew links, because state changes are POSTs
   and ops are submits — or (b) a state the spec is SILENT on, shipped plain
   and FLAGGED in the build log. Nothing invented past that.
   ═══════════════════════════════════════════════════════════════════════ */

/* (a) buttons that ARE the prototype's links: same rules, no button chrome */
.itemrow button,.mode button,.menu button{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;text-align:inherit}
.itemrow button{color:var(--ink3)}
.itemrow button:hover{color:var(--ink)}
.itemrow button.del{margin-left:auto}
.mode button{flex:1;display:flex;align-items:center;justify-content:center;font:500 12px/1 var(--ui);white-space:nowrap;color:var(--ink3)}
.mode button.on{background:#fff;color:var(--ink)}
.mode button+button{border-left:var(--line)}
.mode button:disabled{color:var(--ink3);cursor:default;opacity:.55}   /* a segment that is present, not pressable (Kickoff 8: the Auto dial's Charge without a card on file) — plainly disabled, no explanatory text (Rulings II). FLAGGED: undesigned */
.mode button:disabled:hover{background:transparent;color:var(--ink3)}
.menu form{display:block}
.menu button{display:flex;align-items:center;width:100%;height:var(--fh);padding:0 24px;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.menu>*+*{border-top:var(--line)}   /* every row draws its top — the link rows too (Sep 9: `.menu a{border-top:0}` was the one place the language was missing) */
.menu button:hover{background:var(--panel);color:var(--ink)}
.menu button.danger{color:var(--ink2)}
.bar .acts form{display:contents}
.bar .acts a.btn{display:flex;align-items:center;text-decoration:none}
.bar .acts>:last-child .btn,.bar .acts>.btn:last-child{border-right:var(--line)}   /* the last action closes the strip; every action draws its left */
.bar .acts .btn.primary:hover{filter:brightness(1.08)}
.bar .btn:hover{background:var(--panel);color:var(--ink)}
.bar .btn.primary:hover{background:var(--fill);color:var(--on-fill)}   /* the FILLED button never takes ink on hover (ruled Sep 6) — it lifts its fill only (the brightness above), text unchanged; "panel + ink on hover" is for chrome CELLS on the panel ground */
.f input[type=date]{font-family:var(--mono);font-size:14px}
.mast-add{grid-column:7 / span 6}
.sec--mast .g .mast-add{align-self:end;margin-top:0}   /* slice 11: an .adds row (Add a field · Make recurring) — the grid's row gap is its spacing */
/* Slice 11 — an action with a menu (the Invoices page's New): the ··· disclosure's construction, the button as its summary. */
.bar .acts details.act{position:relative;height:100%}
.bar .acts details.act summary{list-style:none;cursor:pointer;height:100%;display:flex;align-items:center}
.bar .acts details.act summary::-webkit-details-marker{display:none}
.bar .acts details.act .menu{right:0}
/* The default badge (F46: the FK carries the specialness; the list needs the badge — that's the whole price). Plain, FLAGGED. */
.badge{display:inline-block;margin-left:8px;padding:2px 6px;font:500 10px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:var(--line)}
.nag.offer form{display:inline}
.nag.offer button{font:inherit;background:none;border:0;padding:0;margin-left:8px;color:var(--acting);cursor:pointer;text-decoration:underline}

/* (b) SILENT in the spec — plain, flagged. THE error rule (Aug 31): the
   field carries label, border, and message; no top-of-form list. */
.f.err>span{color:var(--late)}   /* ONE RED (ruled Sep 8): the field error reads --late, like the flash */
.f.err input,.f.err textarea,.f.err select{border-color:var(--late)}
.f .msg{display:block;margin-top:6px;font:400 12px/1.3 var(--ui);color:var(--late)}
.nag{margin:calc(3*var(--u)) var(--content-edge) 0;padding:12px 16px;border:2px solid var(--highlight);background:var(--highlight);font-size:14px;color:var(--ink)}
.page .nag{margin-left:0;margin-right:0}
.linkline{margin:calc(2*var(--u)) var(--content-edge) 0;font-size:13px;color:var(--ink2)}
.page .linkline{margin-left:0;margin-right:0}
.linkline a{font-family:var(--mono);color:var(--acting);text-decoration:underline}
.adj{padding:calc(3*var(--u)) 0}
.adj .itemrow .n{font-family:var(--ui);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
/* ── the foot's money cluster (Aug 31): Currency over Format at cols 9–12 —
   the totals' own columns, the page's money edge — and Note spanning both
   rows, its height DERIVED from the right stack (the bizcell construction:
   span + stretch + flex, textarea flex-basis 0 so its rows attribute never
   votes on track height). resize is off because the height is derived. ── */
.currency{grid-column:9 / span 4}
.fmt{grid-column:9 / span 4;grid-row:2}
.fmt .mode{font-family:var(--mono);font-size:14px}   /* the options ARE renderings — the paper's voice, not button chrome */
.notecell{grid-column:1 / span 6;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column}
.notecell .f{flex:1;display:flex;flex-direction:column}
.notecell textarea{flex:1 1 0;min-height:0;resize:none}
.quiet{color:var(--ink3);font-size:13px;margin:0}
.links .mono{font-family:var(--mono);font-size:12px}
.links form{margin-left:auto}
.links button.del{font:inherit;background:none;border:0;padding:0;color:var(--ink3);cursor:pointer;font-size:12px}
.links button.del:hover{color:var(--ink)}
/* ── THE FLASH IS A CHROME ROW (ruled Sep 8, Kickoff 11 — prototypes/settings.html): the content column's full width, edge to
   edge, exactly one rail row (--fh, border-box, no padding above or below), the highlight, the text on the page's content edge
   (--gx + --cardpad, the h1's own x). THE BORDER RULE: a flash draws its TOP — except the first, whose top is the masthead's
   line — and the page's first section, which normally draws no top because the masthead did, draws one when a flash sits above
   it. So every line lands on a rail line: zero, one or two flashes, the h1's band still ends where a rail item ends. Error: THE
   app's one red (--late) with white ink. The billing-trouble banner wears the same row. (.styleguide-sample: the same row on
   /styleguide.) ── */
body.studio :is(.main,.styleguide-sample)>.flash{margin:0;padding:0 var(--content-edge);height:var(--fh);box-sizing:border-box;display:flex;align-items:center;background:var(--highlight);color:var(--ink);font:400 14px/1.3 var(--ui);border-top:var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.studio .main>.flash:first-child{border-top:0}
body.studio .main>.flash~.page .card>.sec:first-child{border-top:var(--line)}
body.studio :is(.main,.styleguide-sample)>.flash--error{background:var(--late);color:#fff}
body.studio .main>.flash a,body.studio .styleguide-sample>.flash a{color:inherit;text-decoration:underline}

/* ── THE LIST (the Wave 3 walk, Sep 2 — from prototypes/hub.html's tables; the
   list component): a box of the line; the head row on --panel in the caps
   voice; 48px rows on the light ground (--tint), the row a link, hover the
   panel (two tints, never a third); columns on minmax(0, Nfr) with a 32
   gap; numbers in IO right-aligned; ONE action at the right in --acting;
   the "now" states as a mark in the highlight under the words only. THE
   BORDER RULE: the box draws the outside, each row its top. ── */
.list{border:var(--line);background:var(--tint);--cols:1fr;display:grid;grid-template-columns:var(--cols);column-gap:calc(4*var(--u))}   /* ONE grid for the whole list: every row is a subgrid of it, so an auto track (↑↓, the action) resolves once, over every row — never per row */
.list .head,.list .row{grid-column:1 / -1}
.list .head,.list .row{display:grid;grid-template-columns:subgrid;align-items:center;min-height:var(--fh);padding:0 24px}
.list .head{background:var(--field);font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}   /* the head is a thick line: THE line's own colour as a surface, ink on it (the chrome pass, Sep 3). On the hub the ground was --tint so a --panel head stood out; on the app the ground IS --panel and the head vanished into it. 18% was too close to the 14% ground (Chris); 22% (--outside) is the conservative alternative if this is too strong */
.list .head .c{white-space:nowrap}   /* a label never breaks ("NUMB / ER") — the list's one rule until its sitting (Sep 3) */
.list .c.fit{white-space:nowrap}   /* a fit column (an auto track: Number, Total) never breaks — amounts and numbers are one piece */
.list .head.title{display:flex;justify-content:space-between;color:var(--ink)}
/* the head's one non-heading thing, the DOOR: a nav link at the right in --acting with the arrow — the same language on every table that doubles as a door (Clients, Invoices, Referrals → Settings) */
.list .head.title a{color:var(--acting)}
.list .head.title a::after{content:"\a0▸"}
.list .head.title a:hover{color:var(--ink)}
.list .row{position:relative;border-top:var(--line);font-size:15px;color:var(--ink);padding-top:10px;padding-bottom:10px}   /* 48 when one line; a per-currency stack or a detail line may run taller */
.list .row.link:hover{background:var(--panel)}
.list .row.link>a.c{color:inherit;text-decoration:none}
.list .row.link>a.c::after{content:"";position:absolute;inset:0}   /* the first cell is the row's link, stretched over the row — no form ever nests in an anchor */
.list .row .c>a{color:inherit;text-decoration:none}   /* a cell's HONEST link (ruled Sep 7, People: the name to the person, the email a mailto:) — the row's text, underlined on hover; no row link, no row hover */
.list .row .c>a:hover{text-decoration:underline}
.list .c{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}   /* NEVER WRAPS (ruled Sep 6): an ellipsis in every table, the row stays 48 — if it feels constraining, reconsider what is in the table, not the rule */
.list .c.m{font-family:var(--mono);font-size:14px;letter-spacing:0;text-transform:none}
.list .row .c.m{color:var(--ink)}
.list .c.r{text-align:right;justify-self:end;padding-right:calc(2*var(--u))}   /* a right-aligned number breathes: 2u on its right, keyed to the class, never measured — harmless when the row stacks (the chrome pass, Sep 3) */
.list .c.q,.list .row .c.q{color:var(--ink3)}
.list .c .l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .c .l+.l{margin-top:2px}
.list .c .l.d{font-size:13px;color:var(--ink3)}   /* a detail line under the text — the activity's diff, the send's recipients */
.list .row .c.m .l.d{font-family:var(--mono);font-size:12px}
/* ROWS CARRY NO FILL (ruled Sep 6): two registers in a status cell — ink for facts (Draft · Sent Sep 5 · Paid Sep 2 · Marked paid by check), red for late and only late (Overdue 21 days) — and a third, CLOSED: a paid row's status muted; a voided row muted in EVERY column, amount included, on the PAGE's ground — a hollow row. Urgency comes from the BLOCK (being in Needs you), never a fill; a future due date earns no colour. Yellow means "where you are" (rail, tab) and never appears in a list — the Sep 3 mark under the "now" states is retired (the palette rule is three colours, one job each). */
.list .st.late{color:var(--late)}
.list .row.q{background:var(--panel)}
.list .row.q .c,.list .row.q .c.m,.list .row.q .st.late{color:var(--ink3)}
.list .tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-left:10px;border:var(--line);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;vertical-align:middle}   /* a small cell of the line — square, not a pill: the system has one shape */
.list .act,.list .ord{position:relative;z-index:1;justify-self:end;white-space:nowrap}
.list .ord{justify-self:start;display:flex;gap:6px}
.list .act form,.list .ord form{display:inline;margin:0}
.list .act a,.list .act button{font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acting);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.list .act a:hover,.list .act button:hover{color:var(--ink)}
.list .ord button{font:inherit;background:none;border:0;padding:0;color:var(--ink3);cursor:pointer}
.list .ord button:hover{color:var(--ink)}
.list .act .here{display:block;width:14px;height:14px;background:var(--ink);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,7.5 5.5,11 12,3.5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}   /* the studio you're in: the CHECK, where the others say SWITCH (Chris, Sep 9; the colour cells' glyph) */
.card>.sec>p.empty{margin:0}   /* the list pages' zero state (ruled Sep 8): the sentence in the section's body voice, where the box would have been */
.list>.row:first-child{border-top:0}   /* a headless list (Home's birthday row, Sep 6): the box drew the top */
/* HOME'S 0-CLIENTS ROW (ruled Sep 6; narrowed Sep 8 — the LIST PAGES' empty state is now the SENTENCE, `.sec>p.empty` in the body voice, no head row, no in-table Add; the bar's action is the way in): the box's place holds ONE ROW — the bar's height, drawing its top — and in it the bar's box construction: a 48 box of the line, `+` in its own cell, the noun in the next, caps voice; hover = panel + ink (a chrome cell on the tint). Inside the box the row also draws its left, like every cell there. */
.emptyrow{display:flex;align-items:center;height:var(--bar);padding:0 24px;border-top:var(--line)}
.box>.emptyrow{border-left:var(--line)}
.emptyrow .start{display:flex;height:var(--fh);border:var(--line);color:var(--ink);font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.emptyrow .start span{display:flex;align-items:center;padding:0 24px}
.emptyrow .start .plus{padding:0 18px;font-size:18px;letter-spacing:0;color:var(--acting)}
.emptyrow .start span+span{border-left:var(--line)}
.emptyrow .start:hover{background:var(--panel);color:var(--ink)}
.list .row .form{display:flex;align-items:center;gap:12px;margin:0}
.list .row .form-actions{margin:0}
.list .row .form .save{font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acting);background:none;border:0;padding:0;cursor:pointer}
.list .row .form .save:hover{color:var(--ink)}
/* the check: the platform's checkbox wearing the token (FLAGGED — "checkbox styling should become the line" is on the silent list) */
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.check input{margin:0;width:16px;height:16px;accent-color:var(--acting);cursor:pointer}
.card dl.facts{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;font-size:14px}
.card dl.facts dt{color:var(--ink2)}.card dl.facts dd{margin:0;color:var(--ink)}
.card>.sec>p{margin:0 0 calc(2*var(--u))}
/* a list page: the title in the display face, then the box */
.card h1.title{font:400 34px/1.1 var(--display);margin:0 0 calc(3*var(--u));color:var(--ink)}
.sec .list+.toggle,.sec .toggle{display:inline-block;margin-top:calc(2*var(--u));font:500 14px/1.4 var(--ui);color:var(--acting);text-decoration:none}   /* a control in the UI face and the acting colour (the show-past toggle), never a mono link */
.sec .toggle:hover{color:var(--ink)}
.sec p.quiet+.list{margin-top:calc(2*var(--u))}
.sec .list+.list,.sec .box+.list{margin-top:calc(3*var(--u))}   /* two lists in a section, or a box over a list (People: the upcoming-birthday CARDS over the table, Sep 7) — rows are 3u apart */
@container card (max-width:640px){
  .list{grid-template-columns:1fr}
  .list .head{display:none}
  .list .row{grid-template-columns:1fr;row-gap:4px;padding-top:12px;padding-bottom:12px}
  .list .c.r{justify-self:start;text-align:left}
  .list .act,.list .ord{justify-self:start}
  .list>.head:first-child+.row{border-top:0}   /* the head hides here, which left the first row drawing its top against the box's — a 4px rule; the first SHOWN row draws none (Chris, Sep 9) */
  .list.line1{grid-template-columns:var(--cols)}   /* a row of few, short cells (Your studios) stays ONE line — the stacking above is for rows of many cells (Chris, Sep 9); the list carries `oneline` */
  .list.line1 .row{grid-template-columns:subgrid;column-gap:16px;row-gap:0;padding-top:0;padding-bottom:0;min-height:var(--fh)}
  .list.line1 .act{justify-self:end}
}

/* ── THE FORM GRAMMAR on the plain pages (the Wave 3 walk, Sep 2): New
   person, Settings ▸ Business / Account / Payments, the reminders rows —
   labeled fields on the grid, sections as rows, the primary in the bar or
   a filled cell at a section's end with its after-line beneath. ── */
.card .go{display:inline-flex;align-items:center;height:var(--fh);padding:0 24px;margin-top:calc(3*var(--u));border:0;background:var(--acting);color:#fff;font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.card .go:hover{filter:brightness(1.1)}
.card .go.quiet{background:transparent;border:var(--line);color:var(--ink);margin-top:0}
.card .go.quiet:hover{background:var(--tint);filter:none}
.card .go.fill{background:var(--fill);color:var(--on-fill)}   /* the FILLED surface (Sep 8): a primary act on the page wears the bar's fill — RESUME, CONTINUE TO CHECKOUT (Sep 9) */
.card .go.fill:hover{filter:brightness(1.08)}
.card .g+.go{margin-top:calc(3*var(--u))}   /* an act under a field grid breathes the section's 3u */
.card .sec>h2+.go{margin-top:0}   /* an act that IS the section's first thing sits where a field would (Chris, Sep 9: the gap under KEEP YOUR SUBSCRIPTION) */
.card .sec>form>h2+.go{margin-top:0}
.card .note.after{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink2)}   /* the quiet line under a button — the consequence, where it belongs */
.card .sec>form{margin:0}
.card .sec>p{margin:0}
.card .sec>h1.title+p{margin-top:12px;color:var(--ink2)}
.card .sec>h1.title+p b{font-weight:500;color:var(--ink)}
.f.pd .pd-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gutter)}   /* month · day · year — three fields, one label (no year is the common case) */
.check-field+.check-field{margin-top:calc(2*var(--u))}
.check-field .hint{display:block;margin:6px 0 0 26px;font-size:13px;color:var(--ink3)}
.check{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);cursor:pointer}
.check input{margin:0;width:16px;height:16px;accent-color:var(--acting);cursor:pointer}
.list .check{font-size:14px}
/* the reminders rows: label · the date control at the Issued/Due width · Move · Skip */
.sec.reminder form{margin:0}
.sec.reminder .g.pair{align-items:center}
.sec.reminder .rlabel{font-size:15px;color:var(--ink);min-height:var(--fh);display:flex;align-items:center}
.sec.reminder .racts{display:flex;gap:28px;min-height:var(--fh);align-items:center}
.sec.reminder .act{font:500 14px/1 var(--ui);color:var(--acting);background:none;border:0;padding:0;cursor:pointer}
.sec.reminder .act:hover{color:var(--ink)}
.sec.reminder+.sec.reminder{padding-top:0;border-top:0;margin-top:calc(-1*var(--u))}   /* the two rows read as one block under one heading */

 — the paper's print rules are paper.css's ── */
main.bare{margin:0 auto;max-width:calc(var(--content) + 2*var(--content-edge));font:15px/1.5 var(--ui);color:var(--ink)}
main.bare .paper{min-height:100vh}
@media print{
  body.studio{background:#fff}
  main.bare .paper{min-height:0;padding:0}
  @page{margin:16mm}
}

/* ── slice 10: the invoice page's reminders + hold lines, and the styleguide's
   email section. PLAIN, FLAGGED — no sitting has drawn these. ── */
.hold{display:flex;align-items:center;gap:calc(2*var(--u))}
.hold .form{display:inline}
.hold .form-actions{margin:0;display:inline}
.sec--reminders{padding:calc(3*var(--u)) var(--content-edge)}
.sec--reminders .p-lbl{margin-bottom:var(--u)}
.reminder-choice{display:flex;align-items:flex-end;padding-bottom:calc(1.5*var(--u))}
.styleguide-email h2 small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-left:1ch}
.styleguide-subject{font-family:var(--mono);font-size:13px;margin:0 0 var(--u)}
.styleguide-parts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(2*var(--u))}
.styleguide-text{margin:0;padding:calc(2*var(--u));background:var(--paper);border:1px solid var(--rule2);font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.styleguide-html{width:100%;min-height:560px;border:1px solid var(--rule2);background:#f4f3ef}
@container (max-width: 640px){.styleguide-parts{grid-template-columns:minmax(0,1fr)}}

/* ═══ HOME (the Home sitting, Sep 3; prototypes/home.html's ── HOME ── block is the spec, each value measured live in Chrome) ═══ */
/* 2× the section's air under the last table — the page's own end, whether or not the footer follows */
.card>.sec:last-child{padding-bottom:calc(8*var(--u))}
/* the page's CLOCK: the period every flow below follows. Three small cells of the line; a choice, so the chosen one is white. */
.clock{display:inline-flex;margin:0 0 calc(3*var(--u))}
.clock a{display:flex;align-items:center;height:32px;padding:0 12px;border:var(--line);border-left:0;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);transition:background-color .15s ease,color .15s ease}
.clock a:first-child{border-left:var(--line)}
.clock a.on{background:#fff;color:var(--ink)}
.clock a:hover{background:var(--tint);color:var(--ink)}   /* the clock sits on --panel, so the hover goes LIGHTER (the chrome's hover goes to --panel because the chrome sits on --tint — same rule, the other ground) */
.clock a.on:hover{background:#fff}
.home h1.title{margin-bottom:10px}
.home .period{color:var(--ink2)}   /* the studio's day under the name — or the welcome line, while Set up exists */
/* THE H1 BAND ALIGNS WITH THE RAIL BY CONSTRUCTION — TWO RAIL ROWS (ruled Sep 6 evening, shaped live in Chrome). The masthead is 72 + the
   line (main starts at 74); rail items are 48 pitch; the h1 + date band is exactly two rows (74→170; h1 87–124, date 134–157 — 13 above,
   13 below); its bottom rule IS the Clients/Proposals line. NOT derived from --fh: that is 72 (6u); the rail row is 48 by its own rule.
   The book's selector is `.card>.sec:first-child` ("holds on every page, note or no note") and since Sep 8 (ruled: the list pages get
   their own two-row band too) it holds BY CONSTRUCTION — every page's first section IS the band; the one named exception is the
   editors' and send pages' masthead (`.sec--mast`, an explicit class, not a content sniff). The Sep 6 `:has` guard is retired. */
.card>.sec:first-child:not(.sec--mast){box-sizing:border-box;block-size:96px;display:grid;align-content:center;padding-block:0}
/* A list page's clock rides in the band under the h1 — where Home's date line sits (h1 37 + 10 + the clock's 32 = 79 in the 96); FLAGGED
   for the sitting, not ruled. THE TABLE'S HEAD LANDS ON THE THIRD RAIL ROW (ruled Sep 8): the list's section (`tbl`) has no top padding and
   draws no rule of its own — the list's box does (170→172) — and its head is 46 + that 2px line = the 48 pitch (172→218), like the rows
   and Home's Latest row. The birthdays box on People keeps its own section between the band and the table (Home's grammar). */
.card>.sec:first-child>h1.title:has(+.clock){margin-bottom:10px}
.card>.sec:first-child>.clock{margin:0}
.card>.sec.tbl{border-top:0;padding-top:0}
.card>.sec.tbl>.list>.head{min-height:46px}
.card>.sec.tbl>p.quiet{margin:0 0 calc(2*var(--u))}

/* THE LATEST FROM US (ruled Sep 3; reshaped Sep 6; re-done live Sep 6 evening): a collapsed <details> ROW UNDER the h1 band — the THIRD
   RAIL ROW, with its own rule on top (170→218 = the Proposals row; the next section's line is its bottom rule, the Proposals/Invoices line)
   — whose summary IS the headline: kicker · headline · date ON ONE BASELINE (it was vertically centred; the headline sat a pixel low), a
   46 summary + the 2px rule = the 48 pitch, like a rail item. The headline ellipsises; the date is right-aligned with no dot before it (the
   separator after the kicker stays). Hover tints the WHOLE <details> to --tint (the lighter green — NOT --panel, which is the band's own
   ground and reads as no hover), open or closed; the summary's own hover is transparent so there is no seam. Open, the BODY is paper
   (white = the thing you opened), a box of the line inset to the content edge; the row stays chrome; the body's bottom margin is the
   details' PADDING (a margin doesn't take the hover tint, so the last 24px read as a gap). No JS, no seen-state. */
.latest{margin:0 calc(-1*var(--gx) - var(--cardpad));border-top:var(--line);transition:background-color .15s ease}
.latest:hover{background:var(--tint)}
.latest[open]{padding-bottom:24px}
.latest>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;box-sizing:border-box;block-size:46px;padding:0 var(--content-edge);font:500 11px/1 var(--ui);line-height:46px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);transition:color .15s ease}
.latest>summary::-webkit-details-marker{display:none}
.latest>summary:hover{background:transparent;color:var(--ink)}
.latest>summary .ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
.latest>summary .ttl::before{content:"·";margin-right:16px;color:var(--ink3)}
.latest>summary .date{font:500 12px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink3);white-space:nowrap;text-align:right}
.latest>.body{--lh:24px;margin:0 var(--content-edge);background:var(--paper);border:var(--line);padding:var(--lh) 24px}
.latest .body p{margin:0;font-size:15px;line-height:var(--lh);color:var(--ink2);max-width:60ch}
.latest .body p+p{margin-top:var(--lh)}
.latest .body p a{color:var(--acting)}
.latest .body p a:hover{color:var(--ink)}

/* set up: label · value · action; the value carries the derived default; two actions read as one phrase */
.setup{--cols:minmax(0,4fr) minmax(0,5fr) auto}
.setup .row .c.v{color:var(--ink2)}
.setup .row .c.v code{font:14px/1 var(--mono);color:var(--ink)}
.setup .act{display:flex;align-items:center;gap:24px}
.setup .act form{display:contents}   /* Keep is a POST: its button sits in the row as the anchor does (measured Sep 3: the form as a flex item put KEEP 5px under CHANGE) */
.setup .head .count{font:400 12px/1.3 var(--ui);letter-spacing:.04em;text-transform:none;color:var(--ink3)}

/* the money: three cells (each draws its LEFT) over the timeline; one box. Each cell: a LABEL (the section's caps voice), the sum, an optional
   detail line — overdue is Outstanding's detail, in the late colour, only when there is any. Sums without cents; the tables carry cents. */
.money{border:var(--line);background:var(--tint)}
.money .sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.money .sums .cell{padding:calc(3*var(--u)) 24px;border-left:var(--line);transition:background-color .15s ease}   /* not links — the hover is just the chrome's ease, for the pleasure of it */
.money .sums .cell:first-child{border-left:0}
.money .sums .cell:hover{background:var(--panel)}
.money .h{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.money .sum{font:500 34px/1.1 var(--mono);color:var(--ink)}
.money .k{margin-top:8px;font-size:13px;color:var(--ink2)}
.money .k.late{color:var(--late)}
.money .good .sum{color:var(--acting)}   /* saved on fees: the good number, in the colour the product acts in */
.money .zero .sum{color:var(--ink3)}
.money figure{margin:0;padding:calc(3*var(--u)) 24px calc(2*var(--u));border-top:var(--line)}
.money figure .fhead{display:flex;justify-content:flex-end;margin-bottom:8px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}   /* the chart's head while the target is null: one door, right (FLAGGED — plain) */
.money figure .fhead a{color:var(--acting)}
.money figure .fhead a::after{content:"\a0▸"}
.money figure .fhead a:hover{color:var(--ink)}
.money svg{display:block;width:100%;height:auto}
.money .legend{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:12px;font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.money .legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.money .legend .paid{background:var(--ink)}
.money .legend .invoiced{background:var(--field)}
.money .legend .planned{background:var(--outside)}   /* the third tier, PLANNED (ruled Sep 6: "Expected" was too strong; drafts stay in it — a $10K draft due next month is a fair signal) — recurrences by their Next date and drafts by their due date — the ground's deeper tint, so it reads as "pencilled" */
.money .legend .overdue{background:var(--late)}
@media (max-width:855px){.money .sums{grid-template-columns:1fr}.money .sums .cell{border-left:0;border-top:var(--line)}.money .sums .cell:first-child{border-top:0}}

/* referrals + community (ruled Sep 3; the link re-done live in Chrome, Sep 6 evening — match exactly): ONE 72 row — the sentence left
   (15/1.4, ink, ellipsis), and right-aligned on the row's 24 padding the LINK AS A BOX with a COPY cell, the `+ | Add` construction:
   a 48 box of the line on the tint holding <code> (mono 13 — not 14, so the sentence still fits at the 912 content width: the sentence
   is 532, the box 300, 16 gap) and a COPY cell (its left the line; caps, acting; hover = panel + ink; the copy glyph the app already
   draws). The box's right edge lands on the head's SETTINGS ▸ right edge. TRAPS already found: the app's .c.v carries its own 2px top
   rule (how the old link row drew its line) — left in place it stacks on the box's top border and reads as a 4px rule, so border:0;
   the box is border-box 48 with overflow hidden and its two cells are height:auto / min-height:0 / align-self:stretch — otherwise
   the app's 48-tall .copy overflows a 48-outer box by 2px top and bottom, fattening the top rule and painting over the bottom one. */
.refer{--cols:1fr}
.list.refer .row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:0 24px}
.refer .c.n{padding:0}   /* the row carries the inset now (the sentence starts on the head's 24, like REFERRALS above it) */
.refer .figure{font-weight:500;color:var(--ink)}   /* the earned figure: weight, not the highlight (Sep 6: yellow never appears in a list) */
.refer .c.v{display:flex;flex:0 0 auto;align-items:center;gap:24px;white-space:nowrap;background:none;padding:0;border:0}
.refer .c.v code{font:14px/1 var(--mono);color:var(--ink)}   /* community's bare fact (the email you're known by) */
.refer.community .c.v .act{margin-left:auto}   /* the log-in state has one thing in the value cell; it keeps the right edge */
.refer .linkbox{display:inline-flex;box-sizing:border-box;height:48px;overflow:hidden;border:var(--line);background:var(--tint)}
.refer .linkbox code{display:flex;align-items:center;height:auto;min-height:0;align-self:stretch;padding:0 12px;font:13px/1 var(--mono);color:var(--ink)}
.refer button.copy{display:flex;align-items:center;gap:12px;height:auto;min-height:0;align-self:stretch;padding:0 12px;border:0;border-left:var(--line);background:none;cursor:pointer;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acting);transition:background-color .15s ease,color .15s ease}
.refer button.copy::after{content:"";flex:none;width:16px;height:16px;background:var(--acting);-webkit-mask:url(/images/copy.svg) center/contain no-repeat;mask:url(/images/copy.svg) center/contain no-repeat;transition:background-color .15s ease}   /* the copy glyph, in --acting: this is an action (the footer's icon mechanism) */
.refer button.copy:hover{background:var(--panel);color:var(--ink)}
.refer button.copy:hover::after{background:var(--ink)}
.refer button.copy:disabled{color:var(--acting);cursor:default}   /* COPIED, for a breath, in the same caps voice */
/* RWD (Chris, Sep 9 — a component: Home's row breaks the same way): the tail (" — $39, $79, or $199") goes first, then the row STACKS —
   the sentence a line, the box under it on the left, the row growing to two rows' worth */
@container card (max-width:900px){.refer .c.n .tail{display:none}}
@container card (max-width:800px){.list.refer .row{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;row-gap:12px}.refer .c.n{flex:1 0 100%;white-space:normal}.refer .c.v{margin-right:auto}}
.box .facts .figure{font-weight:500}   /* a fact in weight — Referrals' EARNED (Sep 9) */
.list .row .c.figure,.list .row .c .figure{font-weight:500}   /* the credit in weight */
.list .row .c .q{color:var(--ink3);margin-left:8px}   /* the handle, quiet, after the name (Sep 9) */
.refer button.copy:disabled::after{-webkit-mask-image:url(/images/check.svg);mask-image:url(/images/check.svg)}   /* COPIED gets a CHECK (ruled Sep 6): the glyph in the same slot becomes a check, same size, no layout shift; the label and the glyph revert together (one disabled state, one timer) — the word is read, the glyph is seen */

/* THE BOX — the list's outer shape for things that aren't lists (the client cells, the email strip): a head row on --field, then cells.
   Border rule, hidden-proof variant: the box draws its top, right and bottom; EVERY row and cell draws its own top and left, the head included —
   so the box's left edge is the cells' own, and a cell that isn't there can never leave a doubled or missing line. */
.box{border:var(--line);border-left:0;background:var(--tint)}
.box>.head{display:flex;justify-content:space-between;align-items:center;min-height:var(--fh);padding:0 24px;border-left:var(--line);background:var(--field);color:var(--ink);font:500 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.box>.head a{color:var(--acting)}
.box>.head a::after{content:"\a0▸"}
.box>.head a:hover{color:var(--ink)}
.box>.head form{display:contents}   /* the door as a POST cell (Sep 9: CARD AND INVOICES ▸ — the Portal session): the Keep pattern, the button the cell */
.box>.head button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;color:var(--acting);cursor:pointer}
.box>.head button::after{content:"\a0▸"}
.box>.head button:hover{color:var(--ink)}
/* clients as a GRID OF CELLS, not a table — the hub's room cell (name over the last thing that happened), two across. Same line, a different rhythm. */
.cellgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cellgrid a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:var(--fh);padding:10px 24px;border-top:var(--line);border-left:var(--line);transition:background-color .15s ease}
.cellgrid a:hover{background:var(--panel)}
.cellgrid b{font-weight:500;color:var(--ink);display:block}
.cellgrid span{display:block;font-size:13px;color:var(--ink3);margin-top:2px}
.cellgrid .m{font-family:var(--mono);font-size:14px;color:var(--ink);padding-right:calc(2*var(--u))}
.cellgrid a:last-child:nth-child(odd){grid-column:1 / -1}   /* an odd last cell spans the full row; no empty cell is ever drawn (ruled Sep 6: the block reads right at 0, 1, 2, 5, 11) */
@container card (max-width:640px){.cellgrid{grid-template-columns:1fr}}
/* scheduled emails as a STRIP — the money row's shape, three (or four) CARDS across: what fires, when. Re-done live in Chrome (Sep 6
   evening — match exactly): a card is four rows on an 8 gap — .top (WHEN in mono 14/20, the KICKER right in the caps voice) · .d (the
   subject, 15/22 ink, ellipsised) · .to (13/20 quiet, one line each, ellipsised; the amount in mono 13 on its own line) · .n (the
   heads-up, 13/20 quiet, sentence case, pinned to the foot). Three sizes only: 11 caps kicker · 13 quiet · 15 subject; mono is for the
   when-line and money only. Cards run ~205 tall. */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.strip>*{display:grid;grid-template-rows:auto auto auto 1fr;gap:8px;min-width:0;padding:20px 24px;border-top:var(--line);border-left:var(--line);transition:background-color .15s ease}
.strip a:hover{background:var(--panel)}
.strip .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.strip .w{font:500 14px/20px var(--mono);color:var(--ink)}
.strip .k{font:500 11px/20px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.strip .d{font:400 15px/22px var(--ui);color:var(--ink);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.strip .to{font:400 13px/20px var(--ui);color:var(--ink3);min-width:0}
.strip .to>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.strip .to .m{font:500 13px/20px var(--mono)}   /* the amount: mono is for the when-line and money only */
.strip .n{align-self:end;padding-top:4px;font:400 13px/20px var(--ui);color:var(--ink3)}   /* the heads-up: a note on the client email's card, never its own card (ruled Sep 6); date only */
@container card (max-width:640px){.strip{grid-auto-flow:row;grid-auto-columns:auto}}

/* ═══════════════════════════════════════════════════════════════════════════
   SLICE 12a — PROPOSALS: the editor sitting of Sep 4 (prototypes/proposal-edit.html is the spec). The adds and the
   toggles above are the two component rulings that landed once and restyled the invoice editor in passing; below is the
   proposal's own — the block stack as an OUTLINE, the packages one level in, the Image box, the deposit row — plus the
   END ROW (ruled Sep 3, built here for every editor) and the record page's plain state block (FLAGGED).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── THE END ROW (ruled Sep 3; amended Sep 4): the bar's right side reflected at the foot — the bar's height, the 48 acts
   box centred in it, fully framed, on the line under the last section; SAVE · PRIMARY ending on the content's right edge.
   It sits on the panel, so its hover goes to the TINT — the other ground (the bar sits on the tint and hovers to the panel;
   copying its colour made the bottom SAVE look hoverless). ── */
.endrow{margin:0 calc(-1*var(--gx) - var(--cardpad));padding:0 calc(var(--gx) + var(--cardpad));height:var(--bar);border-top:var(--line);display:flex;justify-content:flex-end;align-items:center}
.endrow .acts{display:flex;height:var(--fh);border:var(--line)}
.endrow .acts form{display:contents}
.endrow .btn{height:100%;display:flex;align-items:center;padding:0 24px;border:0;border-left:var(--line);border-radius:0;background:transparent;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color .15s ease}
.endrow .acts>:first-child,.endrow .acts>form:first-child .btn{border-left:0}
.endrow .btn:hover{background:var(--tint)}
.endrow .btn.primary{background:var(--fill);color:var(--on-fill)}   /* the bar's primary, reflected (the fill — Sep 8) */
.endrow .btn.primary:hover{background:var(--fill);filter:brightness(1.08)}
.card>.sec:has(+.endrow){padding-bottom:calc(4*var(--u))}   /* the last section is not the page's end any more — the row is */

/* ── THE BLOCK STACK AS AN OUTLINE: a block is a <details> — at rest ONE ROW on the line (number · ↑↓ · KIND · its first
   words · Delete), the document's table of contents; open, its fields unfold beneath on the panel ground. name="blk" makes
   the platform keep exactly one open. The open row wears the highlight (where you are); a parent whose child is open is a
   plain row — ONE "here" per surface. The rows are a box of the line, the list component's shape. ── */
.stack{border:var(--line);background:var(--tint)}
.blk{margin:0}
.blk+.blk{border-top:var(--line)}
.blk>summary{display:flex;align-items:center;gap:16px;height:var(--fh);padding:0 24px;list-style:none;cursor:pointer;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);transition:background-color .15s ease,color .15s ease}
.blk>summary::-webkit-details-marker{display:none}
.blk>summary:hover{background:var(--panel);color:var(--ink)}
.blk[open]>summary,.blk[open]>summary:hover{background:var(--highlight);color:var(--ink)}
.blk[open]:has(> .pkgs > .pkg[open])>summary{background:transparent;color:var(--ink2)}
.blk[open]:has(> .pkgs > .pkg[open])>summary:hover{background:var(--panel)}
.blk>summary .n{font-family:var(--mono);letter-spacing:0;color:var(--ink2);width:2ch;flex:none}
.blk>summary .mv{display:flex;gap:8px;flex:none}
.blk>summary .mv button,.blk>summary .del{font:inherit;background:none;border:0;padding:0;margin:0;color:var(--ink3);cursor:pointer}
.blk>summary .mv button:hover,.blk>summary .del:hover{color:var(--ink)}
.blk>summary .kind{color:var(--ink3);width:9ch;flex:none}
.blk[open]>summary .kind{color:var(--ink2)}
.blk>summary .first{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}   /* the block's own words: its heading, or the first line of its text; "Options · 2 packages"; the image's caption */
.blk>summary .first em{font-style:normal;color:var(--ink3)}
.blk>summary .del{letter-spacing:0;text-transform:none;font-size:12px}
.blk>.in{padding:calc(3*var(--u)) 24px calc(4*var(--u));border-top:var(--line);background:var(--panel)}   /* the unfolded block sits on the form ground; its fields are the same windows as everywhere */
.blk .g{row-gap:calc(2*var(--u))}
.blk .adds{margin-top:calc(2*var(--u))}
.f textarea.long{min-height:calc(4*var(--fh))}   /* a Text block's body: four rows at rest (the shell's .body is a reserved word — this is .long) */
/* the Image block's picture: a field-shaped box holding the upload, the line, full width — images are full-width only, to
   start (ruled Sep 4); a 3:1 letterbox as the empty state so the editor doesn't tower. The file input COVERS the box, so a
   file DROPPED on the box lands in the input — the platform's own drop handling, no script; keep this construction. */
.pic{display:flex;align-items:center;justify-content:center;aspect-ratio:3/1;border:var(--line);background:#fff;color:var(--ink3);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden}
.pic:hover{background:var(--highlight);color:var(--ink)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pic input[type=file]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
/* PACKAGES are rows of the SAME stack, one level in — an outline shows depth by indent and numbering (6 · 6.1 · 6.2),
   never by a box inside a box (tried Sep 4: three nested frames). After the last package, + Add a package on the panel:
   the tail of the block's own body, not a row of the outline (on the tint it looked hoverless). */
.pkgs{--step:calc(5*var(--u))}   /* the outline's indent: one step = 40 */
.pkg{border-top:var(--line)}
.pkg>summary{padding-left:calc(24px + var(--step))}
.pkg>summary .n{width:4ch}
.pkg>.in{padding-left:calc(24px + var(--step))}
.addrow{display:flex;align-items:center;height:var(--bar);padding-left:calc(24px + var(--step));border-top:var(--line);background:var(--panel)}
.sub{margin-top:calc(3*var(--u))}
.sub+.sub{border-top:var(--line);padding-top:calc(3*var(--u))}   /* LINES and ADD-ONS are different kinds of thing: the line between them, as between sections */
.sub h3{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 calc(2*var(--u))}
.sub .line:first-of-type{padding-top:0}
/* the deposit: Currency 1–3 · Format 4–6 · mode None | Amount | Percent (a three-segment .mode) on 7–9 · its value on
   10–12 (a money field's width — the 4-column version cut off "7,500.00"); the dial 12 under the row above, not a full gap */
.deposit .dial{grid-column:7 / span 6;margin-top:calc(-1*var(--rowgap) + 12px)}
.deposit .dial .check{font-size:14px}

/* ═══ THE PERSON RECORD (the sitting of Sep 7; prototypes/person.html v13 is the spec — its proto layer moved here as the record's rules) ═══ */
/* the h1 band is the APP's: `.card > .sec:first-child > h1.title + .period` — the built band rule (96, grid, centred) applies untouched, so the
   line under it IS the Clients/Proposals line, as on Home. THE BORDER RULE: the band draws no bottom — the thing after it draws its top. */
.rec{background:var(--panel)}
.rec>.sec:first-child{border-bottom:0}
.rec>.sec:first-child+*{border-top:var(--line)}
.rec>.sec:first-child>h1.title{margin-bottom:10px}   /* Home's measure (other cards get 24); with it the h1 sits 87–124 and the line 134–157, as on Home */
.rec .period{color:var(--ink2)}
/* the contact box: Home's .box (head bar, contained, the lighter ground) holding label · value rows — the record grammar (caps label at a
   fixed inset, the value beside it), two columns, 48 rows on the line. Home's cellgrid (bold name over detail) was tried and read bland
   here: that shape is for NAMES; facts want the caps label's contrast. */
.box .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--tint)}
.box .facts .fact{display:grid;grid-template-columns:104px 1fr;align-items:center;min-height:48px;padding:0 24px;border-top:var(--line);min-width:0}   /* min-height, not height: a neighbour of a two-line cell stretches with it, so its left rule runs the full row */
.box .facts .fact:nth-child(-n+2){border-top:0}
.box .facts .fact:nth-child(2n){border-left:var(--line)}
.box .facts .fact:nth-child(2n+1){border-left:var(--line)}   /* the app's .box draws no LEFT (its cells do — Home's cellgrid rule); so every first-column cell draws it */
.box .facts .fact:last-child:nth-child(odd){grid-column:1 / -1}   /* an odd last fact spans the row — the cellgrid's rule (ruled Sep 6): no empty cell is ever drawn */
.box .facts .l{font:500 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.box .facts .v{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box .facts .v a{color:var(--acting);text-decoration:underline;text-underline-offset:3px}
.box .facts .v.mono{font:14px var(--mono)}
/* a two-line fact (the address): the row grows to fit; its neighbour grows with it (one grid row). Values still ellipsise per LINE; only
   the address is allowed a second line. BOTH cells of the address's row carry .tall: label and value sit on the FIRST line's baseline,
   at the top of the row — so the neighbour's single line reads as the address's first line, not as centred beside two. */
.box .facts .fact.tall{padding-top:11px;padding-bottom:11px;align-items:first baseline;align-content:start}
.box .facts .fact.tall .v{white-space:normal;line-height:1.45}
/* the narrow universal (Chris, Sep 9; moved under the base rules Sep 9, Kickoff 14): facts stack to ONE column — the two-column rule ("the
   first two draw no top") becomes "the first draws none"; the app's two columns truncated every value on a phone */
@media (max-width:855px){.box .facts{grid-template-columns:1fr}.box .facts .fact:nth-child(2){border-top:var(--line)}.box .facts .fact:nth-child(2n){border-left:var(--line)}}
/* roles: the tenure column is LEFT-aligned mono, so every start date sits on one edge; a past role (ended, or archived) is muted */
.list .row .c.when{font:14px var(--mono);text-align:left}
.list .row.past .c{color:var(--ink3)}
/* notes: a row that can grow — author · date on a kicker line, the whole body beneath; the Markdown subset's paragraphs 8 apart */
.notes .list .note{padding:14px 24px 16px;border-top:var(--line);background:var(--tint);font-size:15px;line-height:1.5;color:var(--ink)}
.notes .list .note .by{display:flex;gap:12px;align-items:baseline;margin-bottom:4px;font:500 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.notes .list .note .by b{font-weight:500;color:var(--ink2)}
.notes .list .note .by .d{font:13px var(--mono);letter-spacing:0;text-transform:none}
.notes .list .note p{margin:0}
.notes .list .note p+p{margin-top:8px}
.notes .list .note a{color:var(--acting);text-decoration:underline;text-underline-offset:3px}
/* the record's end row: DELETE far left in its own box, EDIT right — distance is the safety (ruled Sep 7, the rule for every record);
   the edit's keeps the app's flex-end (CANCEL · SAVE) */
.endrow.two{justify-content:space-between}
.endrow .acts form{display:contents}
.endrow .btn.danger{color:var(--late)}
.endrow .btn.danger:hover{background:var(--tint);color:var(--ink)}
/* ── EDIT (the person-record sitting, Sep 7): the field grid — label above, white field, the line, 48; two columns; the form bleeds like a
   .sec does (negative margin AND the same padding back), so the .endrow inside it (which bleeds by the app's own rule) lands on the page's
   edges, not twice out ── */
.rec form.edit{margin:0 calc(-1*var(--gx) - var(--cardpad));padding:0 calc(var(--gx) + var(--cardpad));border-top:var(--line)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px calc(2*var(--gx));padding:24px 0 32px}
.fields .fld{display:grid;gap:6px;min-width:0;align-content:start}
.fields .fld.wide{grid-column:1/-1}
.fields label{font:500 13px/1.4 var(--ui);color:var(--ink)}
.fields input,.fields select,.fields textarea{box-sizing:border-box;height:48px;padding:0 14px;border:var(--line);background:#fff;font:400 15px var(--ui);color:var(--ink);border-radius:0;width:100%;min-width:0}
.fields textarea{height:100%;min-height:96px;padding:12px 14px;resize:none;line-height:1.5;font-family:var(--ui)}
.fields input:focus,.fields select:focus,.fields textarea:focus{outline:2px solid var(--ink);outline-offset:-2px}
.fields input::placeholder,.fields textarea::placeholder{color:var(--ink3)}
/* address spans two rows of the grid — it aligns with two fields on the left by construction: the cell spans two grid rows, the textarea
   fills the cell — its bottom edge IS the fourth row's bottom, whatever the labels measure */
.fields .fld.tall{grid-row:span 2;grid-template-rows:auto 1fr}
.fields .fld.tall textarea{height:100%}
/* birthday: month + day (+ optional year) side by side inside one field */
.fields .bday{display:grid;grid-template-columns:minmax(0,1fr) 72px 88px;gap:12px}
/* the select: the platform's arrow replaced by the app's glyph mechanism (the footer's, the copy button's): a masked chevron in --ink2 —
   ONE stroke, 2px like the line, 14 in from the right. A single SVG polyline through `mask`, so the weight matches everything else drawn
   on the page. */
.fields .sel{position:relative;display:block}
.fields select{appearance:none;-webkit-appearance:none;padding-right:44px}
.fields .sel::after{content:"";position:absolute;right:14px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:var(--ink2);pointer-events:none;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polyline points="2,5 7,10 12,5" fill="none" stroke="black" stroke-width="2" stroke-linecap="square"/></svg>') center/contain no-repeat}
/* the box construction: a fixed prefix cell + the input, one line around both */
.fields .box{display:grid;grid-template-columns:auto minmax(0,1fr);border:var(--line);background:#fff;height:48px;box-sizing:border-box}
.fields .box .pre{display:flex;align-items:center;padding:0 12px;border-right:var(--line);background:var(--tint);font:14px var(--mono);color:var(--ink2);white-space:nowrap}
.fields .box input{border:0;height:100%}
.fields .box:focus-within{outline:2px solid var(--ink);outline-offset:-2px}
.fields .box input:focus{outline:none}
/* errors: the FIELD carries it (ruled Sep 1) — label and border in the error colour, the message under the field. Silent in the prototype; the app's rule. */
.fields .fld.err label{color:var(--late)}   /* ONE RED (Sep 8) */
.fields .fld.err input,.fields .fld.err select,.fields .fld.err textarea,.fields .fld.err .box{border-color:var(--late)}
.fields .fld .msg{font:400 12px/1.3 var(--ui);color:var(--late)}
/* Add role's Started: month + year side by side in one field (the birthday's grammar without the day) */
.fields .started{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:12px}
.fields .fld.wide textarea{min-height:calc(4*var(--fh))}   /* Add note's one textarea: four rows at rest (the Text block's measure) */

/* ═══ THE INVOICE RECORD (ruled Sep 8; prototypes/invoice.html v28 is the spec — its proto layer moved here as the record's rules) ═══ */
/* the band's state word — the pay page's vocabulary (Sent · Overdue · Paid · Voided), no detail, at the end of the period line in the
   face's one heavier weight, so it scans; Overdue in the late colour */
.rec>.sec:first-child .period>span{display:inline;font-weight:500;color:var(--ink)}
.rec>.sec:first-child .period .late{color:var(--late)}
/* the STATUS box: the facts grammar grown — a value of PARTS (spans: the overdue count late, the fee note quiet, an amount mono), the
   LINK row always last and full width (`wide`), and the odd fact just before it spanning too (no empty cell) */
.box .facts .fact.wide{grid-column:1 / -1}
.box .facts .fact:nth-last-child(2):nth-child(odd):has(+.wide){grid-column:1 / -1}
.box .facts .v.parts{display:flex;align-items:center;gap:8px;min-width:0}
.box .facts .v.parts>span,.box .facts .v.parts>a>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box .facts .v.parts>a{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.box .facts .v .mono{font:14px var(--mono)}
.box .facts .late{color:var(--late)}
.box .facts .quiet{color:var(--ink3)}
/* the refbox: the studio's own domain, worth the room — the box grows to the cell's edge, then the HANDLE ellipsises: `code` is
   display:block, not flex (a flex box never ellipsises its own text; the ellipsis shows on what gets cut); COPY beside it on the line */
.box .facts .refbox{display:inline-flex;align-items:stretch;border:var(--line);height:36px;box-sizing:border-box;background:var(--panel);max-width:100%;min-width:0}
.box .facts .refbox code{display:block;line-height:32px;padding:0 10px;font:13px/32px var(--mono);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
/* the code cell as a DOOR (Sep 8, the studio's handoff to its portal): a block anchor so the handle still ellipsises; the acting colour on hover — plain, FLAGGED */
.box .facts .refbox a{display:block;min-width:0;overflow:hidden;color:inherit;text-decoration:none}
.box .facts .refbox a:hover code{color:var(--acting);text-decoration:underline}
.box .facts .refbox .copy{display:flex;align-items:center;padding:0 10px;border:0;border-left:var(--line);background:none;font:500 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acting);cursor:pointer;height:auto;min-height:0;white-space:nowrap}
.box .facts .refbox .copy:hover{background:var(--tint);color:var(--ink)}
/* reminders & activity: Home's .list with the title head; the detail cell quiet; the reminder row's SKIP / UNSKIP a quiet caps action at
   the row's end (fine because the row is nothing else); a skipped row stays, muted and struck, its action not */
.list .row .c.x{color:var(--ink3)}
.list .row .c.act{text-align:right}
.list .row .c.act form{display:inline}
.list .row .c.act button{background:none;border:0;padding:0;font:500 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acting);cursor:pointer}
.list .row .c.act button:hover{color:var(--ink)}
.list .row.skipped .c{color:var(--ink3);text-decoration:line-through}
.list .row.skipped .c.act button{text-decoration:none}
/* the paper sits in its own .sec, bleeding, white, edge to edge — the record's last section before the end row */
.rec .sec.sheet{padding:0}
.rec .sec.sheet .paper{margin:0}

/* ── PAYMENTS (Kickoff 14, Sep 9 — prototypes/settings.html ▸ PAYMENTS; the proto block transcribed, its demo switches dropped) ── */
/* the connection: the facts box (Home's grammar) when connected; heading · sentence · the act, top to bottom, when not (Chris, Sep 9) */
.stripe-facts .fact .v.parts>span.late a{color:var(--late)}   /* the NEEDS YOU row's link is late too: the whole row IS late */
.stripe.no p{margin:0;font:400 15px/1.5 var(--ui);color:var(--ink);max-width:60ch}
.stripe.no .go{margin-top:calc(3*var(--u))}
/* the catalog: METHOD · the fee (the check, then its rule) · ↑↓ · On|Off — one line a row. The "how" column is GONE (Chris, Sep 9): the box above says what Stripe does, the rest are their names, and a row opens into its own page */
.ways{--cols:minmax(0,2fr) minmax(0,4fr) auto auto}
.ways .row:has(.onoff input[value="0"]:checked) .c,.ways .row:has(.onoff input[value="0"]:checked) .rule{color:var(--ink3)}   /* off derives from the dial: muted, no fill (Sep 6) — the fee check goes with it */
.ways .row:has(.onoff input[value="0"]:checked) .fee .check{visibility:hidden}
.ways .row:has(.onoff input[value="0"]:checked) .ord{visibility:hidden}   /* an off row holds no place in the order */
.ways .row .c.fee{overflow:visible;display:flex;align-items:center;gap:12px}
.ways .row .c.fee .check{font-size:14px;flex:none}
.ways .row .c.fee .rule{font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ways .ord{padding-top:0;padding-bottom:0}
/* the dial: the line items' Fixed fee | Per unit pair — the chosen one WHITE (a chosen value is a field) */
.ways .onoff{position:relative;z-index:1;justify-self:end}
.ways .seg{display:inline-flex;height:32px;border:var(--line);box-sizing:border-box}
.ways .seg label{display:flex;align-items:center;padding:0 10px;border-left:var(--line);background:var(--tint);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.ways .seg label:first-child{border-left:0}
.ways .seg input{position:absolute;opacity:0;width:0;height:0}
.ways .seg label:has(:checked){background:#fff;color:var(--ink)}
.ways .seg label:hover{background:var(--panel);color:var(--ink)}
.ways .seg label:has(:checked):hover{background:#fff}
/* A WAY TO BE PAID (Kickoff 14 part 4): one page, a KIND dial (Check | Wire | Custom) at its head; the kind's form follows the dial by :has —
   adding, the dial is live and the page follows it; editing, the same page under the row's name, the dial not drawn */
.card .dial.kind{display:inline-flex;height:32px;border:var(--line);box-sizing:border-box;margin:0 0 calc(3*var(--u))}
.card .dial.kind label{display:flex;align-items:center;padding:0 10px;border-left:var(--line);background:var(--tint);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.card .dial.kind label:first-child{border-left:0}
.card .dial.kind input{position:absolute;opacity:0;width:0;height:0}
.card .dial.kind label:has(:checked){background:#fff;color:var(--ink)}
.card .dial.kind label:hover{background:var(--panel);color:var(--ink)}
.card .dial.kind label:has(:checked):hover{background:#fff}
.way .kind-check,.way .kind-wire,.way .kind-custom{display:none}
.way:has(input[name=kind][value=check]:checked) .kind-check,.way:has(input[name=kind][value=wire]:checked) .kind-wire,.way:has(input[name=kind][value=custom]:checked) .kind-custom{display:block}
.way h3.sub{font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:calc(4*var(--u)) 0 calc(2*var(--u))}   /* a sub-head inside the section (the invoice editor's .sub h3): MAIL TO under Payable to */
@container card (max-width:640px){.ways{--cols:minmax(0,1fr) auto}.ways .head .c.fee,.ways .row .c.fee,.ways .ord{display:none}}