/* Featherstall builder — app.css
   Same identity as brand.css (tokens copied, nothing imported).
   The drawing convention: a solid line is saved; a dashed line is proposed —
   drafted by Claude or not yet live. Saving turns dashes solid. */

@font-face {
  font-family: "Archivo";
  src: url(/_p/archivo.woff2) format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Archivo fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101.6%;
  ascent-override: 86.4%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

:root {
  --paper: oklch(0.97 0.006 85);
  --ink: oklch(0.2 0.006 60);
  --signal: oklch(0.66 0.205 40);
  --ink-2: oklch(0.46 0.01 60);
  --rule: oklch(0.84 0.008 80);
  --paper-2: oklch(0.78 0.01 80);
  --well: oklch(0.995 0.003 85);
  /* app additions */
  --paper-3: oklch(0.935 0.008 85);
  --alarm: oklch(0.5 0.19 28);
  --line: color-mix(in oklch, var(--ink) 72%, var(--paper));

  --sans: "Archivo", "Archivo fallback", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.25rem;
  --t-xl: clamp(2.25rem, 1.6rem + 1.9vw, 3.5rem);
  --t-xxl: clamp(3.25rem, 1.8rem + 5vw, 7rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --edge: clamp(1rem, 3.4vw, 3rem);
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --control: 2.625rem;
  --dash: 1px dashed var(--ink);
  /* Drawn marks, so they match Archivo's stroke instead of a fallback font's glyph. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4 3h5v5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");

  color-scheme: light;
  accent-color: var(--ink);
  caret-color: var(--signal);
  scrollbar-color: var(--ink) var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; hanging-punctuation: first allow-end last; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.9375rem / 1.5 var(--sans);
  font-variant-numeric: lining-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, table, fieldset, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p, li, dd, summary { text-wrap: pretty; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
time, .num, .mono { font-variant-numeric: tabular-nums lining-nums; }
.mono, .code { font-family: var(--mono); font-size: 0.9em; letter-spacing: -0.01em; }
.code { padding: 0 0.2em; background: var(--paper-3); }

.label {
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sr, .default-submit {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2); z-index: 10;
  padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.ext { display: inline-block; width: 0.625em; height: 0.625em; margin-inline-start: 0.3em; background: currentColor; mask: var(--out) center / contain no-repeat; }
.sub { display: block; font-size: var(--t-s); font-weight: 400; color: var(--ink-2); }
.sub-inline { font-size: var(--t-s); color: var(--ink-2); }
.none { color: var(--ink-2); }

/* ---------- top bar + section tabs ---------- */
.wordmark {
  font-size: 1.5rem; font-weight: 800; font-stretch: 62%; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none;
}
.wordmark-stop { color: var(--signal); }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) var(--edge) var(--s-3);
}
.bar-store {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--rule);
  text-decoration: none;
}
.bar-store-name { font-weight: 700; font-stretch: 85%; font-size: 1.0625rem; }
.bar-store-switch { font-size: var(--t-s); color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.bar-store:hover .bar-store-switch { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.bar-account { display: flex; align-items: baseline; gap: var(--s-4); margin-inline-start: auto; font-size: var(--t-s); }
.bar-email { color: var(--ink-2); }
.link-button {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.link-button:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.link-button.is-danger { color: var(--alarm); }
.link-button.is-danger:hover { text-decoration-color: var(--alarm); }
.link-button:disabled { color: var(--ink-2); text-decoration: none; cursor: not-allowed; }

.tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  padding-inline: var(--edge);
  border-block-end: 1px solid var(--ink);
}
.tabs-list { display: flex; gap: var(--s-5); }
.tabs-list a {
  display: block;
  padding-block: var(--s-3) calc(var(--s-3) - 3px);
  border-block-end: 3px solid transparent;
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
}
.tabs-list a:hover { border-block-end-color: var(--rule); }
.tabs-list a[aria-current] { border-block-end-color: var(--ink); }
.tabs-live { padding-block: var(--s-3); font: 500 var(--t-xs) / 1.2 var(--mono); color: var(--ink-2); text-decoration: none; }
.tabs-live:hover { color: var(--ink); text-decoration: underline; }
.tabs-live-short { display: none; }

/* ---------- page frame ---------- */
.main { flex: 1; padding: var(--s-7) var(--edge) var(--s-9); }
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  margin-block-end: var(--s-7);
}
.head-kicker { color: var(--ink-2); margin-block-end: var(--s-3); }
.head-kicker a { text-decoration: none; }
.head-kicker a:hover { color: var(--ink); text-decoration: underline; }
.head-title {
  font-size: var(--t-xl);
  font-stretch: 75%;
  line-height: 0.95;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
}
.head-count { font-weight: 300; font-stretch: 62%; color: var(--ink-2); margin-inline-start: 0.08em; font-variant-numeric: tabular-nums; }
.head-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.head-actions { display: flex; gap: var(--s-3); }
.head-aside { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); padding-block-end: var(--s-1); }

.block { margin-block-end: var(--s-8); }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-3); }
.block-title { font-size: var(--t-l); font-stretch: 85%; line-height: 1.15; letter-spacing: -0.01em; }
.block > .block-title { margin-block-end: var(--s-4); }
.fine { margin-block-start: var(--s-4); font-size: var(--t-s); color: var(--ink-2); max-width: 60ch; }

.colophon { padding: var(--s-5) var(--edge); border-block-start: 1px solid var(--rule); font-size: var(--t-xs); color: var(--ink-2); }
.colophon-fig { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- buttons ---------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control);
  padding: 0 var(--s-5);
  font: 600 var(--t-m) / 1 var(--sans);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.button:hover { background: var(--signal); color: var(--ink); text-decoration: none; }
