/* GST Office design system: "Lobby" for light, "Charcoal" for dark, chosen by Roger on
   October 29, 2026 after three design rounds (docs/design/README.md). This file is the
   design of record: every screen composes from these tokens and components, and new
   components are added here, not in a page. The written rules and the reference page are
   docs/design/SYSTEM.md and docs/design/system/index.html.

   Layout: a sidebar of modules on wide screens, an icon rail on tablets, a top bar and
   bottom tabs on phones; one page of quiet hairline panels in between. Jade is the one
   accent and means "act here"; status colors are separate from it; money is never colored. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Passwords: the account workspace, category grid, and person access ---------- */
/* Shared by the live /passwords pages and the mockups. It sits above the tokens, so the
   components below win at equal specificity, as they did in the approved mockups. */
.vault-review{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-2) var(--space-5);border-bottom:1px solid var(--line);background:var(--surface);font-size:var(--size-sm)}
.vault-review strong{margin-right:auto}.vault-review a{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 var(--space-2)}
.vault-category-context{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);justify-content:space-between;margin-bottom:var(--space-5);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}.vault-category-context p{font-size:var(--size-sm);color:var(--text-3);margin-top:var(--space-1)}[data-vault-pane][hidden],.vault-category-context[hidden]{display:none}
.vault-toolbar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-5)}.vault-toolbar .field{flex:1;min-width:180px}.vault-toolbar .input{width:100%}.vault-toolbar>.select{width:auto;min-width:180px}.vault-list [hidden]{display:none}.vault-choices{display:grid;gap:var(--space-5)}.vault-choices .panel-body{display:grid;gap:var(--space-4)}
.vault-workspace{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr);gap:var(--gap);align-items:start}
.vault-list{padding:var(--space-2)}.vault-list a,.vault-category{display:flex;gap:var(--space-3);align-items:center;color:var(--text);text-decoration:none;padding:var(--space-4);border-radius:var(--radius-sm);min-width:0}
.vault-list a:hover,.vault-list a:focus-visible{background:var(--surface-2)}.vault-list a[aria-current=true]{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}
.vault-list .vault-row-copy{flex:1;min-width:0}.vault-list strong,.vault-list small{display:block}.vault-list small{color:var(--text-3);font-size:var(--size-sm);margin-top:var(--space-1)}
.vault-service{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--sunken);color:var(--text-2);font-weight:700;font-size:var(--size-md)}.vault-service.large{width:64px;height:64px;font-size:var(--size-xl)}
.vault-detail-head{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-5);border-bottom:1px solid var(--line)}.vault-detail-head h2{font-size:var(--size-xl);margin-bottom:var(--space-1)}.vault-detail-head .btn{margin-left:auto}.vault-detail-head p{color:var(--text-3)}
.vault-credential{padding:var(--space-5);display:grid;gap:var(--space-5)}.vault-value{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap)}.vault-value .vault-login{flex:1;overflow-wrap:anywhere;font-size:var(--size-md)}
.vault-secret{letter-spacing:.18em;font-size:var(--size-lg);overflow-wrap:anywhere}.vault-secret.is-revealed{letter-spacing:normal;font-family:ui-monospace,monospace;font-size:var(--size-base)}
.vault-secret-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.vault-second{padding:var(--space-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;gap:var(--space-3);align-items:start}.vault-second p{color:var(--text-2);margin-top:var(--space-1)}
.vault-detail-section{border-top:1px solid var(--line);padding:var(--space-5)}.vault-detail-section>summary{font-weight:650;font-size:var(--size-lg);cursor:pointer;min-height:var(--tap)}.vault-detail-section .hint{margin:var(--space-2) 0 var(--space-4)}
.vault-grant{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.7fr);gap:var(--space-4);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.vault-person{display:flex;align-items:center;gap:var(--space-3);min-width:0}.vault-person strong,.vault-person small{display:block}.vault-person small{color:var(--text-3);font-size:var(--size-sm)}.vault-grant .select{width:100%}
.vault-owners{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;color:var(--text-2)}
.vault-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.vault-category{background:var(--surface);border:1px solid var(--line);padding:var(--space-5);align-items:flex-start}.vault-category:hover{border-color:var(--line-strong)}.vault-category.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.vault-category strong,.vault-category small{display:block}.vault-category strong{font:650 var(--size-lg)/1.3 var(--font-display)}.vault-category small{color:var(--text-2);margin-top:var(--space-2)}.vault-category .icon{margin-top:var(--space-1);flex:none}.vault-category .vault-category-copy{flex:1;min-width:0}
.vault-section-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.vault-section-heading h2{font-size:var(--size-xl)}.vault-section-heading p{color:var(--text-3);margin-top:var(--space-1)}
.vault-person-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--gap);align-items:start}.vault-person-summary{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5)}.vault-person-summary h2{font-size:var(--size-xl)}.vault-person-summary p{color:var(--text-3)}
.vault-access-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.vault-plain-head{margin-bottom:var(--space-3)}.vault-plain-head p{color:var(--text-3);margin-top:var(--space-1)}
.vault-access-preview{padding:var(--space-4);background:var(--surface-2);border-top:1px solid var(--line);display:flex;gap:var(--space-4);align-items:center;justify-content:space-between}.vault-access-preview p{color:var(--text-2)}
.vault-request{display:flex;gap:var(--space-4);justify-content:space-between;align-items:center;padding:var(--space-5)}.vault-request p{color:var(--text-3);margin-top:var(--space-1)}
.vault-empty{padding:var(--space-6);text-align:center;color:var(--text-3)}.vault-prototype-note{font-size:var(--size-sm);color:var(--text-3);margin-top:var(--space-5)}.vault-demo-status{min-height:var(--space-5);color:var(--accent-ink);font-size:var(--size-sm)}.vault-mobile-only{display:none}
@media(max-width:1100px){.vault-access-columns{grid-template-columns:1fr}.vault-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vault-person-layout{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:800px){.vault-workspace,.vault-person-layout{grid-template-columns:1fr}.vault-mobile-only{display:inline-flex}.vault-list a{min-height:76px}.vault-review{padding:var(--space-2) var(--space-4)}.vault-review strong{width:100%}.vault-enhanced .vault-workspace>#account{display:none}.vault-enhanced.vault-detail-open .vault-workspace>#account{display:block}.vault-detail-open .vault-workspace>section:not(#account),.vault-detail-open .vault-toolbar,.vault-detail-open .vault-category-grid,.vault-detail-open .vault-section-heading{display:none}}
@media(max-width:500px){.vault-category-grid{grid-template-columns:1fr;gap:var(--space-2)}.vault-category{padding:var(--space-4)}.vault-detail-head{flex-wrap:wrap}.vault-detail-head .btn{margin-left:0}.vault-value{flex-wrap:wrap}.vault-grant{grid-template-columns:1fr}.vault-grant .select{min-height:var(--tap)}.vault-request,.vault-access-preview{align-items:flex-start;flex-direction:column}.vault-credential,.vault-detail-section{padding:var(--space-4)}.vault-service.large{width:48px;height:48px}}
@media print{.vault-review,.vault-credential,.vault-secret,.vault-secret-actions{display:none!important}}
.btn.vault-mobile-only{display:none}@media(max-width:800px){.btn.vault-mobile-only{display:inline-flex}}
.vault-after{margin-top:var(--space-5)}.vault-credential>.btn{justify-self:start}details.panel>summary.panel-head{min-height:var(--tap);align-items:center;padding-bottom:var(--space-3);cursor:pointer}.vault-recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);padding:var(--space-5);overflow-wrap:anywhere}.vault-released{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm)}.vault-secret-field form{margin-top:var(--space-3)}.vault-detail-section>.form+.form{margin-top:var(--space-5)}
@media(max-width:800px){.vault-live .vault-workspace>#account,.vault-live .vault-person-layout>#person{display:none}.vault-live.vault-live-detail .vault-workspace>#account,.vault-live.vault-live-person .vault-person-layout>#person{display:block}.vault-live-detail .vault-workspace>section:not(#account),.vault-live-person .vault-person-layout>section:not(#person),.vault-live-detail>.vault-toolbar,.vault-live-detail>.vault-category-context{display:none}}
@media print{[data-vault-sensitive],[data-vault-released],[data-vault-secret-output]{display:none!important}}
@media(max-width:800px){.vault-enhanced .vault-person-layout>#person{display:none}.vault-enhanced.vault-person-open .vault-person-layout>#person{display:block}.vault-person-open .vault-person-layout>section:not(#person){display:none}.vault-person-summary{flex-wrap:wrap}}

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

:root {
  /* Type: Bricolage Grotesque for titles and big numbers, Figtree for everything else. */
  --font-ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, "PingFang SC", sans-serif;
  --size-xs: 0.75rem;     /* 12px: labels, chips, timestamps */
  --size-sm: 0.8125rem;   /* 13px: secondary lines, buttons */
  --size-base: 0.9375rem; /* 15px: body */
  --size-md: 1.0625rem;   /* 17px: lede */
  --size-lg: 1.1875rem;   /* 19px: panel titles */
  --size-xl: 2.125rem;    /* 34px: big figures */
  --size-2xl: 2.5rem;     /* 40px: page titles */
  --leading: 1.5;

  /* Space, on a 4px base. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --gap: 24px;       /* between panels */
  --pad-x: 24px;     /* panel sides */
  --pad-y: 16px;     /* panel top and bottom */
  --row-y: 12px;     /* list rows */

  /* Shape. */
  --radius: 12px;    /* panels */
  --radius-sm: 8px;  /* buttons, fields, icon tiles, posters */
  --radius-pill: 999px;
  --tap: 44px;       /* smallest touch target on phones */
  --control: 36px;   /* button and field height with a mouse */
  --sidebar: 236px;
  --page-max: 1180px;
  --page-wide: 1440px; /* boards, calendars, and wide tables */

  /* Motion: short and plain. Nothing springs or bounces. */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Layers. Overlays are the only things that cast a shadow. */
  --z-sticky: 10; --z-shell: 20; --z-menu: 40; --z-toast: 60; --z-tip: 70;

  /* Light: Lobby. Warm grays, white panels, jade for action. */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --sunken: #efede8;
  --line: #e6e3dd;
  --line-strong: #d4d0c8;
  --text: #1f1d1a;
  --text-2: #5c574f;
  --text-3: #6b665e;
  --accent: #0f6b5b;
  --accent-hover: #0b5649;
  --accent-soft: #e2f0eb;
  --accent-ink: #0b5649;
  --on-accent: #ffffff;
  --ok: #1d6b41;      --ok-soft: #e4f2e9;
  --warn: #8a5300;    --warn-soft: #fcf0d9;
  --danger: #b3261e;  --danger-soft: #fbe8e6;
  --info: #2b5aa8;    --info-soft: #e8eefa;
  --own: #0f6b5b;     /* the theater's own money, drawn solid */
  --held: #8c867c;    /* money held for producers, drawn hatched */
  --nav-bg: #fafaf8;
  --nav-active: #ffffff;
  --field: #ffffff;
  --focus: #0f6b5b;
  --shadow-pop: 0 10px 30px rgba(31, 29, 26, 0.12), 0 1px 2px rgba(31, 29, 26, 0.06);
  --logo-light: block;
  --logo-dark: none;
  --scrim: rgba(20, 18, 15, 0.45);
  /* Six quiet hues, so people are told apart at a glance (never by color alone). */
  --hue-1: #e2f0eb; --hue-1-ink: #0b5649;
  --hue-2: #e8eefa; --hue-2-ink: #2b4f94;
  --hue-3: #f6ecdc; --hue-3-ink: #7a5313;
  --hue-4: #f4e6ef; --hue-4-ink: #86345f;
  --hue-5: #ece9f7; --hue-5-ink: #4f3f9a;
  --hue-6: #e6efe2; --hue-6-ink: #3b6125;
  color-scheme: light;
}

/* Dark: Charcoal. Lifted warm charcoal and warm off-white text (about 11:1, never stark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1e1b; --surface: #282724; --surface-2: #2d2c28; --sunken: #33312d;
    --line: #393733; --line-strong: #4a4741;
    --text: #e4e0d8; --text-2: #bdb7ac; --text-3: #a7a196;
    --accent: #5cb8a1; --accent-hover: #74c6b1; --accent-soft: #2a3f39; --accent-ink: #8fd3c1; --on-accent: #0d211c;
    --ok: #7fc79c; --ok-soft: #26382c; --warn: #dcb36d; --warn-soft: #3d3220; --danger: #e8968d; --danger-soft: #432a26;
    --info: #9dbbec; --info-soft: #28324a;
    --own: #5cb8a1; --held: #8f897e;
    --nav-bg: #24231f; --nav-active: #33312d; --field: #282724; --focus: #74c6b1;
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
    --logo-light: none; --logo-dark: block;
    --scrim: rgba(0, 0, 0, 0.55);
    --hue-1: #2a3f39; --hue-1-ink: #8fd3c1; --hue-2: #28324a; --hue-2-ink: #a9c1ee; --hue-3: #3d3220; --hue-3-ink: #e2c088;
    --hue-4: #3f2a36; --hue-4-ink: #e6a9c8; --hue-5: #322d47; --hue-5-ink: #bdb3ef; --hue-6: #2c3826; --hue-6-ink: #b2d39c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1f1e1b; --surface: #282724; --surface-2: #2d2c28; --sunken: #33312d;
  --line: #393733; --line-strong: #4a4741;
  --text: #e4e0d8; --text-2: #bdb7ac; --text-3: #a7a196;
  --accent: #5cb8a1; --accent-hover: #74c6b1; --accent-soft: #2a3f39; --accent-ink: #8fd3c1; --on-accent: #0d211c;
  --ok: #7fc79c; --ok-soft: #26382c; --warn: #dcb36d; --warn-soft: #3d3220; --danger: #e8968d; --danger-soft: #432a26;
  --info: #9dbbec; --info-soft: #28324a;
  --own: #5cb8a1; --held: #8f897e;
  --nav-bg: #24231f; --nav-active: #33312d; --field: #282724; --focus: #74c6b1;
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);
  --logo-light: none; --logo-dark: block;
  --scrim: rgba(0, 0, 0, 0.55);
  --hue-1: #2a3f39; --hue-1-ink: #8fd3c1; --hue-2: #28324a; --hue-2-ink: #a9c1ee; --hue-3: #3d3220; --hue-3-ink: #e2c088;
  --hue-4: #3f2a36; --hue-4-ink: #e6a9c8; --hue-5: #322d47; --hue-5-ink: #bdb3ef; --hue-6: #2c3826; --hue-6-ink: #b2d39c;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--size-base)/var(--leading) var(--font-ui); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font: 700 var(--size-2xl)/1.05 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
h2 { font: 700 var(--size-lg)/1.15 var(--font-display); letter-spacing: -0.02em; }
h3 { font: 600 var(--size-base)/1.3 var(--font-ui); }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--text-3); }
.small { font-size: var(--size-sm); }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 15px; height: 15px; }
.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; } /* hidden means hidden, whatever a component's display says */
.kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--text-2); font: 600 11px/16px var(--font-ui); text-align: center; }
.print-only { display: none; }
/* The theater's name and address across the top of a printed record, the print date at the
   right. It sits inside .print-only. */
.letterhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 16px; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--text); }
.letterhead-name { display: flex; align-items: center; gap: 10px; }
.letterhead-name img { width: 32px; height: 33px; }
.letterhead-name b { display: block; font: 700 1rem/1.1 var(--font-display); }
.letterhead-name small { display: block; font-size: var(--size-xs); color: var(--text-3); }
/* A prepared section that opens in place when its link is followed (href="#id") and closes
   with a link away from it; no dialog or script needed. */
