/*
 * flow.css — Hermes commerce demo, neutral base styling (component F1).
 * Owner: F1-flow-css-builder. Persona-agnostic; persona skins (Sprint 8) replace this file.
 * Floor (R5 §9 / R3 §10–§15): 16 px body, system fonts, light + dark (AA in both),
 * 44 px targets, 3 px focus outline + 2 px offset, six viewports without horizontal overflow,
 * breakdown table stacked at ≤ 767 px, banner first and visible in a 70vh iframe,
 * no images / fonts / external URLs, no transition > 100 ms, none under reduced motion.
 * Only stable class names and data-attributes from the pages / flow.js are referenced.
 */

:root {
  color-scheme: light dark;
  --fg: #1b1b1b;
  --bg: #ffffff;
  --muted: #4b4b4b;        /* 8.6:1 on white */
  --line: #767676;         /* 4.5:1 non-text */
  --line-soft: #c9c9c9;
  --surface: #f4f4f4;
  --accent: #0b4f8a;       /* 7.9:1 on white */
  --accent-fg: #ffffff;
  --link: #0b4f8a;
  --notice-bg: #fff1c2;
  --notice-fg: #1b1b1b;
  --notice-line: #8a5a00;
  --error: #9b1c1c;        /* 6.5:1 on white */
  --error-bg: #fff5f5;
  --ok: #1e5e2a;
  --focus: #0b4f8a;
  --zebra: #f6f6f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #f1f1f1;
    --bg: #121212;
    --muted: #cfcfcf;
    --line: #8a8a8a;
    --line-soft: #4a4a4a;
    --surface: #1e1e1e;
    --accent: #8fc3ff;     /* 10:1 on #121212 */
    --accent-fg: #0e0e0e;
    --link: #8fc3ff;
    --notice-bg: #3a2f10;
    --notice-fg: #fff1c2;
    --notice-line: #ffd166;
    --error: #ffb4b4;
    --error-bg: #2a1414;
    --ok: #9ad9a3;
    --focus: #ffd166;
    --zebra: #1a1a1a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  overflow-wrap: anywhere;
  min-width: 320px;
}
/* content column — header keeps the banner full-bleed */
.site-header, .flow-nav, .flow-main, .site-footer {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.site-header { padding-inline: 0; }
.site-header .masthead, .site-header .nojs { padding-inline: 1rem; }
img, svg, video { max-width: 100%; height: auto; }
pre { max-width: 100%; overflow-x: auto; }

/* ---------- focus ---------- */
:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  min-height: 44px;
  background: var(--bg);
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  border: 2px solid var(--accent);
}
.skip-link:focus { top: 0.5rem; }

/* ---------- demo banner (first, prominent, never hidden by chrome) ---------- */
.demo-notice {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--notice-bg);
  color: var(--notice-fg);
  border-block: 3px solid var(--notice-line);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.nojs { display: block; margin: 0.75rem 0; }
.nojs .nojs-note, .nojs-catalog-note { font-weight: 600; }
.nojs-product-list { padding-left: 1.25rem; }

/* ---------- masthead + nav ---------- */
.masthead { padding-block: 1rem 0.25rem; }
.brand { margin: 0; }
.brand-name { font-weight: 700; font-size: 1.25rem; margin-right: 0.5rem; }
.brand-context { color: var(--muted); }
.flow-nav-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.flow-nav-list li { display: flex; align-items: center; }
.flow-nav-list a, .flow-nav-current { display: inline-flex; align-items: center; min-height: 44px; }
.flow-nav-current { color: var(--muted); font-weight: 600; }

/* ---------- type ---------- */
h1, h2, h3 { line-height: 1.25; margin: 1.25em 0 0.5em; }
h1.page-heading { font-size: 1.75rem; margin-top: 0.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.125rem; }
p, dl, ul, ol { margin: 0.75rem 0; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
.marker-illustrative { color: var(--muted); font-style: italic; margin-left: 0.25rem; }
.pricing-basis, .lead-time-note, .catalog-assumption, .field-hint, .quote-intro,
.email-preview-intro, .catalog-filter-status { color: var(--muted); }
[data-content-id="commerce.posture-note"], .quote-expired-note, .flow-expired {
  border-left: 4px solid var(--notice-line);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}
.flow-precondition, .flow-load-error {
  border: 1px solid var(--line);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--surface);
}
.flow-loading { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- controls ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button, .cta-primary, .cta-secondary, .filter-button, .clear-demo, a.cta-primary, a.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 90ms linear, color 90ms linear;
}
button:hover, .cta-secondary:hover, .filter-button:hover, .clear-demo:hover { background: var(--surface); }
.cta-primary, button.cta-primary, a.cta-primary, [type="submit"] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.cta-primary:hover, [type="submit"]:hover { filter: brightness(1.08); }
.filter-button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
[aria-disabled="true"] { opacity: 0.8; cursor: default; }
input, select, textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
select { padding-right: 2rem; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }

/* forms */
form { margin: 1rem 0; }
.form-required-note, [data-content-id="form.all-required"] { font-weight: 600; }
.field { margin: 1rem 0; }
.field label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.field-hint { margin: 0.25rem 0 0.4rem; }
.field-error { color: var(--error); font-weight: 700; margin: 0.35rem 0 0; }
.form-errors {
  border: 3px solid var(--error);
  background: var(--error-bg);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
}
.form-errors-heading { font-weight: 700; margin-top: 0; color: var(--error); }
.form-errors ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form-errors li { margin: 0.25rem 0; }
.form-errors a { color: var(--error); font-weight: 600; display: inline-block; padding-block: 0.4rem; }
.demo-status { font-weight: 600; margin: 1rem 0; }
.demo-status:empty { margin: 0; }
.demo-status:not(:empty) { border-left: 4px solid var(--accent); padding: 0.5rem 0.75rem; background: var(--surface); }