.button:active { translate: 0 1px; }
.button.is-quiet { background: transparent; color: var(--ink); }
.button.is-quiet:hover { background: var(--paper-3); }
.button.is-small { height: 2rem; padding: 0 var(--s-3); font-size: var(--t-s); }
.button.is-large { height: 3.25rem; padding: 0 var(--s-6); font-size: 1.125rem; }
.button.is-danger { background: transparent; color: var(--alarm); border-color: var(--alarm); }
.button.is-danger:hover { background: var(--alarm); color: var(--paper); }
.button:disabled, .button:disabled:hover {
  background: transparent; color: var(--ink-2); border-color: var(--rule); cursor: not-allowed; translate: none;
}
/* The verb Claude used last: pressed in. */
.verb.is-used { background: var(--paper-3); box-shadow: inset 0 -2px 0 var(--ink); }
.action-link { font-size: var(--t-s); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* A drafting request is in flight: the button measures the wait, in Signal.
   Mouse/touch focus that is not :focus-visible means "just clicked". */
.verb { position: relative; }
.verb::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block-end: -1px;
  width: calc(100% + 2px);
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
}
.verb:focus:not(:focus-visible)::after { transform: scaleX(0.92); }

/* ---------- fields ---------- */
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.field-label { font-size: var(--t-s); font-weight: 650; }
.field-optional { font-weight: 400; color: var(--ink-2); margin-inline-start: 0.3em; }
.hint { font-size: var(--t-s); line-height: 1.4; color: var(--ink-2); max-width: 62ch; }
.error { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-s); font-weight: 600; color: var(--alarm); }
.error::before, .notice.is-error::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--alarm); translate: 0 -0.05em; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--s-5) var(--gap); }

.control {
  width: 100%;
  min-width: 0;
  min-height: var(--control);
  padding: 0 var(--s-3);
  font: 400 var(--t-m) / 1.4 var(--sans);
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 0;
}
textarea.control { display: block; padding: var(--s-3); line-height: 1.55; resize: vertical; field-sizing: content; min-height: 6.5rem; max-height: 40rem; }
.control:hover { border-color: var(--ink); }
.control:focus-visible { outline: 2px solid var(--signal); outline-offset: 0; border-color: var(--ink); }
.control::placeholder { color: var(--ink-2); opacity: 1; }
textarea.control::placeholder { font-style: italic; }
.control:disabled { background: var(--paper); border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; }
.control[aria-invalid="true"] { border-color: var(--alarm); box-shadow: inset 0 0 0 1px var(--alarm); }
textarea.control.is-short { min-height: 0; padding-block: var(--s-2); }
textarea.control.is-say { font-size: 1.125rem; line-height: 1.45; min-height: 7.5rem; }
textarea.control.is-say.is-short { min-height: 0; }
.control.is-code { font: 400 0.875rem / 1.65 var(--mono); tab-size: 2; white-space: pre; overflow-x: auto; }
.control.is-prose { max-width: 100%; }
.mono-input { font-family: var(--mono); font-size: 0.9375rem; }
.num-input { font-variant-numeric: tabular-nums lining-nums; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select.control {
  appearance: none;
  padding-inline-end: 2.25rem;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23181513' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 0.75rem;
  cursor: pointer;
}
select.control:disabled { background-color: var(--paper); opacity: 1; }

/* Prefix / suffix adornments: /p/ … , $ … USD, … .featherstall.shop */
.affix { display: flex; min-width: 0; }
.affix-text {
  display: flex; align-items: center; flex: none;
  padding-inline: var(--s-3);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-inline-end: 0;
  color: var(--ink-2);
  font-size: var(--t-s);
  white-space: nowrap;
}
.affix-text.is-end { border-inline: 0 1px solid var(--line); border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.affix:focus-within { outline: 2px solid var(--signal); }
.affix:focus-within > * { border-color: var(--ink); }
.affix .control:focus-visible { outline: 0; }
.affix:has([aria-invalid="true"]) > * { border-color: var(--alarm); }
.affix:has([aria-invalid="true"]) .affix-text { box-shadow: inset 0 1px var(--alarm), inset 0 -1px var(--alarm); }

.row-control { display: flex; gap: var(--s-2); }
.row-control .control { flex: 1; }

/* checkbox */
.check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.check input, .theme-card input {
  appearance: none;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin: 0.1rem 0 0;
  background: var(--well);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.check input:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23fdfcfa' stroke-width='2'/%3E%3C/svg%3E") center / 100%;
}
.check:hover input { box-shadow: 0 0 0 3px var(--paper-3); }
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--well); }
.check b { display: block; }

/* colour */
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.days-input { width: 5.5rem; flex: none; }
.colour-input {
  appearance: none;
  width: 7.5rem; height: var(--control);
  padding: 3px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}
.colour-input::-webkit-color-swatch-wrapper { padding: 0; }
.colour-input::-webkit-color-swatch { border: 0; border-radius: 0; }
.colour-input::-moz-color-swatch { border: 0; border-radius: 0; }
.colour-input:hover { border-color: var(--ink); }
.colour-hex { font-size: var(--t-s); color: var(--ink-2); }