.reveal:not(:target) { display: none; }
.reveal { scroll-margin-top: 72px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Shell: sidebar, rail, top bar, tabs ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--gap); padding: var(--space-4) var(--space-3); background: var(--nav-bg); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 33px; }
.brand b { display: block; font: 700 1rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.brand small { display: block; margin-top: 2px; font-size: var(--size-xs); color: var(--text-3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { margin: var(--space-3) 10px var(--space-1); font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--control); padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--sunken); color: var(--text); }
.nav a[aria-current="page"] { background: var(--nav-active); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav a[aria-current="page"] .icon { color: var(--accent); }
.nav .count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: var(--size-xs); font-weight: 700; line-height: 20px; text-align: center; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; border-top: 1px solid var(--line); }
.who { min-width: 0; line-height: 1.25; font-size: var(--size-sm); }
.who span { display: block; color: var(--text-3); font-size: var(--size-xs); }
.sidebar-foot form { margin: 0 0 0 auto; }
.topbar, .tabbar { display: none; }
.main { min-width: 0; }
.page { max-width: var(--page-max); margin: 0 auto; padding-block: var(--space-6) var(--space-7); padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
.page-narrow { max-width: 760px; }

/* A page without the shell: sign-in, no access, errors. */
.solo { min-height: 100vh; display: grid; place-items: center; padding-block: var(--space-6); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
.solo-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.solo-card .brand { padding: 0; margin-bottom: var(--space-2); }
.solo-card h1 { font-size: 1.75rem; }
.solo-card form { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Page head ---------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.eyebrow { margin-bottom: 6px; font-size: var(--size-sm); font-weight: 600; color: var(--text-3); }
.lede { margin-top: 8px; color: var(--text-2); font-size: var(--size-md); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-4); font-size: var(--size-sm); color: var(--text-3); }
.search { display: flex; align-items: center; gap: 8px; min-height: var(--control); width: min(320px, 100%); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); color: var(--text-3); font: inherit; font-size: var(--size-sm); cursor: pointer; }
.search span { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search kbd { font: 500 var(--size-xs) var(--font-ui); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; }

/* ---------- Panels ---------- */

.layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--gap); align-items: start; }
/* Two columns whose side column comes first in the markup, so a phone shows it before a long
   main column; on wide screens it still sits on the right. */
@media (min-width: 901px) { .layout.side-first > :first-child { order: 2; } }
/* Two views of one list: a table on wide screens, the same lines as rows at 900px and under,
   where the table would scroll sideways. */
@media (max-width: 900px) { .view-wide { display: none !important; } }
@media (min-width: 901px) { .view-narrow { display: none !important; } }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* For a main panel that needs the width (a month): a 320px side column beside it on wide
   screens, below it otherwise. */
.layout-wide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 1400px) { .layout-wide { grid-template-columns: minmax(0, 1fr) 320px; } }
.panel { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--pad-y) var(--pad-x) 0; }
.panel-head a { font-size: var(--size-sm); font-weight: 600; }
.panel-body { padding: var(--space-4) var(--pad-x) var(--pad-y); }
.panel-foot { padding: var(--space-3) var(--pad-x); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--size-sm); color: var(--text-3); }

/* ---------- Rows ---------- */

.rows { list-style: none; margin: 0; padding: var(--space-2) 0; }
/* A row is an icon, the words, and the actions. The icon hangs in the left margin, so when the
   panel is narrow the actions drop under the words, lined up with the title, instead of
   squeezing the title into a column. */
.row { --row-icon: 34px; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: calc(var(--row-icon) + 2 * var(--row-y)); padding: var(--row-y) var(--pad-x) var(--row-y) calc(var(--pad-x) + var(--row-icon) + var(--space-3)); }
.row + .row, .rows > li + li { border-top: 1px solid var(--line); }
.row > .row-icon, .row > .row-lead { position: absolute; left: var(--pad-x); top: var(--row-y); }
.row-lead .avatar { width: var(--row-icon); height: var(--row-icon); }
.row-main, .row > div:not([class]) { flex: 1 1 16rem; min-width: 0; }
.row-actions { flex: 0 0 auto; max-width: 100%; }
.rows.plain .row { padding-left: var(--pad-x); }
/* office.js marks each list wide or narrow, so a list never mixes the two arrangements. */
.rows.is-wide .row-main, .rows.is-wide .row > div:not([class]) { flex-basis: 0; }
.rows.is-narrow .row-actions { flex-basis: 100%; }
/* A row whose only control is its ⋯ keeps it at the right instead of on a line of its own.
   Browsers without :has() put it on its own line, which still works. */
@supports selector(:has(a)) {
  .row:has(> .row-actions > .more:only-child) { padding-right: calc(var(--pad-x) + 40px); }
  .row > .row-actions:has(> .more:only-child) { position: absolute; top: 50%; right: calc(var(--pad-x) - 6px); transform: translateY(-50%); }
}
.row-icon { width: var(--row-icon); height: var(--row-icon); display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--sunken); color: var(--text-2); }
.row-icon.accent { background: var(--accent-soft); color: var(--accent-ink); }
.row-icon.danger { background: var(--danger-soft); color: var(--danger); }
.row-title { font-weight: 600; line-height: 1.3; color: var(--text); }
a.row-title { color: var(--text); }
a.row-title:hover { color: var(--accent-ink); }
.row-meta { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--size-sm); color: var(--text-3); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.by { display: inline-flex; align-items: center; gap: 5px; }
/* A row that opens its item: the whole row is the link, its actions sit above it. */
.row.is-link { position: relative; transition: background var(--dur-fast) var(--ease); }
.row.is-link:hover { background: var(--surface-2); }
.row.is-link .row-title a { color: var(--text); text-decoration: none; }
.row.is-link .row-title a::after { content: ""; position: absolute; inset: 0; }
.row .row-actions { position: relative; z-index: 1; }
@supports selector(:has(a)) {
  .row.is-link .row-title a:focus-visible { outline: none; }
  .row.is-link:has(.row-title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
}
/* The ⋯ menu appears on hover with a mouse and is always there on touch. */
@media (hover: hover) and (pointer: fine) {
  .row .more { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  .row:hover .more, .row:focus-within .more, .row .more[aria-expanded="true"] { opacity: 1; }
}
.row.is-done > :not(.row-actions) { opacity: 0.55; }
.row.is-done .row-title { text-decoration: line-through; text-decoration-color: var(--text-3); }

/* ---------- The work queue: groups, "needs you now", waiting on someone, batches ---------- */

.rows-group { display: flex; align-items: center; gap: 8px; padding: var(--space-3) var(--pad-x) var(--space-1); font-size: var(--size-xs); font-weight: 700; color: var(--text-3); }
.rows > .rows-group + li, .rows-group + .row { border-top: 0; }
.row + .rows-group { margin-top: var(--space-2); border-top: 1px solid var(--line); }
.rows-group.now { color: var(--danger); }
.rows-group .icon { width: 14px; height: 14px; }
/* Needs you now: money about to leave below a floor, a signature money waits on, a safety or
   legal matter, a deadline today. A tinted row, an icon, and the words "Needs you now". */
.row.is-now { background: var(--danger-soft); }
.row.is-now + .row.is-now { border-top-color: rgba(128, 128, 128, 0.25); }
.row.is-now .row-icon { background: var(--surface); color: var(--danger); }
.row.is-now.is-link:hover { background: var(--danger-soft); filter: brightness(0.98); }
.reason { color: var(--text-2); }
/* A batch of like items stands as one row and opens to its children. */
.batch > summary { list-style: none; cursor: pointer; }
.batch > summary .row-title { display: block; }
.batch > summary::-webkit-details-marker { display: none; }
.batch > summary .row-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-fast) var(--ease); }
.batch[open] > summary .row-title::after { transform: rotate(-135deg) translateY(-1px); }
.batch > summary:hover { background: var(--surface-2); }
.batch-items { list-style: none; margin: 0 0 var(--space-2); padding: 0 var(--pad-x) 0 calc(var(--pad-x) + 46px); font-size: var(--size-sm); }
.batch-items li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-top: 1px dashed var(--line); }
.batch-items li span:last-child { color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Someone is away: a small moon on their avatar, and the line says who has their items. */
.avatar.is-away { position: relative; filter: grayscale(0.7); opacity: 0.8; }
.avatar.is-away::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-3); }
.chip.waiting { background: var(--info-soft); color: var(--info); }
/* An item closed by the record itself leaves a quiet line rather than vanishing. */
.activity li.closed > span + span { color: var(--text-2); }
.activity .closed-mark { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.activity .closed-mark .icon { width: 13px; height: 13px; stroke-width: 2.5; }

/* ---------- Buttons ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 var(--size-sm)/1 var(--font-ui); white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--sunken); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--sunken); color: var(--text); }
.btn-danger { color: var(--danger); }
.btn-block { width: 100%; min-height: var(--tap); }
.btn-icon { width: var(--control); padding: 0; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* States: pressed, toggled, working, small and large, split. */
.btn { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn:active { background: var(--line); }
.btn-primary:active { background: var(--accent-hover); filter: brightness(0.92); }
.btn-quiet:active { background: var(--line); }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.btn-sm { min-height: 28px; padding: 0 10px; font-size: var(--size-xs); }
.btn-sm.btn-icon { width: 28px; padding: 0; }
.btn-lg { min-height: var(--tap); padding: 0 20px; font-size: var(--size-base); }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--on-accent); border-right-color: transparent; border-bottom-color: transparent; animation: spin 0.7s linear infinite; }
.btn:not(.btn-primary).is-busy::after { border-color: var(--text-2); border-right-color: transparent; border-bottom-color: transparent; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left-color: rgba(255, 255, 255, 0.35); }
.btn-group .btn.btn-primary + .btn.btn-primary { padding: 0 8px; }
.why { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-sm); color: var(--text-3); }
.why .icon { width: 15px; height: 15px; }
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin 0.7s linear infinite; vertical-align: -3px; }
.saved { display: inline-flex; align-items: center; gap: 5px; font-size: var(--size-sm); color: var(--text-3); }
.saved .icon { width: 15px; height: 15px; color: var(--ok); }

/* ---------- Chips: status as color, word, and dot together ---------- */

.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--sunken); color: var(--text-2); font-size: var(--size-xs); font-weight: 600; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Avatars ---------- */

.avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sunken); color: var(--text-2); font-size: var(--size-xs); font-weight: 700; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 40px; height: 40px; font-size: var(--size-sm); }
.avatar-xl { width: 88px; height: 88px; font-size: 1.75rem; } /* a person's own page */
/* A face with the ways to change it beside it: upload a photo, or use Google's. */
.face-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.face-actions { flex: 1 1 15rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.face-actions label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Numbered steps a person follows in order, such as connecting an assistant. */
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--size-sm); color: var(--text-2); }
.numbered li { counter-increment: step; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.numbered li::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sunken); color: var(--text-2); font-size: var(--size-xs); font-weight: 700; }
.avatar[data-hue="1"] { background: var(--hue-1); color: var(--hue-1-ink); }
.avatar[data-hue="2"] { background: var(--hue-2); color: var(--hue-2-ink); }
.avatar[data-hue="3"] { background: var(--hue-3); color: var(--hue-3-ink); }
.avatar[data-hue="4"] { background: var(--hue-4); color: var(--hue-4-ink); }
.avatar[data-hue="5"] { background: var(--hue-5); color: var(--hue-5-ink); }
.avatar[data-hue="6"] { background: var(--hue-6); color: var(--hue-6-ink); }
.avatar.is-assistant { border-radius: 8px; } /* an assistant acting for its person: their hue, a rounded square */
/* A photo when there is one: Google's from sign-in, or one an owner or manager uploaded.
   Initials in the person's hue are the fallback. */
.avatar > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatars { display: inline-flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatars .avatar + .avatar { margin-left: -4px; }
.avatar-img { width: 22px; height: 22px; object-fit: contain; }
/* Hovering, focusing, or long-pressing a person's name or face shows who they are. */
.row.is-link [data-person] { position: relative; z-index: 1; }
.tip.is-person { max-width: 300px; padding: 12px 14px 12px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 400 var(--size-sm)/1.4 var(--font-ui); }
.person-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px; }
.person-card .avatar { grid-row: 1 / span 3; width: 48px; height: 48px; font-size: var(--size-base); }
.person-card b { font-size: var(--size-base); font-weight: 700; }
.person-card span { color: var(--text-2); }
.person-card .status { font-size: var(--size-xs); color: var(--text-3); }
.person-card .status.away { color: var(--warn); }

/* ---------- Notices ---------- */

.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: var(--size-sm); }
.notice .icon { margin-top: 1px; color: var(--accent-ink); }
.notice.ok { background: var(--ok-soft); } .notice.ok .icon { color: var(--ok); }
.notice.warn { background: var(--warn-soft); } .notice.warn .icon { color: var(--warn); }
.notice.danger { background: var(--danger-soft); } .notice.danger .icon { color: var(--danger); }
.notice b { display: block; }

/* ---------- Empty state: a heading and at most one line ---------- */

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-6) var(--pad-x); }
.empty h3 { font: 700 var(--size-md)/1.2 var(--font-display); letter-spacing: -0.01em; }
.empty p { color: var(--text-3); }
.empty .btn { margin-top: var(--space-2); }

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: var(--size-sm); font-weight: 600; color: var(--text); }
.hint { font-size: var(--size-sm); color: var(--text-3); }
.input, .select, .textarea { width: 100%; min-height: var(--control); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit; }
.input.fit, .select.fit { width: auto; }
.textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }
.select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: right 16px top 50%, right 11px top 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field.error .input, .field.error .select, .field.error .input-group { border-color: var(--danger); }
.field.error .input-group .input { border-color: transparent; }
.field .error-text { font-size: var(--size-sm); color: var(--danger); font-weight: 600; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--control); font-size: var(--size-base); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* A form's validation summary takes no space until it has something to say. */
.validation-summary-valid { display: none; }

