/*
 * skin.css — P06 Decision Lens commerce skin (component SK-B, SK-B-P06-skin-builder).
 * Overrides commerce/base/flow.css. Tokens/geometry from samples/06-decision-lens/styles.css:
 * near-monochrome paper/ink + one blue signal, hard 1–2 px rules, square cells, Arial/Helvetica,
 * table-first. Light-only scheme (concept page is light-only) — the base dark block is overridden.
 * Structural hooks: body[data-skin-catalog="table"], body[data-skin-breakdown="table"].
 * Nothing here changes wording, numbers, DOM order, or the banner's first position.
 */

:root, body[data-skin="06-decision-lens"] {
  color-scheme: light;
  --ink: #171714;
  --ink-soft: #4d4d47;
  --paper: #f3f0e8;
  --surface-1: #fffdf7;
  --surface-2: #e8e4da;
  --rule: #24241f;
  --rule-soft: #77766d;
  --signal: #174f78;        /* 7.7:1 on paper */
  --signal-soft: #d8e7f0;
  --err: #8b1d1d;

  /* base token remap (both schemes — light only) */
  --fg: var(--ink);
  --bg: var(--paper);
  --muted: var(--ink-soft);   /* 7.4:1 on paper */
  --line: var(--rule);
  --line-soft: var(--rule-soft);
  --surface: var(--surface-1);
  --accent: var(--signal);
  --accent-fg: #ffffff;
  --link: var(--ink);
  --notice-bg: var(--ink);
  --notice-fg: var(--surface-1);
  --notice-line: var(--signal);
  --error: var(--err);
  --error-bg: #f7ebe8;
  --ok: var(--ink);
  --focus: #005ea8;
  --zebra: var(--surface-1);
}
@media (prefers-color-scheme: dark) {
  :root, body[data-skin="06-decision-lens"] {
    color-scheme: light;
    --fg: var(--ink);
    --bg: var(--paper);
    --muted: var(--ink-soft);
    --line: var(--rule);
    --line-soft: var(--rule-soft);
    --surface: var(--surface-1);
    --accent: var(--signal);
    --accent-fg: #ffffff;
    --link: var(--ink);
    --notice-bg: var(--ink);
    --notice-fg: var(--surface-1);
    --notice-line: var(--signal);
    --error: var(--err);
    --error-bg: #f7ebe8;
    --ok: var(--ink);
    --focus: #005ea8;
    --zebra: var(--surface-1);
  }
}

html { background: var(--paper); }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
.site-header, .flow-nav, .flow-main, .site-footer { max-width: 76rem; }
@media (min-width: 1440px) { .site-header, .flow-nav, .flow-main, .site-footer { max-width: 84rem; } }

/* ---------- square everything ---------- */
button, .cta-primary, .cta-secondary, .filter-button, .clear-demo, a.cta-primary, a.cta-secondary,
input, select, textarea, .form-errors, .flow-precondition, .flow-load-error, .product-card,
.product-spec-sheet, .provenance, .order-summary, .margin-panel-values, .margin-panel,
.quote-locked-state, [data-content-id="quote.locked.state"], .account-state, [data-content-id="account.state"],
.email-envelope, .email-body, .breakdown tr { border-radius: 0; }

/* ---------- focus (concept: 3 px signal, 3 px offset) ---------- */
:focus-visible, [tabindex="-1"]:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { border: 2px solid var(--rule); background: var(--surface-1); color: var(--ink); }

/* ---------- banner: ink plate with the single blue signal rule ---------- */
.demo-notice {
  background: var(--ink);
  color: var(--surface-1);
  border-block: 0;
  border-bottom: 4px solid var(--signal);
  font-size: 1.0625rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
}
.nojs { padding-inline: clamp(1rem, 3vw, 2rem); }

/* ---------- masthead: brand lockup on a hard rule; vertical index mark as decoration ---------- */
.masthead.persona-chrome { padding: 0; }
.brand-lockup {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 2px solid var(--rule);
  background: var(--paper);
  position: relative;
}
.brand-lockup p { margin: 0; }
.brand-name { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; margin: 0; }
.brand-context { color: var(--ink-soft); }
.edition-mark { display: none; }
@media (max-width: 480px) { .brand-lockup { grid-template-columns: 1fr; } }