/* file */
.file { width: 100%; font: 400 var(--t-s) / 1.4 var(--sans); color: var(--ink-2); }
.file::file-selector-button, .drop-input::file-selector-button {
  height: 2rem;
  margin-inline-end: var(--s-3);
  padding: 0 var(--s-3);
  font: 600 var(--t-s) / 1 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.file::file-selector-button:hover, .drop-input::file-selector-button:hover { background: var(--paper-3); }
.file:focus-visible { outline-offset: 4px; }

/* ---------- draft marker: dashed = proposed, unsaved ---------- */
.is-drafted .control, .is-drafted .affix-text, .is-drafted .colour-input { border-style: dashed; border-color: var(--ink); }
/* The text half of the marker: a dashed key and one word. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tag::before, .key { content: ""; flex: none; width: 1.25rem; height: 0.625rem; border: var(--dash); background: var(--well); }
.tag { white-space: nowrap; }

/* ---------- notices ---------- */
.notice { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: 1px solid var(--ink); font-size: var(--t-s); max-width: 62ch; }
.notice.is-draft { gap: var(--s-2); border: var(--dash); background: var(--well); }
.notice.is-closed, .notice.is-alarm { gap: var(--s-2); border-color: var(--alarm); }
.notice-key { display: flex; align-items: baseline; gap: var(--s-2); color: var(--ink-2); }
.notice-key .key { translate: 0 0.05em; }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); font-weight: 600; }
.notice-actions .link-button { font-weight: 600; }
/* In a field, the notice is the control's caption strip: one dashed object, not two. */
.field > .notice { max-width: none; }
.field.is-drafted > .notice { border-block-end: 0; background: var(--paper-3); margin-block-end: calc(-1 * var(--s-2)); }
.prose-field.is-drafted > .notice { margin-block-end: 0; }
.notice.is-error { display: flex; align-items: baseline; gap: var(--s-3); border-color: var(--alarm); font-weight: 600; }
.notice.is-dev { background: var(--ink); color: var(--paper); border-color: var(--ink); gap: var(--s-2); font-size: var(--t-m); padding: var(--s-4) var(--s-5); }
.notice.is-dev .notice-label { color: var(--paper-2); }
.flash {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-6);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-s);
}
.flash b { font-size: var(--t-m); font-weight: 700; }
.flash .mono { color: var(--paper-2); }
.flash-time { margin-inline-start: auto; color: var(--paper-2); }

/* ---------- Claude: the request side ---------- */
.assist {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--paper-3);
  border-block-start: 1px solid var(--ink);
}
.assist .control { background: var(--well); }
.assist .control:disabled { background: var(--paper); border-color: var(--rule); }
.assist.is-off .assist-title { color: var(--ink-2); }
.assist > .button { justify-self: start; }
.assist-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); }
.assist-title { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; }
.quota { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.quota.is-off { color: var(--ink); font-weight: 600; }

/* Meters are drawn to scale: 1 px per draft (50 a day), 16 px per setup step. */
meter { display: block; flex: none; height: 0.5rem; border: 1px solid var(--ink); background: var(--well); }
meter::-webkit-meter-bar { height: 100%; background: var(--well); border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value { background: var(--signal); }
meter::-webkit-meter-even-less-good-value { background: var(--alarm); }
meter::-moz-meter-bar { background: var(--signal); }
.quota-meter { width: calc(50px + 2px); }
.setup-meter { width: calc(3rem + 2px); }

/* ---------- status squares ---------- */
.status { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--t-s); font-weight: 500; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; background: var(--ink); }
.status.is-draft::before, .status.is-pending::before, .status.is-waiting::before { background: transparent; border: var(--dash); }
.status.is-failed, .status.is-closed { color: var(--alarm); }
.status.is-closed::before { background: var(--alarm); }
.status.is-failed::before { background: var(--alarm); }

/* ---------- tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.table thead th {
  padding: 0 var(--s-3) var(--s-2);
  border-block-end: 1px solid var(--ink);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2);
  text-align: start;
  white-space: nowrap;
}
.table td, .table tbody th {
  padding: var(--s-3);
  border-block-end: 1px solid var(--rule);
  text-align: start;
  font-weight: 400;
  vertical-align: middle;
}
.table .num, .table thead .num { text-align: end; }
.table tr > :first-child { padding-inline-start: 0; }
.table tr > :last-child { padding-inline-end: 0; }
.table tbody tr { position: relative; }
.table tbody tr:has(.row-link):hover { background: var(--paper-3); box-shadow: -0.75rem 0 var(--paper-3), 0.75rem 0 var(--paper-3); }
.row-link { font-weight: 600; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
tr:hover .row-link { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.row-link:focus-visible { outline: 0; }
.row-link:focus-visible::after { outline: 2px solid var(--signal); outline-offset: -2px; }
.time { color: var(--ink-2); }

.thumb { width: 3.5rem; }
.thumb img, .thumb-initial { width: 2.5rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule); }
.thumb-initial {
  display: grid; place-items: center; padding: 2px;
  background: var(--paper-3); color: var(--ink-2);
  font-size: 0.5625rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.09em; text-transform: uppercase; text-align: center;
}
.products-title .sub { font-size: var(--t-xs); margin-block-start: 2px; }

.flag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2);
  margin-block-start: var(--s-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--alarm);
}
.flag-why { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
/* A 3px alarm bar in the gutter, left of the row. */
.table tbody tr.is-flagged { box-shadow: -0.5rem 0 var(--paper), -0.75rem 0 var(--alarm); }
.orders-items { max-width: 22rem; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-4); margin-block-start: var(--s-4); font-size: var(--t-s); color: var(--ink-2); }

/* ---------- sites ---------- */
.split { display: grid; gap: var(--s-6) var(--gap); align-items: start; }
.split-main { display: grid; gap: var(--s-5); min-width: 0; }
.or { color: var(--ink-2); padding-block-end: var(--s-2); border-block-end: 1px solid var(--rule); }
.new-store { padding-block-start: var(--s-5); border-block-start: 1px solid var(--ink); }

