/* ReplyMaid visual system v2: "Corner Shop" (see design/design_system_corner_shop.md)
   Canvas: cream paper. Type: Fraunces for headlines, Nunito Sans for everything else.
   Accents: terracotta (anything you can press, the quotation mark, the wordmark), chocolate ink.
   Replies are set apart by a terracotta quotation mark, never a colored side bar.
   Light only (v0.10.2): there is no dark theme. color-scheme: light and the explicit cream on html and
   body keep a device in dark mode from inverting the page or drawing dark form controls. */
:root {
  color-scheme: light;
  --paper: #FBF6EA;
  --panel: #FAF1DC;
  --card: #FFFFFF;
  --ink: #3B2A20;
  --ink-soft: #6B5648;
  --terracotta: #CC5A1F;
  --terracotta-deep: #A94714;
  --rule: #E8D9BE;
  --star: #E39B2E;
  --badge: #7A4A2E;
  --error: #8A3B2A; /* the sign-in error's deep red; cream on it reads at 7.11:1 */
  --radius: 12px;
  --radius-card: 14px;
  --shadow: 0 2px 12px rgba(59, 42, 32, 0.10);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: #FBF6EA;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem; /* 18px base, legible for every age */
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 650; line-height: 1.12; letter-spacing: -0.005em; font-variation-settings: "SOFT" 60, "opsz" 72; }
h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.15rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }

a { color: var(--terracotta); text-underline-offset: 3px; }
a:hover { color: var(--terracotta-deep); }
a:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header: the cream awning with a terracotta stripe along the top */
header.site { background: var(--panel); border-top: 4px solid var(--terracotta); border-bottom: 1px solid var(--rule); }
/* .site-bar shares its element with .wrap, so it names the side gutter itself (a bare "1.05rem 0" here
   used to cancel .wrap's gutter and push the header to the very edges of a phone). */
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; }
.wordmark { flex: none; font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; letter-spacing: -0.01em; }
/* The space after the mark belongs to the mark (v0.10.5). As a flex gap it also fell between "Reply"
   and "Maid", which are two flex items, and the wordmark read as two words. */
.wordmark .mark { width: 40px; height: 40px; flex: none; margin-right: 0.55rem; }
.wordmark .maid { color: var(--terracotta); }
/* One link, two colors (v0.10.3): pointing at either half changes both halves together. */
.wordmark:hover, .wordmark:focus-visible { color: var(--badge); }
.wordmark:hover .maid, .wordmark:focus-visible .maid { color: var(--terracotta-deep); }
nav.main a { margin-left: 1.4rem; text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: 1rem; }
nav.main a:hover { color: var(--ink); }

/* Buttons: filled terracotta primary, outlined secondary */
.btn {
  display: inline-block; background: var(--terracotta); color: #fff;
  padding: 0.85rem 1.6rem; border-radius: var(--radius); text-decoration: none;
  font-weight: 800; font-size: 1.05rem; border: 2px solid var(--terracotta); cursor: pointer;
  font-family: inherit; line-height: 1.3;
}
.btn:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); color: #fff; }
.btn.outline { background: transparent; color: var(--terracotta); }
.btn.outline:hover { background: #F6E7D6; color: var(--terracotta-deep); }

/* Hero */
.hero { padding: 4.2rem 0 3.6rem; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--badge); margin-bottom: 0.9rem; }
.hero p.lede { margin-top: 1.1rem; font-size: 1.22rem; color: var(--ink-soft); max-width: 32rem; }
.hero .actions { margin-top: 1.8rem; }
.hero .note { margin-top: 0.8rem; font-size: 0.95rem; color: var(--ink-soft); }