/* ---------- catalog ---------- */
.catalog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 0.5rem; }
.catalog-filter-label { width: 100%; margin: 0; font-weight: 700; }
.product-list-heading { margin-top: 1.5rem; }
.product-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.product-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.product-card h3, .product-card .product-title { margin: 0 0 0.25rem; }
.product-card .product-name { font-weight: 700; }
.product-card a { display: inline-block; padding-block: 0.4rem; min-height: 44px; }
.product-from-price { font-weight: 700; margin: 0.25rem 0 0; }
.product-from-price-missing { color: var(--muted); }
.product-meta { margin: 0; }
@media (max-width: 767px) { .product-list { grid-template-columns: 1fr; } }

/* ---------- description lists ---------- */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
dt { font-weight: 700; }
dd { margin: 0; }
.product-spec-sheet, .provenance, .order-summary, .margin-panel-values {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.product-spec-sheet dt, .provenance dt, .order-summary dt { color: var(--muted); }
@media (max-width: 767px) {
  dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  dd { margin-bottom: 0.5rem; }
}
.unit-price-line { font-size: 1.25rem; font-weight: 700; }

/* ---------- quote breakdown table ---------- */
.breakdown { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.breakdown caption { text-align: left; font-weight: 700; padding: 0.5rem 0; caption-side: top; }
.breakdown th, .breakdown td { border: 1px solid var(--line); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.breakdown thead th { background: var(--surface); }
.breakdown tbody tr:nth-child(even) td, .breakdown tbody tr:nth-child(even) th { background: var(--zebra); }
.breakdown th[scope="row"] { width: 14rem; font-weight: 700; }
.breakdown td:last-child, .breakdown th:last-child { font-variant-numeric: tabular-nums; }
.breakdown-total th, .breakdown-total td { font-weight: 700; border-top: 3px solid var(--fg); background: var(--surface) !important; }
@media (max-width: 767px) {
  .breakdown, .breakdown caption, .breakdown tbody, .breakdown tr, .breakdown th, .breakdown td { display: block; width: auto; }
  .breakdown thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .breakdown tr { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 0.75rem; overflow: hidden; }
  .breakdown th, .breakdown td { border: 0; border-bottom: 1px solid var(--line-soft); }
  .breakdown tr > :last-child { border-bottom: 0; }
  .breakdown th[scope="row"] { width: auto; background: var(--surface) !important; }
  .breakdown td:nth-child(2)::before { content: "Basis: "; font-weight: 700; color: var(--muted); }
  .breakdown td:nth-child(3)::before { content: "Amount: "; font-weight: 700; color: var(--muted); }
  .breakdown-total th, .breakdown-total td { border-top: 0; }
  .breakdown-total { border-width: 3px; }
}
.quote-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
.quote-locked-state, [data-content-id="quote.locked.state"] {
  border: 2px solid var(--ok);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  margin: 1rem 0;
}
[data-content-id="quote.not-a-contract"] { font-weight: 600; }

/* margin panel */
.margin-panel { border: 2px dashed var(--line); border-radius: 6px; padding: 0 1rem; margin: 1.5rem 0; }
.margin-panel summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0;
  list-style: disclosure-closed;
}
.margin-panel[open] > summary { list-style: disclosure-open; border-bottom: 1px solid var(--line-soft); }
.margin-panel[open] { padding-bottom: 0.75rem; }
.margin-panel-values { margin-top: 0.75rem; }

/* ---------- account / payment / confirmation ---------- */
.account-state, [data-content-id="account.state"] {
  border: 2px solid var(--ok);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.order-line { font-size: 1.125rem; font-weight: 700; }
[data-content-id="confirmation.disclaimer"] {
  border-left: 4px solid var(--notice-line);
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  font-weight: 600;
}
.email-result { margin: 1rem 0; }
.email-result-text { font-weight: 600; }

/* ---------- email preview ---------- */
.email-envelope { border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 0.75rem 1rem; background: var(--surface); }
.email-envelope p { margin: 0.25rem 0; }
.email-from, .email-subject, .email-subject-line { font-weight: 600; }
.email-body {
  border: 1px solid var(--line-soft);
  border-radius: 0 0 6px 6px;
  padding: 1rem;
  margin: 0 0 1rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  line-height: 1.5;
}
.email-body pre, .email-lines { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0 0 1rem; }
.email-body p { margin: 0 0 1rem; }
.email-disclaimer { font-weight: 700; }
.email-origin { color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 2px solid var(--line-soft); margin-top: 2.5rem; padding-block: 1.25rem 2rem; }
.footer-disclaimer { font-weight: 700; }
.human-next-step { color: var(--muted); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-controls { margin: 0.75rem 0 0; }

/* ---------- viewport / motion / print ---------- */
@media (max-width: 480px) {
  h1.page-heading { font-size: 1.5rem; }
  .flow-nav-list { gap: 0 1rem; }
  input, select { max-width: 100%; }
}
@media (min-width: 1440px) {
  .site-header, .flow-nav, .flow-main, .site-footer { max-width: 68rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .demo-notice, .form-errors, .product-card { border: 2px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}