/* theme radio cards */
.theme-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.theme-card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--well);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.theme-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule); }
.theme-card-name { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-s); font-weight: 600; line-height: 1.25; }
.theme-card-num { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.theme-card-text { display: block; margin-block-start: 2px; font-size: var(--t-xs); font-weight: 400; line-height: 1.35; color: var(--ink-2); }
.theme-card input { width: 1rem; height: 1rem; border-radius: 50%; }
.theme-card input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--well); }
.theme-card:hover { border-color: var(--line); }
.theme-card:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.theme-card:has(:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.theme-card input:focus-visible { outline: 0; }
.themes.is-drafted .theme-card:has(:checked) { border: 2px dashed var(--ink); padding: calc(var(--s-2) - 1px); box-shadow: none; }
.themes { display: grid; gap: var(--s-2); }

/* ---------- dashboard ---------- */
.head-live .mono { font-size: var(--t-m); }
.stats { margin-block-end: var(--s-8); }
.stats-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.stat { grid-column: span 3; display: grid; gap: var(--s-2); align-content: start; padding-block-start: var(--s-3); border-block-start: 1px solid var(--ink); }
.stat-wide { grid-column: span 6; }
.stat-num {
  font-size: var(--t-xxl);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums lining-nums;
  margin-block: var(--s-3) var(--s-1);
}
.stat-cents { font-size: 0.42em; font-weight: 700; letter-spacing: 0; vertical-align: 0.98em; margin-inline-start: 0.04em; }
.stat-note { font-size: var(--t-s); color: var(--ink-2); }
.overview { display: grid; gap: var(--s-7) var(--gap); }
.overview .block { margin: 0; }
.setup-count { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-s); color: var(--ink-2); }
.checklist { border-block-start: 1px solid var(--ink); }
.checklist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-block-end: 1px solid var(--rule); }
.checklist .action-link { display: inline-block; margin-block-start: var(--s-1); }
.check-box { width: 1.25rem; height: 1.25rem; margin-block-start: 0.1rem; border: var(--dash); }
.is-done .check-box {
  border: 1px solid var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23fdfcfa' stroke-width='2'/%3E%3C/svg%3E") center / 100%;
}
.is-done b { font-weight: 500; color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.checklist .is-next .check-box { border: 2px solid var(--signal); }
.checklist .action-link { margin-inline-start: var(--s-2); }
/* The one step to do now, above the list. */
.next-step { display: grid; gap: var(--s-3); justify-items: start; margin-block-end: var(--s-5); padding: var(--s-4) var(--s-5) var(--s-5); background: var(--well); border: 1px solid var(--ink); border-block-start: 3px solid var(--signal); }
.next-kicker { color: var(--ink-2); }
.next-title { font-size: var(--t-l); font-stretch: 85%; line-height: 1.15; }
.next-detail { max-width: 48ch; }
.next-share { display: grid; gap: var(--s-2); justify-items: start; width: 100%; }
.next-share .control { width: 100%; }
.next-share .actions { margin-block-end: var(--s-2); }
.choices-stack { display: grid; gap: var(--s-2); }
/* Page starters: About, FAQ, Care, Contact. */
.starters .label { margin-block-end: var(--s-3); color: var(--ink-2); }
.starter-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s-3); }
.starter { display: grid; gap: var(--s-1); height: 100%; padding: var(--s-3) var(--s-4); background: var(--well); border: 1px solid var(--line); text-decoration: none; }
.starter:hover { border-color: var(--ink); text-decoration: none; }
.starter b { font-size: var(--t-l); font-stretch: 85%; }
fieldset.field > legend { margin-block-end: var(--s-3); }

/* ---------- products ---------- */
.products-layout { display: grid; gap: var(--s-7) var(--gap); align-items: start; }
.products-list { margin: 0; }
.new-product.is-feature { padding: var(--s-4) var(--s-5) var(--s-5); }
.drop-form { display: grid; gap: var(--s-4); }
.drop {
  --ratio: 4 / 3;
  --pad: 75%;
  position: relative;
  display: grid;
  align-content: start;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: var(--ratio);
  padding: var(--s-5);
  background: var(--well);
  border: var(--dash);
  cursor: pointer;
}
/* Registration marks at the corners: the frame of a photo not yet taken in. */
.drop::before {
  content: "";
  position: absolute;
  inset: var(--s-2);
  pointer-events: none;
  --m: 1.25rem;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / var(--m) 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 2px var(--m) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / var(--m) 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 2px var(--m) no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / var(--m) 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 2px var(--m) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / var(--m) 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 2px var(--m) no-repeat;
}
.drop-say { display: grid; gap: var(--s-2); }
.drop-title { font-size: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); font-weight: 800; font-stretch: 62%; line-height: 0.88; letter-spacing: -0.02em; word-spacing: 0.05em; }
.drop-sub { font-size: var(--t-l); font-weight: 600; font-stretch: 85%; }
.drop-ready { display: none; }
/* Ghost fields: what the draft will fill in. */
.drop { grid-template-rows: auto 1fr; }
.drop-yields { display: none; align-self: center; gap: var(--s-4); padding-block-end: var(--s-6); }
.drop-yields span { display: grid; gap: var(--s-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.drop-yields span::after { content: ""; height: 1.25rem; border: var(--dash); border-color: var(--line); width: 72%; }
.drop-yields span:nth-child(2)::after { width: 56%; }
.drop-yields span:nth-child(3)::after { width: 100%; height: 3.5rem; }
.drop-yields span:nth-child(4)::after { width: 88%; }
/* The real file input covers the whole frame, so a drop lands anywhere on it.
   Its button and file name sit on the frame's bottom edge. */
.drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: calc(var(--pad) - 3.75rem) var(--s-5) 0;
  font: 400 var(--t-s) / 2rem var(--sans);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.drop-input:focus-visible { outline: 0; }
.drop:hover { background: var(--paper); }
.drop:focus-within { outline: 2px solid var(--signal); outline-offset: 3px; }
.drop:has(.drop-input:valid) { border-style: solid; }
.drop:has(.drop-input:valid) .drop-empty { display: none; }
.drop:has(.drop-input:valid) .drop-ready { display: grid; }
.drop:has(.drop-input:disabled) { cursor: not-allowed; background: var(--paper); }
.drop-form .actions { gap: var(--s-3) var(--s-5); }
/* A document with more to draft: carry on, or stop. */
.carry-on { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--well); border: var(--dash); font-size: var(--t-s); }
.carry-on .actions { gap: var(--s-2) var(--s-4); }
.paste { border-block-start: 1px solid var(--line); padding-block-start: var(--s-3); }
.paste summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); width: fit-content; }
.paste-form { display: grid; gap: var(--s-3); justify-items: start; margin-block-start: var(--s-3); }
.paste-form .field { width: 100%; }
.notice-list { display: grid; gap: var(--s-1); padding-inline-start: var(--s-4); list-style: disc; }