/* ---------- Guided deal editing ---------- */
.deal-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
[data-deal-editor] [hidden] { display: none !important; }
[data-deal-editor] input, [data-deal-editor] select, [data-deal-editor] button { min-height: 44px; }
[data-deal-editor] input[type="checkbox"], [data-deal-editor] input[type="radio"] { min-height: 0; }
.deal-payment-row { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); display: grid; gap: var(--space-3); }
.deal-scenario + .deal-scenario { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.deal-scenario .deal-share-labels b { font: 700 var(--size-lg)/1.2 var(--font-display); }
.deal-scenario .deal-share-labels small { display: block; }
.deal-risk { width: 100%; height: 42px; margin-block: var(--space-3); display: block; }
.deal-risk line { stroke: var(--line-strong); stroke-width: .5; }
.deal-risk .theater { fill: var(--own); }
.deal-risk .producer { fill: var(--held); }
.deal-risk .loss { fill: var(--danger); }
.deal-scenario .text-danger { color: var(--danger); }
.validation-summary-valid { display: none; }
/* Short-form deal components, selected October 30. */
.deal-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: var(--gap); align-items: start; }
.deal-workspace > *, .deal-review-row > * { min-width: 0; }
.deal-fold { border-top: 1px solid var(--line); }
.deal-fold > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-4) var(--pad-x); cursor: pointer; list-style: none; }
.deal-fold > summary::-webkit-details-marker { display: none; }
.deal-fold > summary::after { content: "+"; margin-left: auto; font-size: var(--size-lg); color: var(--text-3); }
.deal-fold[open] > summary::after { content: "−"; }
.deal-fold > summary b, .deal-fold > summary small { display: block; }
.deal-fold > summary small { margin-top: var(--space-1); font-size: var(--size-sm); color: var(--text-3); font-weight: 400; }
.deal-fold > .panel-body { padding-top: 0; }
.deal-picker { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); }
.deal-picker > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.deal-picker > summary::-webkit-details-marker { display: none; }
.deal-picker > summary::after { content: "⌄"; margin-left: auto; }
.deal-picker > summary b, .deal-picker > summary small { display: block; }
.deal-picker > summary small { color: var(--text-3); font-size: var(--size-sm); margin-top: var(--space-1); }
.deal-picker[open] > summary { border-bottom: 1px solid var(--line); }
.deal-picker .choices { padding-inline: var(--space-4); }
.deal-picker .choice { padding-block: var(--space-4); }
.deal-options { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.deal-option { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.deal-option.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.deal-option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); }
.deal-option b, .deal-option small { display: block; }
.deal-option small { color: var(--text-2); font-size: var(--size-base); margin-top: var(--space-1); }
.deal-help > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--accent-ink); cursor: pointer; font-size: var(--size-sm); font-weight: 600; }
.deal-help p { padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 2px solid var(--line-strong); color: var(--text-2); font-size: var(--size-sm); line-height: 1.6; }
.deal-source { display: flex; gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--size-sm); color: var(--text-2); }
.deal-source .icon { flex: none; margin-top: 2px; }
.deal-source b { display: block; color: var(--text); margin-bottom: var(--space-1); }
.deal-source a { display: inline-flex; align-items: center; min-height: 44px; }
.deal-fields .deal-source { display: grid; }
.deal-fields .deal-source blockquote { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--line-strong); overflow-wrap: anywhere; }
.deal-allocation { width: 100%; height: 16px; display: block; margin-block: var(--space-4) var(--space-2); border-radius: var(--radius-sm); }
.deal-allocation .own { fill: var(--own); }
.deal-allocation .theater { fill: var(--own); }
.deal-allocation .producer { fill: var(--held); }
.deal-share-labels { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--size-sm); color: var(--text-2); }
.deal-share-labels strong { display: block; font: 700 var(--size-xl)/1.2 var(--font-display); color: var(--text); }
.deal-summary-copy { font-size: var(--size-md); line-height: 1.6; }
.deal-example { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.deal-review-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-5) var(--pad-x); border-top: 1px solid var(--line); }
.deal-review-row:first-child { border-top: 0; }
.deal-review-row h3 { margin-bottom: var(--space-2); }
.deal-review-row p { color: var(--text-2); }
.deal-review-row .deal-help, .deal-review-row .deal-edit { grid-column: 1 / -1; }
.deal-review-row .deal-edit { padding-top: var(--space-3); }
.deal-question { border-left: 3px solid var(--warn); }
.deal-question .panel-head { align-items: center; }
.deal-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.deal-steps button { border: 0; background: none; min-height: 44px; padding: var(--space-2) var(--space-3); color: var(--text-3); font: 600 var(--size-sm)/1.4 var(--font-ui); cursor: pointer; border-bottom: 2px solid var(--line); }
.deal-steps [aria-current="step"] { color: var(--accent-ink); border-color: var(--accent); }
.deal-guide { max-width: 680px; margin-inline: auto; }
.deal-guide h2 { font-size: var(--size-xl); line-height: 1.15; }
.deal-guide .panel-body { padding-top: var(--space-5); }
.deal-preview-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); background: var(--surface); }
.deal-preview-bar p { color: var(--text-3); font-size: var(--size-sm); }
.deal-preview-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.deal-preview-nav a[aria-current="page"] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); }
.deal-preview-note { font-size: var(--size-xs); color: var(--text-3); margin-bottom: var(--space-5); }
.deal-preview-text-large { font-size: 130%; }
.deal-preview [hidden] { display: none !important; }
.deal-preview .form-actions { gap: var(--space-3); }
.deal-preview .input, .deal-preview .select, .deal-preview .btn { min-height: 44px; }
.deal-preview .btn { height: auto; white-space: normal; padding-block: var(--space-2); }
.deal-preview .field > .label { display: block; }
.deal-preview .panel-head { flex-wrap: wrap; }
.deal-preview blockquote { margin: var(--space-3) 0; padding-left: var(--space-4); border-left: 2px solid var(--line-strong); color: var(--text-2); line-height: 1.6; }
@media (max-width: 1000px) { .deal-workspace { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .deal-preview-bar { padding: var(--space-3) var(--space-4); }
  .deal-preview-nav { width: 100%; }
  .deal-preview-nav a { flex: 1; }
  .deal-guide h2 { font-size: 1.65rem; }
  .deal-review-row { padding-block: var(--space-4); }
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.table th { padding: 0 var(--space-3) 8px; border-bottom: 1px solid var(--line-strong); color: var(--text-3); font-size: var(--size-xs); font-weight: 600; text-align: left; white-space: nowrap; }
.table td { padding: 10px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .money, .table .count { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.table tr.total td { border-top: 1px solid var(--text); border-bottom: 0; font-weight: 700; }
.table tbody tr:hover td { background: var(--surface-2); }

/* ---------- Tabs and steps ---------- */

/* Tabs line up with the content edge and carry a count when there is something inside. */
.tabs { display: flex; gap: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: var(--size-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tabs a:hover { color: var(--text); border-color: var(--line-strong); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--text); border-color: var(--accent); }
.tab-count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--sunken); color: var(--text-2); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.tabs a[aria-current="page"] .tab-count { background: var(--accent-soft); color: var(--accent-ink); }
.tab-count.alert { background: var(--danger-soft); color: var(--danger); }

/* The stage track: where a show is in its life. Done stages carry a check; the current
   one is ringed, bold, and tagged "Now"; a stuck one is red. Phones show .stage-summary
   instead: the pips, the stage and what is happening in it, and what comes next and when. */
.stage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); }
.stage li { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 8px; font-size: var(--size-sm); color: var(--text-3); }
.stage li::before { content: ""; position: absolute; top: 10px; left: 22px; right: 0; height: 2px; background: var(--line-strong); }
.stage li:last-child::before { display: none; }
.stage .mark { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-bottom: 10px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--on-accent); }
.stage .mark .icon { width: 13px; height: 13px; stroke-width: 3; }
.stage b { color: var(--text-2); font-weight: 600; font-size: var(--size-base); line-height: 1.25; }
.stage .when { font-size: var(--size-sm); color: var(--text-3); }
.stage .now { display: none; }
.stage li.done::before { background: var(--accent); }
.stage li.done .mark { border-color: var(--accent); background: var(--accent); }
.stage li.done b { color: var(--text); }
.stage li[aria-current="step"] .mark { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.stage li[aria-current="step"] .mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.stage li[aria-current="step"] b { color: var(--accent-ink); font-weight: 700; }
.stage li[aria-current="step"] .now { display: inline-flex; align-self: flex-start; align-items: center; height: 22px; margin-top: 6px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--size-xs); font-weight: 700; }
.stage li.blocked .mark { border-color: var(--danger); background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.stage li.blocked .mark::after { display: none; }
.stage li.blocked b { color: var(--danger); }
.stage-summary { display: none; margin-top: 4px; font-size: var(--size-sm); color: var(--text-2); }
.stage-summary b { color: var(--accent-ink); }
/* The compact version for rows and cards: five pips, the current one long. */
.pips { display: inline-flex; align-items: center; gap: 3px; }
.pips i { width: 8px; height: 6px; border-radius: 3px; background: var(--line-strong); }
.pips i.done { background: var(--accent); }
.pips i.now { width: 22px; background: var(--accent); }
.pips i.stuck { width: 22px; background: var(--danger); }
.pips-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-sm); color: var(--text-2); white-space: nowrap; }

/* The path: a show's life as a checklist under the stage track (booking overhaul, October 31).
   Each step says where it stands in a line and carries its action in place; a step with a short
   form is a <details> whose summary is the whole row, so it opens with a tap, a click, or the
   keyboard and works without script. Done is a filled check; the step to do now is tinted;
   waiting is dashed; stuck is red; not needed is quiet and says why. */
.path { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.path-group { padding: var(--space-4) var(--pad-x) var(--space-1); font-size: var(--size-xs); font-weight: 700; color: var(--text-3); }
.path-step { border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.path-group + .path-step { border-top: 0; }
.path-row, .path-fold > summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 4px var(--space-3); padding: 10px var(--pad-x); }
.path-fold > summary { cursor: pointer; list-style: none; }
.path-fold > summary::-webkit-details-marker { display: none; }
.path-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.path-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-3); }
.path-mark .icon { width: 14px; height: 14px; stroke-width: 3; }
.path-text { display: flex; flex-direction: column; min-width: 0; }
.path-text b { font-weight: 600; color: var(--text); }
.path-line { font-size: var(--size-sm); color: var(--text-2); overflow-wrap: anywhere; }
.path-do { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.path-do .chip { white-space: nowrap; }
.path-step.is-done .path-mark { border-color: var(--ok); background: var(--ok); color: var(--surface); }
.path-step.is-waiting .path-mark { border-style: dashed; border-color: var(--text-3); }
.path-step.is-stuck .path-mark { border-color: var(--danger); color: var(--danger); }
.path-step.is-stuck .path-line { color: var(--danger); }
.path-step.is-skipped .path-mark { border-color: var(--line); background: var(--sunken); }
.path-step.is-skipped .path-text b, .path-step.is-skipped .path-line { color: var(--text-3); font-weight: 500; }
.path-step.is-current { background: var(--accent-soft); }
.path-step.is-current .path-mark { border-color: var(--accent); }
.path-step.is-current .path-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.path-step.is-current.is-stuck .path-mark { border-color: var(--danger); }
.path-step.is-current.is-stuck .path-mark::after { display: none; }
.path-form { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 var(--pad-x) var(--space-3) calc(var(--pad-x) + 24px + var(--space-3)); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.path-fold[open] > summary .path-open { display: none; }
.path-fold:not([open]) > summary .path-close { display: none; }
@media (max-width: 560px) {
  .path-row, .path-fold > summary { grid-template-columns: 24px minmax(0, 1fr); }
  .path-do, .path-fold > summary > .path-do { grid-column: 2; justify-content: flex-start; }
  .path-form { margin-left: var(--pad-x); }
}
@media (max-width: 700px), (pointer: coarse) {
  .path-do .btn, .path-fold > summary { min-height: var(--tap); }
  .path-do .btn { min-height: var(--tap); }
}
@media print { .path-do, .path-form { display: none !important; } }
/* The outside signer's three steps (confirm your email, read, sign): numbered, the current one
   filled and bold, a finished one checked. Then the agreement in brief before its full text. */
.signer-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: signer; font-size: var(--size-sm); color: var(--text-3); }
.signer-steps li { display: inline-flex; align-items: center; gap: 8px; counter-increment: signer; }
.signer-steps li::before { content: counter(signer); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); font-weight: 700; font-size: var(--size-xs); color: var(--text-2); }
.signer-steps li[aria-current="step"] { color: var(--text); }
.signer-steps li[aria-current="step"]::before { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.signer-steps li.done::before { content: "\2713"; border-color: var(--ok); background: var(--ok); color: var(--surface); }
.signer-start { max-width: 36rem; margin-inline: auto; }
.signer-start .panel-body { display: flex; flex-direction: column; gap: var(--space-4); }
.signer-start .signer-steps { margin: 0; }
.signer-brief { margin-bottom: var(--space-5); }
/* Once signed, what happens next comes before the agreement on a phone or tablet, not after it. */
@media (max-width: 1000px) { .contract-layout > .contract-action.is-signed { order: -1; } }
.signer-brief .pairs { grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); margin-top: 0; }
.signer-brief .pairs dd { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .signer-brief .pairs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .signer-brief .pairs dt { margin-top: var(--space-3); font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }
  .signer-brief .pairs dt:first-child { margin-top: 0; }
}
/* A show's long name in its page head breaks inside a word only when a word can't fit (enlarged text on a small phone). */
.head-with-art h1 { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.head-with-art > div { min-width: 0; }
/* A chip with a long sentence in a row wraps instead of running off a phone. */
.chip.wrap { height: auto; min-height: 22px; padding-block: 3px; white-space: normal; overflow-wrap: anywhere; }
.chip.wrap::before { flex-shrink: 0; }
/* The ways out keep a full touch target on phones: a reason to pick, an empty place's second link. */
@media (max-width: 700px), (pointer: coarse) {
  .hatch-form .choice { min-height: var(--tap); align-items: center; }
  .empty .empty-actions .link-button { min-height: var(--tap); }
}
/* A check that failed, with its fix in place ("Open the deal", "Record the count"). */
.checks .check-fix { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px), (pointer: coarse) { .checks .check-fix { min-height: var(--tap); } }
/* A choice that explains itself: its name, and under it what picking it means. */
.choice > span > b { display: block; font-weight: 600; }
.choice > span > small { display: block; margin-top: 2px; font-size: var(--size-sm); color: var(--text-2); }
/* A show line's next step from its path, with its button, under the show's dates. */
.show-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); font-size: var(--size-sm); color: var(--text-2); }
.show-next > .reason { min-width: 0; overflow-wrap: anywhere; }
.show-next .btn, .show-next form { position: relative; z-index: 1; }
@media (max-width: 700px), (pointer: coarse) { .show-next .btn { min-height: var(--tap); } }
/* A booking check-up: a few progress strips, each with a link to the shows still missing it. */
.checkup { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4) var(--space-5); }
.checkup > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.checkup a { font-size: var(--size-sm); font-weight: 600; align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 700px), (pointer: coarse) { .checkup a { min-height: var(--tap); } }
/* A notice with a heading, a sentence, and its own buttons (two records of one show). */
.notice > .notice-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; }
.notice-title { font: 600 var(--size-base)/1.35 var(--font-ui); }
.notice-body .form-actions { margin: 0; }

/* ---------- Figures, meters, and money ---------- */

.label-sm { font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }
.big { margin-top: 4px; font: 700 var(--size-xl)/1.05 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.big-note { margin-top: 2px; font-size: var(--size-sm); color: var(--text-2); }
.panel-body > .notice:not(:first-child), .tonight + .progress { margin-top: var(--space-4); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); margin: 0; }
.figures dt { font-size: var(--size-sm); color: var(--text-3); }
.figures dd { margin: 2px 0 0; font: 700 1.375rem/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figures dd small { font: 500 var(--size-sm) var(--font-ui); color: var(--text-3); letter-spacing: 0; }
.meter { height: 6px; border-radius: var(--radius-pill); background: var(--sunken); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter.thick { height: 10px; }
.progress { display: flex; flex-direction: column; gap: 6px; font-size: var(--size-sm); }
.progress .line { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); }
.split { display: flex; height: 12px; margin: var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--sunken); overflow: hidden; }
.split .own { background: var(--own); }
.split .held { background: repeating-linear-gradient(135deg, var(--held) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--held); }
/* Money that came in but isn't confirmed or in the bank yet: the own color's tint, outlined in it. */
.split .pending { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--own); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--size-sm); color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.legend .own i { background: var(--own); }
.legend .held i { background: repeating-linear-gradient(135deg, var(--held) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--held); }
.legend .pending i { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--own); }
.legend .rest i { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.legend .dashed i { width: 14px; height: 0; border-top: 2px dashed var(--held); border-radius: 0; } /* a comparison line, such as last year's pace */
.pairs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--space-4); margin: var(--space-4) 0 0; font-size: var(--size-sm); }
.pairs dt { color: var(--text-2); }
.pairs dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.in { color: var(--ok); }
/* Every amount has its dollar sign, and a negative one a true minus sign (−$60.00), never
   parentheses alone. A figure that comes out below zero is red as well. */
.neg { color: var(--danger); }

/* A statement (settlement, bar month): lines in the theater's words, a rule above each
   subtotal, a double rule under the final figure, amounts taken away shown with a minus. */
.statement { width: 100%; border-collapse: collapse; font-size: var(--size-base); }
.statement td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.statement td:last-child { padding-left: var(--space-4); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.statement .src { display: block; font-size: var(--size-sm); color: var(--text-3); }
.statement tr.section td { padding-left: 0; padding-top: var(--space-5); border-bottom: 0; font-size: var(--size-xs); font-weight: 700; color: var(--text-3); text-align: left; }
.statement tr.sub td { border-top: 1px solid var(--text-2); font-weight: 700; }
.statement tr.final td { padding-block: 14px; border-top: 1px solid var(--text); border-bottom: 3px double var(--text); font-weight: 700; }
.statement tr.final td:last-child { font: 700 var(--size-lg)/1 var(--font-display); }
.computed { color: var(--accent-ink); }

/* ---------- Shows, dates, checks, activity ---------- */

.show { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(120px, 190px); gap: var(--space-4); align-items: center; padding: var(--row-y) var(--pad-x); }
.show + .show { border-top: 1px solid var(--line); }
.panel-list { padding-block: var(--space-2); } /* a panel holding a list of shows or similar lines */
/* Like a row, a whole show line opens the show. */
.show { position: relative; transition: background var(--dur-fast) var(--ease); }
.show:hover { background: var(--surface-2); }
.show a.row-title::after { content: ""; position: absolute; inset: 0; }
.poster { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--sunken); }