/* Pinboard: homepage illustration only */
.board { background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; padding: 2rem 1.6rem 2.2rem; position: relative; }
.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 1.05rem 1.15rem; position: relative; max-width: 26rem; }
.card + .card { margin-top: 1.1rem; margin-left: 2.2rem; }
.card.review { transform: rotate(-1.2deg); }
.card.reply { transform: rotate(0.8deg); }
.pin { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: var(--terracotta); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.card .who { font-weight: 800; font-size: 0.95rem; }
.card p { font-size: 0.98rem; margin-top: 0.3rem; }
.card.reply .who { color: var(--terracotta); }

/* The reply mark: a terracotta opening quotation mark */
.quoted { position: relative; padding-left: 2rem; }
.quoted::before {
  content: "\201C"; position: absolute; left: 0; top: -0.3rem;
  font-family: var(--serif); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--terracotta);
}
.badge { position: absolute; right: -0.5rem; bottom: -0.7rem; background: var(--badge); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 8px; }

/* Sections */
section.band { padding: 3.4rem 0; }
section.band.alt { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1.8rem; }
.step { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 1.3rem 1.35rem 1.4rem; }
.step .num { font-weight: 800; color: var(--terracotta); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 1.02rem; }

.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; margin-top: 1.6rem; }
.trust div { padding-left: 1.7rem; position: relative; }
.trust div::before { content: "\2713"; position: absolute; left: 0; top: 0.1rem; color: var(--terracotta); font-weight: 800; }
.trust p { color: var(--ink-soft); font-size: 1.02rem; }

