/*
 * skin.css — P09 Handoff Blueprint commerce skin (component SK-B).
 * Owner: SK-B-P09-skin-builder. Overrides commerce/base/flow.css (loaded first).
 * Tokens/geometry from samples/09-handoff-blueprint/styles.css (read-only): ink/paper/signal/coral,
 * drafting grid, 4 px double / 2 px dashed rules, hard offset shadows, Arial body, monospace codes.
 * Structural flags: data-skin-catalog="lanes", data-skin-breakdown="lanes", scheme light, density regular.
 * Rules: no wording/number/order changes; CSS-only; no images/fonts/external URLs; AA contrast on paper;
 * focus ≥3:1 and ≥2 px; 44 px targets; 16 px body; no transition >100 ms; lanes never separate.
 */

/* ---------- tokens (light scheme; the persona keeps its own light scheme in dark mode too) ---------- */
:root, :root:root {
  color-scheme: light;
  --ink: #071b25;
  --ink-soft: #123744;
  --blueprint: #082a38;
  --blueprint-light: #164757;
  --paper: #f4f2e9;
  --paper-cool: #e8f1ef;
  --paper-warm: #fff2be;
  --white: #fffdf7;
  --signal: #f7cf4d;
  --signal-deep: #5c4300;
  --coral: #e85831;
  --coral-deep: #a63514;      /* text-safe coral: ≥5:1 on paper/white */
  --line-on-dark: #8db4bd;
  --muted-on-dark: #c7dadd;
  --grid-major: rgba(141, 180, 189, 0.16);
  --grid-minor: rgba(141, 180, 189, 0.07);

  /* base variables remapped */
  --fg: var(--ink);
  --bg: var(--paper);
  --muted: #3a4f57;           /* ≥7:1 on paper */
  --line: var(--ink);
  --line-soft: #9fb3b8;
  --surface: var(--white);
  --accent: var(--ink);
  --accent-fg: var(--paper);
  --link: var(--ink-soft);
  --notice-bg: var(--signal);
  --notice-fg: var(--ink);
  --notice-line: var(--ink);
  --error: #8b1e17;
  --error-bg: #fff0eb;
  --ok: #1e5e2a;
  --focus: var(--ink);
  --zebra: var(--white);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-soft: 6px 6px 0 rgba(7, 27, 37, 0.18);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root, :root:root { color-scheme: light; --fg: var(--ink); --bg: var(--paper); }
}

html { background: var(--ink); }
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
}
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 800; }
h1.page-heading { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: 0; }
h2 { font-size: 1.4rem; }
a { color: var(--link); text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
.marker-illustrative { color: var(--muted); }

/* ---------- focus: ink outline + signal halo, ≥3:1 on paper and on ink ---------- */
:focus-visible, [tabindex="-1"]:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--signal);
}
.site-header :focus-visible, .site-header [tabindex="-1"]:focus {
  outline-color: var(--signal);
  box-shadow: 0 0 0 6px var(--ink);
}
main:focus { outline: none; box-shadow: none; }

/* ---------- header: dark ink drafting sheet with a faint grid (decorative CSS layer only) ---------- */
.site-header {
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
  color: var(--white);
  border-bottom: 4px double var(--signal);
}
.demo-notice {
  background: var(--signal);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
}
.site-header .nojs {
  margin: 0;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 2px dashed var(--ink);
}
.site-header .masthead { padding: 0; }
.header-rail {
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.brand-lockup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; min-width: 0; }
.brand-name {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}
.brand-context {
  color: var(--muted-on-dark);
  font-size: 1rem;
  font-weight: 700;
  padding-left: 0.85rem;
  border-left: 2px solid var(--signal);
}
.persona-nav { background: var(--blueprint-light); border-top: 2px solid var(--line-on-dark); }
.persona-nav .flow-nav-list { width: min(100%, 68rem); margin: 0 auto; padding: 0 clamp(0.5rem, 3vw, 2rem); gap: 0; border: 0; }
.persona-nav .flow-nav-list li { border-inline-start: 1px solid var(--line-on-dark); }
.persona-nav .flow-nav-list li:last-child { border-inline-end: 1px solid var(--line-on-dark); }
.persona-nav .flow-nav-list a { color: var(--white); padding: 0.5rem 0.9rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; }
.persona-nav .flow-nav-list a:hover { background: var(--signal); color: var(--ink); }
.skip-link { background: var(--signal); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; }

