:root {
  /* Native controls - date pickers, checkboxes, file inputs - draw themselves
     in the light palette unless told the page has both. */
  color-scheme: light dark;
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f3efe9;
  --line: #e3ddd4;
  --ink: #1e1b18;
  --ink-soft: #6d655c;
  --accent: #a3421c;
  --accent-ink: #ffffff;
  --danger: #9b2c2c;
  --warn-bg: #fdf1dc;
  --warn-ink: #7a4a08;
  --danger-bg: #fbe6e6;
  --ok-bg: #e6f2e6;
  --ok-ink: #275c2c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(30, 27, 24, .06), 0 4px 14px rgba(30, 27, 24, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #201e1b;
    --surface-2: #2a2724;
    --line: #383430;
    --ink: #f0ece6;
    --ink-soft: #a49b90;
    --accent: #e07a4a;
    --accent-ink: #1a1512;
    --danger: #e08585;
    --warn-bg: #3a2f16;
    --warn-ink: #f0d194;
    --danger-bg: #3a1e1e;
    --ok-bg: #1e3220;
    --ok-ink: #a8d5ab;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A column the full viewport tall, so a short page's footer still sits
     at the bottom instead of floating mid-screen. */
  min-height: 100vh; display: flex; flex-direction: column;
}

main { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 20px 64px; flex: 1 0 auto; }

h1 { font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -.015em; }
h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 2px; }

/* ---------- chrome ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 650; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
/* Outranks the nav link color above, which would grey the button label. */
.topbar nav a.btn--primary { color: var(--accent-ink); }
.topbar nav a.btn--primary:hover { color: var(--accent-ink); }
.topbar nav a:hover { color: var(--accent); }

.foot {
  max-width: 980px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--ink-soft); font-size: .82rem;
}

.messages { list-style: none; max-width: 980px; margin: 16px auto 0; padding: 0 20px; }
.msg {
  padding: 9px 13px; border-radius: var(--radius); margin-bottom: 8px;
  font-size: .9rem; border: 1px solid transparent;
}
.msg--success { background: var(--ok-bg); color: var(--ok-ink); }
.msg--warning { background: var(--warn-bg); color: var(--warn-ink); }
.msg--error   { background: var(--danger-bg); color: var(--danger); }

/* ---------- panels ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 28px;
  box-shadow: var(--shadow);
}
.panel--tight { padding: 14px 18px; }
.panel--tight summary { cursor: pointer; font-weight: 550; color: var(--ink-soft); }
.panel--tight[open] summary { margin-bottom: 14px; color: var(--ink); }

.lede { color: var(--ink-soft); margin: 0 0 16px; max-width: 62ch; }
.hint { color: var(--ink-soft); font-size: .82rem; margin: 10px 0 0; }
.empty { color: var(--ink-soft); font-style: italic; }
.section-head { margin-bottom: 12px; }

/* ---------- forms ---------- */

.import-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.import-form .field { flex: 1 1 380px; }

input[type="text"], input[type="url"], input[type="number"], input[type="date"],
input[type="password"], input[type="email"], input[type="search"], textarea, select {
  width: 100%; padding: 8px 10px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}

.field { display: block; }
/* .field's display:block outranks the UA's [hidden] rule; restore it. */
[hidden] { display: none !important; }
.field > span {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 3px;
}
.field--grow { flex: 1 1 auto; }
.field--price { flex: 0 0 110px; }

.row { display: flex; gap: 12px; margin-bottom: 10px; }
.row--split { align-items: flex-end; flex-wrap: wrap; }

.check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; white-space: nowrap; }
.check input { width: auto; }
.toggles { display: flex; gap: 14px; padding-bottom: 8px; }

/* Fields flow into as many columns as the space gives; anything that needs
   the whole line (uploads, long help) is marked .gf-wide. */
.grid-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px 32px; align-items: start;
}
.grid-form p { margin: 0; }
.grid-form label { font-size: .8rem; color: var(--ink-soft); display: block; }
.grid-form .gf-wide, .grid-form > button { grid-column: 1 / -1; }
.grid-form > button { justify-self: start; margin-top: 4px; }
.gf-top { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }

.err { color: var(--danger); font-size: .84rem; margin: 5px 0 0; }

/* An action beside a row rather than inside the row's link: an anchor cannot
   hold a form, and the row itself still opens the record. */
.item-li { position: relative; }
.item-li__action { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }
/* A row carrying a button needs room for it, beside the text and under it:
   the button is taller than the line it sits against. */
.item-li:has(.item-li__action) .item-row { padding: 14px 96px 14px 0; }

/* An operator looking at the portal as one of their clients. Loud on purpose:
   every page says whose eyes these are, and how to stop. */
.viewing {
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 7px 14px; background: var(--accent); color: var(--accent-ink); font-size: .87rem;
}
.viewing .linkish { color: inherit; text-decoration: underline; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; padding: 8px 15px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--ink-soft); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--danger { color: var(--danger); }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--ink-soft); text-decoration: underline;
}
.linkbtn--danger { color: var(--danger); }

/* ---------- store list ---------- */

.store-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.store-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  /* Anchors the live-site badge, which sits outside the card's own link. */
  position: relative;
}

/* Opens the client's public site. Deliberately small and in the corner - the
   card's main job is still to open the editor. */
.store-card__live {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  text-decoration: none; font-size: .95rem; line-height: 1;
}
.store-card__live:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.store-card__link { text-decoration: none; color: inherit; display: block; }
.store-card__img { width: 100%; height: 116px; object-fit: cover; display: block; }
.store-card__img--empty { background: var(--surface-2); }
.store-card__body { padding: 12px 14px; }
.meta { color: var(--ink-soft); font-size: .84rem; margin: 0; }
.meta__count { opacity: .75; }
.meta--hosts, .meta--owner { margin-top: 3px; }
.meta--hosts a, .meta--owner a { color: var(--ink-soft); }

/* ---------- store detail ---------- */

.store-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.store-head__id { display: flex; align-items: center; gap: 14px; }

.store-logo {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line); padding: 4px; flex: 0 0 auto;
}
.store-logo--sm {
  width: 22px; height: 22px; padding: 2px; border-radius: 5px;
  vertical-align: -5px; margin-right: 4px;
}
.store-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.store-head__actions form { margin: 0; }

.menu-section { margin-bottom: 30px; }
.menu-section__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.menu-section__head form { margin: 0 0 0 auto; }
.count {
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: 20px; padding: 1px 9px; font-size: .78rem;
}

.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

/* The item edit form, shown one at a time inside the modal. */
.item__form { display: flex; gap: 18px; padding: 16px; flex-wrap: wrap; }

.item__photo { flex: 0 0 150px; position: relative; }
.item__photo img {
  width: 150px; height: 150px; object-fit: cover;
  border-radius: 8px; display: block; background: var(--surface-2);
}
.item__photo--empty {
  width: 150px; height: 150px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink-soft);
  display: grid; place-items: center; font-size: .8rem;
}
.badge {
  position: absolute; top: 6px; left: 6px;
  font-size: .7rem; padding: 2px 7px; border-radius: 20px;
}
.badge--warn { background: var(--warn-bg); color: var(--warn-ink); }

.upload { display: block; margin-top: 8px; font-size: .76rem; color: var(--ink-soft); }
.upload input { font-size: .74rem; width: 150px; }
.upload span { display: block; margin-top: 2px; }

.item__fields { flex: 1 1 340px; min-width: 0; }

@media (max-width: 620px) {
  .item__form { flex-direction: column; }
  .item__photo, .item__photo img, .item__photo--empty, .upload input { width: 100%; }
  .item__photo img, .item__photo--empty { height: 190px; }
}

/* --- Gallery photos (builder) ------------------------------------------- */
/* Uploaded by hand rather than scraped, so this panel is always in play even
   for a store whose import brought back nothing usable. */