/* ---------- import sheet: one numbered row per product ---------- */
.sheet { display: grid; gap: 0; }
.sheet-rows { border-block-start: 1px solid var(--ink); }
.sheet-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "num pick" "num photos" "num fields" "num check";
  gap: var(--s-3) var(--s-3);
  padding-block: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--rule);
}
.sheet-num { grid-area: num; font-size: var(--t-l); font-weight: 800; font-stretch: 62%; line-height: 1.1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sheet-pick { grid-area: pick; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.sheet-source { font-size: var(--t-s); color: var(--ink-2); overflow-wrap: anywhere; }
.sheet-pick .link-button { font-size: var(--t-s); font-weight: 600; }
.sheet-photos { grid-area: photos; display: flex; flex-wrap: wrap; gap: var(--s-2); align-content: start; }
.sheet-photos img { width: 6rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule); }
.sheet-fields { grid-area: fields; display: grid; gap: var(--s-4); min-width: 0; }
.sheet-check { grid-area: check; align-self: start; display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--well); border: var(--dash); font-size: var(--t-s); }
.sheet-check ul { display: grid; gap: var(--s-1); padding-inline-start: var(--s-4); list-style: disc; }
.sheet-row.is-drafted .sheet-fields .control, .sheet-row.is-drafted .affix-text { border-style: dashed; border-color: var(--ink); }
.sheet-row.is-flagged { box-shadow: -0.5rem 0 var(--paper), -0.75rem 0 var(--alarm); }
/* A row that won't be added steps back. */
.sheet-row:has(.sheet-pick input:not(:checked)) :is(.sheet-photos, .sheet-fields, .sheet-check) { opacity: 0.4; }
.sheet .savebar .quota { margin-inline-start: auto; }

/* ---------- product edit ---------- */
.edit { display: grid; gap: var(--s-7) var(--gap); align-items: start; }
.edit-main { display: grid; gap: var(--s-5); min-width: 0; }
.edit > .notice, .edit-main > .notice { margin: 0; }
.head + .notice, .flash + .edit { margin-block-start: 0; }
.head ~ .notice { margin-block-end: var(--s-6); }
.prose-field { gap: 0; }
.prose-field .field-top { margin-block-end: var(--s-2); }
.prose-field .hint, .prose-field .error { margin-block-start: var(--s-2); }
.rewrite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-block-start: 0;
}
.is-drafted .rewrite { border-color: var(--ink); border-style: dashed; }
.rewrite-label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-inline-end: var(--s-1); }
.rewrite-verbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rewrite-verbs .button { background: var(--well); }
.rewrite-verbs .button:hover { background: var(--paper); }
.rewrite-verbs .verb.is-used { background: var(--paper-3); }
.rewrite .quota { margin-inline-start: auto; }
.saved-text { margin-block-start: var(--s-4); font-size: var(--t-s); }
.saved-text summary { cursor: pointer; font-weight: 600; width: fit-content; }
.saved-text-body { margin-block-start: var(--s-2); padding: var(--s-3); white-space: pre-wrap; font: inherit; color: var(--ink-2); border-inline-start: 1px solid var(--line); }

/* Price help: under the price, closed until asked. */
.price-help { border-block: 1px solid var(--line); }
.price-help summary { padding-block: var(--s-3); font-size: var(--t-s); font-weight: 600; cursor: pointer; width: fit-content; }
.price-help-body { display: grid; gap: var(--s-5); padding-block: var(--s-2) var(--s-5); }
.price-part { display: grid; gap: var(--s-3); }
.price-part + .price-part { padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); }
.price-part-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-block-end: var(--s-2); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--s-3) var(--gap); }
.price-result { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
.price-result dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.price-result dd { margin: var(--s-1) 0 0; font-size: var(--t-xl); font-weight: 800; font-stretch: 62%; line-height: 1; }
.price-range { font-size: var(--t-m); max-width: 60ch; }
.asking { display: grid; border-block-start: 1px solid var(--rule); }
.asking li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-block: var(--s-2); border-block-end: 1px solid var(--rule); font-size: var(--t-s); }
.asking a { font-weight: 600; }
.asking-price { margin-inline-start: auto; font-weight: 600; }
.asking .sub { flex-basis: 100%; }
.price-why { padding-inline-start: var(--s-3); border-inline-start: 2px solid var(--line); font-size: var(--t-s); color: var(--ink-2); max-width: 60ch; }