/* Contact + footer */
.contact { text-align: center; }
.contact .btn { margin-top: 1.2rem; }
footer.site { border-top: 1px solid var(--rule); padding: 2rem 0 2.6rem; color: var(--ink-soft); font-size: 0.95rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
footer.site a { color: var(--ink-soft); }

/* Legal pages */
main.legal { padding: 3rem 1.25rem 4rem; max-width: 46rem; }
main.legal h1 { margin-bottom: 0.4rem; }
main.legal .updated { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 2rem; }
main.legal h2 { margin-top: 2.2rem; font-size: 1.45rem; }
main.legal p, main.legal li { margin-top: 0.8rem; color: var(--ink); }
main.legal ul { padding-left: 1.4rem; }

/* Responsive */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .steps { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .card + .card { margin-left: 1.1rem; }
}

/* Approval pages: the owner's counter. White cards on cream. */
main.approve { padding: 2.6rem 1.25rem 4rem; max-width: 40rem; }
main.approve h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 0.3rem; }
main.approve .for { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.6rem; }
main.approve .hcard { border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 1.15rem 1.3rem; background: var(--card); }
main.approve .hcard + .hcard, main.approve .hcard + .replybox { margin-top: 1.1rem; }
main.approve .hcard .who { font-weight: 800; font-size: 0.95rem; margin-top: 0.15rem; }
main.approve .hcard .who span { font-weight: 400; color: var(--ink-soft); }
main.approve p.text { white-space: pre-wrap; margin-top: 0.4rem; }
main.approve p.quiet { color: var(--ink-soft); font-style: italic; margin-top: 0.4rem; }
main.approve .replybox { padding: 0.8rem 0.25rem 0; }
main.approve .replybox .rl { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.25rem; }
main.approve .replybox .quoted p.text { font-size: 1.12rem; }
main.approve textarea {
  width: 100%; min-height: 9rem; margin-top: 0.4rem;
  font: inherit; font-size: 1.05rem; line-height: 1.55; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.85rem 0.95rem;
  background: var(--card); resize: vertical;
}
main.approve textarea:focus { border-color: var(--terracotta); }
main.approve .count { font-size: 0.85rem; color: var(--ink-soft); text-align: right; margin-top: 0.3rem; }
main.approve .ownernote { margin-top: 1.4rem; padding: 1rem 1.2rem 1.05rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-card); font-size: 1rem; }
main.approve .ownernote strong { color: var(--badge); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
main.approve .ownernote p { margin-top: 0.3rem; }
main.approve .decide { margin-top: 1.8rem; display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap; }
main.approve .decide a.alt { font-weight: 700; font-size: 1rem; margin-left: 0.4rem; }
main.approve .caution { margin-top: 1.4rem; color: var(--ink-soft); font-size: 1rem; }
main.approve .done { margin-top: 1.2rem; font-size: 1.1rem; }
main.approve .done + .hcard { margin-top: 1.6rem; }
main.approve .fine { margin-top: 2rem; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 520px) {
  main.approve .decide { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  main.approve .decide .btn { text-align: center; }
  main.approve .decide a.alt { text-align: center; margin: 0.2rem 0 0; }
}

/* Preference pages: what we noticed in the owner's edits, and the change we'd make. */
main.approve .hcard .cardhead { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--badge); }
main.approve .hcard p.lead { font-size: 1.08rem; }
main.approve .pair { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
main.approve .pair .lab { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-top: 0.7rem; }
main.approve .pair .lab:first-child { margin-top: 0; }
main.approve .pair p.text { font-size: 1rem; margin-top: 0.2rem; }
main.approve .pair .soft { color: var(--ink-soft); }
main.approve .hcard.noticed + .replybox { margin-top: 1.1rem; }

/* Rule revisions (v0.8.0): the warning before a governing rule changes, and the list of what changes. */
main.approve .warn { margin-top: 1.4rem; padding: 1rem 1.2rem 1.05rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-card); font-size: 1.02rem; font-weight: 600; }
main.approve .rule .cardhead { color: var(--badge); }
main.approve .rule p.title { font-family: var(--serif); font-weight: 650; font-size: 1.25rem; margin-top: 0.2rem; }
main.approve .rule p.text { margin-top: 0.4rem; }
main.approve ul.changes { margin: 0.5rem 0 0 1.25rem; }
main.approve ul.changes li { margin-top: 0.35rem; }

/* Sign-in and settings (v0.9.0): one column, large type, the same cards and buttons. */
main.approve .field { margin-top: 1.4rem; }
main.approve .field label { display: block; font-weight: 800; font-size: 1.02rem; }
main.approve .field .help { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.15rem; }
main.approve .field input[type="text"], main.approve .field input[type="email"], main.approve .field input[type="password"] {
  width: 100%; margin-top: 0.5rem; font: inherit; font-size: 1.05rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 0.95rem; background: var(--card);
}
main.approve .field input:focus { border-color: var(--terracotta); outline: none; }
main.approve .field textarea { min-height: 6rem; }
main.approve .field .show { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.4rem; display: flex; align-items: center; gap: 0.45rem; }
main.approve .field .show input { width: auto; margin: 0; }
main.approve .notice { margin-top: 1.2rem; padding: 0.9rem 1.1rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-card); }
main.approve .problem { margin-top: 1.2rem; padding: 0.9rem 1.1rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-card); color: var(--error); font-weight: 700; }
main.approve section.block { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
main.approve section.block h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin-bottom: 0.3rem; }
main.approve section.block h3 { font-size: 1.15rem; margin-top: 1.6rem; color: var(--badge); font-family: var(--sans); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; }
main.approve .intro { color: var(--ink-soft); font-size: 1rem; }
main.approve .hcard.rule + .hcard.rule, main.approve .hcard.note + .hcard.note { margin-top: 0.9rem; }
main.approve .hcard .now { margin-top: 0.5rem; font-size: 1rem; }
main.approve .hcard .changed { margin-top: 0.5rem; font-size: 0.92rem; color: var(--badge); font-weight: 700; }
main.approve .hcard .acts { margin-top: 0.8rem; display: flex; gap: 0.6rem 0.8rem; flex-wrap: wrap; }
main.approve .btn.small { padding: 0.55rem 1rem; font-size: 0.95rem; }
main.approve .hcard.note .when { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.3rem; }
main.approve .hcard.paused { background: var(--panel); }
main.approve .readonly { margin-top: 1.4rem; }
main.approve .readonly p { margin-top: 0.4rem; }
main.approve .readonly .why { color: var(--ink-soft); font-size: 0.92rem; }
main.approve .signed { font-size: 0.95rem; color: var(--ink-soft); }
nav.main form { display: inline; }
nav.main button { background: none; border: 0; padding: 0; margin-left: 1.4rem; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap; }
nav.main button:hover { color: var(--ink); }
/* The signed-in header (v0.10.2): the email gives way (it shortens with an ellipsis, and steps aside on a
   phone) so "Sign out" always stays on the screen, on one line, with a finger-sized target. */