.panel__head { margin-bottom: .9rem; }
.panel__note { margin: .25rem 0 0; color: var(--ink-soft); font-size: .85rem; max-width: 60ch; }

.photo-add {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  padding: .8rem; margin-bottom: 1rem;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 6px;
}
.photo-add input[type="file"] { flex: 1 1 18rem; min-width: 0; font-size: .9rem; }

.photo-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.photo {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
/* Hidden photos stay legible - greying them out entirely makes it hard to
   tell what you're about to un-hide. */
.photo--hidden { opacity: .55; }
.photo__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--surface-2);
}
.photo__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.photo__link:hover .photo__cap { color: var(--accent); }
.photo__cap { padding: .55rem .7rem; font-size: .84rem; }
.photo__row { display: flex; gap: .8rem; align-items: flex-end; }
.field--narrow { width: 5.5rem; }
.f-pos { width: 100%; }

/* --- Reviews and owners (builder) --------------------------------------- */
/* Both list as preview rows (the menu's .item-row) and edit in the modal. */
.review-list, .owner-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; }
.owner-list { margin: 0 0 1rem; }
.review__row, .owner__row { display: flex; gap: .8rem; flex-wrap: wrap; }
.review__row .field { flex: 1 1 10rem; min-width: 0; }
.owner__row .field { flex: 1 1 12rem; min-width: 0; }
.owner-add { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.owner-add__link { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; flex: 1 1 20rem; }

/* --- Domains (builder) --------------------------------------------------- */
.domain-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.domain {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  flex-wrap: wrap; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  padding: .55rem .8rem;
}
.domain__host { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.domain__actions { display: flex; gap: .4rem; }
/* Not .badge - that one is absolutely positioned for the photo-size warning
   and would pin these to the top-left of the page. */
.tag {
  display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); white-space: nowrap;
}
.tag--primary { background: var(--accent); color: var(--accent-ink); }
.tag--muted { background: transparent; border: 1px dashed var(--line); }
.domain-add { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.domain-add__form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; flex: 1 1 24rem; }

/* --- Sign in -------------------------------------------------------------
   The login panel is the one page an anonymous visitor can reach, so it gets
   a narrower measure than the builder's full-width panels, and more room
   inside it: there is nothing else on the page to balance it against. */
.panel--login { max-width: 23rem; margin: clamp(2rem, 9vh, 5rem) auto; padding: 26px 24px; }
.panel--login h1 { font-size: 1.5rem; margin-bottom: 5px; }
.panel--login .lede { margin-bottom: 20px; }
.panel--login .err { margin: 0 0 16px; }
/* Spacing the form rather than each field keeps the gaps even whether or not
   the apex's staged password half is showing. */
.panel--login form { display: grid; gap: 13px; }
/* That staging wraps the password in a span, which would otherwise sit inline
   between two block fields. [hidden] still outranks this - it is !important. */
.panel--login #password-field { display: block; }
/* Boxes worth aiming at with a thumb, and a submit across the whole measure:
   the panel is the entire page here, and this is the only thing to press on
   it. Scoped to the form so sign-up's mailto button keeps its own width. */
.panel--login .fld input { padding: 13px 12px; }
.panel--login form .btn { width: 100%; padding: 12px 15px; font-size: .95rem; margin-top: 3px; }

/* Sign-out has to be a form (POST), so the button is dressed as a nav link. */
.topbar .logout { display: inline; margin: 0; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: .9rem;
}
.linkish:hover { color: var(--accent); }
.whoami { color: var(--ink-soft); font-size: .9rem; opacity: .75; }

/* ---------- the apex: marketing ---------- */

.btn--nav { padding: 6px 16px; font-size: .9rem; }

.hero {
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
  padding: 56px 0 32px;
}
.hero__pitch { flex: 1 1 340px; max-width: 34rem; }
.hero__pitch h1 {
  font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.08;
  letter-spacing: -.03em; margin: 0 0 18px;
}
.hero__pitch .lede { font-size: 1.06rem; margin: 0; }
.hero__cta { display: flex; align-items: center; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.btn--big { padding: 12px 24px; font-size: 1rem; }
.hero__signin { color: var(--ink-soft); font-size: .95rem; }
.hero__signin:hover { color: var(--accent); }

/* The pitch as a menu card - the one loud thing on the page. The serif
   italic title is a genre cue, confined to the card. */
.carte {
  flex: 0 1 400px; min-width: 300px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 30px 24px;
}
.carte h2 {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: 500; font-size: 1.35rem; text-align: center; margin: 0 0 8px;
}
.carte h2::after {
  content: ""; display: block; width: 44px; margin: 12px auto 0;
  border-bottom: 2px solid var(--accent);
}
.carte ul { list-style: none; margin: 12px 0 0; padding: 0; }
.carte li { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; }
.carte .dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line); transform: translateY(-3px); }
.carte b { color: var(--accent); font-weight: 600; white-space: nowrap; }