.edit-side { display: grid; gap: var(--s-4); }
.ship { display: grid; gap: var(--s-4); margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--ink); }
.ship .button { justify-self: start; }
.images { display: grid; gap: var(--s-4); }
.image { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); }
.image img { width: 5rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule); }
.image-body { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.image-meta { display: flex; align-items: baseline; gap: var(--s-2); }
.image-verbs { display: flex; gap: var(--s-4); margin-inline-start: auto; font-size: var(--t-s); }
.image-source { font-size: var(--t-s); font-weight: 600; }
.images-empty { padding-block: var(--s-4); border-block: 1px solid var(--rule); font-size: var(--t-s); color: var(--ink-2); }
.upload { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-4); border: 1px solid var(--rule); background: var(--well); }
.upload .field { width: 100%; }

.savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
  background: var(--paper);
  border-block-start: 1px solid var(--ink);
}
.savebar-note { font-size: var(--t-s); color: var(--ink-2); }
.danger { display: grid; gap: var(--s-3); justify-items: start; margin-block-start: var(--s-8); padding-block-start: var(--s-4); border-block-start: 1px solid var(--alarm); max-width: 40rem; }
.danger > p { color: var(--ink-2); font-size: var(--t-s); }
.confirm summary { list-style: none; width: fit-content; }
.confirm summary::-webkit-details-marker { display: none; }
.confirm[open] .confirm-ask, .confirm:not([open]) .confirm-cancel { display: none; }
.confirm[open] {
  display: flow-root;
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--well);
  border: 1px solid var(--alarm);
  border-block-start-width: 3px;
}
.confirm[open] summary {
  float: inline-end; height: auto; padding: 0; margin-inline-start: var(--s-4);
  background: none; border: 0; color: var(--ink); font: 600 var(--t-s) / 1.5 var(--sans);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.confirm-body { display: grid; gap: var(--s-3); justify-items: start; }
.confirm-q { font-size: var(--t-s); font-weight: 600; }
.button.is-go { background: var(--alarm); color: var(--paper); }
.button.is-go:hover { background: var(--ink); border-color: var(--ink); }
.confirm.is-small { font-size: var(--t-s); }
.confirm.is-small .button.is-go { height: 2rem; padding: 0 var(--s-3); font-size: var(--t-s); }
.domain-remove:has(.confirm[open]) { flex-basis: 100%; margin: var(--s-2) 0 0; max-width: 40rem; }

/* ---------- settings ---------- */
.sect { display: grid; gap: var(--s-4) var(--gap); padding-block: var(--s-5) var(--s-7); border-block-start: 1px solid var(--ink); }
.sect-head { display: grid; gap: var(--s-2); align-content: start; }
.sect-head p { font-size: var(--t-s); color: var(--ink-2); max-width: 30ch; }
.sect-title { font-size: var(--t-l); font-stretch: 85%; line-height: 1.15; }
.sect-body { display: grid; gap: var(--s-6); min-width: 0; max-width: 48rem; }
.settings .savebar { margin-block-start: 0; }

/* ---------- orders empty ---------- */
.empty { display: grid; gap: var(--s-5) var(--gap); align-items: end; padding-block: var(--s-5) var(--s-8); border-block-start: 1px solid var(--ink); }
.empty-num { font-size: clamp(10rem, 4rem + 20vw, 22rem); font-weight: 800; font-stretch: 62%; line-height: 0.74; letter-spacing: -0.04em; color: var(--signal); }
.empty-body { display: grid; gap: var(--s-3); max-width: 36ch; }
.empty-title { font-size: var(--t-xl); font-stretch: 75%; line-height: 1; letter-spacing: -0.015em; }
.empty-url { font-size: var(--t-m); }

/* ---------- domains ---------- */
.add-domain { max-width: 40rem; }
.domains { border-block-end: 1px solid var(--ink); }
.domain { padding-block: var(--s-5); border-block-start: 1px solid var(--ink); }
.domain-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.domain-name { font-size: 1.125rem; font-weight: 600; }
.domain-remove { margin-inline-start: auto; font-size: var(--t-s); }
.domain-note { flex-basis: 100%; font-size: var(--t-s); color: var(--ink-2); }
.dns { display: grid; gap: var(--s-4); margin-block-start: var(--s-5); padding: var(--s-5); background: var(--well); border: 1px solid var(--rule); max-width: 56rem; }
.dns-intro { max-width: 60ch; }
.dns-step { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-2); font-size: var(--t-m); }
.dns-step-num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--ink); color: var(--paper); font-size: var(--t-s); font-weight: 700; }
.dns-table { table-layout: fixed; }
.dns-table th:nth-child(1) { width: 5rem; }
.dns-table th:nth-child(2) { width: 48%; }
.dns-table td { font-size: 0.875rem; overflow-wrap: anywhere; }
.dns-table td:last-child { user-select: all; }
.zone { display: grid; gap: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); }
/* Floated, a legend is an ordinary grid item rather than drawn on the border. */
.zone-title { float: left; color: var(--ink-2); }
.zones-more { display: grid; gap: var(--s-5); }
.zones-more summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); width: fit-content; }
.dns-apex summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); width: fit-content; }
.dns-apex[open] summary { margin-block-end: var(--s-3); }
.dns-apex p { font-size: var(--t-s); margin-block-end: var(--s-3); }
.dns-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); }
.dns-last { font-size: var(--t-s); color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); margin-block-start: var(--s-4); }
.facts .address { font-style: normal; }
/* Addresses and links have no spaces to wrap at; long ones break anywhere rather than widen the page. */
.facts > div { min-width: 0; }
.facts dd { overflow-wrap: anywhere; }
.facts dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); margin-block-end: var(--s-1); }