/* persona nav (concept sections) + flow nav: cell strip with hard right rules */
.persona-nav-list, .flow-nav-list {
  margin: 0;
  gap: 0;
  border-bottom: 2px solid var(--rule);
  background: var(--surface-1);
}
.persona-nav-list li, .flow-nav-list li { border-right: 1px solid var(--rule); }
.persona-nav-list a, .flow-nav-list a, .flow-nav-current {
  min-height: 48px;
  padding: 0.5rem clamp(0.75rem, 2vw, 1.25rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.persona-nav-list a:hover, .flow-nav-list a:hover { background: var(--signal-soft); text-decoration: underline; }
.flow-nav-current { color: var(--ink-soft); }
.flow-nav { padding-inline: 0; }
.flow-nav-list { margin-bottom: 0; }

/* ---------- type: declarative headings, blue kicker rule ---------- */
h1.page-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid var(--signal);
}
h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
h3 { font-weight: 800; }
a { color: var(--ink); text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.2em; }
.marker-illustrative { font-style: normal; color: var(--ink-soft); }
[data-content-id="commerce.posture-note"], .quote-expired-note, .flow-expired,
[data-content-id="confirmation.disclaimer"], .demo-status:not(:empty) {
  border-left: 4px solid var(--signal);
  background: var(--surface-1);
}
.flow-precondition, .flow-load-error { border: 2px solid var(--rule); background: var(--surface-1); }

/* ---------- controls: 2 px rules, square, ink text; blue only for the primary/pressed state ---------- */
button, .cta-primary, .cta-secondary, .filter-button, .clear-demo, a.cta-primary, a.cta-secondary {
  border: 2px solid var(--rule);
  background: var(--surface-1);
  color: var(--ink);
  font-weight: 700;
  transition: none;
}
button:hover, .cta-secondary:hover, .filter-button:hover, .clear-demo:hover { background: var(--signal-soft); }
.cta-primary, button.cta-primary, a.cta-primary, [type="submit"] {
  background: var(--signal);
  color: #ffffff;
  border-color: var(--signal);
}
.cta-primary:hover, [type="submit"]:hover { filter: none; background: var(--ink); border-color: var(--ink); }
.filter-button[aria-pressed="true"] {
  background: var(--signal);
  color: #ffffff;
  border-color: var(--signal);
  box-shadow: inset 0 0 0 2px var(--surface-1);
}
input, select, textarea { border: 2px solid var(--rule); background: var(--surface-1); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.form-errors { border: 2px solid var(--err); }

/* forms: sparse — one field per beat, thin rule between */
.field { margin: 1.25rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule-soft); }
.field label { font-weight: 800; }

/* ---------- catalog filter: cell strip ---------- */
.catalog-filter { gap: 0; margin: 1rem 0 0.5rem; }
.catalog-filter-label { margin-bottom: 0.35rem; font-weight: 800; }
.catalog-filter .filter-button { margin: 0 -2px -2px 0; }

/* ---------- catalog as ONE comparison table (grid rows keyed on the card DOM) ---------- */
body[data-skin-catalog="table"] .product-list {
  display: block;
  margin: 0.75rem 0 1.5rem;
  border: 2px solid var(--rule);
  background: var(--surface-1);
}
body[data-skin-catalog="table"] .product-card {
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 0;
  align-items: stretch;
}
body[data-skin-catalog="table"] .product-card:last-child { border-bottom: 0; }
body[data-skin-catalog="table"] .product-card:nth-child(even) { background: var(--surface-2); }
body[data-skin-catalog="table"] .product-card > * {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
body[data-skin-catalog="table"] .product-card > *:last-child { border-right: 0; }
body[data-skin-catalog="table"] .product-card .product-name { font-size: 1.0625rem; }
body[data-skin-catalog="table"] .product-card .product-name a { padding-block: 0.25rem; }
body[data-skin-catalog="table"] .product-card .product-spec { color: var(--ink); }
body[data-skin-catalog="table"] .product-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 0;
}
body[data-skin-catalog="table"] .product-meta dt { color: var(--ink-soft); font-weight: 700; margin-top: 0.35rem; }
body[data-skin-catalog="table"] .product-meta dt:first-child { margin-top: 0; }
body[data-skin-catalog="table"] .product-meta dd { margin: 0; }
body[data-skin-catalog="table"] .product-from-price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-left: 4px solid var(--signal);
}
body[data-skin-catalog="table"] .product-from-price-missing { font-weight: 700; color: var(--ink-soft); }
.product-list-heading { margin-top: 1.5rem; }
/* comparison cards ≤767 px: same decision order, thick rule between rows */
@media (max-width: 767px) {
  body[data-skin-catalog="table"] .product-card { grid-template-columns: 1fr; border-bottom: 2px solid var(--rule); }
  body[data-skin-catalog="table"] .product-card > * { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding: 0.6rem 0.9rem; }
  body[data-skin-catalog="table"] .product-card > *:last-child { border-bottom: 0; }
  body[data-skin-catalog="table"] .product-card .product-name { font-size: 1.125rem; }
}