.site-foot { border-top: 1px solid var(--line); background: var(--surface); }
.site-foot__inner {
  max-width: 980px; margin: 0 auto; padding: 26px 20px 6px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
.site-foot__inner .meta { margin-top: 4px; }
.site-foot__nav { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; padding-top: 3px; }
.site-foot__nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.site-foot__nav a:hover { color: var(--accent); }
.site-foot__legal {
  max-width: 980px; margin: 0 auto; padding: 0 20px 22px;
  color: var(--ink-soft); font-size: .8rem;
}

/* Legal pages: a single readable column. */
.legal { max-width: 68ch; }
.legal h1 { margin-bottom: 6px; }
.legal h2 { font-size: 1.02rem; margin: 26px 0 6px; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.2em; margin: 8px 0; }
.legal li { margin: 6px 0; }
.legal a { color: var(--accent); }

/* ---------- settings page ---------- */
.config-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px 36px; align-items: start;
}
.config-form .hint { margin-top: 5px; }
.config-form > button { grid-column: 1 / -1; justify-self: start; }
.config-source { font-style: normal; opacity: .8; }

/* ---------- builder shell: sidebar layout ---------- */

.shell { display: flex; flex: 1; min-height: 0; align-items: stretch; }
.side {
  position: sticky; top: 0; align-self: flex-start;
  display: flex; flex-direction: column; gap: 18px;
  width: 208px; flex: 0 0 208px; height: 100vh; overflow-y: auto;
  padding: 16px 14px; background: var(--surface);
  border-right: 1px solid var(--line);
}
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__nav a {
  display: block; padding: 6px 10px; border-radius: 7px;
  color: var(--ink-soft); text-decoration: none; font-size: .92rem;
}
.side__nav a:hover { color: var(--accent); }
.side__nav a[aria-current] { background: var(--surface-2); color: var(--ink); }
.side__store { border-top: 1px solid var(--line); padding-top: 14px; }
.side__head {
  display: block; padding: 0 10px 6px; font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side__foot {
  margin-top: auto; padding: 10px 10px 0; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell__main main { flex: 1 0 auto; }
/* Anchored panels land clear of the viewport edge. */
[id] { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .side {
    position: static; width: auto; flex: 0 0 auto; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .side__nav { flex-direction: row; flex-wrap: wrap; }
  .side__store { border-top: 0; padding-top: 0; }
  .side__head { display: none; }
  .side__foot { margin-top: 0; margin-left: auto; border-top: 0; padding: 0; }
}

/* The add-a-site card: an invitation, not a store. */
.store-card--add { border-style: dashed; background: none; box-shadow: none; }
.store-card__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 176px; height: 100%;
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
}
.store-card__plus { font-size: 2rem; line-height: 1; }
.store-card--add:hover { border-color: var(--accent); }
.store-card--add:hover .store-card__add { color: var(--accent); }

/* ---------- full-width builder pages ---------- */
/* Beside the rail the content uses the whole area; the wide grids below
   split into columns so width becomes density, and .block--form fields
   flow across the full width so nothing hugs the left edge. */
.shell__main main { max-width: none; padding: 28px 32px 64px; }
.shell__main .messages { max-width: none; margin: 16px 0 0; padding: 16px 32px 0; }
.shell__main .foot { max-width: none; margin: 0; padding: 0 32px 40px; }
.items {
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  align-items: start;
}
.review-list {
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  align-items: start;
}
.owner-list {
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
  align-items: start;
}
@media (max-width: 760px) {
  .shell__main main { padding: 24px 20px 48px; }
  .shell__main .messages { padding: 12px 20px 0; }
  .shell__main .foot { padding: 0 20px 32px; }
}

/* ---------- flat redesign: cards are for things, not forms ---------- */
/* Editing surfaces sit directly on the page, separated by hairlines and
   whitespace; the boxes that remain (store cards, photo thumbnails, the
   marketing carte) each represent a thing, not a form. */

.block { margin: 0 0 44px; }

/* Form sections: the heading rules off the section, then the fields take
   the full width below it, flowing into columns as the screen allows. */
.block--form { border-top: 1px solid var(--line); padding-top: 24px; }
.block--form > .block__head { border-bottom: 0; padding-bottom: 0; margin: 0 0 20px; }
.block__head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; }
.block__head--row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin: 0 0 22px;
}
.block__note { color: var(--ink-soft); font-size: .85rem; margin: 6px 0 0; max-width: 68ch; }