/* Show art: wherever a show appears, its official graphic, so shows are known at a glance.
   Always square, so a poster shows whole or nearly so and is never sliced into a strip.
   Without a graphic, the show's two-letter monogram on its own hue (data-hue 1 to 6, kept for
   good), cut like a ticket stub so it never reads as a person. Sizes: .xs 20px (in a calendar
   night), .sm 34px (leading a row or a card), the default 48px (a show line), .lg 64px, and
   .xl 120px (the head of a show's own page). */
.show-art { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--sunken); color: var(--text-2); font: 700 1.0625rem/1 var(--font-display); letter-spacing: -0.02em; }
.show-art > img { width: 100%; height: 100%; object-fit: cover; }
.show-art[data-hue="1"] { background: var(--hue-1); color: var(--hue-1-ink); }
.show-art[data-hue="2"] { background: var(--hue-2); color: var(--hue-2-ink); }
.show-art[data-hue="3"] { background: var(--hue-3); color: var(--hue-3-ink); }
.show-art[data-hue="4"] { background: var(--hue-4); color: var(--hue-4-ink); }
.show-art[data-hue="5"] { background: var(--hue-5); color: var(--hue-5-ink); }
.show-art[data-hue="6"] { background: var(--hue-6); color: var(--hue-6-ink); }
.show-art[data-hue] { -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px) right / 51% 100% no-repeat; }
.show-art.xs { width: 20px; height: 20px; border-radius: 4px; font-size: 8px; letter-spacing: 0; }
.show-art.xs[data-hue] { -webkit-mask: none; mask: none; }
.show-art.sm { width: 34px; height: 34px; border-radius: 6px; font-size: 0.8125rem; }
.show-art.lg { width: 64px; height: 64px; font-size: 1.375rem; }
.show-art.xl { width: 120px; height: 120px; border-radius: var(--radius); font-size: 2.5rem; }
.row-lead .show-art { width: var(--row-icon); height: var(--row-icon); border-radius: 6px; font-size: 0.8125rem; }
/* A page about one show (its record, its settlement) leads its head with the show's art. */
.head-with-art { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: center; }
/* The few facts a show's head answers at a glance: sold, gross, tonight. */
.head-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--size-sm); color: var(--text-2); }
.head-facts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .head-with-art .show-art.lg { width: 48px; height: 48px; }
  .head-with-art .show-art.xl { width: 88px; height: 88px; font-size: 1.75rem; }
}
.when { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--size-sm); color: var(--text-3); }
/* At a glance: a strip of linked tiles, each one figure that matters today. */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.glance a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-4) var(--pad-x); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.glance a:hover { border-color: var(--line-strong); text-decoration: none; }
.glance .label-sm { display: flex; align-items: center; gap: 6px; }
.glance .label-sm .icon { width: 15px; height: 15px; }
.glance b { margin-top: 2px; font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.glance .line { font-size: var(--size-sm); color: var(--text-2); }
.glance .meter, .glance .split { margin: 8px 0 0; }
.glance .is-warn .line { color: var(--warn); font-weight: 600; }
/* The slim strip Today opens with on phones and narrow tablets, where its side panels would
   otherwise sit far below the work: three figures, each opening its page. */
.glance.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.glance.compact a { padding: 10px 12px; }
.glance.compact b { font-size: 1.125rem; }
.glance.compact .line { font-size: var(--size-xs); }
.glance.compact .meter { margin-top: 6px; }
@media (max-width: 380px) { .glance.compact a { padding: 8px 10px; } .glance.compact b { font-size: 1rem; } }
.tonight { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.tonight img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; }
.dates { list-style: none; margin: 0; padding: var(--space-2) var(--pad-x) var(--space-4); }
.dates li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; align-items: start; }
.dates li + li { border-top: 1px solid var(--line); }
.day { padding: 6px 0; border-radius: var(--radius-sm); background: var(--sunken); text-align: center; line-height: 1.1; }
.day b { display: block; font: 700 1.1875rem/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.day span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.day.late { background: var(--danger-soft); color: var(--danger); }
.day.late span { color: var(--danger); }
/* A date leading a row, in place of its icon. */
.row-lead .day { display: block; width: var(--row-icon); padding: 3px 0; }
.row-lead .day b { font-size: 1rem; }
.row-lead .day span { font-size: 9px; letter-spacing: 0.04em; }
.checks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--size-sm); }
.checks li { display: flex; align-items: flex-start; gap: 8px; }
.checks .done { color: var(--text-3); }
.checks .done .icon { color: var(--ok); }
.checks .open .icon { color: var(--text-3); } /* not done yet is quiet; only late is a warning */
.checks .late { color: var(--danger); font-weight: 600; }
.checks .late .icon { color: var(--danger); }
/* A checklist you tick off: one tap, with Undo. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; font-size: var(--size-sm); }
.checklist li + li { border-top: 1px solid var(--line); }
.checklist input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.show a.progress { position: relative; z-index: 1; min-height: 44px; display: flex; flex-direction: column; justify-content: center; color: var(--text-2); }
.show a.progress:hover { color: var(--accent); }
.show .chip { max-width: 100%; height: auto; min-height: 22px; padding-top: 3px; padding-bottom: 3px; white-space: normal; overflow-wrap: anywhere; }
.show .chip::before { flex-shrink: 0; }
.checklist label { cursor: pointer; }
.checklist .done label { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist small { color: var(--text-3); font-size: var(--size-xs); white-space: nowrap; }
.checklist .late small { color: var(--danger); font-weight: 700; }
.activity { list-style: none; margin: 0; padding: var(--space-3) var(--pad-x) var(--space-4); }
.activity li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); padding: 8px 0; font-size: var(--size-sm); align-items: start; }
.activity time { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- A draft waiting for a person: verdict, reasons, the draft, sources, one action ---------- */

.draft { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.verdict { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--warn-soft); font-size: var(--size-sm); }
.verdict .icon { margin-top: 1px; color: var(--warn); }
.verdict.ok { background: var(--ok-soft); } .verdict.ok .icon { color: var(--ok); }
.verdict ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
.draft-label { display: flex; align-items: center; gap: 6px; padding: var(--space-3) var(--space-4) 0; font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }
.draft-text { padding: var(--space-2) var(--space-4) var(--space-3); line-height: 1.6; overflow-wrap: break-word; }
.draft-text p + p { margin-top: 10px; }
.draft-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.sources { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: var(--size-sm); color: var(--text-3); }
.draft-foot .btn:first-of-type { margin-left: auto; }
/* A claim in a draft that a person must settle: tinted and underlined, linking to where it is
   settled. */
.claim { padding: 0 2px; border-radius: 3px; background: var(--warn-soft); color: var(--text); text-decoration: underline dotted var(--warn); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.claim:hover { color: var(--text); text-decoration-style: solid; }
/* Choices: pick one value from several, each with where it came from. */
.choices { display: flex; flex-direction: column; }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 10px 0; cursor: pointer; }
.choice + .choice { border-top: 1px solid var(--line); }
.choice input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.choice .row-meta { grid-column: 2; margin-top: 0; }

/* ---------- Conversations: the inbox, a thread, translations ---------- */

/* Chinese in Traditional Chinese faces; the UI font has none. */
:lang(yue), :lang(zh-Hant) { font-family: "Figtree", "PingFang HK", "PingFang TC", "Noto Sans HK", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
/* The conversations beside the open one. At 900px and under the open one is its own view, with
   a link back to the list; without :has() the list shows above it instead. */
.inbox { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); gap: var(--gap); align-items: start; }
.inbox-list .row[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.inbox-back { display: none; align-self: flex-start; }
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox-list { display: none; }
  .inbox-list:target { display: block; }
  .inbox:has(.inbox-list:target) .inbox-convo { display: none; }
  .inbox-back { display: inline-flex; }
  /* List and conversation on one page (the mockup): a phone starts at the list, and a
     conversation's #convo link opens it in the list's place. */
  .inbox.one-page .inbox-list { display: block; }
  .inbox.one-page .inbox-convo { display: none; }
  .inbox.one-page .inbox-convo:target { display: flex; scroll-margin-top: 72px; }
  .inbox.one-page:has(.inbox-convo:target) .inbox-list { display: none; }
}
/* One conversation's messages: the patron's on the left, ours on the right. */
.thread { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.msg { max-width: min(36rem, 92%); }
.msg.ours { align-self: flex-end; }
.msg-body { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--sunken); }
.msg.ours .msg-body { background: var(--surface); border: 1px solid var(--line-strong); }
.msg-meta { margin-top: 4px; padding: 0 var(--space-2); font-size: var(--size-xs); color: var(--text-3); }
.msg.ours .msg-meta { text-align: right; }
/* The English under a message in another language, never in its place. */
.tr { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line-strong); font-size: var(--size-sm); color: var(--text-2); }
.tr-label { display: block; font-size: var(--size-xs); font-weight: 400; color: var(--text-3); }
/* A draft in the patron's language beside its English, both editable. */
.bilingual { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3) var(--space-4); }
.bilingual .textarea { field-sizing: content; } /* grows to fit where supported; rows set the size otherwise */
/* A message's text as it arrived: its own line breaks kept, long links and numbers wrapped,
   never wider than its panel. */
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--size-sm); line-height: 1.6; color: var(--text); tab-size: 4; }
/* What a parser read from a message: the field's name, its value, and the line it came from. */
.fields-read { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.fields-read li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.fields-read li:first-child { border-top: 0; }
.fields-read b { font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
.fields-read small { font-size: var(--size-xs); color: var(--text-3); overflow-wrap: anywhere; }

.sample { margin-top: var(--space-6); font-size: var(--size-xs); color: var(--text-3); }

/* ---------- Page tools: a row of filters, views, and actions above a list ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--space-4); }
.toolbar .grow { flex: 1; }
.page.wide { max-width: var(--page-wide); }

/* ---------- More fields: affixes, money, switches, segments ---------- */

.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); }
.input-group:focus-within { outline: 2px solid var(--focus); border-color: var(--focus); }
.input-group .affix { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; color: var(--text-3); font-size: var(--size-sm); background: var(--surface-2); }
.input-group .affix:first-child { border-right: 1px solid var(--line); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .affix:last-child { border-left: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .input { border: 0; background: transparent; min-width: 0; }
.input-group .input:focus { outline: none; }
.input.money { text-align: right; font-variant-numeric: tabular-nums; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--sunken); color: var(--text-3); cursor: not-allowed; }
.input[readonly] { background: var(--surface-2); border-style: dashed; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--control); cursor: pointer; font-size: var(--size-base); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: var(--line-strong); transition: background var(--dur) var(--ease); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--dur) var(--ease); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--sunken); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 6px; color: var(--text-2); font-size: var(--size-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 0 1px var(--line); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 6px; color: var(--text-2); font-size: var(--size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 0 1px var(--line); }
/* Each segment is a full touch target on phones and touch screens (AGENTS.md rule 12). */
@media (max-width: 767px), (pointer: coarse) { .seg span, .seg a { min-height: 44px; } }

/* A picker: find a person, producer, or show the Office already knows instead of typing it. */
.combo { position: relative; }
.combo .input { padding-left: 34px; }
.combo > .icon { position: absolute; left: 11px; top: 50%; margin-top: -9px; color: var(--text-3); pointer-events: none; }
.combo-list { position: absolute; z-index: var(--z-menu); left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.combo-list li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: var(--size-sm); }
.combo-list li small { margin-left: auto; color: var(--text-3); white-space: nowrap; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--sunken); }
.combo-list .group { min-height: 0; padding: 8px 8px 4px; font-size: var(--size-xs); font-weight: 600; color: var(--text-3); cursor: default; background: none !important; }
.combo-list .create { color: var(--accent-ink); font-weight: 600; }
.combo-list mark { background: none; color: inherit; font-weight: 700; }

/* A date picker that knows the room: shows and holds on each night. */
.cal { width: 100%; max-width: 340px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font: 700 var(--size-base)/1 var(--font-display); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-grid .dow { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); }
.cal-grid button { position: relative; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 var(--size-sm)/1 var(--font-ui); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-grid button:hover { background: var(--sunken); }
.cal-grid button.out { color: var(--text-3); opacity: 0.55; }
.cal-grid button.today { box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 700; }
.cal-grid button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cal-grid button i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.cal-grid button i.mk-show { background: var(--text-2); }
.cal-grid button i.mk-hold { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); }
.cal-grid button.booked { color: var(--text-3); }
.cal-grid button[aria-pressed="true"] i { background: var(--on-accent); box-shadow: none; }
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: var(--size-xs); color: var(--text-3); }
.cal-key i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.cal-key i.mk-show { background: var(--text-2); }
.cal-key i.mk-hold { box-shadow: inset 0 0 0 1.5px var(--warn); }

/* The month: the room by night, one cell a night. Confirmed shows are solid, holds dashed with
   their rank, load-ins and rehearsals quiet, closed nights hatched. Phones read the same month
   as an agenda list (.month-agenda) instead of the grid (.month-grid). */