nav.main { min-width: 0; }
nav.main .account { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
nav.main .account .signed { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Your settings" (the admin's link, v0.12.1) keeps the same gap before the email as the email keeps before Sign out. */
nav.main .account a + .signed { margin-left: 1.4rem; }
nav.main .account form { flex: none; }
@media (max-width: 560px) {
  nav.main .account .signed { display: none; }
  nav.main .account button { margin-left: 0; padding: 0.6rem 0; }
}

/* Settings tiles (v0.9.1, one Drafting rules grid since v0.9.2): the 24 provided rules, then the owner's
   custom rules, as a grid of tiles. Four per row on a desktop, two on a tablet, one on a phone; tiles in a
   row share a height; every button on a tile is the small outlined one (the filled button is reserved for
   confirmations). A custom rule carries its number as a soft small-caps label in the top corner above
   its title, and the custom rule credits show as words plus small circles. */
main.approve.settings { max-width: 64rem; }
main.approve.settings section.block h2 { margin-bottom: 0.4rem; }
main.approve .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.1rem; align-items: stretch; }
main.approve .tile {
  display: flex; flex-direction: column; gap: 0.45rem; min-height: 12rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 1.05rem 1.1rem 1rem;
}
main.approve .tile p.title { font-family: var(--serif); font-weight: 650; font-size: 1.2rem; line-height: 1.2; margin: 0; }
main.approve .tile p.text { font-size: 1rem; margin: 0; white-space: normal; }
main.approve .tile .clamp.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
main.approve .tile .more { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0; color: var(--terracotta); font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
main.approve .tile .more:hover { color: var(--terracotta-deep); }
main.approve .tile .now { font-size: 0.95rem; margin: 0; }
main.approve .tile .meta { font-size: 0.9rem; color: var(--badge); font-weight: 700; margin: 0; }
main.approve .tile .meta + .meta { margin-top: -0.25rem; }
main.approve .tile .acts { margin-top: auto; padding-top: 0.6rem; display: flex; gap: 0.5rem 0.6rem; flex-wrap: wrap; }
main.approve .tile p.label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 -0.15rem; }
main.approve .tile.revised { background: var(--panel); }
main.approve .tile.paused { background: var(--panel); }
main.approve .tile.paused p.label { color: var(--badge); }
/* The custom-rule counter: words plus six small circles, one filled per rule in use, in the same muted style. */
main.approve p.count .dots { display: inline-flex; gap: 0.35rem; vertical-align: middle; margin-left: 0.5rem; }
main.approve p.count .dots i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--ink-soft); background: transparent; }
main.approve p.count .dots i.on { background: var(--ink-soft); }
/* The counter sits midway (v0.10.3): the same space from the heading above it to its words as from its
   words to the line below it, whichever line that is (the Add more credits link or the all-in-use line). */
main.approve.settings p.intro.count { margin-top: 0.85rem; }
main.approve.settings section.block p.count + details.addmore { margin-top: 0.5rem; }
main.approve.settings section.block p.count + p.quiet { margin-top: 0.625rem; }
@media (max-width: 560px) { main.approve.settings section.block p.count + p.quiet { margin-top: 0.45rem; } }
/* Past a phone (v0.10.2) the counter sits on the left, in the same text column as the heading above it and
   the lines under it, with the circles centered on the words beside them. A phone keeps it as it was. */