.item__form { padding: 0; }
.domain {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 10px 0;
}
.items, .review-list, .owner-list, .domain-list { gap: 0 48px; }
/* A field whose label sits in the box until there is something in it: the
   form reads as a row of boxes rather than a column of headings, and a
   filled field still says what it is. */
.fld { position: relative; display: block; }
/* The sizing classes the old .field markup carried, so a field can still be
   the wide one or the narrow one in a row. */
.fld.field--grow { flex: 1 1 auto; }
.fld.field--narrow { flex: 0 1 11rem; }
.fld.field--price { flex: 0 0 110px; }
.fld input, .fld textarea { width: 100%; display: block; }
.fld label {
  /* Never wrapped: a two-line label in a narrow field pushes itself out of
     the box it belongs to. */
  white-space: nowrap;
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  padding: 0 4px; border-radius: 10px;
  color: var(--ink-soft); font-size: .92rem; pointer-events: none;
  transition: .15s ease all;
}
/* Floated, the label straddles the top border and its own background cuts
   the line behind it, which is what makes it read as a notch rather than a
   caption. Same background as the field, so it works over either surface. */
.fld input:focus + label,
.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,
.fld textarea:not(:placeholder-shown) + label {
  top: 0; transform: translateY(-50%); font-size: .75rem; background: var(--bg);
}
/* A textarea is tall, so its label rests against the first line rather than
   the middle of the box. */
.fld--area label { top: 1.15rem; }

/* A select always has a value, so its label is always the floated one: there
   is no empty state for it to sit in the middle of. */
.fld select { width: 100%; padding: 14px 10px 5px; }
.fld--select label {
  top: 0; transform: translateY(-50%);
  font-size: .75rem; background: var(--bg);
}
.fld:focus-within label { color: var(--accent); }
.fld input:focus::placeholder, .fld textarea:focus::placeholder { color: transparent; }

/* A part of a form that most of the time is not wanted: the tick reveals it,
   and until then the fields are not there to read past. No script - the
   checkbox next to them is the state. */
.reveal { display: grid; gap: 10px; }
.reveal__body { display: none; }
.reveal__tick:checked ~ .reveal__body,
.reveal:has(.reveal__tick:checked) .reveal__body { display: block; }

/* Each charge is one row: what for, then how much. The foot carries the one
   due date the rows share, beside the way to add another. */
.charges { display: grid; gap: 10px; }
.charges__row { display: flex; gap: .8rem; align-items: center; }
.charges__row .fld:first-child { flex: 1 1 18rem; }
.charges__row .fld:last-child { flex: 0 0 11rem; }
.charges__foot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.charges__foot .fld { flex: 0 0 11rem; }
.charges .hint { margin: 0; }
@media (max-width: 560px) {
  .charges__row { flex-wrap: wrap; }
  .charges__row .fld { flex: 1 1 100%; }
}