.month { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--size-xs); }
.month th { padding: 0 6px 6px; color: var(--text-3); font-weight: 600; text-align: left; }
.month td { height: 104px; padding: 6px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.month-day { display: block; margin-bottom: 2px; font: 700 var(--size-sm)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.month td.out { background: var(--surface-2); }
.month td.out .month-day { color: var(--text-3); }
.month td.closed { background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, transparent 6px 12px); color: var(--text-2); }
.month-ev { display: block; margin-top: 4px; padding: 3px 6px; border-radius: 4px; color: var(--text); font-size: var(--size-xs); font-weight: 600; line-height: 1.3; text-decoration: none; }
a.month-ev:hover { text-decoration: underline; text-underline-offset: 2px; }
.month-ev.show { background: var(--sunken); box-shadow: inset 3px 0 0 var(--text-2); }
.month-ev.hold { padding: 2px 5px; border: 1px dashed var(--warn); color: var(--warn); }
.month-ev.venue { color: var(--text-3); font-weight: 500; box-shadow: inset 2px 0 0 var(--line-strong); }
.month-ev small { display: block; font-weight: 500; color: var(--text-3); }
/* A night's show art sits at the start of its entry. A name too long to fit beside it moves
   under it whole rather than breaking mid-word. */
.month-ev { display: flow-root; overflow-wrap: normal; }
.month-ev > .show-art { float: left; margin: 0 5px 2px 0; }
.month-agenda li { grid-template-columns: 52px minmax(0, 1fr) 34px; }
.month-agenda li > .show-art { grid-column: 3; grid-row: 1; align-self: center; }
.month-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.month-key .month-ev { margin: 0; }
/* Calendar layers: the legend is a set of independent, native checkbox controls. */
.calendar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin: 0; padding: 0; border: 0; }
.calendar-filter { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-3); font-size: var(--size-sm); cursor: pointer; }
.calendar-filter-name { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border-left: 2px solid var(--line-strong); line-height: 1.3; }
.calendar-filter.is-on { color: var(--text); }
.calendar-filter:not(.is-on) .calendar-filter-name { text-decoration: line-through; background: transparent; border-color: transparent; color: var(--text-3); }
.calendar-filter:hover .calendar-filter-name { outline: 1px solid var(--line-strong); }
.calendar-filter:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.calendar-range-form { margin-bottom: var(--space-4); }
.calendar-range-form .form-row { max-width: 30rem; }
.calendar-range-form .field { min-width: 0; }
.calendar-range-selected { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sunken) !important; }
.schedule-date-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-1); }
/* Long ranges scroll inside their box beside the preview; phones keep one page scroll. */
@media (min-width: 901px) { .schedule-date-options { max-height: 24rem; overflow-y: auto; } }
.schedule-date-options .check { min-height: 44px; }
.schedule-date-options .check small { display: block; color: var(--text-3); font-size: var(--size-xs); line-height: 1.3; }
.schedule-time-row { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
/* The preview of an explicit batch: one row per checked date, problems in the warning ink. */
@media (min-width: 901px) { .schedule-preview { max-height: 32rem; overflow-y: auto; } }
.schedule-preview li.is-problem .row-title, .schedule-preview li.is-problem .row-meta { color: var(--warn); }
@media (max-width: 767px), (pointer: coarse) {
  [data-calendar-view] .btn, .performance-body .btn { min-height: 44px; }
  .schedule-entry .btn, .schedule-entry .check, .schedule-entry .input, .schedule-entry .select { min-height: 44px; }
  /* Every schedule entry and range opens its own record, so each is a full touch target. */
  a.month-ev, a.calendar-span, a.calendar-away { min-height: 44px; }
  .cal-grid button { height: 44px; }
}
.calendar-filter-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-3); font-size: var(--size-sm); }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3); padding: 0 var(--space-5); }
.calendar-no-details > .layout-wide { grid-template-columns: minmax(0, 1fr); }
.calendar-availability { margin-top: var(--space-2); padding-top: var(--space-1); border-top: 1px solid var(--line); }
.calendar-away { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1); color: var(--text-3); font-size: var(--size-xs); line-height: 1.4; text-decoration: none; }
.calendar-away:hover { color: var(--text); text-decoration: underline; }
.calendar-away .avatar { flex: 0 0 auto; }
.calendar-agenda-day { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.calendar-agenda-day h3 { margin-bottom: var(--space-2); }
.calendar-agenda-day .month-ev { min-height: 44px; padding: var(--space-2); }
.calendar-agenda-day .calendar-away { font-size: var(--size-sm); }
[data-calendar-view] a.month-ev { min-height: 44px; }
/* One type treatment is shared by the legend, occurrences, and continuous spans. */
.calendar-kind-performance { --calendar-ink: var(--text-2); --calendar-fill: var(--sunken); }
.calendar-kind-hold { --calendar-ink: var(--warn); --calendar-fill: var(--surface); }
.calendar-kind-rehearsal { --calendar-ink: var(--info); }
.calendar-kind-room { --calendar-ink: var(--hue-3-ink); }
.calendar-kind-period { --calendar-ink: var(--hue-5-ink); }
.calendar-kind-staff { --calendar-ink: var(--text-3); }
.calendar-kind-reminder { --calendar-ink: var(--hue-4-ink); }
.calendar-type, .month-ev.calendar-type { background: var(--calendar-fill, transparent); color: var(--text-2); border: 0; border-left: 2px solid var(--calendar-ink); box-shadow: none; }
.calendar-type.calendar-kind-performance { color: var(--text); font-weight: 600; border-left-width: 4px; }
.calendar-type.calendar-kind-hold { border: 1px dashed var(--calendar-ink); }
.calendar-type small { color: var(--text-3); font-weight: 400; }
.calendar-type.question small { color: var(--warn); }
.calendar-span { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--size-xs); line-height: 1.4; text-decoration: none; }
.calendar-span:hover { text-decoration: underline; }
.calendar-span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.month-ev.calendar-cancelled { background: transparent; border-left-width: 2px; color: var(--text-3); font-weight: 400; }
.calendar-cancelled .show-art { opacity: .5; }
.calendar-span .avatar, .calendar-span .show-art { flex: 0 0 auto; }
.calendar-span.continues-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendar-span.continues-after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.month.calendar-month .calendar-week { border: 1px solid var(--line); background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--line) 0); background-size: calc(100% / 7) 100%; }
.month.calendar-month .calendar-week td { border: 0; background: transparent; }
.month.calendar-month .calendar-date-row th { padding: 6px 6px 0; color: var(--text); }
.month.calendar-month .calendar-date-row th.out { color: var(--text-3); }
.month.calendar-month .calendar-events-row td { padding-top: 4px; }
.month tr.calendar-range-row td { height: auto; padding: 2px 6px; }
.calendar-range-row .calendar-span { background: var(--surface-2); }
.calendar-range-row .show-art { width: 18px; height: 18px; }
.month tr.calendar-range-row td:empty { padding: 0; }
.calendar-agenda-day .calendar-span { font-size: var(--size-sm); margin-top: var(--space-2); }
.calendar-production { border-left: 3px solid var(--hue-5-ink); }
.calendar-production .row-actions { grid-column: 2 / -1; justify-self: start; }
.calendar-highlight-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--size-sm); color: var(--text-2); }
.calendar-focusing [data-calendar-item] { opacity: 0.45; }
.calendar-focusing [data-calendar-item].is-related { opacity: 1; }
.calendar-focusing .calendar-production.is-related { background: var(--sunken); }
/* A performance opens its own timing and operational details without losing the list. */
.performance-list { padding: 0 var(--space-5) var(--space-3); }
.performance-list > li { padding: var(--space-3) 0; }
.performance-list .performance { margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--sunken); border-left: 4px solid var(--text-2); }
.performance > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3); cursor: pointer; }
.performance > summary::after { content: "+"; margin-left: auto; color: var(--text-3); }
.performance[open] > summary::after { content: "−"; }
.performance > summary::-webkit-details-marker { display: none; }
.performance > summary .show-art { flex: 0 0 auto; }
.performance > summary small { display: block; color: var(--text-3); font-size: var(--size-sm); font-weight: 400; }
.performance-body { padding: 0 var(--space-3) var(--space-3); }
.performance-body .consequence { background: var(--surface); }
.performance-body .actions { margin-top: var(--space-3); }
.performance:target { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .performance-list > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .performance-list > li > .day { width: auto; min-height: 0; flex-direction: row; gap: var(--space-2); justify-self: start; padding: var(--space-1) var(--space-2); }
  .performance-list > li > .day b { font-size: var(--size-md); }
  .performance-body .consequence { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .performance-body .consequence dd + dt { margin-top: var(--space-2); }
}
@media print { .calendar-focusing [data-calendar-item] { opacity: 1; } }
.month-agenda { display: none; }
.month-agenda li { position: relative; }
.month-agenda a.row-title::after { content: ""; position: absolute; inset: 0; } /* the whole night opens its show */

/* ---------- Tables: sort, select, act on many; filters as chips ---------- */

.table th .sorter { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.table th .sorter:hover { color: var(--text); }
.table th .sorter .icon { width: 13px; height: 13px; opacity: 0.5; }
.table th[aria-sort] .sorter { color: var(--text); }
.table th[aria-sort] .sorter .icon { opacity: 1; }
.table .pick { width: 32px; }
.table .pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.table tr.is-selected td { background: var(--accent-soft); }
.table td .row-title { font-size: var(--size-sm); }
.bulkbar { position: sticky; bottom: 16px; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 8px 8px 8px 16px; border-radius: var(--radius); background: var(--text); color: var(--bg); box-shadow: var(--shadow-pop); }
.bulkbar b { margin-right: auto; font-size: var(--size-sm); }
.bulkbar .btn { background: transparent; border-color: rgba(128, 128, 128, 0.55); color: var(--bg); }
.bulkbar .btn:hover { background: rgba(128, 128, 128, 0.25); }
.bulkbar .btn-primary { background: var(--bg); color: var(--text); border-color: var(--bg); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--size-sm); }
.filter-chip b { font-weight: 600; }
.filter-chip button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.filter-chip button:hover { background: var(--sunken); color: var(--text); }
/* The remove control as a link, so filters work without a script: the same round target. */
.filter-chip > a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-3); }
.filter-chip > a:hover { background: var(--sunken); color: var(--text); text-decoration: none; }
.filter-add { min-height: 30px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: 600 var(--size-sm)/1 var(--font-ui); cursor: pointer; }
.filter-add:hover { border-style: solid; color: var(--text); }

/* ---------- Overlays: menus, tooltips, dialogs, toasts, the command palette ---------- */

/* Menus are native popovers where the browser has them; office.js opens them with a class
   where it doesn't, so they are hidden until asked for either way. */
.menu { display: none; position: fixed; z-index: var(--z-menu); inset: auto; margin: 0; padding: 4px; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.menu.is-open { display: block; animation: pop var(--dur-fast) var(--ease); }
.menu:popover-open { display: block; animation: pop var(--dur-fast) var(--ease); }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: 500 var(--size-sm)/1.2 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--sunken); outline: none; text-decoration: none; }
.menu-item .icon { width: 16px; height: 16px; color: var(--text-2); }
.menu-item kbd, .menu-item small { margin-left: auto; padding-left: 12px; color: var(--text-3); font: 500 var(--size-xs) var(--font-ui); white-space: nowrap; }
.menu-item.danger, .menu-item.danger .icon { color: var(--danger); }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line); border: 0; }
.menu-label { padding: 8px 10px 4px; font-size: var(--size-xs); font-weight: 600; color: var(--text-3); }

.tip { position: fixed; z-index: var(--z-tip); top: -999px; left: 0; max-width: 260px; padding: 6px 9px; border-radius: 6px; background: var(--text); color: var(--bg); font: 500 var(--size-xs)/1.35 var(--font-ui); pointer-events: none; box-shadow: var(--shadow-pop); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.tip.is-on { opacity: 1; }
.tip kbd { margin-left: 6px; padding: 0 4px; border-radius: 3px; background: rgba(128, 128, 128, 0.35); font: inherit; }

dialog.dialog, dialog.palette { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
dialog.dialog { width: 480px; max-width: calc(100vw - 32px); }
dialog.dialog::backdrop, dialog.palette::backdrop { background: var(--scrim); }
dialog.dialog[open] { animation: pop var(--dur) var(--ease); }
dialog.is-open { display: block; position: fixed; z-index: var(--z-menu); top: 12vh; left: 50%; transform: translateX(-50%); } /* browsers without <dialog> */
.dialog-body { display: flex; flex-direction: column; gap: 12px; padding: var(--space-5); }
.dialog-body h2 { font-size: 1.375rem; }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.consequence { margin: 0; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--size-sm); }
.consequence dt { color: var(--text-3); }
.consequence dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }

.toasts { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: 440px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); box-shadow: var(--shadow-pop); font-size: var(--size-sm); pointer-events: auto; animation: rise var(--dur) var(--ease); }
.toast span { flex: 1; }
.toast button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--bg); font: 700 var(--size-sm)/1 var(--font-ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.toast button:hover { background: rgba(128, 128, 128, 0.25); }

dialog.palette { width: 560px; max-width: calc(100vw - 32px); margin-top: 12vh; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--text); font: 500 var(--size-md) var(--font-ui); }
.palette-input input:focus { outline: none; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow: auto; }
.palette-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 6px; font-size: var(--size-sm); cursor: pointer; }
.palette-list li small { margin-left: auto; color: var(--text-3); white-space: nowrap; }
.palette-list li[aria-selected="true"] { background: var(--accent-soft); }
.palette-list .group { min-height: 0; padding: 8px 10px 4px; font-size: var(--size-xs); font-weight: 600; color: var(--text-3); cursor: default; }
.palette-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: var(--size-xs); color: var(--text-3); }

/* ---------- Drag and drop, always with a way that isn't dragging ---------- */

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.lane { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 8px; border-radius: var(--radius); background: var(--sunken); transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.lane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; font-size: var(--size-sm); }
.lane-head b { font-weight: 700; }
.lane-head span { color: var(--text-3); font-weight: 600; }
.lane.is-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--size-sm); transition: border-color var(--dur-fast) var(--ease); }
.card:hover { border-color: var(--line-strong); }
.card b { display: block; font-size: var(--size-base); line-height: 1.3; }
.card .muted { font-size: var(--size-xs); }
.card .card-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A card for a show: handle, art, title, and menu along the top, its other lines under the
   art at the card's full width. */
.card.has-art { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: 2px; }
.card.has-art > .handle { grid-column: 1; grid-row: 1; }
.card.has-art > .show-art { grid-column: 2; grid-row: 1; width: 40px; height: 40px; font-size: 0.875rem; }
.card.has-art > .btn { grid-column: 4; grid-row: 1; }
.card.has-art > div:not(.card-foot) { display: contents; }
.card.has-art > div:not(.card-foot) > b { grid-column: 3; grid-row: 1; align-self: center; }
.card.has-art > div:not(.card-foot) > :not(b), .card.has-art > .card-foot { grid-column: 2 / -1; }
.card.has-art > div:not(.card-foot) > b + * { margin-top: 6px; }
.handle { display: flex; align-items: center; justify-content: center; width: 24px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); cursor: grab; touch-action: none; }
.handle:hover { background: var(--sunken); color: var(--text); }
.card.is-dragging { opacity: 0.35; }
.card.is-lifted { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-pop); }
/* A card that opens its record: the whole card is the link, with the handle and menu above it. */
.card.is-link .row-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card.is-link .handle, .card.is-link .btn { position: relative; z-index: 1; }
.drag-ghost { position: fixed; z-index: var(--z-menu); pointer-events: none; transform: rotate(-1.5deg); box-shadow: var(--shadow-pop); border-color: var(--accent); }
.drop-line { height: 3px; margin: -2px 0; border-radius: 2px; background: var(--accent); }

/* ---------- The route an approval takes ---------- */

.route { list-style: none; margin: 0; padding: 0; }
.route li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 16px; font-size: var(--size-sm); }
.route li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.route li:last-child { padding-bottom: 0; }
.route li:last-child::before { display: none; }
.route li.done::before { background: var(--accent); }
.route .who b { display: block; font-size: var(--size-base); }
.route .who span { color: var(--text-3); }
.route li[aria-current="step"] .avatar { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
.route li.done .avatar { background: var(--accent); color: var(--on-accent); }
.route time { color: var(--text-3); font-size: var(--size-xs); white-space: nowrap; }
.route .avatar-img { width: 30px; height: 30px; }

/* ---------- Documents with their state ---------- */

.docs { list-style: none; margin: 0; padding: 0; }
.doc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; }
.doc + .doc { border-top: 1px solid var(--line); }
.doc .tile { display: flex; align-items: center; justify-content: center; width: 36px; height: 42px; border-radius: 4px 10px 4px 4px; background: var(--sunken); color: var(--text-2); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
.doc .name { font-weight: 600; }
.doc .meta { font-size: var(--size-sm); color: var(--text-3); }

/* ---------- Loading: skeletons hold the shape of what is coming ---------- */

.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--sunken) 0%, var(--surface-2) 50%, var(--sunken) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skel-line { height: 12px; width: 70%; } /* a line of text held while a list loads */
.skel-line.short { width: 40%; height: 10px; margin-top: var(--space-2); }