@media (min-width: 561px) {
  main.approve.settings p.intro.count { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  main.approve.settings p.intro.count .dots { align-items: center; }
}
/* Google hours: two aligned columns, the day on the left (regular weight), the hours on the right, Monday
   to Sunday, a little air between rows. No borders. Two columns still fit a phone. */
main.approve dl.hours { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.4rem; row-gap: 0.35rem; margin: 0.4rem 0 0; }
main.approve dl.hours dt { font-weight: 400; }
main.approve dl.hours dd { margin: 0; }
main.approve a.tile.add {
  align-items: center; justify-content: center; text-align: center; text-decoration: none;
  background: transparent; border: 2px dashed var(--terracotta); color: var(--terracotta); font-weight: 800; font-size: 1.1rem;
}
main.approve a.tile.add:hover { background: #F6E7D6; color: var(--terracotta-deep); }
main.approve section.block p.quiet { margin-top: 1rem; font-style: normal; }
@media (max-width: 1000px) { main.approve .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { main.approve .tiles { grid-template-columns: 1fr; } main.approve .tile { min-height: 0; } }

/* The floating confirmation note (v0.9.4, colors v0.9.5): one small card at the bottom center of the
   settings page. A success note is chocolate (--ink) with cream text (--paper) and a terracotta close mark
   (3.28:1 on the brown, enough for the large bold mark; it brightens to cream on hover); it fades out on
   its own after about six seconds. An error note is the sign-in error's deep red (--error) with cream
   text and a cream close mark (7.11:1) and stays until it is closed. Brown on cream is 12.66:1 either way.
   The stylesheet has no dark theme (the page is cream on every device), so the same colors serve
   everywhere; a light card would blend into the page.
   Text is Nunito Sans at the tiles' size and padding, corners as the tiles, a stronger shadow lifts it.
   On a phone it keeps a 16px gutter each side and never grows wider than the screen. */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 1.25rem; margin: 0 auto; z-index: 50;
  display: flex; align-items: flex-start; gap: 0.75rem;
  width: fit-content; max-width: 36rem;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(59, 42, 32, 0.32); padding: 0.85rem 0.85rem 0.85rem 1.1rem;
  font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease;
}
.toast p { margin: 0; overflow-wrap: anywhere; color: var(--paper); }
.toast.err { background: var(--error); border-color: var(--error); }
.toast.err p { font-weight: 700; }
.toast .close {
  flex: none; background: none; border: 0; padding: 0 0.15rem; margin: -0.15rem 0 0;
  color: var(--terracotta); font: inherit; font-size: 1.45rem; line-height: 1; font-weight: 700; cursor: pointer;
}
.toast .close:hover, .toast.err .close { color: var(--paper); }
.toast.err .close:hover { color: #FFFFFF; }
.toast.gone { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }

/* Add more credits (v0.10.0): under the counter, a plain link (or the filled button when no credit is left)
   that opens a small panel on the same page with the two packs, each an outlined button; the outlined
   "Manage your extra credits" button sits under it for owners who already bought some. */
main.approve details.addmore { margin-top: 0.9rem; }
main.approve details.addmore summary { list-style: none; cursor: pointer; display: inline-block; width: auto; }
main.approve details.addmore summary::-webkit-details-marker { display: none; }
main.approve details.addmore summary.link { color: var(--terracotta); font-weight: 700; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }
main.approve details.addmore summary.link:hover { color: var(--terracotta-deep); }
main.approve details.addmore .panel { margin-top: 0.9rem; padding: 1rem 1.1rem 0.9rem; max-width: 34rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); }
main.approve details.addmore .packs { display: flex; gap: 0.6rem 0.8rem; flex-wrap: wrap; }
main.approve details.addmore .packs form { display: inline; margin: 0; }
main.approve details.addmore .panel .fine { margin-top: 0.75rem; font-size: 0.92rem; color: var(--ink-soft); }
main.approve form.manage { margin-top: 0.9rem; }
@media (max-width: 520px) { main.approve details.addmore .packs { flex-direction: column; } main.approve details.addmore .packs .btn { width: 100%; text-align: center; } }

/* Forms on the welcome flow and the admin portal (v0.12.0): the select and number inputs match the text
   inputs; a radio row sits inline; a field with a problem carries its message under the input. */
main.approve .field select, main.approve .field input[type="number"] {
  width: 100%; margin-top: 0.5rem; font: inherit; font-size: 1.05rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 0.95rem; background: var(--card);
}
main.approve .field select:focus, main.approve .field input[type="number"]:focus { border-color: var(--terracotta); outline: none; }
/* Every select (v0.12.1): our own chevron, inset from the right border by the same 0.95rem the text is
   inset from the left, so the arrow never touches the edge (the native one did). */
main.approve .field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236B5648' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 14px 9px;
}
main.approve .field .problem { margin-top: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.95rem; }
main.approve .field .static { margin-top: 0.5rem; font-size: 1.05rem; }
main.approve .field .static .why { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.15rem; }
main.approve .choices { display: flex; gap: 0.6rem 1.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
main.approve .choices label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 1.02rem; }
main.approve .choices input { width: 1.1rem; height: 1.1rem; accent-color: var(--terracotta); margin: 0; }
main.approve .pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 560px) { main.approve .pair2 { grid-template-columns: 1fr; } }