/* ---------- main: paper drawing sheet with a double frame and offset shadow ---------- */
.flow-main {
  max-width: 68rem;
  margin: 1.5rem auto 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--paper);
  border: 4px double var(--ink);
  box-shadow: var(--shadow-soft);
  counter-reset: sheet;
}
@media (min-width: 1440px) { .flow-main { max-width: 74rem; } }
.flow-main > .page-heading {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
}
[data-content-id="commerce.posture-note"], .quote-expired-note, .flow-expired,
[data-content-id="confirmation.disclaimer"] {
  border-left: 4px double var(--coral);
  background: var(--white);
  padding: 0.6rem 0.9rem;
}
.flow-precondition, .flow-load-error, .form-errors, .quote-locked-state, [data-content-id="quote.locked.state"],
.account-state, [data-content-id="account.state"], .flow-precondition {
  border-radius: 0;
  background: var(--white);
}
.flow-precondition, .flow-load-error { border: 2px dashed var(--ink); }
.quote-locked-state, [data-content-id="quote.locked.state"], .account-state, [data-content-id="account.state"] {
  border: 4px double var(--ok);
}
.demo-status:not(:empty) { border-left: 4px double var(--ink); background: var(--white); }
[data-content-id="quote.not-a-contract"] { color: var(--coral-deep); }

/* ---------- controls: hard geometry, offset shadows ---------- */
button, .cta-primary, .cta-secondary, .filter-button, .clear-demo, a.cta-primary, a.cta-secondary {
  border-radius: 0;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 4px 4px 0 var(--ink);
  transition: none;
}
button:hover, .cta-secondary:hover, .filter-button:hover, .clear-demo:hover { background: var(--paper-warm); }
.cta-primary, button.cta-primary, a.cta-primary, [type="submit"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--coral);
}
.cta-primary:hover, [type="submit"]:hover { filter: none; background: var(--blueprint-light); }
.filter-button[aria-pressed="true"] { background: var(--signal); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
input, select, textarea { border-radius: 0; border: 2px solid var(--ink); background: var(--white); }
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px dashed var(--error); }