/* ---------- payments ---------- */
.pay { display: grid; gap: var(--s-7); max-width: 56rem; }
.paysteps { display: grid; gap: var(--s-3); }
.paysteps-meter { width: 100%; height: 0.75rem; }
.paysteps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--t-s); color: var(--ink-2); }
.paysteps-list li { padding-inline-start: var(--s-2); border-inline-start: 1px solid var(--ink); }
.paysteps-list .is-done { color: var(--ink); }
.paysteps-list .is-done::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-inline-end: 0.4em; background: currentColor; mask: var(--tick) center / contain no-repeat; }
.paysteps-list .is-now { color: var(--ink); font-weight: 700; }
.pay-body { display: grid; gap: var(--s-5); justify-items: start; }
.pay-title { font-size: var(--t-xl); font-stretch: 75%; line-height: 1; letter-spacing: -0.015em; max-width: 16ch; }
.pay-lede { font-size: var(--t-l); line-height: 1.4; max-width: 40ch; }
.pay .facts { margin: 0; }
.pay .fine { margin: 0; }
.pay-tax { display: grid; gap: var(--s-4); justify-self: stretch; max-width: 40rem; margin-block-start: var(--s-4); padding-block-start: var(--s-5); border-block-start: 1px solid var(--ink); }
.pay-tax .button { justify-self: start; }

/* ---------- leaving: closing a store, erasing a customer ---------- */
.logo-now img { display: block; height: 3rem; width: auto; max-width: 16rem; object-fit: contain; padding: var(--s-2); background: var(--well); }
.closing { display: grid; gap: var(--s-5); justify-items: start; max-width: 44rem; }
.closing-list { display: grid; gap: var(--s-2); padding-inline-start: 1.25em; list-style: square; }
.closing-form { display: grid; gap: var(--s-4); justify-items: start; }
.erase { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); }
.erase summary { cursor: pointer; font-size: var(--t-s); color: var(--alarm); }
.erase[open] { display: grid; gap: var(--s-3); justify-items: start; }

/* ---------- signed out ---------- */
.signin { display: grid; gap: var(--s-5); max-width: 52rem; padding-block: var(--s-6) var(--s-8); }
.signin-kicker { color: var(--ink-2); }
.signin-title { font-size: clamp(3.5rem, 2rem + 6vw, 8rem); font-weight: 800; font-stretch: 62%; line-height: 0.88; letter-spacing: -0.025em; word-spacing: 0.06em; }
.signin-title.is-long { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); font-stretch: 75%; font-weight: 700; line-height: 0.95; }
.signin-email { display: block; overflow-wrap: anywhere; }
.signin-lede { font-size: var(--t-l); line-height: 1.4; max-width: 36ch; }
.signin-more { max-width: 40ch; border-block: 1px solid var(--ink); }
.signin-more summary { padding-block: var(--s-3); font-weight: 600; cursor: pointer; }
.signin-more-body { display: grid; gap: var(--s-3); justify-items: start; padding-block-end: var(--s-4); }
.signin-confirm { display: grid; gap: var(--s-3); justify-items: start; }
.signin-foot { font-size: var(--t-s); color: var(--ink-2); }
.signin-again { max-width: 36rem; }
.signin .notice { max-width: 40rem; }

/* ---------- screen index ---------- */
.screens { border-block-start: 1px solid var(--ink); max-width: 64rem; }
.screens li { position: relative; display: grid; grid-template-columns: 16rem 13rem 1fr; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--rule); font-size: var(--t-s); }
.screens li:hover { background: var(--paper-3); }
.screens .sub { display: inline; }