/* ---------- product page: decision sheet ---------- */
dl { grid-template-columns: minmax(0, max-content) 1fr; }
.product-spec-sheet, .provenance, .order-summary, .margin-panel-values {
  border: 2px solid var(--rule);
  background: var(--surface-1);
  padding: 0.9rem 1rem;
}
.product-spec-sheet dt, .provenance dt, .order-summary dt { color: var(--ink-soft); }
.unit-price-line { border-left: 4px solid var(--signal); padding-left: 0.75rem; }
@media (max-width: 767px) { dl { grid-template-columns: 1fr; } }

/* ---------- quote breakdown: decision table (hard rules, ink header, bracket total) ---------- */
body[data-skin-breakdown="table"] .breakdown { border: 2px solid var(--rule); }
body[data-skin-breakdown="table"] .breakdown caption {
  padding: 0.75rem 1rem;
  color: var(--surface-1);
  background: var(--ink);
  font-weight: 800;
  border: 2px solid var(--ink);
  border-bottom: 0;
}
body[data-skin-breakdown="table"] .breakdown th, body[data-skin-breakdown="table"] .breakdown td {
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0.9rem;
}
body[data-skin-breakdown="table"] .breakdown th:last-child, body[data-skin-breakdown="table"] .breakdown td:last-child { border-right: 0; }
body[data-skin-breakdown="table"] .breakdown thead th { background: var(--ink); color: var(--surface-1); letter-spacing: 0.04em; }
body[data-skin-breakdown="table"] .breakdown tbody tr:nth-child(even) td,
body[data-skin-breakdown="table"] .breakdown tbody tr:nth-child(even) th { background: var(--surface-2); }
body[data-skin-breakdown="table"] .breakdown th[scope="row"] { background: var(--surface-1); }
body[data-skin-breakdown="table"] .breakdown-total th, body[data-skin-breakdown="table"] .breakdown-total td {
  border-top: 3px solid var(--ink);
  background: var(--surface-1) !important;
}
body[data-skin-breakdown="table"] .breakdown-total td:last-child { border-left: 4px solid var(--signal); }
@media (max-width: 767px) {
  body[data-skin-breakdown="table"] .breakdown { border: 0; }
  body[data-skin-breakdown="table"] .breakdown tr { border: 2px solid var(--rule); margin-bottom: 0.75rem; }
  body[data-skin-breakdown="table"] .breakdown th, body[data-skin-breakdown="table"] .breakdown td { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  body[data-skin-breakdown="table"] .breakdown tr > :last-child { border-bottom: 0; }
  body[data-skin-breakdown="table"] .breakdown th[scope="row"] { background: var(--surface-2) !important; }
  body[data-skin-breakdown="table"] .breakdown-total th, body[data-skin-breakdown="table"] .breakdown-total td { border-top: 0; }
  body[data-skin-breakdown="table"] .breakdown-total td:last-child { border-left: 0; border-top: 3px solid var(--ink); }
}
.quote-locked-state, [data-content-id="quote.locked.state"], .account-state, [data-content-id="account.state"] {
  border: 2px solid var(--rule);
  background: var(--surface-1);
  border-left: 4px solid var(--signal);
}
.margin-panel { border: 2px dashed var(--rule-soft); background: var(--surface-1); }
.margin-panel[open] > summary { border-bottom: 1px solid var(--rule); }

/* ---------- email preview: ruled envelope + monospace body ---------- */
.email-envelope { border: 2px solid var(--rule); border-bottom: 0; background: var(--surface-2); }
.email-body { border: 2px solid var(--rule); background: var(--surface-1); }

/* ---------- footer: hard top rule ---------- */
.site-footer { border-top: 2px solid var(--rule); margin-top: 3rem; }
.human-next-step { color: var(--ink-soft); }
.footer-links a { color: var(--ink); }

/* ---------- vertical index mark (CSS decoration only, no wording) ---------- */
@media (min-width: 1024px) {
  .flow-main { position: relative; }
  .flow-main::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 2rem;
    width: 4px;
    height: 6rem;
    background: var(--signal);
  }
}

/* ---------- motion / forced colours ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .demo-notice, .product-card, .breakdown, .form-errors { border: 2px solid CanvasText; }
  .flow-main::before { background: CanvasText; }
}