.block__danger { margin: 18px 0 0; }
.row--split .btn { margin-bottom: 1px; }

.search { display: flex; gap: .6rem; align-items: center; margin: 0 0 14px; }
.search .fld { flex: 1 1 18rem; min-width: 0; }
/* Safari draws its own rounded field and a cancel button for type=search;
   both fight the rest of the forms. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The add sits above the rows, so it needs air under it as well as over it,
   or the first row reads as part of the button strip. */
.photo-add, .review-list + .form, .owner-add, .domain-add { margin: 2px 0 16px; }

/* The overview's stat chips: navigation, so they look pressable - a bordered
   chip with an arrow that answers "where does this go". */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 34px; }
.stat {
  display: flex; align-items: baseline; gap: 9px;
  padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft);
  text-decoration: none; font-size: .92rem;
}
.stat b { color: var(--ink); font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; }
.stat__go { color: var(--ink-soft); opacity: .5; transition: transform .12s ease; }
.stat:hover { border-color: var(--accent); color: var(--accent); }
.stat:hover b, .stat:hover .stat__go { color: var(--accent); opacity: 1; }
.stat:hover .stat__go { transform: translateX(2px); }

.disclosure { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 14px; }
.disclosure summary { cursor: pointer; color: var(--ink-soft); font-weight: 550; }
.disclosure[open] summary { margin-bottom: 12px; color: var(--ink); }

/* ---------- menu previews and the edit modal ---------- */
/* The menu page lists; ?edit=<id> re-renders it with one form in a modal.
   Backdrop and close are ordinary links back to the clean URL. */

