/* ============================================================================
   Fox Custom Woodworks — B2B platform · component styles
   ----------------------------------------------------------------------------
   ONE definition each for the recurring UI pieces named in the UI conventions:
   typography, buttons, fields, reference values, callouts. Screens compose these
   classes; they do not re-style these pieces inline. Layout (flex/grid/spacing of
   a particular screen) stays on the screen; look-and-feel lives here.
   Depends on tokens.css.
   ============================================================================ */

/* ── Typography ─────────────────────────────────────────────────────────── */
.h-page     { font-size:var(--fs-page); font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0; line-height:1.1; }
.h-section  { font-size:var(--fs-heading); font-weight:600; color:var(--ink); line-height:1.2; }
/* A field label that reads as a section heading (order-details labels). */
.field-heading { display:block; font-size:var(--fs-heading); font-weight:600; color:var(--ink); line-height:1.2; margin-bottom:8px; white-space:nowrap; }
/* Small green uppercase section eyebrow (Contact details, column groups). */
.eyebrow    { font-size:var(--fs-eyebrow); letter-spacing:.06em; text-transform:uppercase; color:var(--brand); font-weight:700; }
/* Small uppercase field label (form fields, specs fields). */
.field-label{ display:block; font-size:var(--fs-label); letter-spacing:.05em; text-transform:uppercase; color:var(--muted-soft); font-weight:600; margin-bottom:6px; }
/* Table column heads. */
.col-head   { font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted-soft); }
.text-body  { font-size:var(--fs-body); color:var(--ink); }
.text-muted { font-size:var(--fs-small); color:var(--muted); }
.text-faint { font-size:12px; color:var(--muted-faint); }
/* Logged-in identity line — "Shop · Account NWK-0042". */
.identity   { font-size:13px; color:var(--muted); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--brand); color:#fff; border:none; border-radius:var(--radius);
  padding:9px 18px; font-size:var(--fs-small); font-weight:600; line-height:1.1;
  cursor:pointer; font-family:inherit; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-primary:disabled{ opacity:.5; cursor:default; }

/* Secondary / quiet — lower-emphasis actions (Back, Save-draft) so the primary
   action stands out. Conventions: do NOT make everything primary green. */
.btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border-input);
  border-radius:var(--radius); padding:9px 18px; font-size:var(--fs-small); font-weight:600;
  line-height:1.1; cursor:pointer; font-family:inherit; }
.btn-secondary:hover{ border-color:var(--brand); color:var(--brand); }

/* Quiet / dismiss — Cancel-type actions on a card (transparent, no fill). */
.btn-quiet{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:none; color:var(--muted); border:1px solid var(--border-input);
  border-radius:var(--radius); padding:9px 18px; font-size:var(--fs-small); font-weight:600;
  line-height:1.1; cursor:pointer; font-family:inherit; }
.btn-quiet:hover{ border-color:var(--muted-soft); }

/* Destructive confirm (used inside a confirm dialog). */
.btn-danger{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--danger); color:#fff; border:none; border-radius:var(--radius);
  padding:9px 18px; font-size:var(--fs-small); font-weight:600; line-height:1.1;
  cursor:pointer; font-family:inherit; }
.btn-danger:hover{ background:var(--danger-dark); }

/* Compact modifier for dense inline contexts (rate-card row Add). */
.btn-sm{ padding:7px 12px; font-size:12.5px; gap:6px; border-radius:var(--radius-sm); }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.field-input{ width:100%; height:38px; padding:8px 11px; border:1px solid var(--border-input);
  border-radius:var(--radius-sm); font-size:var(--fs-body); font-family:inherit; color:var(--ink);
  background:var(--surface-tint); outline:none; box-sizing:border-box; }
.field-input:focus{ border-color:var(--brand); background:var(--surface); }

/* Reference value — a locked/read-only value shown as plain text (NOT a disabled
   input). Reserves the same height as an input so rows stay aligned whether the
   field is filled or empty. (Conventions: editable vs reference.) */
.field-value{ min-height:38px; display:flex; align-items:center; font-size:var(--fs-body);
  color:var(--ink); line-height:1.4; }
.field-value:empty::after{ content:"—"; color:#c9c3b9; }
/* Read-record value (profile read mode): slightly larger, baseline-aligned. */
.kv-label{ font-size:12.5px; color:var(--muted-soft); }
.kv-value{ font-size:var(--fs-value); color:var(--ink); }

/* Inline validation error (red, under the field). */
.field-error{ font-size:12px; color:var(--danger); margin-top:5px; line-height:1.35; }
/* Required-field marker. */
.req{ color:var(--danger); }

/* ── Callouts (state-aware messaging) ───────────────────────────────────── */
.callout{ border-radius:12px; padding:13px 20px; }
.callout-warn{ background:var(--callout-warn-bg); border:1.5px solid var(--callout-warn-border); }
.callout-calm{ background:var(--callout-calm-bg); border:1px solid var(--callout-calm-border); }

/* ── Money / price presentation — ONE source of truth for the customer app AND the
   admin, so the two can never drift again (they used to hand-inline these in each file).
   Colours come from tokens. Each page keeps its own container LAYOUT and only wraps the
   money FIGURES in these classes; change how a price/total looks here, once. ────────── */

/* A REVISED line's price: stacked, right-aligned — struck original ABOVE, current BELOW. */
.price-cell  { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.price-was   { font-size:12px; color:var(--muted-faint); text-decoration:line-through; white-space:nowrap; } /* struck original (line) */
.price-now   { font-size:14px; font-weight:700; color:var(--brand); white-space:nowrap; }                    /* effective/current (line) */
.price-plain { font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; }                       /* non-revised (line) */

/* ORDER TOTAL figures: the struck original, the effective total, and the "Excluding tax"
   sub-line. Shared TYPOGRAPHY only — the total block's position/label stays per page. */
.total-was     { font-size:15px; color:var(--muted-faint); text-decoration:line-through; white-space:nowrap; }     /* struck original (total) */
.total-now     { font-size:21px; font-weight:700; color:var(--brand); letter-spacing:-.01em; white-space:nowrap; } /* effective (total) */
.total-taxnote { font-size:10px; color:var(--muted-soft); font-weight:400; }                                       /* "Excluding tax" */

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); }