/* Keneke's. One committed light look: sign yellow + ink, the logo's hard drop shadow,
   and the fish from the Waimānalo menu as the divider. */

:root {
  color-scheme: light;
  --yellow: #F6E21C;
  --yellow-soft: #FBF3A6;
  --yellow-wash: #FFFBE3;
  --ink: #16130E;
  --ink-2: #48433A;
  --muted: #6B665B;
  --line: #E3E1D8;
  --line-strong: #BDB8AA;
  --paper: #F4F3EE;
  --page: #FFFFFF;
  --red: #B3261E;
  --red-soft: #FBE4DE;
  --leaf: #2A6439;
  --leaf-soft: #DDEDDF;
  --navy: #1F4E79;
  --navy-soft: #DEE8F2;

  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --script: "Kaushan Script", "Brush Script MT", cursive;

  --r: 10px;
  --shadow: 3px 3px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);
  --gutter: 20px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1rem/1.55 var(--body); }
body.sheet-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
small { font-size: 0.8125rem; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-weight: 500; }
.addr { font-variant-numeric: tabular-nums; } /* body face: the mono face gives the ʻokina a full-width cell */
.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--yellow); padding: 8px 12px; border: 2px solid var(--ink); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.eyebrow a { text-decoration: none; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: 62ch; }
.center { text-align: center; }

.fish { width: 64px; height: auto; flex: none; color: inherit; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: var(--r);
  border: 2px solid var(--ink); background: var(--page);
  font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--paper); }
.btn--primary { background: var(--yellow); box-shadow: var(--shadow); transition: transform .08s, box-shadow .08s; }
.btn--primary:hover { background: #FFEB3B; }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--page); }
.btn--sm { min-height: 40px; padding: 6px 14px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- chrome ---------- */
.topbar { background: var(--yellow); color: var(--ink); border-bottom: 2px solid var(--ink); font-size: 0.875rem; font-weight: 700; }
.topbar-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-block: 6px; }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* Red and white like the Punaluʻu and Waimānalo buildings. The logo keeps its white ground, framed as a sign board. */
.masthead { background: var(--red); border-bottom: 4px solid var(--ink); }
.masthead-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 32px; padding-block: 12px; }
.brand { justify-self: start; padding: 5px 9px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.brand img { display: block; width: 190px; }
.masthead a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.nav ul { list-style: none; display: flex; gap: 4px 24px; }
.nav a { display: block; padding: 6px 0; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: #fff; }
.nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
@media (max-width: 820px) {
  .masthead-in { grid-template-columns: 1fr auto; padding-block: 10px 0; }
  .brand img { width: 150px; }
  .nav { grid-column: 1 / -1; order: 3; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .nav a { padding: 8px 0 9px; }
}

.footer { background: var(--ink); color: #EDEAE0; }
.footer a { color: #fff; }
.footer-top { display: flex; align-items: center; gap: 18px; padding-block: 40px 8px; color: var(--yellow); }
.signoff { font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.1 var(--script); }
.footer-top .fish { width: 84px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 24px 36px; }
.footer h2 { font: 700 0.75rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); margin-bottom: 10px; }
.footer section p { margin-bottom: 6px; font-size: 0.9375rem; }
.footer ul { list-style: none; display: grid; gap: 6px; font-size: 0.9375rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-block: 14px 28px; border-top: 1px solid #3A352C; font-size: 0.8125rem; color: #B7B2A6; }
/* The way into the desk: always there for the owner, easy for customers to pass over. */
.footer .footer-owner { color: #B7B2A6; text-decoration: none; }
.footer .footer-owner:hover, .footer .footer-owner:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- shared sections ---------- */
.page-head { padding-block: 44px 28px; display: grid; gap: 12px; justify-items: start; }
.page-head h1 { font: 400 clamp(2.25rem, 5vw, 3.5rem)/1.02 var(--display); }
.section { padding-block: 60px; }
/* Home page "What we cater": red like the buildings, with the heading in sign yellow (Keoki's pick, from the walkthrough).
   The tiles stay white on ink borders. (Class name predates the color.) */
.section--paper { background: var(--red); border-block: 2px solid var(--ink); }
.section--paper .section-head h2 { color: var(--yellow); }
.section--paper .section-head p, .section--paper .section-foot { color: #fff; }
.section-head { display: grid; gap: 6px; margin-bottom: 24px; }
.section-head h2, .places-teaser h2 { font: 400 clamp(1.75rem, 3.6vw, 2.5rem)/1.05 var(--display); }
.section-head p { color: var(--ink-2); max-width: 62ch; }
.section-foot { margin-top: 18px; color: var(--ink-2); font-size: 0.9375rem; max-width: 72ch; }
.voice { margin: 16px 0 22px; max-width: 68ch; font-size: 1.0625rem; font-style: italic; color: var(--ink-2); }
.voice p::before {
  content: "“"; font: normal 400 2.75rem/0 var(--display); color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--ink); vertical-align: -0.42em; margin-right: 6px;
}

/* ---------- home ---------- */
.hero { border-bottom: 2px solid var(--ink); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; padding-block: 52px; }
.hero h1 { font: 400 clamp(2.25rem, 5.4vw, 4rem)/1.02 var(--display); margin-block: 12px 18px; }
.hero .lede { margin-bottom: 26px; }
.hero-photo { justify-self: end; width: 100%; max-width: 400px; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow-lg); }
.hero-photo figcaption { margin-top: 14px; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 800px) {
  .hero-in { grid-template-columns: 1fr; gap: 28px; padding-block: 30px 40px; }
  .hero-photo { justify-self: stretch; max-width: none; }
  .hero-photo img { aspect-ratio: 4 / 3; }
}

.special-band { border-bottom: 1px solid var(--line); background: var(--page); }
.special { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-block: 14px; font-weight: 700; }
.special-tag { background: var(--red); color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; }

.locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.loc { display: grid; gap: 10px; align-content: start; padding: 22px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--page); }
.loc h3 { font: 400 1.375rem/1.1 var(--display); }
.loc h3 a { text-decoration: none; }
.loc h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }
.loc-addr { font-size: 0.9375rem; color: var(--ink-2); }
.loc .actions { margin-top: 6px; }

.open-status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 700; font-size: 0.9375rem; }
.open-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.open-status.is-open { color: var(--leaf); }
.open-status.is-open::before { background: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.open-status.is-closed { color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: grid; gap: 4px; align-content: start; padding: 16px; min-height: 124px;
  background: var(--page); border: 2px solid var(--ink); border-radius: var(--r); text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.tile-name { font: 400 1.25rem/1.1 var(--display); }
.tile-from { font-size: 0.875rem; color: var(--ink-2); margin-top: auto; }
.tile-from b { font-size: 1rem; color: var(--ink); }
.tile-count { font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.places-teaser { display: grid; gap: 14px; justify-items: start; }
.places-teaser .fish { width: 72px; }
.featured { font-size: 1.125rem; color: var(--ink-2); max-width: 64ch; }

/* ---------- catering ---------- */
.dietary { font-weight: 700; color: var(--leaf); }
.jump { position: sticky; top: 0; z-index: 10; background: var(--page); border-block: 1px solid var(--line); }
.jump ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.jump a { display: block; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--page); }
.jump a:hover { border-color: var(--ink); }
.jump a.is-book { background: var(--yellow); border-color: var(--ink); }

.cat { padding-block: 52px; border-bottom: 1px solid var(--line); }
.cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; }
.cat-head h2, .h-section { font: 400 clamp(1.625rem, 3.2vw, 2.25rem)/1.05 var(--display); }
.cat-head p { color: var(--muted); font-size: 0.875rem; }
.included { display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; color: var(--ink-2); margin-bottom: 10px; }
.included::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.45em; background: var(--leaf); border-radius: 2px; }

.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 20px; }
.pkg-card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.pkg-card:target { border-color: var(--ink); box-shadow: var(--shadow); }
.pkg-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pkg-card h3 { font: 700 1.0625rem/1.25 var(--body); }
.price { text-align: right; white-space: nowrap; }
.price b { font: 600 1.125rem var(--mono); }
.price small { display: block; color: var(--muted); font-size: 0.75rem; }
.pkg-card > p { color: var(--ink-2); font-size: 0.9375rem; }
.pkg-card .btn { justify-self: start; }
.pkg-more summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; }
.pkg-more p { margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }

.cat-photos { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; margin-top: 24px; }
.cat-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.cat-photos figcaption { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 640px) { .cat-photos { grid-template-columns: 1fr 1fr; } .cat-photos img:first-child { grid-column: 1 / -1; } }