/* ---------- Charts ---------- */

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--text-3); font: 11px var(--font-ui); }
.chart .area { fill: var(--accent-soft); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .last { fill: none; stroke: var(--held); stroke-width: 1.75; stroke-dasharray: 4 4; }
.chart .cap { stroke: var(--text-3); stroke-dasharray: 2 4; }
.chart .floor { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .floor-label { fill: var(--danger); font: 600 11px var(--font-ui); }
.chart .step { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .dot-low { fill: var(--danger); stroke: var(--surface); stroke-width: 2; }
.chart .lbl { fill: var(--text); font: 700 12px var(--font-ui); }
.chart .lbl-low { fill: var(--danger); font: 700 12px var(--font-ui); }
.chart .lbl-muted { fill: var(--text-3); font: 11px var(--font-ui); }
.chart .bar { fill: var(--accent); }
.spark { width: 72px; height: 22px; overflow: visible; }
/* On a narrow screen a chart keeps a readable size and scrolls sideways inside its own frame,
   like a wide table; .long is for a 90-day timeline. */
.chart-scroll { overflow-x: auto; }
.chart-scroll > svg { min-width: 480px; }
.chart-scroll.long > svg { min-width: 900px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; }

/* ---------- Tablet: the sidebar becomes a rail of icons ---------- */

@media (max-width: 1080px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { align-items: center; padding-inline: 8px; }
  .sidebar .brand > span, .nav-label, .nav a span, .nav .count, .sidebar-foot .who { display: none; }
  .sidebar-foot form { margin: 0; }
  .sidebar .brand { padding: 4px; }
  .nav a { justify-content: center; width: 48px; min-height: 46px; padding: 0; }
  .nav a.has-count::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .sidebar-foot { flex-direction: column; border: 0; padding: 0; }
}
/* Two columns while the side column can keep 300px; one below that. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phone: a top bar and bottom tabs ---------- */

@media (max-width: 700px) {
  :root { --size-2xl: 2rem; --pad-x: 16px; --control: var(--tap); }
  /* Leave a section reached by a link below the sticky top bar, including its safe area. */
  html { scroll-padding-top: calc(var(--space-7) + var(--space-5) + env(safe-area-inset-top, 0px)); }
  .app { display: block; }
  .sidebar { display: none; }
  .topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-2), env(safe-area-inset-right, 0px)); background: var(--nav-bg); border-bottom: 1px solid var(--line); }
  .topbar img { width: 28px; height: 29px; }
  .topbar b { font: 700 1rem/1 var(--font-display); letter-spacing: -0.02em; }
  .topbar .end { margin-left: auto; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--nav-bg); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 0 2px; border: 0; background: transparent; color: var(--text-3); font: 600 11px/1.1 var(--font-ui); text-decoration: none; cursor: pointer; }
  .tabbar a[aria-current="page"] { color: var(--accent-ink); }
  .tabbar .icon { width: 22px; height: 22px; }
  .tabbar .dot { position: absolute; top: 9px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .page { padding-block: var(--space-5) calc(92px + env(safe-area-inset-bottom, 0px)); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .page-head { margin-bottom: var(--space-5); }
  .page-head .search { display: none; }
  .show { grid-template-columns: 44px minmax(0, 1fr); }
  .show .poster { width: 44px; height: 44px; }
  .show .progress { grid-column: 2; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glance a { padding: var(--space-3) 14px; }
  .glance b { font-size: 1.375rem; }
  .month-grid, .month-key { display: none; }
  .month-agenda { display: block; }
  .solo-card { padding: var(--space-5); }
  /* On a phone the track's dots say little; one line says where the show is and what's next. */
  .stage { display: none; }
  .stage-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 0; font-size: var(--size-base); color: var(--text); }
  .stage-summary .next { flex-basis: 100%; font-size: var(--size-sm); color: var(--text-2); }
  .doc { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .doc > .chip { grid-column: 2; grid-row: 2; justify-self: start; }
  .board { grid-auto-columns: minmax(260px, 86vw); scroll-snap-type: x proximity; }
  .lane { scroll-snap-align: start; }
  .menu-item { min-height: var(--tap); }
  /* Small links and buttons keep their look but get a full-size touch area. */
  .panel-head a, .link-button, .table th .sorter, .filter-add, .btn-sm, .handle, .tabs a, .pairs a { position: relative; }
  .panel-head a::before, .link-button::before, .table th .sorter::before, .filter-add::before, .btn-sm::before, .handle::before, .tabs a::before, .pairs a::before { content: ""; position: absolute; inset: -10px -6px; }
  /* A short tab name ("Deal") still gets a 44px-wide touch area; it reaches halfway into the gap. */
  .tabs a::before { inset: -10px -12px; }
  .filter-chip button { position: relative; }
  .filter-chip button::before { content: ""; position: absolute; inset: -10px; }
  .filter-chip > a { position: relative; }
  .filter-chip > a::before { content: ""; position: absolute; inset: -10px; }
  .filter-add, .filter-chip { min-height: 36px; }
  .bulkbar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Dialogs rise from the bottom as sheets. */
  dialog.dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.dialog[open] { animation: rise var(--dur) var(--ease); }
  .dialog-foot { flex-direction: column-reverse; border-radius: 0; }
  .dialog-foot .btn { width: 100%; }
  dialog.palette { margin-top: 8px; }
}

/* ---------- Large text: when someone sets their phone's text bigger, rows still fit ---------- */

@media (max-width: 380px) {
  .row { --row-icon: 30px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs { grid-template-columns: minmax(0, 1fr); }
  .pairs dd { text-align: left; margin-bottom: 6px; }
  .toolbar > * { max-width: 100%; }
}

/* ---------- Print: every record prints as a clean document ---------- */

@media print {
  @page { margin: 16mm 14mm; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --sunken: #f2f2f2; --line: #cfcfcf; --line-strong: #999; --text: #000; --text-2: #222; --text-3: #444; --accent: #000; --accent-ink: #000; --accent-soft: #eee; --logo-light: block; --logo-dark: none; color-scheme: light; }
  body { font-size: 10.5pt; }
  .sidebar, .topbar, .tabbar, .no-print, .btn, .row-actions, .more, .toasts, .tip, .bulkbar, .filters, .toolbar, .tabs, .search, .menu, dialog { display: none !important; }
  .app { display: block; min-height: 0; }
  .page { padding: 0; max-width: none; }
  .page-head { margin-bottom: 12pt; }
  .layout { display: block; }
  .stack { gap: 12pt; }
  .panel { border: 0; border-radius: 0; overflow: visible; }
  .panel-head, .panel-body, .panel-foot { padding-left: 0; padding-right: 0; }
  .panel-head h2, .statement tr.section { break-after: avoid; }
  .statement tr, .table tr, .row { break-inside: avoid; }
  h1 { font-size: 20pt; }
  .statement { font-size: 10pt; }
  .statement td { padding: 3.5pt 0; }
  .statement .src { font-size: 8.5pt; }
  .mail-text { font-size: 9.5pt; }
  .statement tr.section td { padding-top: 10pt; }
  .statement tr.final td { padding-block: 6pt; }
  .print-only { display: block; }
  a { color: inherit; text-decoration: none; }
  /* High contrast that reads in black and white; color may print, but nothing depends on it. */
  .chip { border: 1px solid currentColor; background: none !important; }
  .panel-head a { display: none; }
  .split .own { background: #000; }
  /* The run sheet on paper: two columns and tighter lists, so the door copy fits one page,
     listing only what is still open. */
  .runsheet { --pad-x: 0px; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18pt; align-items: start; }
  .runsheet .row { --row-icon: 24px; min-height: 0; padding-top: 3pt; padding-bottom: 3pt; }
  .runsheet .stack { gap: 8pt; }
  .runsheet .panel-head { padding-top: 0; }
  .runsheet .panel-body { padding-top: 4pt; padding-bottom: 4pt; }
  .runsheet .rows, .runsheet .dates, .runsheet .activity { padding-top: 2pt; padding-bottom: 2pt; }
  .runsheet .dates li { padding: 2pt 0; grid-template-columns: 40pt minmax(0, 1fr); align-items: center; }
  .runsheet .dates .row-title, .runsheet .dates .row-meta { display: inline; font-size: 9.5pt; }
  .runsheet .dates .row-meta::before { content: " · "; }
  .runsheet .day { padding: 1pt 0; }
  .runsheet .day b { display: inline; font-size: 10pt; }
  .runsheet .day span { margin-left: 2pt; }
  .runsheet .checklist li, .runsheet .activity li { padding: 2pt 0; }
  .runsheet .checklist li.done { display: none; }
  .runsheet .figures dd { font-size: 14pt; }
  .runsheet .row-meta { margin-top: 0; }
}

/* ==========================================================================
   The app's own additions (the implementation session). Each is also on the
   reference page; the design session edits everything above this line.
   ========================================================================== */

/* A one-line form at the foot of a panel: type a line, press Add. */
.add-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.add-line .input:not(.fit) { flex: 1 1 14rem; min-width: 0; }
.add-line .input.fit { flex: 0 1 auto; }

/* A group of fields that can be switched off together (read-only for those who can't change it),
   and a field whose choices are radios, labeled by its legend. Neither draws a box of its own. */
fieldset.form-row, fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }

/* A one-button form that sits inside a sentence, such as Undo in the activity list. */
form.inline { display: inline; margin: 0; }

/* A small form that opens from a row's button, such as marking a shared account checked. */
.menu.check-menu { padding: var(--space-4); width: min(320px, calc(100vw - 16px)); }

/* Pickers inside a row's actions (who holds a role, who holds an obligation) never push past
   the row; under the words on a narrow list they take the row's width. */
.row-actions .select { max-width: 100%; min-width: 0; }
.row-actions:has(.select) { flex-wrap: wrap; }
.rows.is-narrow .row-actions .select.fit { width: 100%; }

/* A server message after a change: a notice at the top of the page without script, a toast with it. */
.notice.flash { align-items: center; margin-bottom: var(--space-4); }
.notice.flash span { flex: 1; min-width: 0; }
.notice.flash .link-button { flex: none; }

/* Someone with no name yet shows as their address, which has no spaces to wrap at: it breaks
   anywhere rather than running under the sign-out button. */
.sidebar-foot .who { overflow-wrap: anywhere; }
.sidebar-foot form { flex: none; }

/* A picker sized to its longest choice (someone's long address) never grows past its column. */
.input.fit, .select.fit { max-width: 100%; }

/* A dated line about a show carries the show's art on its right, as the calendar's agenda does. */
.dates li.has-art { grid-template-columns: 52px minmax(0, 1fr) 34px; }
.dates li.has-art > .show-art { grid-column: 3; grid-row: 1; align-self: center; }

/* A step the show passed without finishing (a contract still unsigned), in the phone stage line's pips. */
.pips i.blocked { background: var(--danger); }

/* A link in a panel's foot, and a small "more" toggle under a line, get the same full touch
   area on phones as the other small links. */
@media (max-width: 700px) {
  .panel-foot a, details > summary.small { position: relative; }
  .panel-foot a::before, details > summary.small::before { content: ""; position: absolute; inset: -14px -6px; }
}

/* A link in a page's eyebrow (back to the page above) gets the same full touch area on phones
   as the other small links. */
@media (max-width: 700px) {
  .eyebrow a { position: relative; }
  .eyebrow a::before { content: ""; position: absolute; inset: -10px -6px; }
}

/* The navigation rail scrolls on short screens (a 1024×768 tablet held sideways), so the
   last modules and the sign-out button stay reachable as the Office grows. */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }

/* Contracts: a complete readable packet, with the next action beside it. Signers and staff
   open agreements on tablets as often as at a desk, so every control keeps the touch size. */
.contract-page, .contract-shell { --control: var(--tap); }
.contract-page .form-row > .form-actions { align-self: end; }
.contract-shell { width: min(1240px, 100%); margin: 0 auto; padding: var(--space-6); }
.contract-brand { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-7); }
.contract-brand .brand { padding: 0; }
.contract-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.contract-layout > *, .contract-shell .field, .contract-shell .form-row { min-width: 0; }
.contract-paper { padding: var(--space-7); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.contract-paper h2 { font-size: var(--size-xl); margin: var(--space-2) 0 var(--space-5); }
.contract-paper h3 { font-size: var(--size-md); margin: var(--space-6) 0 var(--space-3); }
.contract-paper p { line-height: 1.7; }
.contract-copy { white-space: pre-wrap; font: inherit; line-height: 1.7; overflow-wrap: anywhere; }
.contract-paper .pairs { margin: var(--space-5) 0; }
.contract-action { position: sticky; top: var(--space-5); }
.contract-action .form { gap: var(--space-4); }
.contract-action h2 { margin: 0; }
.contract-action .check { align-items: flex-start; min-height: 44px; }
.contract-action .check input { flex: none; margin-top: 4px; }
.contract-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.contract-nav a { display: inline-flex; min-height: 44px; align-items: center; padding: var(--space-2) var(--space-3); border-radius: 8px; }
.contract-nav a[aria-current] { background: var(--sunken); color: var(--text); font-weight: 600; }
.contract-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: var(--space-5); }
.contract-status > div { padding: var(--space-4); border-right: 1px solid var(--line); min-width: 0; }
.contract-status > div:last-child { border-right: 0; }
.contract-status b, .contract-status small { display: block; }
.contract-status b { margin: var(--space-2) 0; font-size: var(--size-md); }
.contract-status small { color: var(--text-2); }
.contract-people { list-style: none; padding: 0; margin: 0; }
.contract-people li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.contract-people li:last-child { border-bottom: 0; }
.contract-people .row-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.contract-people .row-meta { display: block; }
.contract-document { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.contract-document > div { min-width: 0; overflow-wrap: anywhere; }
.contract-document small { display: block; color: var(--text-2); }
.contract-section { scroll-margin-top: var(--space-5); }
/* A quoted passage found by search, read in place before its citation. */
.contract-excerpt { margin: var(--space-1) 0; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }
.contract-excerpt b { color: var(--text); font-weight: 650; }
.contract-reveal { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.contract-reveal > summary { min-height: 44px; padding: var(--space-3) 0; cursor: pointer; font-weight: 600; }
.contract-reveal > :not(summary) { margin-top: var(--space-3); }
.contract-pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.contract-focus { max-width: 820px; margin: 0 auto; }
.contract-focus .contract-paper { border-radius: 0; }
.contract-stepbar { display: flex; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.contract-stepbar b { color: var(--accent-ink); }
.contract-sections { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); }
.contract-sections .contract-nav { flex-direction: column; align-self: start; position: sticky; top: var(--space-5); }
.contract-error { color: var(--danger); }
.contract-empty { padding: var(--space-7); text-align: center; }
.contract-form-section + .contract-form-section { border-top: 1px solid var(--line); padding-top: var(--space-5); margin-top: var(--space-5); }
.contract-form-section legend { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 700; padding: 0 0 var(--space-4); }
.contract-form-section { border: 0; padding: 0; min-width: 0; }
.contract-recipient { border: 1px solid var(--line); border-radius: 8px; padding: var(--space-4); margin-bottom: var(--space-4); }
.contract-recipient .form-row { margin-bottom: var(--space-3); }
.contract-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.contract-state { max-width: 640px; margin: var(--space-7) auto; }
.contract-state .panel-body { padding: var(--space-6); }
.contract-state h1 { font-size: var(--size-xl); }
.contract-history { list-style: none; margin: 0; padding: 0; }
.contract-history li + li { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--line); }
.contract-history p { margin: var(--space-2) 0 0; }
.contract-status a { display: inline-flex; min-height: 44px; align-items: center; }
.contract-recipient > .field, .contract-recipient [data-signer-staff] { margin-bottom: var(--space-3); }
@media (max-width: 1000px) {
  .contract-layout { grid-template-columns: minmax(0, 1fr); }
  .contract-action { position: static; }
  .contract-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-status > div:nth-child(2) { border-right: 0; }
  .contract-status > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .contract-shell { padding: var(--space-4); }
  .contract-brand { margin-bottom: var(--space-5); align-items: flex-start; }
  .contract-brand > .btn { flex: none; }
  .contract-paper { padding: var(--space-5); }
  .contract-paper h2 { font-size: var(--size-lg); }
  .contract-sections { display: block; }
  .contract-sections .contract-nav { position: static; flex-direction: row; }
  .contract-status > div { padding: var(--space-3); }
  .contract-status b { font-size: var(--size-base); }
  .contract-shell .btn { min-height: 44px; }
  .contract-shell .form-actions { align-items: stretch; }
  .contract-stepbar { gap: var(--space-3); flex-wrap: wrap; }
}
@media print {
  .contract-brand, .contract-action, .contract-nav, .contract-stepbar { display: none; }
  .contract-shell, .contract-paper { width: 100%; padding: 0; border: 0; }
  .contract-layout, .contract-sections { display: block; }
  .contract-paper { color: #000; background: #fff; }
}

/* ==========================================================================
   Helping, not data entry (October 30, 2026). The shared pieces every screen uses to
   prefill what the record knows, show the Office's guess with its reason, explain terms
   in place, and never leave a dead end. The rules are SYSTEM.md, "Helping, not data
   entry"; each piece is on the reference page under "Helping". The server side is
   Web/Helping.cs and the partials in Pages/Shared.
   ========================================================================== */

/* ---------- The searchable picker ----------
   <select data-picker> stays a plain select without script (suggested options first, in an
   optgroup). office.js puts a button in its place that opens a search box and the list:
   type to filter, Suggested and Recent at the top, the keyboard throughout, and on phones
   a full-screen sheet so the keyboard never covers the choices. */
.picker { position: relative; min-width: 0; }
.picker-field { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--control); padding: 0 34px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit; text-align: left; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: right 16px top 50%, right 11px top 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.picker-field:hover { border-color: var(--text-3); }
.picker-field:focus-visible, .picker.is-open .picker-field { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-value.is-empty { color: var(--text-3); }
.picker-field small { flex: none; color: var(--text-3); font-size: var(--size-sm); white-space: nowrap; }
.picker-panel { position: absolute; z-index: var(--z-menu); left: 0; right: 0; top: 100%; margin-top: 4px; display: flex; flex-direction: column; min-width: min(320px, calc(100vw - 32px)); max-height: min(440px, 70vh); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop var(--dur-fast) var(--ease); }
.picker-panel.is-up { top: auto; bottom: 100%; margin: 0 0 4px; }
.picker-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.picker-search { flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--text); font: inherit; }
.picker-search:focus { outline: none; }
.picker-head:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.picker-title, .picker-close { display: none; }
.picker-panel .combo-list { position: static; flex: 1; min-height: 0; margin: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; overscroll-behavior: contain; }
.combo-list li > span:not(.label) { display: flex; flex-direction: column; min-width: 0; }
.combo-list li .label { overflow-wrap: anywhere; }
.combo-list li .reason { font-size: var(--size-xs); color: var(--text-3); }
/* The value chosen now: bold, with the same left rule as the open conversation in a list. */
.combo-list li.is-chosen { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.combo-list .note { min-height: 0; padding: 8px; font-size: var(--size-xs); color: var(--text-3); cursor: default; background: none !important; }
.combo-list .create { border-top: 1px dashed var(--line); margin-top: 2px; }
.combo-list .create .icon { color: var(--accent-ink); }
.picker-scrim { display: none; }
@media (max-width: 700px), (pointer: coarse) {
  .combo-list li { min-height: var(--tap); }
}
/* On a phone the open picker is a sheet over the whole screen: its title, the search, and the
   list, with Close at the top where a thumb reaches it and the keyboard can't cover it. */
@media (max-width: 700px) {
  .picker-panel { position: fixed; inset: 0; z-index: var(--z-toast); margin: 0; min-width: 0; max-height: none; border: 0; border-radius: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); animation: rise var(--dur) var(--ease); }
  .picker-panel.is-up { inset: 0; margin: 0; }
  .picker-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0 16px; font: 700 var(--size-md)/1.2 var(--font-display); color: var(--text); }
  .picker-close { display: inline-flex; }
  .picker-head { margin: 8px 12px; padding: 0 8px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
  .picker-head:focus-within { box-shadow: none; outline: 2px solid var(--focus); border-color: var(--focus); }
  .picker-search { min-height: var(--tap); font-size: 16px; } /* 16px keeps iPhones from zooming in */
  .picker-panel .combo-list { padding: 0 8px 16px; }
  .combo-list li { font-size: var(--size-base); }
}

/* ---------- The Office's guess: what it thinks, why, and one tap to use it ----------
   The draft's motif (SYSTEM.md, "Draft"): the dragon and how sure it is, the headline, each
   field it would fill with its reason and source, then Use this and Change. */
.guess { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.guess-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--size-sm); color: var(--text-2); }
.guess-head .avatar-img { width: 20px; height: 20px; }
.guess-head b { color: var(--text); font-weight: 600; }
.guess-head .sureness { margin-left: auto; }
.guess-body { padding: var(--space-4); }
.guess-headline { font: 700 var(--size-lg)/1.25 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.guess-note { margin-top: 4px; font-size: var(--size-sm); color: var(--text-2); }
.guess-fields { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 0 var(--space-4); margin: var(--space-4) 0 0; font-size: var(--size-sm); }
.guess-fields dt, .guess-fields dd { padding: 9px 0; border-top: 1px solid var(--line); }
.guess-fields dt { color: var(--text-3); }
.guess-fields dd { margin: 0; min-width: 0; }
.guess-fields dd b { display: block; font-size: var(--size-base); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.guess-fields .why-line { display: block; margin-top: 2px; color: var(--text-2); }
.guess-fields .source { display: block; margin-top: 2px; font-size: var(--size-xs); color: var(--text-3); }
.guess-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.guess-foot .hint { flex-basis: 100%; }
@media (max-width: 520px) {
  .guess-fields { grid-template-columns: minmax(0, 1fr); }
  .guess-fields dt { padding-bottom: 0; }
  .guess-fields dd { padding-top: 2px; border-top: 0; }
  .guess-foot .btn-primary { flex: 1 1 100%; min-height: var(--tap); }
}
/* A record's head with its figure: the name, and the amount big beside it (under it when narrow). */
.panel-head.head-figure { flex-wrap: wrap; align-items: baseline; }
.panel-head.head-figure .big { margin: 0; white-space: nowrap; }
@media (max-width: 700px), (pointer: coarse) {
  .guess-fields .source a { position: relative; }
  .guess-fields .source a::before { content: ""; position: absolute; inset: -14px -6px; }
}
/* How sure, as words and a shape: three bars, filled by how sure the Office is. Never a percent. */
.sureness { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sureness i { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sureness i::before, .sureness i::after, .sureness i b { content: ""; display: block; width: 4px; border-radius: 1px; background: var(--line-strong); }
.sureness i::before { height: 6px; }
.sureness i b { height: 9px; }
.sureness i::after { height: 12px; }
.sureness[data-level="1"] i::before, .sureness[data-level="2"] i::before, .sureness[data-level="2"] i b, .sureness[data-level="3"] i::before, .sureness[data-level="3"] i b, .sureness[data-level="3"] i::after { background: var(--text-2); }
/* A field the Office filled in, and why, under it. */
.suggested-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--size-sm); color: var(--text-2); }
.suggested-note .avatar-img { width: 16px; height: 16px; margin-top: 2px; }
.field.is-filled .input, .field.is-filled .select, .field.is-filled .picker-field { border-color: var(--accent); }

/* ---------- Next step: what to do now, one primary action, and the ways out ---------- */
.next-step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--pad-x) var(--space-4) calc(var(--pad-x) - 3px); border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.next-step h2 { font-size: var(--size-lg); overflow-wrap: anywhere; }
.next-step > p:not(.label-sm) { color: var(--text-2); }
.next-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.hatches { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--size-sm); }
.hatches > li { min-width: 0; }
.hatches > li > a, .hatches > li > form > .link-button, .hatch > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--text-2); font-weight: 600; text-decoration: none; cursor: pointer; }
.hatches > li > a:hover, .hatches > li > form > .link-button:hover, .hatch > summary:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.hatches .link-button { color: var(--text-2); }
.hatch > summary { list-style: none; }
.hatch > summary::-webkit-details-marker { display: none; }
.hatch > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.hatch[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.hatch[open] { flex-basis: 100%; }
.hatch-form { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-1) 0 var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.hatch-form .choices { gap: 0; }
.hatch-form .choice { padding: 6px 0; }
@media (max-width: 700px), (pointer: coarse) {
  .hatches > li > a, .hatches > li > form > .link-button, .hatch > summary { min-height: var(--tap); }
  .next-step-actions .btn { min-height: var(--tap); }
}
@media (max-width: 520px) { .next-step-actions .btn-primary { flex: 1 1 100%; } }

/* ---------- Help in context: one or two plain sentences, and a link to the whole story ---------- */
details.help { font-size: var(--size-sm); }
details.help > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--accent-ink); font-weight: 600; cursor: pointer; list-style: none; }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary .icon { width: 15px; height: 15px; }
.help-body { margin: 4px 0 var(--space-2); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); color: var(--text-2); line-height: 1.6; }
.help-body p + p, .help-body p + a { margin-top: 6px; }
.help-body a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
details.help + details.help { margin-top: var(--space-1); }
details.help + p, details.help + .hint { margin-top: var(--space-2); }
/* A panel that opens: the less common path (Change it, under the Office's guess), closed until asked for. */
details.panel-fold > summary.panel-head { list-style: none; flex-wrap: wrap; min-height: var(--tap); align-items: center; padding-bottom: var(--pad-y); cursor: pointer; }
/* The title and its + stay on one line; a note under the title takes its own line when it must. */
details.panel-fold > summary.panel-head > :not(h2) { order: 3; flex: 1 1 100%; }
@media (min-width: 701px) { details.panel-fold > summary.panel-head > :not(h2) { order: 0; flex: 0 1 auto; margin-left: auto; } }
details.panel-fold > summary.panel-head::-webkit-details-marker { display: none; }
details.panel-fold > summary.panel-head::after { content: "+"; order: 2; margin-left: auto; padding-left: var(--space-3); font-size: var(--size-lg); line-height: 1; color: var(--text-3); }
@supports selector(:has(a)) {
  @media (min-width: 701px) { details.panel-fold > summary.panel-head:has(> :not(h2))::after { margin-left: 0; } }
}
details.panel-fold[open] > summary.panel-head::after { content: "−"; }
details.panel-fold[open] > summary.panel-head { padding-bottom: 0; }
details.panel-fold > summary.panel-head:hover h2 { color: var(--accent-ink); }
@media (max-width: 700px), (pointer: coarse) { details.help > summary, .help-body a { min-height: var(--tap); } }
/* A help article: plain reading width, headings in the display face, lists that breathe. */
.prose { max-width: 68ch; font-size: var(--size-md); line-height: 1.65; color: var(--text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); font-size: 1.375rem; }
.prose h3 { margin-top: var(--space-5); font-size: var(--size-md); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); overflow-wrap: anywhere; }
.prose blockquote { margin-left: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--sunken); font-size: 0.9em; }

/* ---------- Draft an email: prefilled, editable, sent only on a click, or copied instead ---------- */
.compose .panel-body { display: flex; flex-direction: column; gap: var(--space-4); }
.compose-from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--size-sm); color: var(--text-2); }
.compose-from b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.compose .textarea.compose-body { min-height: 240px; line-height: 1.6; field-sizing: content; }
.compose-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.compose-files .check { align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--size-sm); }
.compose-files .check span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.compose-files .check small { color: var(--text-3); white-space: nowrap; }
.compose-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.compose-foot .why { flex-basis: 100%; }
@media (max-width: 520px) { .compose-foot .btn { flex: 1 1 100%; min-height: var(--tap); } }

/* ---------- Empty states: what this place is for, and the next thing to do ---------- */
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--sunken); color: var(--text-2); }
.empty.is-done .empty-icon { background: var(--ok-soft); color: var(--ok); }
.empty .empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--size-sm); }
.empty .empty-actions .btn { margin-top: 0; }

/* ---------- How far along: a figure, its whole, and a bar or steps ---------- */
.progress-strip { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--size-sm); }
.progress-strip .line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; color: var(--text-2); }
.progress-strip .line b { font: 700 var(--size-md)/1.2 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.progress-strip .line b small { font: 500 var(--size-sm) var(--font-ui); color: var(--text-3); }
.progress-strip .note { color: var(--text-3); }
.meter.steps { display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 3px; height: 8px; background: none; border-radius: 0; }
.meter.steps > i { border-radius: 2px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.meter.steps > i.done { background: var(--accent); box-shadow: none; }
.meter > span.over { background: var(--warn); }

/* ---------- Rows you can pick, to act on several at once ---------- */
.row > .row-pick { position: absolute; left: var(--pad-x); top: var(--row-y); display: grid; place-items: center; width: var(--row-icon); height: var(--row-icon); }
.row-pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.row.is-picked { background: var(--accent-soft); }
@media print { .guess-foot, .next-step-actions, .hatches, details.help, .compose { display: none !important; } }

/* ==========================================================================
   Payments (October 30, 2026; docs/proposals/collections-2026-10-30): what came in,
   what it pays, and when it reached the bank. A show's Payments tab and Money, Incoming.
   ========================================================================== */

/* The money strip under a show's head: rent in the bank (solid), arrived but not confirmed or
   in the bank (tinted, outlined), the security deposit held for the producer (hatched), and
   what is still to come (the track). */
.pay-strip { max-width: 680px; margin: var(--space-4) 0 var(--space-5); }
.pay-strip .split { margin: 0 0 var(--space-2); }

/* Adding what came in: take a photo, drop a file on the box, or use a producer's email. */
.drop { position: relative; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop > .icon { width: 28px; height: 28px; color: var(--accent-ink); }
.drop p b { display: block; }
.drop p span { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--size-sm); }
.drop .form-actions { justify-content: center; }
label.btn { cursor: pointer; }
label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A payment as read: the kept file, then each field with where it was read and a chip saying
   whether it is clear or needs checking. */
.read { display: grid; gap: var(--space-4); }
.read-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--size-sm); color: var(--text-2); }
.read-file > .icon { flex: none; color: var(--text-3); }
.read-file b { color: var(--text); overflow-wrap: anywhere; }
.read .fields-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); column-gap: var(--space-5); margin: 0; }
.read .fields-read li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: start; border-top: 1px solid var(--line); }
.read .fields-read li > :not(.chip) { grid-column: 1; }
.read .fields-read li > .chip { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* A suggested match: the money that came in beside what it pays, each part with its amount. */
.pair { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
.pair > div { flex: 1 1 13rem; min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.pair > div + div { box-shadow: inset 3px 0 0 var(--accent); }
.pair .label-sm { display: flex; align-items: center; gap: 6px; }
.pair .label-sm .icon { width: 14px; height: 14px; }
.pair .amt { margin-top: var(--space-1); font: 700 var(--size-lg)/1.2 var(--font-display); font-variant-numeric: tabular-nums lining-nums; }
.parts { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--size-sm); }
.parts li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; }
.parts li + li { border-top: 1px dashed var(--line); }
.parts b { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.parts small { display: block; color: var(--text-3); }
.pair-remember { padding: 0 var(--space-4) var(--space-3); }
.draft + .draft { margin-top: var(--space-4); }
.verdict-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-weight: 700; }

/* Each payment on the schedule as a three-step track: requested, paid, in the bank. */
.pay-track { padding: var(--space-5) var(--pad-x); }
.pay-track + .pay-track { border-top: 1px solid var(--line); }
.pay-track h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-3); margin-bottom: var(--space-4); }
.pay-track h3 span { color: var(--text-3); font-weight: 500; font-size: var(--size-sm); }
.pay-track .stage { --steps: 3; }
.pay-track .row-meta { margin-top: var(--space-3); }

/* Ways to pay, with what each costs the theater as a figure and a bar. */
.fees { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fees li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); font-size: var(--size-sm); }
.fees li b { font-size: var(--size-base); }
.fees li .num { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fees .meter { grid-column: 1 / -1; }
.fees .meter > span { min-width: 3px; background: var(--text-3); }
.fees small { grid-column: 1 / -1; color: var(--text-3); }

/* What a bank line on Incoming belongs to, after an arrow; in the danger color when it went wrong. */
.belongs { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--size-sm); color: var(--text); }
.belongs .icon { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--accent-ink); }
.belongs b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.belongs.trouble .icon { color: var(--danger); }

/* A producer's statement: what was asked and what was paid, with a running balance. Lines that
   arrived and wait to be confirmed are tinted and carry no balance. Phones stack each line. */
.statement.ledger thead th { padding: 0 0 8px; border-bottom: 1px solid var(--line-strong); color: var(--text-3); font-size: var(--size-xs); font-weight: 600; text-align: left; }
.statement.ledger thead th.money { text-align: right; }
.statement.ledger td.date { width: 6.5rem; padding-right: var(--space-3); color: var(--text-2); white-space: nowrap; font-size: var(--size-sm); }
.statement.ledger td.money { padding-left: var(--space-4); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.statement.ledger td.bal { color: var(--text-2); }
.statement.ledger tr.pending td { background: var(--accent-soft); }
.statement.ledger tr.pending td:first-child { padding-left: var(--space-2); }
.statement.ledger tr.pending td:last-child { padding-right: var(--space-2); }
@media (max-width: 600px) {
  .statement.ledger, .statement.ledger tbody { display: block; }
  .statement.ledger thead { display: none; }
  .statement.ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .statement.ledger tr.pending { padding-inline: var(--space-2); background: var(--accent-soft); }
  .statement.ledger td, .statement.ledger tr.final td { padding: 0; border: 0; }
  .statement.ledger tr.final { border-top: 1px solid var(--text); border-bottom: 3px double var(--text); }
  .statement.ledger td.date { grid-column: 1 / -1; width: auto; font-size: var(--size-xs); }
  .statement.ledger td.what { grid-column: 1; grid-row: 2 / span 2; }
  .statement.ledger td.amt { grid-column: 2; grid-row: 2; }
  .statement.ledger td.bal { grid-column: 2; grid-row: 3; font-size: var(--size-sm); }
  .statement.ledger td.bal:not(:empty)::before { content: "Balance "; color: var(--text-3); font-size: var(--size-xs); }
}

/* The checks to take to the bank, printed as a list with its total. */
.deposit-list { width: 100%; border-collapse: collapse; }
.deposit-list td { padding: 6pt 0; border-bottom: 1px solid var(--line); }
.deposit-list td:last-child { padding-left: var(--space-4); text-align: right; white-space: nowrap; }
.deposit-list tr.total td { border-top: 1px solid var(--text); border-bottom: 3px double var(--text); font-weight: 700; }
.panel-body > .empty { padding-inline: 0; }
.anchor { scroll-margin-top: 72px; }

/* ==========================================================================
   Correspondence and records (October 31, 2026): Support, Mail, Documents, Grants, and
   Paperwork, composed from the helping pieces above. Only what they lacked is here.
   ========================================================================== */

/* An action that opens its own small form in place (Hand it over, Done with proof): the
   summary is drawn as a button, and the form opens beneath it. */
details.act > summary { list-style: none; }
details.act > summary::-webkit-details-marker { display: none; }
details.act[open] > summary { margin-bottom: var(--space-2); }
details.act > .hatch-form { margin-top: 0; }
@media print { details.act { display: none; } }

/* Chips that pick what a list shows (Paperwork's kinds): full touch targets on phones. */
@media (max-width: 700px) { .filters.picks > .filter-chip { min-height: 44px; } }

/* ==========================================================================
   People, access, and the Office's own settings (October 31, 2026). Composed from the
   tokens and the helping pieces above; each piece is on the reference page under
   "People and settings".
   ========================================================================== */

/* ---------- A setting: what it changes, its value, and its default ---------- */
.settings-search { margin-bottom: var(--space-5); }
.settings-search .input { flex: 1 1 16rem; }
.settings-notice { margin-bottom: var(--space-5); }
.settings-form .notice { margin: var(--space-4) var(--pad-x) 0; }
.settings-list { padding: var(--space-2) var(--pad-x) var(--space-3); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: var(--space-2) var(--space-5); align-items: start; padding: var(--space-4) 0; scroll-margin-top: var(--space-6); }
.setting + .setting { border-top: 1px solid var(--line); }
.setting.wide { grid-template-columns: minmax(0, 1fr); }
.setting-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.setting-text label, .setting-text .label { font-size: var(--size-base); font-weight: 600; }
.setting-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: var(--size-sm); color: var(--text-2); }
.setting-control { align-self: center; }
.setting.wide .setting-control { align-self: stretch; }
.setting-control .switch { justify-content: flex-end; }
.setting-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 var(--space-4); }
.setting-checks .check small { display: block; }
.setting:target { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--focus); padding-left: var(--space-3); margin-left: calc(-1 * var(--space-3)); }
.setting-now { max-width: 16rem; color: var(--text-2); font-size: var(--size-sm); text-align: right; overflow-wrap: anywhere; }
/* A section inside a panel that opens in place: Fine-tuning, a stretch of time away, a key's
   setup. (A whole panel that opens is the helping details.panel.panel-fold.) */
.settings-tuning, .section-fold { border-top: 1px solid var(--line); padding: 0 var(--pad-x) var(--space-2); }
.settings-tuning > summary, .section-fold > summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding-block: var(--space-2); font-weight: 600; cursor: pointer; }
.section-fold > summary .icon { flex: none; color: var(--text-3); }
.section-fold[open] { padding-bottom: var(--space-5); }
.section-fold > .form { margin-top: var(--space-2); }
.settings-tuning > .hint { margin-top: -4px; }
.settings-tuning .settings-list { padding-inline: 0; }
.settings-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
@media (max-width: 640px) {
  .setting { grid-template-columns: minmax(0, 1fr); }
  .setting-control .switch { justify-content: flex-start; }
  .setting-now { text-align: left; }
}
@media (max-width: 700px), (pointer: coarse) {
  .setting-meta .link-button { min-height: var(--tap); }
}

/* ---------- People: who can sign in, and what each role can do ---------- */
.people-lede { padding-bottom: 0; color: var(--text-2); font-size: var(--size-sm); }
.people-lede > * + * { margin-top: var(--space-2); }
.people-picks .row-pick { cursor: pointer; }
.people-address { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.people-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.people-roles { display: grid; gap: 4px; margin: 0; }
.people-roles dt { font-weight: 600; }
.people-roles dd { margin: 0 0 var(--space-3); color: var(--text-2); font-size: var(--size-sm); }
.people-roles dd:last-child { margin-bottom: 0; }
.people-roles-foot { padding-top: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.people-gaps { margin-top: var(--space-3); }
@media (max-width: 700px), (pointer: coarse) {
  .people-picks .row { --row-icon: 44px; }
}
/* Keys and connections: one card per service, with what it does and how to set it up. */
.connection .panel-head { align-items: center; flex-wrap: wrap; }
.connection .panel-head h2 { display: flex; align-items: center; gap: 10px; }
.connection .panel-head h2 .icon { color: var(--text-3); }
.connection-body { display: flex; flex-direction: column; gap: var(--space-3); }
.connection-body .pairs { margin: 0; }
.connection-body .pairs dd { font-weight: 500; overflow-wrap: anywhere; }
.connection-without, .connection-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--size-sm); color: var(--text-2); }
.connection-without .icon, .connection-check .icon { flex: none; margin-top: 2px; }
.connection-without .icon { color: var(--warn); }
.connection-check.is-ok .icon { color: var(--ok); }
.connection-check.is-bad { color: var(--danger); font-weight: 600; }
.connection-check.is-bad .muted { font-weight: 400; }
.connection-steps { margin: var(--space-2) 0 var(--space-4); font-size: var(--size-base); color: var(--text); }
.connection-remove { margin-top: var(--space-2); }
.connection-retired h2 { font-size: var(--size-md); color: var(--text-2); }

/* Passwords: setting up, unlocking, and requests. */
.vault-lock-state { margin-top: var(--space-3); }
.vault-setup { margin-bottom: var(--space-5); }
ol.vault-setup-steps { list-style: none; }
.vault-setup-meter { display: flex; gap: 4px; margin-top: 8px; }
.vault-setup-meter i { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--sunken); }
.vault-setup-meter i.done { background: var(--accent); }
@media (max-width: 700px), (pointer: coarse) { .choices .choice { min-height: var(--tap); } }
.vault-setup-steps .row.is-done .row-title { color: var(--text-3); font-weight: 500; text-decoration: none; }
.vault-access { margin-top: 0; }
.vault-access .panel-body > * + * { margin-top: var(--space-4); }
.vault-steps { font-size: var(--size-base); color: var(--text); }
.vault-code { max-width: 12rem; font-size: var(--size-lg); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.vault-requests-h { font-size: var(--size-lg); }
.vault-reason { margin: 0; padding: var(--space-2) var(--space-4); border-left: 3px solid var(--line-strong); color: var(--text-2); }
.vault-decline { margin-top: calc(-1 * var(--space-2)); }

/* The board's view: the next meeting as a date and how far off it is. */
.board-meeting > * + * { margin-top: var(--space-2); }
.board-meeting .form-actions { margin-top: var(--space-4); }

/* Pages without the shell: steps to follow, and other places to go. */
.solo-steps { font-size: var(--size-base); color: var(--text); }
.solo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); }
.solo-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* Assistants: two ways to connect side by side, and what to ask. */
.assistant-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--space-4); padding: var(--space-4) var(--pad-x) var(--pad-y); }
.assistant-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.assistant-choice > p { color: var(--text-2); font-size: var(--size-sm); }
.assistant-choice .field { align-self: stretch; }
.assistant-asks { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-asks li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--sunken); }

/* Activity: a run of like changes folds into one line that opens to its parts. */
.activity-fold > summary { cursor: pointer; }
.activity-fold > summary::marker { color: var(--text-3); }
.activity-fold .batch-items { padding: 0; margin: 6px 0 0; }
.activity-fold .batch-items li { display: flex; grid-template-columns: none; padding: 6px 0; }
@media (max-width: 700px), (pointer: coarse) { .activity-fold > summary { min-height: var(--tap); } }

/* Named roles: each role a row that opens to its holder and deputy. */
.role-row > summary { list-style: none; cursor: pointer; }
.role-row > summary::-webkit-details-marker { display: none; }
.role-row > summary:hover { background: var(--surface-2); }
.role-row > summary .row-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.role-row[open] > summary .row-actions { visibility: hidden; }
.role-form { padding: 0 var(--pad-x) var(--space-5) calc(var(--pad-x) + var(--row-icon, 34px) + var(--space-3)); }
.roles-progress { padding-top: var(--space-3); }
.roles-every { margin-top: var(--space-4); font-size: var(--size-lg); }
.roles-group > summary h2 { font-size: var(--size-md); }
.roles-bar .meter { width: 5rem; margin: 0; }
@media (max-width: 500px) { .role-form { padding-left: var(--pad-x); } }

/* A person's page: their face beside the name, with where they stand as chips. */
.person-head { justify-content: flex-start; align-items: center; flex-wrap: nowrap; }
.person-head > div { min-width: 0; }
.person-chips { margin-top: var(--space-3); }
.person-address { overflow-wrap: anywhere; }
.person-give { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.person-leaving > summary { display: inline-flex; align-items: center; min-height: var(--tap); }
.person-leaving[open] > summary { margin-bottom: var(--space-3); }
@media (max-width: 500px) {
  .person-head { flex-wrap: wrap; }
  .person-head .avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }
}

/* ==========================================================================
   Daily operations (October 30, 2026): Today's next step and show rows, the
   double-booking comparison, Tonight's counts, the door list, and holding an
   open night. docs/proposals/experience-2026-10-30/daily.md has the why; each
   piece is on the reference page under "Daily operations".
   ========================================================================== */

/* ---------- A show's steps together, on Today ---------- */
.show-steps { flex-basis: 100%; list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.show-steps > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-top: 1px dashed var(--line-strong); }
.step-main { flex: 1 1 14rem; min-width: 0; }
.step-title { font-weight: 600; line-height: 1.3; }
.step-title a { color: var(--text); text-decoration: none; }
.step-title a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.show-steps .row-actions { flex: 0 0 auto; }
.row.show-row > .row-main { flex-basis: 100%; }
.row.show-row .row-title a { color: var(--text); text-decoration: none; }
.row.show-row .row-title a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* A choice made in place: a picker and its button on one line, under the words. */
.inline-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); flex-basis: 100%; margin: var(--space-1) 0 0; }
.inline-pick > .field { flex: 1 1 13rem; min-width: 0; max-width: 24rem; }
.inline-pick > .btn { flex: 0 0 auto; }
.next-step .inline-pick { margin-top: var(--space-2); }
/* Under a step that already says "Name who looks after it", the picker's own label is for screen readers. */
.show-steps .inline-pick > .field > label, .row .inline-pick > .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The claims on one night, side by side ---------- */
.night-claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); padding: var(--space-3) var(--pad-x) var(--space-4); }
.night-claim { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.night-claim.is-keep { padding: calc(var(--space-4) - 1px); border: 2px solid var(--accent); }
.night-claim-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-3); align-items: center; width: 100%; }
.night-claim-head h3 { font: 700 var(--size-md)/1.2 var(--font-display); overflow-wrap: anywhere; }
.night-claim .checks { margin: 0; }
.night-claim-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.night-claim-foot form { display: contents; }

/* ---------- Tonight, for whoever runs it ---------- */
.night-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.night-counts > div { min-width: 0; }
.night-counts dt { font-size: var(--size-sm); color: var(--text-3); }
.night-counts dd { margin: 2px 0 0; font: 700 var(--size-xl)/1.05 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.night-counts dd small { font: 500 var(--size-sm) var(--font-ui); letter-spacing: 0; color: var(--text-3); }
.night-counts .is-left dd { color: var(--accent-ink); }
@media (max-width: 380px) { .night-counts dd { font-size: 1.75rem; } }
.tonight-lead .panel-body { display: flex; flex-direction: column; gap: var(--space-4); }
.tonight-lead .head-with-art { margin: 0; }
.tonight-lead .form-actions .btn { min-height: var(--tap); }
/* Small links that stand on their own line get a full touch area on phones without moving anything. */
@media (max-width: 700px) {
  .next-step h2 a, .tonight-lead .checks a, .calendar-agenda-day h3 a, .calendar-production a.row-title { position: relative; }
  .next-step h2 a::before, .tonight-lead .checks a::before, .calendar-agenda-day h3 a::before, .calendar-production a.row-title::before { content: ""; position: absolute; inset: -14px -4px; }
}
/* Before doors is ticked standing up: whole rows are the target. */
.runsheet .checklist li { min-height: 48px; align-items: center; font-size: var(--size-base); }
.runsheet .checklist input { width: 24px; height: 24px; }
.runsheet .checklist label { padding: 8px 0; }

/* ---------- The door list: standing up, phone in hand ---------- */
.door-search { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; background: var(--bg); }
.door-search .input { flex: 1 1 12rem; min-height: 52px; font-size: var(--size-md); }
.door-search .btn { min-height: 52px; }
@media (max-width: 700px) { .door-search { top: calc(57px + env(safe-area-inset-top, 0px)); } }
.door-list { list-style: none; margin: 0; padding: 0; }
.door-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--pad-x); }
.door-row + .door-row { border-top: 1px solid var(--line); }
.door-name { font: 700 var(--size-md)/1.25 var(--font-ui); overflow-wrap: anywhere; }
.door-meta { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--size-sm); color: var(--text-2); }
.door-meta .num { font-variant-numeric: tabular-nums; }
.door-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.door-actions > form { display: flex; }
[data-door-status]:empty { display: none; }
/* Every row's one action is the same, so it is a strong ordinary button, not a wall of jade. */
.btn-door { min-width: 8.5rem; min-height: 56px; padding: 0 20px; border-width: 1.5px; border-color: var(--text-3); font-size: var(--size-md); font-weight: 700; }
.door-row.is-in { background: var(--surface-2); }
.door-row.is-in .door-name { color: var(--text-2); }
.door-row.is-in .btn-door { min-width: 0; min-height: var(--tap); font-size: var(--size-sm); font-weight: 600; }
.door-row.is-off .door-name { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.door-row.is-saving .door-meta::after { content: attr(data-saving); color: var(--warn); font-weight: 700; }
.door-row[hidden] { display: none; }
.door-tickets { grid-column: 1 / -1; margin: 0; }
.door-tickets > summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); font-size: var(--size-sm); font-weight: 600; cursor: pointer; }
.door-tickets ul { list-style: none; margin: 0; padding: 0; }
.door-tickets li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px dashed var(--line); font-size: var(--size-sm); }
.door-offline { margin: 0 0 var(--space-3); }
@media (max-width: 520px) {
  .door-row { grid-template-columns: minmax(0, 1fr); }
  .door-actions { justify-content: stretch; }
  .door-actions > form { flex: 1 1 100%; }
  .door-actions .btn-door { flex: 1 1 100%; }
}
.door-print { display: none; width: 100%; border-collapse: collapse; font-size: 11pt; }
.door-print th, .door-print td { padding: 4px 6px; border-bottom: 1px solid #999; text-align: left; vertical-align: top; }
.door-print td.box { width: 22px; }
.door-print td.box span { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #000; }
@media print {
  .door-screen, .door-search { display: none !important; }
  .door-print { display: table; }
}

/* A long show name wraps inside its night instead of running into the next one. */
.calendar-month td > div { overflow-wrap: anywhere; }

/* ---------- Holding an open night from the month ---------- */
.month-hold { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--text-3); font-size: var(--size-xs); font-weight: 600; text-decoration: none; }
.month-hold:hover, .month-hold:focus-visible { color: var(--accent-ink); background: var(--accent-soft); }
.month-hold .icon { width: 12px; height: 12px; }
@media (hover: none), (pointer: coarse) { .month-hold { min-height: var(--tap); } }
@media print { .month-hold { display: none; } }