/* forms as blueprint sheets */
form {
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  border: 4px double var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.field { padding-left: 0.9rem; border-left: 2px dashed var(--line-soft); }
.field label { font-weight: 800; }
.form-errors { border: 4px double var(--error); }

/* ---------- catalog: legend + two-lane blueprints ---------- */
.catalog-filter {
  padding: 0.75rem 0.9rem;
  border-top: 4px double var(--ink);
  border-bottom: 2px dashed var(--ink);
  background: var(--white);
}
.catalog-filter-label { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.filter-button { box-shadow: none; }
.filter-button::before {
  content: "" / "";
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  border: 2px solid currentColor;
  flex: none;
}
.filter-button[aria-pressed="true"]::before { background: currentColor; }
.catalog-filter-status { font-family: var(--mono); font-size: 1rem; }
.product-list-heading { margin-top: 1.5rem; }
[data-skin-catalog="lanes"] .product-list {
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
[data-skin-catalog="lanes"] .product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "name name"
    "spec price"
    "meta price";
  gap: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper-cool);
  box-shadow: var(--shadow);
  counter-increment: sheet;
}
[data-skin-catalog="lanes"] .product-card > .product-name {
  grid-area: name;
  margin: 0;
  padding: 0.7rem 0.9rem 0.7rem 3.4rem;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
  border-bottom: 2px solid var(--ink);
}
[data-skin-catalog="lanes"] .product-card > .product-name a { color: var(--white); padding-block: 0.4rem; }
[data-skin-catalog="lanes"] .product-card::before {
  content: counter(sheet, decimal-leading-zero) / "";
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  min-width: 2rem;
  padding: 0.15rem 0.3rem;
  border: 2px solid var(--signal);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
[data-skin-catalog="lanes"] .product-card > .product-spec {
  grid-area: spec;
  margin: 0;
  padding: 0.75rem 0.9rem 0.25rem;
  background: var(--paper-cool);
  border-top: 4px double var(--ink);
}
[data-skin-catalog="lanes"] .product-card > .product-meta {
  grid-area: meta;
  margin: 0;
  padding: 0.5rem 0.9rem 0.9rem;
  background: var(--paper-cool);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.05rem 0;
}
[data-skin-catalog="lanes"] .product-card > .product-meta dt { color: var(--muted); font-size: 1rem; font-weight: 800; }
[data-skin-catalog="lanes"] .product-card > .product-meta dd { margin-bottom: 0.4rem; }
[data-skin-catalog="lanes"] .product-card > .product-from-price {
  grid-area: price;
  margin: 0;
  padding: 0.75rem 0.9rem 0.9rem;
  background: var(--paper-warm);
  border-top: 4px double var(--ink);
  border-left: 2px dashed var(--ink);
  font-weight: 800;
}
[data-skin-catalog="lanes"] .product-from-price-missing { color: var(--muted); font-weight: 600; }
.product-card:hover { box-shadow: 8px 8px 0 var(--ink); }

/* ---------- product page as a lane sheet ---------- */
.product-title { padding: 0.5rem 0.9rem; background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--signal); }
.product-spec-sheet, .provenance, .order-summary, .margin-panel-values { border-radius: 0; border: 2px solid var(--ink); }
.product-spec-sheet { background: var(--paper-cool); border-top: 4px double var(--ink); box-shadow: var(--shadow-soft); }
.provenance { background: var(--paper-warm); border-top: 4px double var(--ink); box-shadow: var(--shadow-soft); }
.order-summary { background: var(--white); }
.product-spec-sheet dt, .provenance dt, .order-summary dt { color: var(--muted); font-weight: 800; }
dl { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.unit-price-line { font-size: 1.35rem; padding-left: 0.9rem; border-left: 4px double var(--coral); }
.pricing-basis, .lead-time-note { font-family: var(--mono); font-size: 1rem; }

/* ---------- quote breakdown as a lane table with a boundary band ---------- */
[data-skin-breakdown="lanes"] .breakdown { border: 2px solid var(--ink); box-shadow: var(--shadow-soft); background: var(--white); }
[data-skin-breakdown="lanes"] .breakdown caption { padding: 0.6rem 0.9rem; background: var(--ink); color: var(--white); border-bottom: 2px solid var(--ink); }
[data-skin-breakdown="lanes"] .breakdown th, [data-skin-breakdown="lanes"] .breakdown td { border: 0; border-bottom: 1px solid var(--line-soft); }
[data-skin-breakdown="lanes"] .breakdown thead th { background: var(--paper); font-family: var(--mono); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 4px double var(--ink); }
[data-skin-breakdown="lanes"] .breakdown th[scope="row"] { background: var(--paper-cool); border-right: 2px dashed var(--ink); width: 13rem; }
[data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(even) td { background: var(--white); }
[data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(even) th { background: var(--paper-cool); }
[data-skin-breakdown="lanes"] .breakdown td:last-child { background: var(--paper-warm); border-left: 2px dashed var(--ink); font-weight: 700; }
/* boundary band: the demo-margin and logistics rows (positions fixed by R5) sit between double/dashed rules */
[data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(8) > * { border-top: 4px double var(--coral); }
[data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(9) > * { border-bottom: 2px dashed var(--coral); }
[data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(8) th, [data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(9) th { box-shadow: inset 6px 0 0 var(--coral); }
[data-skin-breakdown="lanes"] .breakdown-total th, [data-skin-breakdown="lanes"] .breakdown-total td { border-top: 4px double var(--ink); background: var(--paper) !important; }
@media (max-width: 767px) {
  [data-skin-breakdown="lanes"] .breakdown tr { border: 2px solid var(--ink); border-radius: 0; margin-bottom: 0.9rem; }
  [data-skin-breakdown="lanes"] .breakdown th[scope="row"] { width: auto; border-right: 0; border-bottom: 2px dashed var(--ink); background: var(--paper-cool) !important; }
  [data-skin-breakdown="lanes"] .breakdown td:last-child { border-left: 0; }
  [data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(8) > * { border-top: 0; }
  [data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(9) > * { border-bottom: 0; }
  [data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(8) { border-top: 4px double var(--coral); }
  [data-skin-breakdown="lanes"] .breakdown tbody tr:nth-child(9) { border-bottom: 4px double var(--coral); }
  [data-skin-breakdown="lanes"] .breakdown-total { border: 4px double var(--ink); }
  [data-skin-breakdown="lanes"] .breakdown-total th, [data-skin-breakdown="lanes"] .breakdown-total td { border-top: 0; }
}
.margin-panel { border: 2px dashed var(--coral-deep); border-radius: 0; background: var(--white); }
.margin-panel summary { color: var(--coral-deep); }

/* ---------- confirmation / email ---------- */
.order-line { font-size: 1.2rem; }
.email-envelope, .email-body { border-radius: 0; border: 2px solid var(--ink); }
.email-envelope { background: var(--paper-cool); border-top: 4px double var(--ink); border-bottom: 2px dashed var(--ink); }
.email-body { background: var(--white); font-family: var(--mono); box-shadow: var(--shadow-soft); }

/* ---------- footer ---------- */
.site-footer {
  max-width: 68rem;
  margin-top: 2rem;
  border-top: 4px double var(--ink);
  padding-block: 1.25rem 2rem;
}
@media (min-width: 1440px) { .site-footer { max-width: 74rem; } }
.footer-disclaimer { padding-left: 0.9rem; border-left: 4px double var(--coral); }
.human-next-step { color: var(--muted); }
.clear-demo { box-shadow: 4px 4px 0 var(--ink); }

/* ---------- viewport / motion / forced colours ---------- */
@media (max-width: 480px) {
  .flow-main { margin-top: 1rem; padding: 0.9rem; box-shadow: 4px 4px 0 rgba(7, 27, 37, 0.18); }
  [data-skin-catalog="lanes"] .product-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); box-shadow: 4px 4px 0 var(--ink); }
  [data-skin-catalog="lanes"] .product-card > .product-name { padding-left: 3.2rem; }
  [data-skin-catalog="lanes"] .product-card > .product-spec,
  [data-skin-catalog="lanes"] .product-card > .product-meta,
  [data-skin-catalog="lanes"] .product-card > .product-from-price { padding-inline: 0.6rem; }
  .brand-context { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .product-card, .breakdown, form, .flow-main { border: 2px solid CanvasText; box-shadow: none; }
  .product-card::before, .filter-button::before { border-color: CanvasText; }
}