/* The welcome flow's stepper (v0.12.1, replacing the 0.12.0 progress line): evenly spaced numbered
   circles joined by a thin rule across the content width. A finished step is a filled terracotta circle
   with a cream check; the current step an outlined terracotta circle with its number and a bold label;
   later steps muted circles with muted labels. Labels are centered under the circles, each the same
   width. On a phone only the current step's label shows. Plain HTML, no script. */
main.approve ol.stepper { --dot: 2rem; list-style: none; display: flex; align-items: flex-start; margin: 0.4rem 0 1.8rem; padding: 0; }
main.approve ol.stepper li { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
main.approve ol.stepper li + li::before { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); right: 50%; width: 100%; height: 2px; background: var(--rule); }
main.approve ol.stepper li.done + li::before { background: var(--terracotta); }
main.approve ol.stepper .dot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: var(--dot); height: var(--dot); border-radius: 50%; border: 2px solid var(--rule); background: var(--paper);
  font-weight: 800; font-size: 0.95rem; line-height: 1; color: var(--ink-soft);
}
main.approve ol.stepper .lab { margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.25; color: var(--ink-soft); padding: 0 0.2rem; }
main.approve ol.stepper li.done .dot { background: var(--terracotta); border-color: var(--terracotta); color: var(--paper); }
main.approve ol.stepper li.now .dot { border-color: var(--terracotta); color: var(--terracotta); background: var(--paper); }
main.approve ol.stepper li.now .lab { color: var(--ink); font-weight: 800; }
@media (max-width: 560px) {
  main.approve ol.stepper li:not(.now) .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
main.approve .steplead { font-size: 1.08rem; margin-bottom: 0.4rem; }
main.approve .readonly.inline { margin-top: 1.4rem; }

/* The admin portal (v0.12.0): the businesses table, wide, with the row actions as small outlined buttons.
   On a narrow screen the table scrolls sideways inside its card. */
main.approve.admin { max-width: 76rem; }
main.approve .tablewrap { overflow-x: auto; margin-top: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--card); }
main.approve table.biz { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
main.approve table.biz th, main.approve table.biz td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--rule); vertical-align: top; white-space: nowrap; }
main.approve table.biz th { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--badge); background: var(--panel); }
main.approve table.biz tr:last-child td { border-bottom: 0; }
main.approve table.biz td.name { font-weight: 800; }
main.approve table.biz tr.inactive td { color: var(--ink-soft); }
main.approve table.biz tr.inactive td.name::after { content: " (inactive)"; font-weight: 400; font-size: 0.85rem; }
main.approve table.biz .acts { display: flex; gap: 0.4rem; flex-wrap: nowrap; margin: 0; padding: 0; }
main.approve table.biz .acts form { display: inline; margin: 0; }
main.approve .btn.tiny { padding: 0.35rem 0.7rem; font-size: 0.85rem; border-radius: 9px; }
main.approve .switch { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-top: 0.4rem; padding: 0.8rem 1rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-card); font-size: 1rem; }
main.approve .switch form { display: inline; margin: 0; }
main.approve .switch .on { color: var(--badge); font-weight: 700; }
/* The tile's small sentence sits on the same line as the label and the button (v0.12.1): .fine carries a
   2rem top margin everywhere else on these pages, which pushed it under the row's center. */
main.approve .switch .fine { margin: 0; font-size: 0.92rem; color: var(--ink-soft); align-self: center; }
/* The edit page (v0.12.1): the read-only facts as two aligned columns, and the secondary buttons under them. */
main.approve dl.facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.4rem; row-gap: 0.35rem; margin: 0; }
main.approve dl.facts dt { font-weight: 800; }
main.approve dl.facts dd { margin: 0; }
main.approve .decide.secondary { margin-top: 1.4rem; }
main.approve .decide.secondary form { display: inline; margin: 0; }