/* ---------- wide ---------- */
@media (min-width: 64rem) {
  .overview { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .overview-orders { grid-column: 1 / 9; }
  .setup { grid-column: 9 / -1; }

  .products-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .new-product { grid-column: 1 / 5; }
  .products-list { grid-column: 5 / -1; }
  .drop { --ratio: 3 / 4; --pad: 133.333%; }
  .drop-yields { display: grid; }

  .sheet-row { grid-template-columns: 2.25rem 13rem minmax(0, 1fr) 16rem; grid-template-areas: "num photos fields pick" "num photos fields check"; grid-template-rows: auto 1fr; column-gap: var(--gap); }
  /* A row without photos: its title, price and stock on one line. */
  .sheet-row:not(:has(.sheet-photos)) .sheet-fields { grid-column: 2 / 4; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .sheet-fields > * { grid-column: 1 / -1; }
  .sheet-row:not(:has(.sheet-photos)) .sheet-title { grid-column: 1; }
  .sheet-row:not(:has(.sheet-photos)) .sheet-fields > .field-row { grid-column: 2; }
  /* On a wide screen Save stays in reach; a phone scrolls to it. */
  .sheet .savebar { position: sticky; inset-block-end: 0; z-index: 1; }
  .sheet-pick { flex-direction: column; align-items: flex-start; }
  .sheet-photos img:first-child { width: 13rem; }

  .edit { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .edit-main { grid-column: 1 / 8; }
  .edit-side { grid-column: 9 / -1; }
  .savebar { grid-column: 1 / -1; }

  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split-aside { grid-column: 1 / 5; position: sticky; inset-block-start: var(--s-5); }
  .split-main { grid-column: 6 / -1; max-width: 48rem; }
  .new-store .block-title { margin-block-end: var(--s-5); }

  .sect { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sect-head { grid-column: 1 / 4; }
  .sect-body { grid-column: 4 / -1; }

  .empty { grid-template-columns: auto 1fr; column-gap: var(--s-7); }
}

/* ---------- narrow ---------- */
@media (max-width: 47.99rem) {
  body { font-size: 1rem; }
  .main { padding-block: var(--s-5) var(--s-8); }
  .head { margin-block-end: var(--s-5); }
  .bar { padding-block: var(--s-3); column-gap: var(--s-4); }
  .bar-store { padding-inline-start: var(--s-4); }
  .bar-account { flex-basis: 100%; margin: 0; justify-content: space-between; padding-block-start: var(--s-2); border-block-start: 1px solid var(--rule); }
  .bar-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* One row that scrolls sideways; Visit stays pinned at the end. */
  .tabs {
    gap: 0; padding-inline: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs-list { gap: var(--s-4); padding-inline: var(--edge) var(--s-4); }
  .tabs-list li { flex: none; scroll-snap-align: start; }
  /* Where supported, the row opens scrolled to the current section. */
  .tabs-list li:nth-child(n+5):has([aria-current]) { scroll-initial-target: nearest; }
  .tabs-list a { font-size: 0.8125rem; white-space: nowrap; }
  .tabs-live {
    position: sticky; inset-inline-end: 0; flex: none;
    padding: var(--s-3) var(--edge) var(--s-3) var(--s-3);
    background: var(--paper); box-shadow: -1px 0 var(--rule);
    font: 600 0.8125rem / 1.5 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em;
  }
  .tabs-live-short { display: inline; }
  .tabs-live-url { display: none; }

  /* The photo Claude drafted from leads, right under the notice. */
  .edit:has(.image-source) .edit-side { order: -1; }
  .edit:has(.image-source) .image { grid-template-columns: 6rem minmax(0, 1fr); }
  .edit:has(.image-source) .image img { width: 6rem; }

  .stats-list { row-gap: var(--s-5); }
  .stat { grid-column: span 6; }
  .stat-wide { grid-column: 1 / -1; order: -1; }

  .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .savebar .button { flex: 1; }

  /* Tables become stacked rows that keep every value and its label. */
  .table { width: 100%; margin-inline: 0; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tbody tr { display: grid; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); border-block-end: 1px solid var(--rule); }
  .table td, .table tbody th { display: block; padding: 0; border: 0; }
  .table tbody tr:has(.row-link):hover { background: none; }

  .products-table tbody tr { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "t n p" "t s k"; }
  .products-table .thumb { grid-area: t; width: auto; }
  .products-table .products-title { grid-area: n; }
  .products-table td:nth-child(3) { grid-area: p; }
  .products-table td:nth-child(4) { grid-area: k; font-size: var(--t-s); color: var(--ink-2); }
  .products-table td:nth-child(4)::before { content: attr(data-label) " "; }
  .products-table td:nth-child(5) { grid-area: s; }

  .orders-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "c c" "i i" "d s"; }
  .orders-table .orders-num { grid-area: n; }
  .orders-table .orders-total { grid-area: t; font-weight: 600; }
  .orders-table .orders-customer { grid-area: c; }
  .orders-table .orders-items { grid-area: i; font-size: var(--t-s); color: var(--ink-2); max-width: none; }
  .orders-table .orders-date { grid-area: d; font-size: var(--t-s); }
  .orders-table .orders-status { grid-area: s; justify-self: end; }
  .table tbody tr.is-flagged { box-shadow: inset 3px 0 var(--alarm); padding-inline-start: var(--s-4); }

  .sites-table tbody tr, .pages-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .sites-table td:nth-child(2), .pages-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .sites-table td:nth-child(3), .pages-table td:nth-child(3) { display: none; }
  .sites-table td:nth-child(4), .pages-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .sites-table .status { white-space: normal; text-align: end; }

  .dns { padding: var(--s-4); margin-inline: calc(-1 * var(--s-4)); }
  .dns-table tbody tr { gap: var(--s-2); }
  .dns-table td { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-3); }
  .dns-table td:first-child { width: auto; }
  .dns-table td::before { content: attr(data-label); font: 600 var(--t-xs) / 1.6 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
  .order-table td { display: flex; justify-content: space-between; gap: var(--s-3); }
  .order-table td::before { content: attr(data-label); font: 600 var(--t-xs) / 1.6 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }

  .sheet-row.is-flagged { box-shadow: inset 3px 0 var(--alarm); padding-inline-start: var(--s-3); }
  .sheet .savebar .quota { margin-inline-start: 0; flex-basis: 100%; }

  .row-control { flex-direction: column; }
  .row-control .button { align-self: start; }
  .screens li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar { view-transition-name: bar; }
  .tabs { view-transition-name: tabs; }
  .button, .control, .theme-card, .drop, .check input { transition: background-color 120ms, border-color 120ms, translate 60ms, box-shadow 120ms; }
  .verb:focus:not(:focus-visible)::after { transition: transform 14s cubic-bezier(0.1, 0.6, 0.2, 1); }
  .flash { animation: arrive 320ms cubic-bezier(0.2, 0.7, 0.1, 1) both; }
  @keyframes arrive { from { opacity: 0; translate: 0 -0.5rem; } }
}

/* ---- the platform's legal documents: long text, set for reading ---- */
.doc { max-width: 44rem; padding-block: var(--s-6) var(--s-8); }
.doc h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 800; font-stretch: 75%; line-height: 0.95; letter-spacing: -0.02em; margin-block-end: var(--s-4); }
.doc h2 { font-size: var(--t-l); font-weight: 700; margin-block: var(--s-6) var(--s-3); scroll-margin-block-start: var(--s-6); }
.doc h3 { font-weight: 700; margin-block: var(--s-5) var(--s-2); }
.doc p, .doc li { line-height: 1.6; max-width: 68ch; }
.doc p + p, .doc p + ul, .doc p + ol, .doc ul + p, .doc ol + p { margin-block-start: var(--s-3); }
.doc ul, .doc ol { padding-inline-start: var(--s-5); }
.doc li + li { margin-block-start: var(--s-2); }
.doc a { text-decoration: underline; text-underline-offset: 0.15em; }
.doc-links { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-7); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }