/* ============================================================
   CrumpIT — Builder page (@layer pages)
   Card-based configurator: left category stepper, centre part
   cards, right live summary. Reuses shell buttons/inputs/tokens.
   ============================================================ */

@layer pages {

  .page-hero {
    padding-top: calc(var(--header-h) + var(--sp-16));
    padding-bottom: var(--sp-8);
  }
  .page-hero h1 { margin: var(--sp-4) 0; }
  .page-hero .lead { max-width: 58ch; }

  .builder { padding-bottom: var(--sp-24); }
  .builder-grid {
    display: grid;
    grid-template-columns: 210px 1fr 360px;
    grid-template-areas: "steps stage summary";
    gap: var(--sp-8);
    align-items: start;
  }

  /* ---- left stepper ---- */
  .builder-steps { grid-area: steps; min-width: 0; position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
  .steps { position: relative; display: flex; flex-direction: column; gap: 2px; }
  .steps::before {
    content: "";
    position: absolute;
    left: 21px; top: 20px; bottom: 20px;
    width: 1px;
    background: var(--border);
  }
  .step {
    position: relative;
    display: grid;
    grid-template-columns: 20px auto 1fr;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    text-align: left;
    padding: var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  }
  .step__marker {
    position: relative; z-index: 1;
    width: 13px; height: 13px;
    margin-left: 3px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg);
    color: #fff;
    transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
  }
  .step__marker svg { width: 9px; height: 9px; opacity: 0; }
  .step__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); color: var(--text-muted); }
  .step__name { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-14); letter-spacing: 0.04em; text-transform: uppercase; }
  .step:hover { color: var(--text); background: var(--surface); }
  .step.is-complete .step__marker { border-color: var(--accent); background: var(--accent); }
  .step.is-complete .step__marker svg { opacity: 1; }
  .step.is-complete .step__num { color: var(--text); }
  .step.is-active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-24); }
  .step.is-active .step__num { color: var(--accent); }

  /* ---- centre stage ---- */
  .builder-stage {
    grid-area: stage;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-8);
  }
  .stage-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
  }
  .stage-head__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-18); color: var(--accent); }
  .stage-head__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--accent);
    background: var(--accent-14);
    border: 1px solid var(--border);
  }
  .stage-head__icon svg { width: 22px; height: 22px; }
  .stage-head__title { flex: 1; font-size: var(--fs-24); }
  .badge--optional { color: var(--text-muted); background: var(--surface-alt); }

  /* live slot / kit guidance under the stage header */
  .stage-note {
    display: block;
    margin: 0 0 var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-size: var(--fs-14);
    line-height: 1.55;
    color: var(--text-muted);
  }
  .stage-note strong { color: var(--text); font-weight: 700; }
  .stage-note .over { color: var(--danger); }
  .stage-note .over strong { color: var(--danger); }

  .part-group { margin-bottom: var(--sp-8); }
  .part-group:last-child { margin-bottom: 0; }
  .part-group__head {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--fs-12);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }
  /* auto-fit so cards drop to a single column whenever the panel is narrow
     (never a fixed 2-col that can overflow past the viewport) */
  .part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }

  .part-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    text-align: left;
    padding: var(--sp-5);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
  }
  .part-card:hover { transform: translateY(-2px); border-color: var(--accent-24); }
  .part-card.is-selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent), var(--glow-sm);
    background: var(--accent-08);
  }
  .part-card__check {
    position: absolute;
    top: var(--sp-3); right: var(--sp-3);
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--spring);
  }
  .part-card__check svg { width: 13px; height: 13px; }
  .part-card.is-selected .part-card__check { opacity: 1; transform: scale(1); }
  .part-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-right: var(--sp-6);
  }
  .part-card__name { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-16); line-height: 1.25; color: var(--text); }
  .part-card__price { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--accent); }
  .part-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .spec-tag {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-12);
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.2rem 0.55rem;
    border-radius: var(--r-pill);
  }
  .part-card__desc { color: var(--text-muted); font-size: var(--fs-14); line-height: 1.5; }

  /* per-card quantity stepper (RAM: identical kits x1-2 · Storage: drives x1-4) */
  .part-card__qty {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    align-self: flex-start;
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    width: 100%;
  }
  .part-card__qty-label {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-12);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: auto;
  }
  .part-card__qty .qbtn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-16);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
  }
  .part-card__qty .qbtn:hover { border-color: var(--accent); color: var(--accent); }
  .part-card__qty .qbtn:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--border); color: var(--text-muted); }
  .part-card__qty output {
    min-width: 22px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-16);
    color: var(--text);
  }

  /* ---- right summary ---- */
  .build-summary {
    grid-area: summary;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
  }
  .build-summary h2 { font-size: var(--fs-20); }

  .compat-overall {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-14);
  }
  .compat-overall svg { width: 20px; height: 20px; flex-shrink: 0; }
  .compat-overall--idle  { color: var(--text-muted); background: var(--surface-alt); }
  .compat-overall--ok    { color: var(--success); background: rgba(0, 196, 140, 0.12); border-color: rgba(0, 196, 140, 0.4); }
  .compat-overall--warn  { color: var(--warning); background: rgba(255, 180, 0, 0.12); border-color: rgba(255, 180, 0, 0.4); }
  .compat-overall--error { color: var(--danger); background: var(--danger-16); border-color: rgba(226, 60, 60, 0.4); }
  .compat-issues { display: flex; flex-direction: column; gap: var(--sp-3); }
  .compat-issue { display: flex; gap: var(--sp-3); font-size: var(--fs-14); line-height: 1.5; color: var(--text); }
  .compat-issue svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
  .compat-issue--error svg { color: var(--danger); }
  .compat-issue--warn svg { color: var(--warning); }
  .compat-issue:empty, .compat-issues:empty { display: none; }

  .summary-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
  .summary-card__label { font-family: var(--font-ui); font-size: var(--fs-12); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--text-muted); }
  .summary-card__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--accent); margin: var(--sp-1) 0; }
  .summary-card__value .dash { color: var(--text-muted); }
  .summary-card__sub { color: var(--accent); font-size: var(--fs-14); font-style: italic; }

  .ship-row { display: flex; gap: var(--sp-2); }
  .ship-row .input { flex: 1; min-width: 0; }
  .ship-note { color: var(--text-muted); font-size: var(--fs-12); font-style: italic; margin-top: var(--sp-2); }

  .breakdown { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .breakdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
  }
  .breakdown__row:last-child { border-bottom: 0; }
  .breakdown__row > span:first-child { color: var(--text-muted); }
  .breakdown__row .val { font-family: var(--font-display); font-weight: 700; color: var(--text); }
  .breakdown__row .val .dash { color: var(--text-muted); }
  .breakdown__row.is-total > span:first-child { color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-14); }
  .breakdown__row.is-total .val { color: var(--accent); font-size: var(--fs-20); }

  #sum-draw { color: var(--text-muted); font-size: var(--fs-14); }

  #add-build, #save-build { width: 100%; }
  #save-build { margin-top: var(--sp-3); }
  #add-build:disabled,
  #save-build:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--surface-alt);
    color: var(--text-muted);
    box-shadow: none;
    transform: none;
  }

  .warranty {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: rgba(0, 196, 140, 0.10);
    border: 1px solid rgba(0, 196, 140, 0.3);
    color: var(--text);
    font-size: var(--fs-14);
    line-height: 1.5;
  }
  .warranty svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--success); }

  /* ---- responsive ---- */
  @media (max-width: 1200px) {
    .builder-grid { grid-template-columns: 190px 1fr 320px; gap: var(--sp-6); }
  }
  @media (max-width: 1080px) {
    .builder-grid {
      grid-template-columns: 190px 1fr;
      grid-template-areas: "steps stage" "summary summary";
    }
    .build-summary { position: static; }
  }
  @media (max-width: 720px) {
    .builder-grid { grid-template-columns: 1fr; grid-template-areas: "steps" "stage" "summary"; }
    .builder-steps { position: static; }
    .steps { flex-direction: row; overflow-x: auto; gap: var(--sp-1); padding-bottom: var(--sp-2); }
    .steps::before { display: none; }
    .step { flex-shrink: 0; grid-template-columns: auto auto; }
    .step .step__marker { display: none; }
    .builder-stage { padding: var(--sp-5) var(--sp-5); }
    .part-grid { grid-template-columns: 1fr; }
  }
}