@layer reset, theme, base, components, states;

@layer reset {
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body, h1, h2, p, dl, dd { margin: 0; }
  fieldset { min-inline-size: 0; margin: 0; }
  button, input, select { font: inherit; }
}

@layer theme {
  :root {
    color-scheme: light;
    --ink: #17211d;
    --muted: #55635c;
    --paper: #f4f7f2;
    --surface: #ffffff;
    --line: #9aa8a0;
    --accent: #075f46;
    --accent-strong: #034331;
    --signal: #e6b325;
    --danger: #a12626;
    --warning-bg: #fff3c4;
    --focus: #005fcc;
    --radius: 0.65rem;
    --shadow: 0 0.8rem 2.5rem rgb(23 33 29 / 10%);
    --font-display: Rockwell, 'Roboto Slab', Georgia, serif;
    --font-body: Inter, Aptos, 'Segoe UI', sans-serif;
    --font-data: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  }
}

@layer base {
  html { background: var(--paper); overflow-x: hidden; }
  body { min-block-size: 100dvh; color: var(--ink); font-family: var(--font-body); line-height: 1.5; overflow-wrap: break-word; }
  h1, h2, legend { font-family: var(--font-display); line-height: 1.1; }
  h1 { max-inline-size: 18ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 4.75rem); text-wrap: balance; }
  h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
  button, input, select { max-inline-size: 100%; }
  button { cursor: pointer; }
  button:disabled { cursor: not-allowed; opacity: 0.55; }
  :where(a, button, input, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  [hidden] { display: none !important; }
}

@layer components {
  .skip-link { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 10; padding: 0.75rem 1rem; translate: 0 -150%; background: var(--ink); color: white; }
  .skip-link:focus { translate: 0; }
  .page-header { padding: clamp(2rem, 5vw, 5rem) max(1rem, calc((100vw - 82rem) / 2)); border-block-end: 0.45rem solid var(--signal); background: var(--accent); color: white; }
  .page-header > p:last-child { max-inline-size: 55ch; margin-block-start: 1rem; font-size: 1.1rem; }
  .eyebrow { margin-block-end: 0.5rem; font-family: var(--font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  form { display: grid; gap: 1rem; min-inline-size: 0; }
  fieldset, #internal-summary, .client-quote { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
  fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: clamp(1rem, 3vw, 1.75rem); }
  legend { padding-inline: 0.4rem; color: var(--accent-strong); font-size: 1.4rem; font-weight: 700; }
  .field { display: flex; flex-direction: column; min-inline-size: 0; }
  .field--wide { grid-column: 1 / -1; }
  label, .field-label { font-weight: 700; }
  input, select { inline-size: 100%; min-block-size: 2.75rem; margin-block-start: 0.35rem; border: 1px solid #65756c; border-radius: 0.35rem; padding: 0.6rem 0.7rem; background: white; color: var(--ink); }
  input[type='number'] { font-family: var(--font-data); font-size: 1rem; }
  input[type='radio'] { inline-size: 1.25rem; min-block-size: 1.25rem; margin: 0; accent-color: var(--accent); }
  .choice-group { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 0.4rem; }
  .choice-group label { display: flex; align-items: center; min-block-size: 3rem; gap: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
  .choice-group label:has(input:checked) { border-color: var(--accent); background: #e1f1ea; }
  .help { margin-block-start: 0.2rem; color: var(--muted); font-size: 0.85rem; }
  .error { min-block-size: 1.25rem; margin-block-start: 0.2rem; color: var(--danger); font-size: 0.85rem; font-weight: 700; }
  .message { padding: 1rem; border: 2px solid currentColor; border-radius: var(--radius); }
  .message--warning { background: var(--warning-bg); color: #5b4300; }
  .button, button { min-block-size: 3rem; border: 1px solid var(--accent); border-radius: 0.4rem; padding: 0.6rem 1rem; background: var(--surface); color: var(--accent-strong); font-weight: 800; }
  .button--primary { inline-size: 100%; background: var(--accent); color: white; }
  .button--primary:hover:not(:disabled) { background: var(--accent-strong); }
  .button--secondary:hover:not(:disabled), button:hover:not(:disabled) { background: #e1f1ea; }
  .button--danger { border-color: var(--danger); color: var(--danger); }
  .profile-bar { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
  .profile-bar .field { flex: 1 1 14rem; }
  .material-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .letter-list { display: grid; grid-column: 1 / -1; gap: 0.75rem; margin: 0; padding-inline-start: 1.5rem; }
  .letter-row { display: grid; grid-template-columns: 1.2fr repeat(2, 1fr) auto auto; align-items: end; gap: 0.6rem; border-block-end: 1px solid var(--line); padding-block-end: 0.75rem; }
  .letter-area { min-block-size: 3rem; padding-block: 0.75rem; font-family: var(--font-data); white-space: nowrap; }
  #internal-summary, .client-quote { padding: clamp(1rem, 3vw, 1.75rem); }
  .cost-list { margin-block: 1rem; }
  .cost-list > div { display: flex; justify-content: space-between; gap: 1rem; border-block-end: 1px dashed var(--line); padding-block: 0.55rem; }
  .cost-list dd { font-family: var(--font-data); font-weight: 700; text-align: end; }
  .cost-list__total { margin-block-start: 0.5rem; border-block: 3px double var(--accent-strong) !important; color: var(--accent-strong); font-size: 1.15rem; }
  .client-quote { margin-block-start: 1rem; }
  .client-price { margin-block: 1rem; color: var(--accent-strong); font-family: var(--font-data); font-size: 1.75rem; font-weight: 800; }
}

@layer states {
  input:user-invalid, select:user-invalid, [aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
  @media (forced-colors: active) { :where(a, button, input, select):focus-visible { outline-color: Highlight; } }
}

@media print {
  @page { margin: 18mm; }
  body { min-block-size: auto; background: white; color: black; }
  .skip-link, .page-header, #calculator-form, #internal-summary { display: none !important; }
  .calculator-layout, .results-column { display: block; margin: 0; padding: 0; }
  .client-quote { margin: 0; border: 0; box-shadow: none; }
}