.item-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.item-row--hidden { opacity: .55; }
.item-row:hover .item-row__name { color: var(--accent); }
.item-row__thumb {
  flex: 0 0 52px; width: 52px; height: 52px;
  object-fit: cover; border-radius: 8px; background: var(--surface-2);
}
.item-row__thumb--empty { display: block; }
.item-row__text { flex: 1; min-width: 0; }
.item-row__name { display: block; font-weight: 550; }
.item-row__desc {
  color: var(--ink-soft); font-size: .84rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
.item-row__price {
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.flag {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px;
  vertical-align: 2px;
}
.flag--warn { color: var(--warn-ink); background: var(--warn-bg); border-color: transparent; }

.modal { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: 6vh 16px 40px; }
.modal__backdrop { position: fixed; inset: 0; background: rgba(20, 16, 12, .45); }
.modal__panel {
  position: relative; margin: 0 auto; width: min(680px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  padding: 20px 26px 26px;
}
.modal__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.modal__close {
  color: var(--ink-soft); text-decoration: none;
  font-size: 1.5rem; line-height: 1;
}
.modal__close:hover { color: var(--ink); }

/* The modal's footer: hairline above, destructive action alone on the left,
   Cancel/Save (or Cancel/Delete in the confirm modal) grouped right. */
.modal__foot {
  flex: 1 1 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 14px;
}
.modal__foot-main { display: flex; align-items: center; gap: 10px; }
/* The plain modal form: owners, reviews, photos. Fields stack; the item
   form keeps its own photo-beside-fields layout. */
.modal__form { display: flex; flex-direction: column; gap: 12px; }
.modal__form .hint { margin: 0; }
.modal__form .warn { margin: 0; font-size: .82rem; color: var(--accent); }
/* Billing: facts as a definition list, the plan's feature checkboxes, and
   the Payment Element page. */
.fact-list { margin: 0 0 16px; display: grid; gap: 8px; }
.fact-list div { display: flex; gap: 14px; align-items: baseline; }
.fact-list dt { flex: 0 0 7rem; color: var(--ink-soft); font-size: .85rem; }
.fact-list dd { margin: 0; }
.feature-set { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.feature-set legend { font-size: .85rem; color: var(--ink-soft); margin-bottom: 4px; padding: 0; }
.feature-set .hint { margin: 0 0 0 6px; display: inline; }
.flag--ok { color: var(--ok-ink); background: var(--ok-bg); border-color: transparent; }
.item-row .btn--small { margin-left: 12px; }
.pay { max-width: 32rem; }
.pay-form { margin-top: 18px; }
.pay-form__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal__photo {
  width: 100%; max-height: 320px; object-fit: cover; display: block;
  border-radius: 8px; background: var(--surface-2);
}
.modal__foot--confirm { justify-content: flex-end; }

.modal__panel--confirm { width: min(440px, 100%); }
.confirm__note { color: var(--ink-soft); font-size: .9rem; margin: 8px 0 0; max-width: 44ch; }

/* The one solid red button in the app: the point of no return. */
.btn--danger-solid { background: var(--danger); color: var(--accent-ink); border-color: transparent; }
.btn--danger-solid:hover { filter: brightness(1.08); }

/* Drag-to-reorder: the grips are the handles (menu-sort.js), so clicking a
   row still opens its editor. On-screen order is the saved order. */
.item-li { display: flex; align-items: center; border-top: 1px solid var(--line); }
.item-li .item-row { border-top: 0; flex: 1; min-width: 0; }
.grip {
  background: none; border: 0; margin: 0; padding: 4px 8px 4px 0;
  color: var(--ink-soft); opacity: .45; line-height: 0;
  cursor: grab; touch-action: none;
}
.grip:hover { opacity: 1; }
.grip:active { cursor: grabbing; }
.sortable-ghost { opacity: .35; }
.sortable-drag { opacity: .9; }
/* A drop target even when a section is empty. */
.items { min-height: 14px; }

/* ---------- custom form controls ---------- */
/* Native checkboxes and file pickers ignore the palette; redraw them with
   the tokens. Both stay real inputs - the checkbox becomes a sliding
   switch via appearance:none, the file input restyles its own button - so
   keyboard, forms and no-JS behaviour are exactly as before. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 32px; height: 18px; flex: none;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface-2); cursor: pointer;
  position: relative; vertical-align: -4px; margin: 0;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-soft);
  transition: transform .15s ease, background .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--ink-soft); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { transform: translateX(14px); background: var(--accent-ink); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type="file"] { font-size: .84rem; color: var(--ink-soft); max-width: 100%; }
input[type="file"]::file-selector-button {
  padding: 6px 12px; margin-right: 10px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: .84rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--ink-soft); }

/* ---------- image remove/browse ---------- */
/* Every image field is the picture plus two actions: Remove - a hidden
   checkbox its label toggles, applied on save, with the pending state
   drawn by CSS - and the file input to browse for a replacement. */
input[type="checkbox"].pic__clear {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.pic { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.pic__thumb img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 7px;
  display: block; background: var(--surface-2);
}
.pic__name { font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.pic__remove {
  cursor: pointer; font-size: .84rem;
  color: var(--danger); text-decoration: underline;
}
.item__photo .pic__remove { display: block; margin-top: 6px; }
.pic__remove span:last-child { display: none; color: var(--warn-ink); }
.pic__clear:checked ~ .pic__thumb,
.pic__clear:checked ~ .pic__name,
.pic__clear:checked ~ img { opacity: .35; }
.pic__clear:checked ~ .pic__name { text-decoration: line-through; }
.pic__clear:checked ~ .pic__remove span:first-child { display: none; }
.pic__clear:checked ~ .pic__remove span:last-child { display: inline; }
.pic__clear:focus-visible ~ .pic__remove { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A topping row carries its photo where one was uploaded. */
.topping-thumb {
	width: 32px; height: 32px; border-radius: 6px;
	object-fit: cover; background: var(--surface-2);
}

/* The heading row that opens each group of toppings. */
.domain--group {
	border: 0; background: none; padding: 14px 0 4px;
	font-size: .74rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-soft);
}