/* Hallmark · shape: app screen · genre: editorial · theme: custom (the Porter News email's own system)
 * paper: #f3f1ec warm newsprint · accent: #111827 ink (topic colours mark selection) · display: Georgia · body: system sans
 * nav: top bar, wordmark and one action · signature: the reader's real next email, live beside their choices · states: loading, empty, error, full
 * axes: light/roman-serif/neutral · posture: split, controls left, the email right · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the topic list is long; each topic collapses to one row until chosen */
/* Hallmark · answered: WARN 3, the topic's left rule repeats the email's own section marker, so the page and the email read as one system */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- shell ---------- */
.container { max-width: 1240px; }
.bar { background: var(--color-mast); color: var(--color-mast-ink); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.wordmark { font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-mast-ink); text-decoration: none; }
.wordmark:hover { text-decoration: underline; }
.foot { padding: var(--space-xl) 0; color: var(--color-muted); font-size: var(--text-sm); }

.display { font: 700 clamp(2.4rem, 4.6vw, 3.6rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.display-s { font: 700 var(--text-3xl)/1.1 var(--font-display); color: var(--color-ink); }
.lead { font-size: var(--text-lg); color: var(--color-ink-2); margin-top: var(--space-sm); max-width: 34ch; }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.narrow { max-width: 640px; padding-block: var(--space-3xl); display: grid; gap: var(--space-md); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn--quiet { background: transparent; color: inherit; border-color: currentColor; }
.btn--quiet:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.field { display: grid; gap: var(--space-2xs); min-width: 0; }
fieldset.field { margin: 0 0 var(--space-md); padding: 0; border: 0; }
fieldset.field .check { font-weight: 400; font-size: inherit; color: var(--color-ink); }
.field label, legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.opt { font-weight: 400; color: var(--color-muted); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -1px; transition: border-color var(--dur-micro) var(--ease-out); }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--color-error); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 0.8; }
textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.help--error { color: var(--color-error); }
.quiet-link { color: var(--color-muted); font-size: var(--text-sm); }
.quiet-link:hover { color: var(--color-ink); }

/* topic chips: checkbox stays in flow at 1px, the label carries state in the topic's own colour */
.picks, .chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.picks legend { margin-bottom: var(--space-xs); }
.picks input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picks label, .chips label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; user-select: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.picks label:hover, .chips label:hover { border-color: var(--topic, var(--color-ink)); }
.picks input:checked + label, .chips input:checked + label { background: var(--topic, var(--color-ink)); border-color: var(--topic, var(--color-ink)); color: var(--color-accent-ink); }
.picks input:focus-visible + label, .chips input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- home ---------- */
.home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; padding-block: var(--space-2xl); }
.home__copy { display: grid; gap: var(--space-lg); padding-top: var(--space-xl); }
.signup { display: grid; gap: var(--space-md); margin-top: var(--space-xs); max-width: 30rem; }
.signup .btn { justify-self: start; }
.sample { margin: 0; min-width: 0; }
.sample__frame { position: relative; height: 640px; border-radius: var(--radius-card); background: var(--color-paper-3); overflow: hidden; outline: 1px solid var(--color-rule); }
.sample__frame--tall { height: calc(100vh - 140px); min-height: 560px; }
.sample__frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
.sample__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); font-size: var(--text-sm); }
.sample__loading::before { content: ""; position: absolute; top: 40%; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--color-rule); border-top-color: var(--color-ink); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- preferences ---------- */
.prefs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl); align-items: start; }
.prefs__form { display: grid; gap: var(--space-xl); }
.prefs__head { display: grid; gap: var(--space-xs); }
.prefs__preview { position: sticky; top: var(--space-md); display: grid; gap: var(--space-sm); }
.prefs__preview h2, .group h2 { font: 700 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }
.group { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.status { display: grid; gap: var(--space-xs); }
.status__item { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); font-size: var(--text-sm); }
.status__item--ok { background: color-mix(in oklab, var(--color-success) 12%, var(--color-paper-2)); color: var(--color-success); }
.status__item--error { background: color-mix(in oklab, var(--color-error) 10%, var(--color-paper-2)); color: var(--color-error); }

.topics { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.topic { position: relative; border: 1px solid var(--color-rule); border-left: 4px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); transition: border-color var(--dur-short) var(--ease-out); }
.topic:has(.topic__toggle:checked) { border-left-color: var(--topic); }
.topic__toggle { position: absolute; top: var(--space-lg); left: var(--space-sm); width: 18px; height: 18px; margin: 0; accent-color: var(--topic); }
.topic__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.topic__name { display: block; padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl); font: 700 var(--text-lg)/1.2 var(--font-display); color: var(--color-ink); cursor: pointer; }
.topic__body { display: none; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md) var(--space-xl); }
.topic:has(.topic__toggle:checked) .topic__body { display: grid; }
.tune summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-muted); min-height: 32px; display: flex; align-items: center; }
.tune summary:hover { color: var(--color-ink); }
.tune summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tune .pair { margin-top: var(--space-xs); }

.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.suggest__chip { min-height: 32px; padding: 0 var(--space-sm); border: 1px dashed var(--color-muted); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.suggest__chip:hover { background: var(--color-paper-2); }
.suggest__chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.suggest__chip[aria-pressed="true"] { border-style: solid; background: var(--color-ink); color: var(--color-accent-ink); }
.feeds { margin: 0; padding-left: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }

.savebar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; background: var(--color-paper); border-top: 1px solid var(--color-rule); }
.notice { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); display: grid; gap: var(--space-md); }

.prefs .signout { grid-column: 1 / -1; }
.signout__actions, .less-often { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- admin ---------- */
.admin { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); }
.admin__head { display: grid; gap: var(--space-2xs); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-sm); margin: 0; }
.tile { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); }
.tile dt { font-size: var(--text-sm); color: var(--color-muted); }
.tile dd { margin: 0; font: 700 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); }
.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.data th { text-align: left; font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.data th, .data td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.data tbody tr:last-child td { border-bottom: 0; }
.bad { color: var(--color-error); }
.tile meter { width: 100%; height: 0.5rem; }
.bars td { white-space: nowrap; }
.bars .bars__bar { width: 100%; vertical-align: middle; }
.cost-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-sm); align-items: end; }
.cost-form .btn { justify-self: start; }
.bars__bar span { display: block; height: 0.6rem; min-width: 1px; border-radius: 2px; background: var(--color-accent); }
.bar__link { color: var(--color-mast-ink); font-size: var(--text-sm); }
.bar__link:hover { color: var(--color-mast-muted); }

@media (max-width: 60rem) {
  .home, .prefs { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .home__copy { padding-top: 0; }
  .prefs__preview { position: static; }
  .sample__frame, .sample__frame--tall { height: 560px; min-height: 0; }
}
@media (max-width: 40rem) { .pair { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sample__loading::before { animation: none; } }