.refs { display: grid; margin-top: 24px; }
.ref { border-top: 1.5px solid var(--ink); }
.ref:last-child { border-bottom: 1.5px solid var(--ink); }
.ref summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 13px 0; font-weight: 700; }
.ref summary::-webkit-details-marker { display: none; }
.ref summary::after { content: "+"; font: 400 1.375rem/1 var(--display); width: 1ch; text-align: center; }
.ref[open] summary::after { content: "–"; }
.ref-count { margin-left: auto; color: var(--muted); font-size: 0.8125rem; }
.ref-note { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 10px; }
.ref-list { list-style: none; columns: 3 190px; column-gap: 28px; padding-bottom: 18px; }
.ref-list li { break-inside: avoid; padding: 3px 0; font-size: 0.9375rem; }
.ref-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 20px; padding-bottom: 18px; }
.ref-groups h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
.ref-groups .ref-list { columns: 1; padding-bottom: 0; }

.table-scroll { overflow-x: auto; margin-top: 16px; border: 2px solid var(--ink); border-radius: var(--r); }
.pans { width: 100%; min-width: 600px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pans th, .pans td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pans thead th { background: var(--ink); color: var(--yellow); font-size: 0.8125rem; line-height: 1.3; }
.pans thead th:not(:first-child), .pans td { text-align: right; }
.pans tbody th small { display: block; margin-top: 2px; font: 500 0.75rem var(--mono); color: var(--muted); }
.pans td { font: 600 1rem var(--mono); }
.pans tbody tr:last-child > * { border-bottom: 0; }

.terms-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.terms { display: grid; gap: 12px; padding-left: 1.4em; margin-top: 16px; max-width: 64ch; }
.terms li::marker { font-family: var(--mono); font-weight: 600; }
.strong-note { margin-top: 16px; font-weight: 700; }
.ways { margin: 16px 0 0; display: grid; }
.ways div { padding: 10px 0; border-top: 1px solid var(--line); }
.ways dt { font-weight: 700; }
.ways dd { margin: 2px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.ways-note { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 760px) { .terms-grid { grid-template-columns: 1fr; gap: 32px; } }

.friends { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.friends h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.friends ul { list-style: none; display: grid; gap: 6px; }

/* booking form */
/* Book catering: red like the buildings, headings in sign yellow, matching "What we cater" on the home page.
   Only text sitting on the red changes color; cards, chips, inputs, the estimate and link boxes keep their dark text. */
.book { background: var(--red); border-block: 2px solid var(--ink); }
.book-head h2, .book .step legend, .book .menu-lines-h, .book .sent h3 { color: var(--yellow); }
.book-head .eyebrow, .book .book-head p, .book .book-head p:last-child, .book .field > span, .book .hint, .book .hint--good, .book .pan-note summary,
.book .opt, .book .rental-name, .book .menu-intro, .book .sent p, .book .fine { color: #fff; }
.book .step legend small, .book .field > span small, .book .opt small, .book .rental-name small,
.book .menu-lines-h small { color: rgba(255, 255, 255, 0.82); }
.book .hint--warn { color: var(--yellow); }
.book .sent .sent-mark { color: var(--leaf); } /* the "Request sent" pill keeps its green on its pale green */
.book .sent .link-box { color: var(--ink); }
.book-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 48px; padding-block: 44px; }
.book-head { grid-column: 1 / -1; display: grid; gap: 6px; margin-bottom: 4px; max-width: 64ch; }
.book-head h2 { font: 400 clamp(1.875rem, 3.8vw, 2.75rem)/1.02 var(--display); }
.book-head p:last-child { color: var(--ink-2); }
#bookForm, #sent { grid-column: 1; }
form { display: grid; }
.step { border: 0; margin: 0; padding: 24px 0; display: grid; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); min-width: 0; }
.step legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font: 400 1.25rem/1.2 var(--display); }
.step legend small { font-family: var(--body); font-size: 0.875rem; color: var(--muted); margin-left: 6px; }
.step legend + * { clear: both; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 2px solid var(--line-strong); background: var(--page); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 0.9375rem; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--yellow); }

.pkg-list { display: grid; gap: 8px; }
.pkg { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r); background: var(--page); cursor: pointer; }
.pkg input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--ink); }
.pkg:has(input:checked) { border-color: var(--ink); box-shadow: var(--shadow); }
.pkg-body { display: grid; gap: 2px; min-width: 0; }
.pkg-name { font-weight: 700; }
.pkg-inc { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.pkg-price { font: 600 0.9375rem/1.2 var(--mono); text-align: right; white-space: nowrap; }
.pkg-price small { display: block; font: 400 0.75rem var(--body); color: var(--muted); }

.opts { display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.opt small { display: block; color: var(--muted); }
.opt-price { font: 500 0.875rem var(--mono); }

.stepper { display: inline-flex; align-items: stretch; width: fit-content; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--page); }
.stepper button { width: 52px; border: 0; background: var(--paper); font-size: 1.5rem; line-height: 1; }
.stepper input, .stepper output { width: 88px; border: 0; padding: 8px 0; text-align: center; font: 400 1.75rem/1 var(--display); background: var(--page); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper--sm { border-width: 1px; border-color: var(--line-strong); }
.stepper--sm button { width: 38px; font-size: 1.125rem; }
.stepper--sm output { width: 36px; padding: 0; font: 600 1rem/2.25 var(--mono); }

.pan-note summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--ink-2); }
.pan-note p { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--page); font-size: 0.875rem; color: var(--ink-2); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 4px; min-width: 0; }
.field > span { font-weight: 700; font-size: 0.875rem; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-soft); }
.field textarea { resize: vertical; }

.rentals { display: grid; gap: 10px; }
.rental { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rental-name { font-size: 0.9375rem; }
.rental-name small { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }

.hint { color: var(--muted); font-size: 0.875rem; }
.hint:empty { display: none; }
.hint--good { color: var(--leaf); }
.hint--warn { color: var(--red); }
.form-error { padding: 10px 12px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 0.9375rem; }
.fine { margin-top: 16px; font-size: 0.8125rem; color: var(--muted); }

.estimate { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: 76px; margin-top: 24px; padding: 18px; background: var(--page); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.estimate-in { display: grid; gap: 14px; }
.est-figures { display: grid; min-width: 0; }
.est-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); }
#estTotal { font: 400 2rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
#estSub { font: 500 0.8125rem/1.35 var(--mono); color: var(--ink-2); }
@media (max-width: 880px) {
  .book-in { grid-template-columns: 1fr; padding-block: 32px 0; }
  .estimate {
    grid-column: 1; grid-row: auto; position: sticky; top: auto; bottom: 0; z-index: 5;
    margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
    border-width: 3px 0 0; border-radius: 0; box-shadow: none;
  }
  .estimate-in { grid-template-columns: 1fr auto; align-items: center; }
  #estTotal { font-size: 1.625rem; }
  #sent { padding-bottom: 32px; }
}

.sent { padding-block: 28px; display: grid; gap: 12px; align-content: start; }
.sent-mark { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf); font-weight: 700; font-size: 0.875rem; }
.sent h3 { font: 400 1.75rem/1.15 var(--display); }
.sent p { color: var(--ink-2); max-width: 48ch; }

/* ---------- menus ---------- */
.chips-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.menu { padding-block: 44px; border-top: 4px solid var(--ink); }
.menu-head { display: grid; gap: 8px; margin-bottom: 28px; }
.menu-head h2 { font: 400 clamp(1.75rem, 3.6vw, 2.5rem)/1.05 var(--display); }
.menu-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--ink-2); font-size: 0.9375rem; }
.notice { max-width: 60ch; margin-bottom: 28px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--yellow-soft); font-weight: 700; }
.board { columns: 2 360px; column-gap: 60px; }
.board-sec { break-inside: avoid; margin-bottom: 36px; }
.board-sec--choices { break-inside: auto; }
.board-sec h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font: 400 1.25rem/1.1 var(--display); }
.board-sec h3::after { content: ""; flex: 1; height: 2px; background: var(--ink); }
.board-note { color: var(--muted); font-size: 0.875rem; margin-bottom: 12px; }
.choices { list-style: none; display: grid; gap: 9px; margin-top: 12px; }
.choices b { display: block; }
.choices span { color: var(--muted); font-size: 0.875rem; }

.prices { list-style: none; display: grid; gap: 11px; margin-top: 12px; }
.prices li { display: grid; grid-template-columns: minmax(0, max-content) minmax(16px, 1fr) auto; align-items: end; column-gap: 8px; }
.prices li.no-price { grid-template-columns: 1fr; }
.p-name { font-weight: 700; }
.p-dots { border-bottom: 2px dotted var(--line-strong); margin-bottom: 0.4em; }
.p-price { font: 600 1rem var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-desc { grid-column: 1 / -1; color: var(--muted); font-size: 0.875rem; line-height: 1.35; }
.prices--narrow { max-width: 560px; }

/* ---------- locations ---------- */
.place { border-top: 4px solid var(--ink); }
.place-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 44px; padding-block: 48px; }
.place-media img, .loc-sign { width: 100%; border: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow-lg); }
.loc-sign { aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: var(--yellow); text-align: center; }
.loc-sign-name { font: 400 clamp(2.5rem, 6vw, 4rem)/1 var(--display); }
.loc-sign-place { font: 400 clamp(1.75rem, 4vw, 2.5rem)/1 var(--script); }
.loc-sign .fish { width: 120px; margin-top: 8px; }
.place-body { display: grid; gap: 14px; align-content: start; justify-items: start; }
.place-body h2 { font: 400 clamp(1.75rem, 3.6vw, 2.5rem)/1.05 var(--display); }
.place-addr { font-size: 1rem; color: var(--ink-2); }
.hours { width: 100%; max-width: 380px; border-collapse: collapse; margin-top: 8px; }
.hours caption { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9375rem; font-weight: 400; }
.hours td { text-align: right; }
.hours tr.is-today > * { font-weight: 700; }
.hours tr.is-today th::after { content: " · today"; font-weight: 400; color: var(--muted); }
.services { list-style: none; display: grid; gap: 6px; }
.services li { display: flex; gap: 10px; }
.services li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.6em; background: var(--ink); border-radius: 50%; }
@media (max-width: 760px) {
  .place-in { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .place-media img, .loc-sign { aspect-ratio: 4 / 3; object-fit: cover; }
}

/* ---------- about + blog prose ---------- */
.story { padding-block: 44px 64px; }
.story-head { display: flex; align-items: flex-end; gap: 22px; max-width: 780px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 4px solid var(--ink); }
.keith { width: 112px; border: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow); }
.story-head h1 { font: 400 clamp(2rem, 4.6vw, 3.25rem)/1.02 var(--display); margin-block: 6px 6px; }
.byline { color: var(--ink-2); font-weight: 700; }
.prose { display: grid; gap: 18px; max-width: 68ch; font-size: 1.0625rem; }
.prose h2 { font: 400 1.625rem/1.1 var(--display); margin-top: 16px; }
.prose ul, .prose ol { display: grid; gap: 6px; padding-left: 1.3em; }
.prose a { color: var(--navy); }
.prose figure img { border: 3px solid var(--ink); border-radius: 4px; }
.prose figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }
.pull { margin: 14px 0; }
.pull p { font: 400 clamp(1.5rem, 3.2vw, 2.125rem)/1.15 var(--display); }
.pull p::before { content: "“"; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); margin-right: 4px; }
.closing { font: 400 1.375rem/1.2 var(--display); margin-top: 8px; }
.signature { font: 400 2.25rem/1 var(--script); }

.posts { list-style: none; padding-bottom: 64px; }
.posts li { border-top: 1.5px solid var(--ink); }
.posts li:last-child { border-bottom: 1.5px solid var(--ink); }
.posts a { display: grid; gap: 6px; padding-block: 20px; text-decoration: none; }
.posts h2 { font: 400 1.375rem/1.15 var(--display); }
.posts a:hover h2 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }
.posts p { color: var(--ink-2); }
.post { padding-block: 32px 64px; }
.post h1 { font: 400 clamp(1.875rem, 4.2vw, 2.75rem)/1.05 var(--display); margin-block: 10px 26px; }
.cta-box { display: grid; gap: 10px; justify-items: start; max-width: 68ch; margin-top: 44px; padding: 22px; background: var(--yellow); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.cta-box h2 { font: 400 1.5rem/1.1 var(--display); }

/* ---------- catered places ---------- */
.place-groups { display: grid; gap: 40px; padding-bottom: 64px; }
.place-group { border-top: 4px solid var(--ink); padding-top: 16px; }
.place-group h2 { display: flex; align-items: baseline; gap: 10px; font: 400 1.5rem/1.1 var(--display); }
.place-group h2 .mono { font-size: 0.875rem; color: var(--muted); }
.place-group .note { margin-top: 4px; color: var(--ink-2); }
.place-group ul { list-style: none; columns: 3 240px; column-gap: 32px; margin-top: 14px; }
.place-group li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); }

/* ---------- employment ---------- */
.job-form { display: grid; gap: 16px; max-width: 560px; padding-bottom: 64px; }
.job-form .btn { justify-self: start; }
.form-msg { padding: 10px 12px; border-radius: 8px; background: var(--navy-soft); color: var(--navy); font-weight: 700; }
.form-msg--error { background: var(--red-soft); color: var(--red); }

/* ---------- desk (owner side) ---------- */
.page-desk { background: var(--page); }
.desk { padding-bottom: 48px; }
/* The menu in the corner: three lines, opening a short list. Sign out lives inside Account settings. */
.desk-menu { position: absolute; top: 20px; right: 0; display: grid; align-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--page); cursor: pointer; }
.desk-menu span { display: block; height: 2.5px; border-radius: 2px; background: var(--ink); }
.desk-menu:hover, .desk-menu[aria-expanded="true"] { border-color: var(--ink); }
.desk-menu[aria-expanded="true"] { background: var(--paper); }
.desk-menu-panel { position: absolute; top: 72px; right: 0; z-index: 30; display: grid; min-width: 210px; padding: 6px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--page); box-shadow: var(--shadow); }
.desk-menu-panel button, .desk-menu-panel a { padding: 12px 14px; border: 0; border-radius: 8px; background: none; text-align: left; font: 700 0.9375rem var(--body); color: var(--ink); text-decoration: none; cursor: pointer; }
.desk-menu-panel button:hover, .desk-menu-panel a:hover { background: var(--paper); }
/* The business name above "Admin desk" goes back to the website, the way a logo does. */
.desk-head .eyebrow a { color: inherit; text-decoration: none; }
.desk-head .eyebrow a:hover { text-decoration: underline; }
.desk-head { position: relative; padding-block: 22px 14px; display: grid; gap: 2px; }
.desk-head h1 { font: 400 2.125rem/1.05 var(--display); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; gap: 2px; min-width: 0; padding: 12px; border-radius: var(--r); background: var(--paper); }
.stat-num { font: 400 1.25rem/1.15 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: 0.75rem; font-weight: 700; line-height: 1.25; color: var(--muted); }
.callout { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--yellow-soft); font-size: 0.9375rem; color: var(--ink-2); }

.tabs { display: flex; gap: 22px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.tabs button { margin-bottom: -1px; padding: 10px 0; border: 0; border-bottom: 3px solid transparent; background: none; font-weight: 700; color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
#panel { padding-top: 14px; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.pill--new { background: var(--yellow); color: var(--ink); }
.pill--quoted { background: var(--navy-soft); color: var(--navy); }
.pill--deposit { background: var(--leaf-soft); color: var(--leaf); }
.pill--paid { background: var(--ink); color: #fff; }
.flag { display: inline-block; padding: 1px 7px; border: 1px solid transparent; border-radius: 5px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.flag--new { border-color: var(--ink); }
.flag--due { background: var(--red-soft); color: var(--red); }
.flag--crew { border-color: var(--navy); color: var(--navy); }
.flag--late { background: var(--ink); color: var(--yellow); }

.tickets { display: grid; gap: 10px; }
.ticket { display: grid; grid-template-columns: 62px 1fr; width: 100%; padding: 0; overflow: hidden; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.ticket:hover { border-color: var(--ink); }
.ticket-date { display: grid; align-content: center; justify-items: center; padding: 10px 4px; background: var(--paper); border-right: 2px dashed var(--line); font: 600 0.75rem/1.2 var(--mono); text-transform: uppercase; color: var(--ink-2); }
.ticket-date b { font: 400 1.5rem/1 var(--display); color: var(--ink); }
.ticket-date i { font-style: normal; font-weight: 500; color: var(--muted); }
.ticket-main { display: grid; gap: 3px; min-width: 0; padding: 10px 12px 12px; }
.ticket-top, .ticket-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ticket-name { margin-top: 2px; font-weight: 700; font-size: 1.0625rem; }
.ticket-occ { color: var(--ink-2); font-size: 0.9375rem; }
.ticket-meta { color: var(--muted); font-size: 0.8125rem; }
.ticket-foot { margin-top: 4px; }
.ticket-total { margin-right: 4px; font: 600 0.9375rem var(--mono); font-variant-numeric: tabular-nums; }
/* Declined: still readable, but stamped closed down the right so it can't read as live work. */
.ticket--declined { grid-template-columns: 62px minmax(0, 1fr) 104px; border-style: dashed; }
.ticket--declined .ticket-date b, .ticket--declined .ticket-name { color: var(--ink-2); }
.ticket--declined .ticket-total { color: var(--muted); text-decoration: line-through; }
.ticket-closed { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 10px 6px; border-left: 2px dashed var(--line); background: repeating-linear-gradient(135deg, var(--red-soft) 0 9px, transparent 9px 18px); color: var(--red); font: 700 0.75rem/1.1 var(--body); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; white-space: nowrap; }
.ticket-closed b { font: 400 1.625rem/1 var(--display); letter-spacing: 0; }
@media (max-width: 480px) {
  .ticket--declined { grid-template-columns: 56px minmax(0, 1fr) 74px; }
  .ticket-closed { padding-inline: 3px; font-size: 0.625rem; letter-spacing: 0.02em; }
  .ticket-closed b { font-size: 1.375rem; }
}
.empty { margin: 8px 0; color: var(--muted); }

.cal { margin-bottom: 16px; }
/* On a wide screen the month sits where the crew roster sits: a narrow column on the left, in the same
   bordered panel, with that month's jobs beside it instead of underneath. */
@media (min-width: 861px) {
  #panel.is-calendar { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
  #panel.is-calendar .cal { position: sticky; top: 56px; margin-bottom: 0; padding: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); }
  #panel.is-calendar .cal-head h3 { font-size: 1rem; }
  #panel.is-calendar .cal-day { padding: 3px 0 4px; font-size: 0.8125rem; }
  #panel.is-calendar .tickets { min-width: 0; }
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head h3 { font: 400 1.125rem var(--display); }
.icon-btn { width: 40px; height: 40px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--page); font-size: 1.375rem; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { padding-bottom: 2px; text-align: center; font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.cal-day { aspect-ratio: 1; max-width: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 5px 0 6px; border-radius: 8px; background: var(--paper); font: 500 0.8125rem var(--mono); color: var(--ink-2); }
.cal-day.is-blank { background: transparent; }
.cal-day.has-job { background: var(--page); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--navy); }
.dots { display: flex; gap: 3px; }
.dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.dot--new { background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }
.dot--quoted { background: var(--navy); }
.dot--deposit { background: var(--leaf); }
.dot--paid { background: var(--ink); }

.crew-lede { margin-bottom: 14px; color: var(--ink-2); font-size: 0.9375rem; }
.crew-job { display: grid; gap: 12px; justify-items: start; margin-bottom: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); }
.crew-job header { display: flex; justify-content: space-between; align-items: start; gap: 10px; width: 100%; }
.crew-job h3 { font-size: 1rem; }
.crew-job header p { margin-top: 2px; color: var(--muted); font-size: 0.875rem; }
.slots { display: grid; gap: 8px; width: 100%; }
.slot { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.slot-role { font-weight: 700; font-size: 0.9375rem; }
.slot-role small { display: block; font: 500 0.75rem var(--mono); color: var(--muted); }
.slot-names { display: flex; flex-wrap: wrap; gap: 6px; }
.name { padding: 3px 10px; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf); font-size: 0.8125rem; font-weight: 700; }
.name--open { background: var(--page); color: var(--muted); border: 1.5px dashed var(--line-strong); font-weight: 400; }

/* sheet + toast (shared by booking and desk) */
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(22, 19, 14, 0.5); }
.sheet-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; max-height: 90dvh; background: var(--page); border-radius: 18px 18px 0 0; outline: none; animation: rise .22s ease-out; }
@keyframes rise { from { transform: translateY(24px); opacity: .6; } }
.sheet-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.5rem; line-height: 1; }
.sheet-body { display: grid; gap: 14px; overflow-y: auto; padding: 20px 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
/* The decisions stay put at the bottom of the panel while the body scrolls. On a long request they used to sit
   somewhere in the middle, with job type, crew and the job list after them, so the owner scrolled past the
   buttons to find more buttons. Declining sits hard left, away from the money, because it also closes the crew
   link. The secondary row is ordered first so the primary action is the rightmost thing on the row. */
.sheet-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.sheet-foot .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sheet-foot .actions--more { order: -1; }
.sheet-foot .decline-row { order: -2; margin: 0 auto 0 0; }
/* What happens after they say yes, kept apart from the quote above it. */
/* A group label, not a fourth heading competing with Crew and Job list inside it. The rule and the indent do
   the grouping; the eyebrow just names it. */
.req-doing { display: grid; gap: 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.req-doing > .eyebrow { margin-bottom: -4px; }
.sheet-head { padding-right: 44px; }
.sheet-head h2 { margin-top: 8px; font: 400 1.5rem/1.15 var(--display); }
.sheet-head p { margin-top: 2px; color: var(--ink-2); }
.sheet-h { margin-top: 6px; font: 400 1rem var(--display); }
.facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.facts dt { padding-top: 1px; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.facts dd { margin: 0; font-size: 0.9375rem; }
.facts dd small { color: var(--muted); }
.facts a { color: var(--navy); font-weight: 700; }
.note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); font-size: 0.9375rem; color: var(--ink-2); }
.note::before { content: "“"; }
.note::after { content: "”"; }

.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lines td { padding: 7px 0; vertical-align: top; border-bottom: 1px dashed var(--line); font-size: 0.9375rem; }
.lines td:last-child { padding-left: 12px; text-align: right; white-space: nowrap; font: 600 0.9375rem var(--mono); }
.lines td small { display: block; font: 400 0.75rem var(--mono); color: var(--muted); }
.line-detail { display: block; margin-top: 2px; max-width: 46ch; font: 400 0.875rem/1.4 var(--body); color: var(--ink-2); }
.line-detail--list { margin: 4px 0 0; padding-left: 1.15em; }
.line-detail--list li { margin-bottom: 2px; }
.line-detail-note { list-style: none; margin-left: -1.15em; padding-top: 2px; font-style: italic; }
.q-service { padding: 10px 12px; border-radius: 8px; background: var(--leaf-soft); color: var(--leaf); font-size: 0.9375rem; font-weight: 700; }
.lines tfoot td { border-bottom: 0; }
.lines-total td { padding-top: 10px; border-top: 2px solid var(--ink); font-weight: 700; font-size: 1.0625rem; }
.lines-total td:last-child { font-size: 1.0625rem; }

.paid-stamp { justify-self: center; margin: 4px 0; padding: 2px 14px; border: 3px solid var(--leaf); border-radius: 8px; color: var(--leaf); font: 400 1.25rem var(--display); text-transform: uppercase; letter-spacing: 0.06em; transform: rotate(-4deg); }
.phone-quote { display: grid; gap: 10px; padding: 18px 16px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
.pq-logo { justify-self: center; width: 170px; }
.pq-for { margin-top: 6px; text-align: center; font-size: 0.8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.phone-quote h2 { text-align: center; font: 400 1.375rem/1.15 var(--display); }
.pq-when { margin-bottom: 4px; text-align: center; font-size: 0.875rem; color: var(--ink-2); }
.pq-fine { margin-top: 4px; text-align: center; font-size: 0.75rem; color: var(--muted); }

.toast { position: fixed; z-index: 40; left: 50%; bottom: 110px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.9375rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desk: login, live badge, crew board ---------- */
.desk { padding-bottom: 110px; }
.desk .callout { max-width: 780px; }
.login { display: grid; gap: 8px; padding-block: 48px 64px; }
.login h1 { font: 400 clamp(2rem, 6vw, 2.75rem)/1.05 var(--display); }
.login-form { display: grid; gap: 14px; max-width: 420px; margin-top: 14px; }
.login-form .btn { justify-self: start; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 700 0.75rem/1 var(--body); vertical-align: 1px; }
.flag--just { background: var(--red); color: #fff; }
.flag--done { background: var(--leaf-soft); color: var(--leaf); }

.board-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.roster { position: sticky; top: 56px; display: grid; gap: 10px; max-height: calc(100vh - 72px); overflow-y: auto; padding: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.roster.is-over { background: var(--yellow-soft); }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roster-head h3 { font: 400 1.125rem/1.1 var(--display); }
.roster-head .mono { font-size: 0.875rem; color: var(--muted); }
.roster-hint { font-size: 0.8125rem; color: var(--muted); }
.roster-list { display: grid; gap: 6px; }

.person { display: flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--page); cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.person.is-selected { background: var(--yellow); box-shadow: var(--shadow); }
.person.is-dragging { opacity: 0.35; }
.person-pick { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 8px 10px; border: 0; background: none; text-align: left; cursor: inherit; }
.person-name { font-weight: 700; white-space: nowrap; }
.person-meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-link { flex: none; padding: 0 10px; border: 0; border-left: 1.5px solid var(--line); background: none; font-size: 0.8125rem; font-weight: 700; color: var(--navy); }
.add-crew { display: grid; gap: 10px; padding: 12px; border-radius: 8px; background: var(--page); }
.role-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; font-size: 0.875rem; }
.role-picks legend { float: left; width: 100%; margin-bottom: 4px; font-weight: 700; }
.role-picks label { display: inline-flex; align-items: center; gap: 6px; }

.jobs { display: grid; gap: 14px; min-width: 0; }
.job { overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.job-head { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid var(--line); }
.job-title { display: grid; gap: 2px; align-content: center; min-width: 0; padding: 10px 12px; border: 0; background: none; text-align: left; }
.job-title:hover .job-name { text-decoration: underline; }
.job-name { font-weight: 700; font-size: 1.0625rem; }
.job-meta { font-size: 0.8125rem; color: var(--muted); }
.job-status { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 10px 12px; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 12px; }
.job > .hint { padding: 0 12px 12px; }
.lane { display: grid; align-content: start; gap: 8px; min-height: 92px; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: var(--paper); transition: background .1s, border-color .1s; }
.lane.is-full { border-style: solid; border-color: var(--line); background: var(--page); }
.lane.is-over { border: 2px solid var(--ink); background: var(--yellow-soft); }
.lane-head { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 700; }
.lane-head .mono { color: var(--muted); }
.lane-people { display: flex; flex-wrap: wrap; gap: 6px; }
.person--placed { display: inline-flex; align-items: center; gap: 6px; padding: 3px 3px 3px 10px; border-radius: 999px; font-size: 0.875rem; }
.person--placed.has-clash { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.clash { font-size: 0.6875rem; font-weight: 700; color: var(--red); white-space: nowrap; }
.unplace { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1rem; line-height: 1; }
.open-slot { padding: 6px 12px; border: 1.5px dashed var(--line-strong); border-radius: 999px; background: var(--page); font-size: 0.8125rem; color: var(--muted); }
.open-slot.is-armed { border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font-weight: 700; }

.drag-ghost { position: fixed; z-index: 60; top: 0; left: 0; margin: 0; pointer-events: none; box-shadow: var(--shadow-lg); opacity: 0.95; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.placing-bar { position: fixed; z-index: 25; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 6px 6px 6px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: var(--shadow); transform: translateX(-50%); }
.link-box { padding: 10px 12px; border-radius: 8px; background: var(--paper); font-size: 0.8125rem; overflow-wrap: anywhere; }
.crew-summary { display: grid; gap: 8px; }
.need-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; }
.need-role { font-weight: 700; font-size: 0.9375rem; }
.need-role small { display: block; font: 500 0.75rem var(--mono); color: var(--muted); }
.need-names { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 860px) {
  .board-wrap { grid-template-columns: 1fr; }
  /* Stuck to the top of a phone, this strip is in the way of the board it drops onto, so it stays shallow:
     no hint line, no roles line, tighter padding. The names and Schedule are all it needs up there. */
  .roster { top: 44px; z-index: 6; max-height: none; overflow: visible; padding: 8px 10px; gap: 6px; }
  .roster-hint { display: none; }
  .roster .person-meta { display: none; }
  .roster .person-pick { padding: 6px 10px; }
  .roster-head h3 { font-size: 1rem; }
  .roster-list { display: flex; gap: 8px; overflow-x: auto; margin-inline: -10px; padding: 2px 10px 6px; scrollbar-width: none; }
  .roster .person { flex: none; }
  .job-head { grid-template-columns: 56px minmax(0, 1fr); }
  .job-head .ticket-date { grid-row: span 2; }
  .job-title { padding-bottom: 4px; }
  .job-status { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 12px 10px; }
  .lanes { grid-template-columns: 1fr; }
}

.job-link { padding: 2px 0; border: 0; background: none; font-size: 0.8125rem; font-weight: 700; color: var(--navy); text-decoration: underline; white-space: nowrap; }

/* ---------- crew pages: one job, or one person's schedule ---------- */
.job-page .facts { margin-top: 6px; }
.job-page .facts dd small { display: block; margin-top: 2px; color: var(--muted); }
.crew-h { margin-top: 14px; font: 400 1.25rem/1.1 var(--display); }
.job-crew { list-style: none; display: grid; }
.job-crew li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.job-crew-role { font-weight: 700; }
.job-crew-names { display: flex; flex-wrap: wrap; gap: 6px; }
/* An on/off switch: the job link's "Hide who's working" */
.toggle-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; }
.toggle-row b { display: block; font-size: 0.9375rem; }
.toggle-row small { display: block; font-size: 0.8125rem; color: var(--muted); }
.toggle-row input { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer; transition: background 0.15s; }
.toggle-row input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform 0.15s; }
.toggle-row input:checked { background: var(--yellow); }
.toggle-row input:checked::after { transform: translateX(18px); }
.toggle-row input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- job lists (crew page + desk sheet) ---------- */
.job-list { display: grid; gap: 16px; }
.jl-heading { padding: 10px 12px; border-radius: 8px; background: var(--paper); font: 500 0.875rem/1.55 var(--mono); color: var(--ink-2); }
.jl-progress { font-size: 0.9375rem; color: var(--ink-2); }
.jl-progress b { font: 400 1.375rem/1 var(--display); color: var(--ink); }
.jl-sec { display: grid; gap: 2px; }
.jl-title { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 400 1.125rem/1.1 var(--display); }
.jl-note { font: 700 0.8125rem var(--body); color: var(--muted); }
.jl-count { margin-left: auto; font: 600 0.8125rem var(--mono); color: var(--muted); }
.jl-items, .jl-sub { list-style: none; }
.jl-sub { margin-left: 34px; }
.jl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.jl-item--sub { min-height: 40px; font-size: 0.9375rem; }
.jl-item input { width: 22px; height: 22px; margin: 0; accent-color: var(--leaf); cursor: inherit; }
.jl-name { font-weight: 700; overflow-wrap: anywhere; }
.jl-item--sub .jl-name { font-weight: 400; }
.jl-qty { font: 600 0.875rem var(--mono); white-space: nowrap; }
.jl-item.is-done .jl-name, .jl-item.is-done .jl-qty { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.list-msg { font-weight: 700; color: var(--red); }
.list-text { font: 500 0.875rem/1.5 var(--mono); min-height: 320px; }
.list-help summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; }
.list-help pre { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); font: 500 0.8125rem/1.5 var(--mono); white-space: pre-wrap; }
.list-help p { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- job types ---------- */
.desk .tabs { overflow-x: auto; scrollbar-width: none; }
.desk .tabs button { white-space: nowrap; }
.types-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.types-head .lede { max-width: 58ch; font-size: 0.9375rem; }
.types { display: grid; gap: 10px; }
.type-card { padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.type-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.type-card h3 { font: 400 1.125rem/1.15 var(--display); }
.type-facts { margin: 0; display: grid; }
.type-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.type-facts dt { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.type-facts dd { margin: 0; }
.type-form { display: grid; gap: 14px; }
/* A section of the page an owner is writing: grouped so four of them in one form stay readable. */
.page-section { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.page-section legend { padding: 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.field--short input { max-width: 140px; }
.needs-edit { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.needs-edit legend { margin-bottom: 6px; font-size: 0.875rem; font-weight: 700; }
.needs-edit > .btn { justify-self: start; }
#needRows { display: grid; gap: 8px; }
.need-edit { display: grid; grid-template-columns: 24px minmax(0, 1fr) 76px 96px 28px; align-items: center; gap: 8px; }
.need-drag { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.125rem; line-height: 1; cursor: grab; touch-action: none; }
.need-drag:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.need-edit.is-dragging { opacity: 0.55; }
.need-edit.is-dragging .need-drag { cursor: grabbing; }
.need-edit input { width: 100%; min-height: 40px; padding: 6px 8px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); }
.need-head span { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.type-field select { min-height: 44px; }
.job-type-line { padding: 0 12px 12px; font-size: 0.8125rem; color: var(--ink-2); }
.job-type-line small { color: var(--muted); }

/* ---------- crew sign-in ---------- */
.signed-in { margin-left: 5px; color: var(--leaf); font-size: 0.8125rem; font-weight: 700; }
.person-you { margin-left: 6px; padding: 1px 6px; border: 2px solid var(--ink); border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 2px; }
.crew-page .login-form { margin-top: 4px; }
.crew-page .login-form .btn--ghost { justify-self: start; }
.crew-job-body h2 a { text-decoration: none; }
.crew-job-body h2 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; }
.crew-job-biz { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.crew-foot { margin-top: 10px; font-weight: 700; }
.crew-foot a { color: var(--navy); }

/* ---------- crew schedule page ---------- */
.crew-top { padding-block: 12px; border-bottom: 4px solid var(--ink); }
.crew-top img { width: 150px; }
.crew-page { display: grid; gap: 10px; padding-block: 28px 64px; }
.crew-page h1 { font: 400 clamp(2rem, 7vw, 2.75rem)/1.05 var(--display); }
.crew-jobs { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.crew-job-card { display: grid; grid-template-columns: 62px 1fr; overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--r); }
.crew-job-body { display: grid; gap: 4px; padding: 12px; }
.crew-job-body h2 { font: 400 1.25rem/1.15 var(--display); }
.crew-job-when { font-weight: 700; }
.crew-job-place { color: var(--navy); font-weight: 700; }

/* ---------- booking: the date calendar and serve-time picker ---------- */
.dp-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dp-field::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); }
.dp-field[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.dp-field:focus-visible, .dp-field[aria-expanded="true"] { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-soft); }
.picker { padding: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--page); color: var(--ink); box-shadow: var(--shadow); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dp-head h3 { font: 400 1.25rem/1.1 var(--display); color: var(--ink); }
.dp-nav { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; background: var(--page); color: var(--ink); font-size: 1.5rem; line-height: 1; }
.dp-nav:disabled { opacity: 0.3; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dp-dow { padding: 4px 0; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dp-day { min-height: 48px; border: 1.5px solid transparent; border-radius: 10px; background: var(--paper); color: var(--ink); font: 600 1.0625rem var(--mono); font-variant-numeric: tabular-nums; }
.dp-day:hover:not(:disabled) { border-color: var(--ink); }
.dp-day:disabled { background: none; color: var(--line-strong); }
.dp-day.is-today { box-shadow: inset 0 0 0 2px var(--navy); }
.dp-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.tp-groups { display: grid; gap: 12px; }
.tp-group h4 { margin-bottom: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tp-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tp-slot { min-height: 44px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--page); color: var(--ink); font: 600 0.9375rem var(--mono); }
.tp-slot:hover { border-color: var(--ink); }
.tp-slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--yellow); }
.tp-foot { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.dp-day:focus-visible, .dp-nav:focus-visible, .tp-slot:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 480px) {
  .dp-day { min-height: 42px; font-size: 1rem; }
  .tp-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- booking: places they've catered, as you type ---------- */
.place-list { list-style: none; display: grid; gap: 2px; margin: -4px 0 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.place-head, .place-foot { padding: 6px 10px; font-size: 0.75rem; color: var(--muted); }
.place-head { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.place-opt { display: grid; gap: 1px; padding: 10px; border-radius: 8px; cursor: pointer; }
.place-opt:hover, .place-opt[aria-selected="true"] { background: var(--yellow-soft); }
.place-opt span { font-weight: 700; color: var(--ink); }
.place-opt small { font-size: 0.8125rem; color: var(--muted); }

/* ---------- booking: build your own menu ---------- */
.chip--menu { border-style: dashed; border-color: var(--ink); }
.chip--menu[aria-pressed="true"] { border-style: solid; }
.menu-build { display: grid; gap: 10px; }
.menu-intro { color: var(--ink-2); font-size: 0.9375rem; }
.menu-empty { padding: 12px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--page); color: var(--muted); font-size: 0.9375rem; }
.menu-lines { display: grid; gap: 8px; }
.menu-lines-h { font: 400 1.125rem/1.1 var(--display); }
.menu-lines-h small { margin-left: 4px; font: 600 0.8125rem var(--mono); color: var(--muted); }
.menu-list { list-style: none; display: grid; gap: 8px; }
.menu-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--page); }
.menu-line-name { display: grid; min-width: 0; }
.menu-line-name b { overflow-wrap: anywhere; }
.menu-line-name small { font-size: 0.8125rem; color: var(--muted); }
.menu-remove { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.25rem; line-height: 1; }
.menu-pan { grid-column: 1 / -1; width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); font-size: 0.9375rem; }
.menu-line .stepper { justify-self: start; }
.menu-line-price { justify-self: end; font: 600 0.9375rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.menu-line-price small { display: block; font: 500 0.75rem var(--mono); color: var(--muted); }
@media (max-width: 420px) {
  .menu-pan { padding-inline: 8px; font-size: 0.875rem; } /* "Medium Shallow · serves 10–15 · $48/pan" fits a phone */
}
.menu-sec { border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.menu-sec summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 48px; padding: 12px 14px; cursor: pointer; }
.menu-sec[open] summary { border-bottom: 1px solid var(--line); }
.menu-sec-name { font-weight: 700; }
.menu-sec-meta { font: 500 0.8125rem var(--mono); color: var(--muted); }
.menu-sec-picked { color: var(--leaf); }
.menu-dishes { padding: 12px 14px; }
.menu-load { list-style: none; display: grid; gap: 2px; margin-top: 4px; }
.menu-load li { font-size: 0.9375rem; }
.menu-load b { font-family: var(--mono); font-weight: 600; }
.menu-load-sec { color: var(--muted); font-size: 0.8125rem; }
.menu-size { grid-column: 1 / -1; justify-self: start; padding: 4px 0; border: 0; background: none; font-size: 0.875rem; font-weight: 700; color: var(--navy); text-decoration: underline; }
.lines-missing td small { color: var(--red); }

/* ---------- swap a dish in a set package: booking form, the desk's quote editor and request sheet ---------- */
.swaps { border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); color: var(--ink); }
.swaps summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 48px; padding: 12px 14px; cursor: pointer; }
.swaps[open] summary { border-bottom: 1px solid var(--line); }
.swaps-name { font-weight: 700; }
.swaps-meta { font: 500 0.8125rem var(--mono); color: var(--muted); }
.swaps-body { display: grid; gap: 12px; padding: 12px 14px 14px; }
.swaps-intro { font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.swap-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.swap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 4px 12px; }
.swap label { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.swap select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); color: var(--ink); font-size: 0.9375rem; }
.swap--on label { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.swap--on select { border-color: var(--leaf); box-shadow: inset 0 0 0 1px var(--leaf); font-weight: 700; }
.swap-facts { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.qe-swaps { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.qe-swaps-h { font-size: 0.9375rem; font-weight: 700; }
.qe-swaps-h small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
@media (max-width: 420px) {
  .swap { grid-template-columns: 1fr; }
}

/* ---------- the quote step: statuses, the desk's quote editor, the customer's page ---------- */
.pill--changes { background: var(--red-soft); color: var(--red); }
.pill--approved { background: var(--leaf-soft); color: var(--leaf); box-shadow: inset 0 0 0 1px var(--leaf); }
.pill--declined { background: var(--paper); color: var(--muted); }
.dot--changes { background: var(--red); }
.dot--approved { background: var(--leaf); box-shadow: 0 0 0 1px var(--ink); }
.flag--wait { border-color: var(--line-strong); color: var(--muted); }
.actions--more .btn { min-height: 40px; padding: 6px 14px; font-size: 0.9375rem; }
.sheet-h small { margin-left: 6px; font: 500 0.75rem var(--mono); color: var(--muted); }
.q-message { display: grid; gap: 6px; padding: 12px; border: 2px solid var(--red); border-radius: var(--r); background: var(--red-soft); }
.q-message .eyebrow { color: var(--red); }
.q-approved { padding: 8px 12px; border-radius: 8px; background: var(--leaf-soft); color: var(--leaf); font-weight: 700; font-size: 0.9375rem; }
.q-history summary { cursor: pointer; font-size: 0.875rem; font-weight: 700; }
.q-history ul { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.q-history li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-size: 0.9375rem; }
.q-history-at { font: 500 0.75rem var(--mono); color: var(--muted); }
.roster-former { justify-self: start; }
.crew-list-status { display: grid; gap: 6px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--line); }
.former-crew { list-style: none; display: grid; }
.former-crew li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.former-crew li > span:first-child { display: grid; }
.former-crew small { color: var(--muted); font-size: 0.8125rem; }
.former-crew .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.former-kept { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.crew-trash { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--line); border-radius: 10px; background: var(--page); color: var(--muted); cursor: pointer; }
.crew-trash svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crew-trash:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.crew-trash--armed { border-color: var(--red); background: var(--red); color: #fff; }
.crew-trash--armed:hover { background: var(--red); }
/* Who can sign in to the desk, in Account settings */
.people { list-style: none; display: grid; margin: 0; padding: 0; }
.people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.people .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.person-who { display: grid; }
.person-who small { color: var(--muted); font-size: 0.8125rem; }
/* Sign-in history: read down the left, times lined up quietly on the right. Its own class, not .people:
   that list is who can sign in, and the two must never be counted or styled as one. */
.log-list { list-style: none; display: grid; margin: 0; padding: 0; }
.log-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.log-list time { color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.grant-row { display: grid; gap: 10px; padding-top: 14px; }
.grant-row select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1.5px solid #CFCCC1; border-radius: 10px; background: var(--page); color: var(--ink); font-size: 0.9375rem; }
.grant-row .btn { justify-self: start; }
.link-btn { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 0.875rem; text-decoration: underline; }

/* No box around each group: the inputs already have borders, and a border around a border is what made this
   form hard to read. A hairline between groups and a quiet label does the same job with far less ink. */
.qe .qe-sec { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.qe .qe-sec + .qe-sec { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.qe .qe-sec legend { padding: 0; text-transform: uppercase; letter-spacing: 0.1em; font: 700 0.75rem var(--body); color: var(--muted); }
.qe .qe-sec legend small { text-transform: none; letter-spacing: 0; font: 500 0.75rem var(--body); color: var(--muted); }
/* The running total sits opposite the buttons, so the head count and the number it moves are on screen together. */
.qe-total { margin-right: auto; font: 400 1.125rem var(--display); }
.qe-total small { color: var(--muted); font-size: 0.8125rem; }
.sheet-foot .form-error { flex-basis: 100%; margin: 0; }
.qe .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qe-opts { display: grid; gap: 6px; font-size: 0.9375rem; }
.qe-opts label { display: flex; align-items: center; gap: 8px; }
.qe-opts small { color: var(--muted); }
.qe-rentals { display: grid; gap: 8px; }
.qe-rental { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 10px; font-size: 0.9375rem; }
.qe-rental small { display: block; font-size: 0.8125rem; color: var(--muted); }
.qe-rental input, .qe-extra input, .qe-menu-line select, .qe-menu-line input, .qe-add-dish { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); }
.qe-extras { display: grid; gap: 8px; }
.qe-extra { display: grid; grid-template-columns: minmax(0, 1fr) 64px 96px 28px; align-items: center; gap: 8px; }
.qe-extra--head span { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.qe-menu { display: grid; gap: 8px; }
.qe-menu-line { display: grid; grid-template-columns: minmax(0, 1fr) 150px 64px 28px; align-items: center; gap: 8px; font-size: 0.9375rem; }
.qe-menu-name { font-weight: 700; overflow-wrap: anywhere; }
.qe-preview { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--paper); }
.qe-preview:empty { display: none; }
@media (max-width: 480px) {
  .qe-menu-line { grid-template-columns: minmax(0, 1fr) 64px 28px; }
  .qe-menu-line select { grid-column: 1 / -1; grid-row: 2; }
  .qe-extra { grid-template-columns: minmax(0, 1fr) 52px 80px 28px; }
}

.quote-page { display: grid; gap: 16px; padding-block: 28px 64px; }
.quote-page h1 { font: 400 clamp(2rem, 7vw, 2.75rem)/1.05 var(--display); text-wrap: balance; }
.q-when { font-weight: 700; color: var(--ink-2); }
.q-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.q-steps li { padding-top: 8px; border-top: 4px solid var(--line); font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: var(--muted); }
.q-steps li.is-done { border-top-color: var(--leaf); color: var(--ink-2); }
.q-steps li.is-now { border-top-color: var(--ink); color: var(--ink); }
.q-banner { display: grid; gap: 8px; padding: 14px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--page); }
.q-banner--action { background: var(--yellow-soft); }
.q-banner--good { border-color: var(--leaf); background: var(--leaf-soft); }
.q-banner--warn { border-color: var(--red); background: var(--red-soft); }
.q-sec { display: grid; gap: 10px; }
.q-h { font: 400 1.25rem/1.15 var(--display); }
.q-h small { display: block; margin-top: 4px; font: 500 0.75rem var(--mono); color: var(--muted); }
.q-note { margin: 0; display: grid; gap: 4px; }
.q-note figcaption { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.q-note figcaption::before { content: "— "; }
.q-approve { padding: 16px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); background: var(--page); }
.q-change, .q-terms { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.q-change summary, .q-terms summary { cursor: pointer; font-weight: 700; }
.q-change form { display: grid; gap: 10px; margin-top: 10px; }
.q-change form .btn { justify-self: start; }
.q-terms ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; font-size: 0.9375rem; }
.q-pay { list-style: none; display: grid; gap: 8px; font-size: 0.9375rem; }
.q-pay b { display: block; }
.q-foot { font-size: 0.9375rem; color: var(--ink-2); }
.q-found { list-style: none; display: grid; gap: 10px; }
.q-found-card { display: grid; gap: 4px; justify-items: start; padding: 14px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--page); color: inherit; text-decoration: none; }
.q-found-card:hover { box-shadow: var(--shadow); }
.q-found-occ { font: 400 1.125rem/1.15 var(--display); }
.sent-link { display: grid; gap: 8px; margin-top: 12px; }

/* ---------- desk: the website (special, hours, catering prices) ---------- */
.site-block { display: grid; gap: 10px; margin-bottom: 28px; }
.site-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.site-block-head h3 { font: 400 1.25rem/1.1 var(--display); }
.site-block-head .mono { font-size: 0.8125rem; color: var(--muted); }
.site-special { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); font-weight: 700; }
.site-loc-label { font-weight: 700; }
.site-week { margin: 10px 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.site-week div { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: var(--paper); }
.site-week dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.site-week dd { margin: 0; font: 500 0.75rem/1.35 var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.site-week .is-closed { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.site-week .is-closed dd { color: var(--muted); }
.price-group { border: 1.5px solid var(--line); border-radius: var(--r); background: var(--page); }
.price-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.price-group summary .mono { font-size: 0.8125rem; color: var(--muted); }
.price-group[open] summary { border-bottom: 1px solid var(--line); }
.price-rows { display: grid; padding: 0 14px; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-name { font-weight: 700; font-size: 0.9375rem; }
.price-name small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.price-input { display: flex; align-items: center; padding-left: 10px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); font: 600 0.9375rem var(--mono); }
.price-input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow-soft); }
.price-input input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px 8px 4px; border: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; text-align: right; outline: none; }
.price-row.is-edited .price-input { border-color: var(--ink); background: var(--yellow-wash); }
.price-actions, .price-row .price-error { grid-column: 1 / -1; }
/* The dish name is editable now, so it's an input wearing the old label's type rather than a styled box:
   it has to read as the menu at a glance and only look like a field once you're in it. */
.menu-name-input { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; margin-left: -8px; border: 1.5px solid transparent; border-radius: 8px; background: none; font: inherit; color: inherit; }
.menu-name-input:hover { border-color: var(--line); }
.menu-name-input:focus { border-color: var(--ink); background: var(--page); box-shadow: 0 0 0 3px var(--yellow-soft); outline: none; }
.menu-row.is-edited .menu-name-input { background: var(--yellow-wash); }
/* The add row sits under the dishes and is quieter than them until it's being used. */
.menu-add { border-top: 1px dashed var(--line-strong); border-bottom: 0; }
.menu-add .price-name { font-weight: 400; color: var(--muted); }
.menu-add .menu-name-input { border-color: var(--line); background: var(--page); font-weight: 700; }
.price-tiers { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 2px; padding-left: 12px; border-left: 2px solid var(--line); }
.price-tier { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 8px 12px; }
.price-tier-name { font-weight: 600; font-size: 0.875rem; }
.price-tier-name small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.price-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.price-actions:not(:has(> :not([hidden]))) { display: none; }
.hours-edit { display: grid; gap: 6px; }
.hours-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; }
.hours-row select { width: 100%; min-height: 44px; padding: 6px 8px; border: 1.5px solid #CFCCC1; border-radius: 8px; background: var(--page); font: 500 0.875rem var(--mono); }
.hours-to { font-size: 0.8125rem; color: var(--muted); }
.hours-closed { display: none; grid-column: 2 / -1; font-weight: 700; color: var(--muted); }
.hours-row.is-closed select, .hours-row.is-closed .hours-to { display: none; }
.hours-row.is-closed .hours-closed { display: block; }
.hours-open { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hours-open input { width: 20px; height: 20px; margin: 0; accent-color: var(--leaf); }
.hours-preview { padding: 10px 12px; border-radius: 8px; background: var(--paper); font-size: 0.9375rem; }
#hoursForm > .btn, #specialForm > .hours-open { justify-self: start; }

/* RootStall signed in to a business's own desk. Deliberately not in the theme's colours: every client site
   re-paints --ink, --paper and the rest, and this bar has to read as "not this business" on all of them, so
   it carries its own. It is a real desk with real customers on it — the bar is there to stop that being
   forgotten halfway through a demo. */
.rs-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #1B1B1F; color: #FFF; font-size: 0.875rem; line-height: 1.45; }
.rs-bar b { font-weight: 700; color: #FFD166; }
.rs-bar small { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Panels: dialog on a wide screen, bottom sheet on a phone ---
   desk.js marks a panel `.sheet--dialog` (the default for every sheet); from the desk's wide breakpoint up it
   sits in the middle, rounded on every corner, instead of rising from the bottom edge — a long request ran off
   the bottom of the screen that way. Below the breakpoint this does nothing and a bottom sheet is right.
   Account settings adds `.sheet--settings` on top for its sidebar of sections. Colour only through the tokens,
   so each theme restyles it without touching it here. */
@media (min-width: 861px) {
  .sheet--dialog { align-items: center; padding: 24px; }
  /* The same envelope Account settings uses, so every dialog on the desk is one size rather than each being
     as big as its content happened to be. .sheet--settings repeats these below for its sidebar layout. */
  .sheet--dialog .sheet-panel {
    max-width: 1120px;
    height: min(860px, 94vh);
    height: min(860px, 94dvh);
    max-height: none;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    animation: dialog-in .18s ease-out;
  }
  .sheet--dialog .sheet-body { padding: 28px 28px 32px; }
  .sheet--dialog .sheet-close { top: 14px; right: 14px; }
  .sheet--dialog .sheet-foot { padding: 14px 28px; border-radius: 0 0 18px 18px; }
}
@keyframes dialog-in { from { transform: scale(.97); opacity: 0; } }

/* A sidebar of sections, the chosen one beside it. desk.js marks the panel `.sheet--settings`. Every section is in the page at once; `hidden` shows one. On a phone it stays a
   bottom sheet: the sidebar turns into a row of sections stuck to the top of it, and the sheet scrolls. */
.sheet--settings .sheet-body { display: block; padding: 0; }
.settings-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 18px 16px 10px;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  border-radius: 18px 18px 0 0; /* the sheet's own top corners, which this row sits over */
}
.settings-for { display: grid; gap: 2px; padding-right: 44px; }
/* The sticky row would otherwise slide over the close button. */
.sheet--settings .sheet-close { z-index: 3; }
.settings-for b { font: 600 1.125rem/1.2 var(--display); }
.settings-links { display: flex; gap: 6px; margin-inline: -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.settings-links::-webkit-scrollbar { display: none; }
.settings-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink-2);
  font: 700 0.9375rem var(--body);
  text-align: left;
  cursor: pointer;
}
.settings-link svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-link:hover { color: var(--ink); background: var(--paper); }
.settings-link[aria-current="page"] { color: var(--ink); background: var(--yellow-soft); border-color: var(--yellow-soft); }
.settings-link[data-signout] { display: none; }
.settings-pane { display: grid; gap: 14px; align-content: start; padding: 18px 16px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.pane-head h2 { font: 400 1.5rem/1.15 var(--display); }
.pane-head p { margin-top: 2px; color: var(--ink-2); }

/* The Subscription section reads as two columns from the desk's wide breakpoint up — the monthly beside the
   buyout — so the whole offer is on screen at once instead of scrolling past itself. */
.plan-grid { display: grid; gap: 14px; }
/* Billing rows: what it is on the left, the one action on the right, like a settings page's own rows. */
.bill-plan, .bill-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bill-plan { padding: 14px 16px; border-radius: 12px; background: var(--yellow-wash); border: 1px solid var(--yellow-soft); }
.bill-row { padding: 12px 0; border-top: 1px solid var(--line); }
.bill-name { display: block; font: 600 1.0625rem/1.2 var(--display); }
.bill-plan .hint { max-width: 58ch; }
/* The words take the room that's left and the action stays on the same line, instead of being pushed under it. */
.bill-plan > div, .bill-row > div { display: grid; gap: 2px; flex: 1 1 26ch; min-width: 0; }
.bill-plan > .btn, .bill-row > .btn { flex: none; }
/* Starting a plan asks for the address the receipt goes to, so the action is a small stack rather than a lone
   button: the field, the button, then what actually lands on the card today. */
.bill-buy { flex: none; display: grid; gap: 8px; width: min(100%, 34ch); }
.bill-buy .field { gap: 4px; }
.bill-buy .hint { max-width: 34ch; }
.ask-form { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--paper); }
.ask-form textarea { resize: vertical; min-height: 84px; font: inherit; }
.plan-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (min-width: 861px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  /* Three short blocks — payment, invoices, what happens if they stop — read as one band, not a stack. */
  .plan-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .sheet--settings .settings-pane { gap: 12px; }
  .sheet--settings .bill-plan { padding: 12px 16px; }
  .sheet--settings .bill-row { padding: 10px 0; }
  /* Wide enough that nothing here needs scrolling: the dialog grows with the window, to a point. */
  .sheet--settings .sheet-panel { max-width: 1120px; height: min(860px, 94vh); height: min(860px, 94dvh); max-height: none; }
  .sheet--settings .sheet-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
  .settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; }
  .settings-nav {
    position: static;
    align-content: start;
    gap: 18px;
    padding: 26px 12px;
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 0;
    border-right: 1px solid var(--line);
    border-radius: 18px 0 0 18px;
  }
  .settings-for { padding: 0 12px; }
  .settings-links { display: grid; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .settings-link { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; }
  .settings-link:hover { background: var(--line); }
  .settings-link[aria-current="page"] { background: var(--page); box-shadow: var(--shadow); }
  /* Sign out sits at the foot of the sidebar here, and inside the Account section on a phone. */
  .settings-link[data-signout] { display: inline-flex; margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 18px; }
  .settings-link[data-signout]:hover { background: none; color: var(--ink); }
  .pane-signout { display: none; }
  .settings-pane { grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; padding: 26px 34px 30px; }
  /* RootStall's own switches go side by side here, so they don't push the offer off the screen. Higher
     specificity than the theme's `.rs-controls`, which loads after this sheet. */
  .sheet--settings .rs-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 14px; }
  .sheet--settings .rs-controls .eyebrow,
  .sheet--settings .rs-controls .hint { grid-column: 1 / -1; }
}
/* A short window (a 13-inch laptop, or a browser with a lot of toolbars) gets the same screen with less air,
   rather than a scrollbar. Spacing only — the type stays the size it is. */
@media (min-width: 861px) and (max-height: 780px) {
  .sheet--settings .settings-pane { padding: 18px 30px 24px; gap: 10px; }
  .sheet--settings .plan-start { padding: 12px 14px; }
  .sheet--settings .plan { padding: 12px 14px; }
  .sheet--settings .rs-controls { margin-bottom: 10px; padding: 10px 14px; }
  .sheet--settings .plan-has { gap: 5px; }
  .sheet--settings .plan-grid { gap: 12px 20px; }
  .sheet--settings .plan { gap: 6px; }
  .settings-pane .pane-head { padding-right: 44px; }
}

/* Subscription, a section of Account settings. Not drawn for a business on `plan: "free"`. */
.plan-start { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--yellow-wash); border: 1px solid var(--yellow-soft); }
.plan-start p:last-child { color: var(--ink-2); font-size: 0.9375rem; }
.plan-price { font-size: 0.9375rem; color: var(--ink-2); }
.plan-price b { font: 600 1.625rem/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.plans { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.plan { display: grid; gap: 8px; justify-items: start; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--page); }
.plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; width: 100%; }
.plan-name { font: 600 1.125rem/1.2 var(--display); }
.plan-top .plan-price b { font-size: 1.375rem; }
.plan-lede { color: var(--ink-2); font-size: 0.9375rem; }
.plan-has { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; font-size: 0.9375rem; }
.plan-has li { display: flex; gap: 10px; align-items: flex-start; }
.plan-has li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 2px; background: var(--leaf); }