/* Pricing Calculator redesign — docs/plans/2026-10-12-pricing-calculator-redesign.md
 *
 * Everything here is scoped to #page-pricing and is VIEW ONLY: no number on the page depends on
 * a rule in this file. Loaded after responsive.css.
 */

/* Rule 3 of the plan. pricing_calculator.js hides things with Tailwind's .hidden in 29 places,
   and any scoped `display` rule below would outrank it. This keeps .hidden winning. */
#page-pricing .hidden { display: none !important; }

/* ── Slice C: "Bandingkan Mike's vs Advanced" ────────────────────────────────────────────
   Off: only the live formula's column shows (computeJobCosting sets data-live-formula).
   On (.pricing-compare-on): both columns, side by side. */
#page-pricing[data-live-formula="adv"]:not(.pricing-compare-on)
  :is([data-cost-cell="mike"], #jobCostColMike, #jobMetricColMike,
      #jobRuntimeMinMike, #jobLeadTimeHoursMike, #jobQtyPerShiftMike) { display: none; }
#page-pricing[data-live-formula="mike"]:not(.pricing-compare-on)
  :is([data-cost-cell="adv"], #jobCostColAdv, #jobMetricColAdv,
      #jobRuntimeMin, #jobLeadTimeHours, #jobQtyPerShift) { display: none; }
/* With one column hidden, the 3-column rows become label | value. */
#page-pricing[data-live-formula]:not(.pricing-compare-on)
  .grid-cols-3:has(> [data-cost-cell], > #jobCostColMike, > #jobMetricColMike,
                   > #jobRuntimeMinMike, > #jobLeadTimeHoursMike, > #jobQtyPerShiftMike) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ── Slice D: labour basis as two cards (same radios, same ids) ─────────────────────── */
#page-pricing .prc-mode { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
#page-pricing .prc-mode legend { padding: 0; margin-bottom: 8px; }
#page-pricing .prc-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#page-pricing .prc-mode-option {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--glorion-border, #d1d5db);
  transition: border-color .15s, background-color .15s;
}
#page-pricing .prc-mode-option input { margin-top: 3px; accent-color: var(--glorion-gold, #c9a45c); }
#page-pricing .prc-mode-body b { display: block; font-size: 14px; }
#page-pricing .prc-mode-body span { display: block; font-size: 12px; margin-top: 2px; color: var(--glorion-text-hint, #6b7280); }
#page-pricing .prc-mode-option:has(input:checked) {
  border-color: var(--glorion-gold, #c9a45c);
  background: rgba(205, 167, 94, .10);
}
#page-pricing .prc-mode-option:has(input:checked) b { color: var(--glorion-gold, #b7791f); }
#page-pricing .prc-mode-option:has(input:focus-visible) { outline: 2px solid var(--glorion-gold, #c9a45c); outline-offset: 2px; }
@media (max-width: 520px) { #page-pricing .prc-mode-options { grid-template-columns: 1fr; } }

/* Only meaningful while comparing, and only when there is something to say. */
#page-pricing .prc-compare-note { display: none; color: var(--glorion-gold, #b7791f); }
#page-pricing.pricing-compare-on .prc-compare-note:not(:empty) { display: block; }

#page-pricing .prc-compare-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; margin-right: 10px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.4;
  border: 1px solid var(--glorion-border, #d1d5db); background: transparent;
  color: var(--glorion-text-secondary, #4b5563); cursor: pointer;
}
#page-pricing .prc-compare-btn:hover,
#page-pricing .prc-compare-btn[aria-pressed="true"] {
  border-color: var(--glorion-gold, #c9a45c); color: var(--glorion-gold, #c9a45c);
}
#page-pricing .prc-compare-btn:focus-visible { outline: 2px solid var(--glorion-gold, #c9a45c); outline-offset: 2px; }

/* NOTE for later slices: index_app.html has a global
     .card, .panel, [class*="-card"] { border-color: var(--glorion-border) !important; }
   so no class in this file may contain "-card" — it silently loses its border colour. */

/* ── Slice E: restyle in place ───────────────────────────────────────────────────────────
   Colours only from --glorion-* tokens, so the dark AND light themes both work. The theme sets
   background and radius with !important (index_app.html ~312-321), so those two properties are
   the only ones here that need it. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  /* Self-hosted (council): the price must not fall back to Times on a slow floor connection. OFL. */
  src: url('/public/vendor/fonts/bodoni-moda-v28-500-latin.woff2') format('woff2');
}

#page-pricing { font-variant-numeric: tabular-nums; }

/* The calculator first, the rarely-touched settings panels after it. Visual order only. */
#page-pricing .prc-wrap { display: flex; flex-direction: column; gap: 16px; }
#page-pricing .prc-wrap > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#page-pricing .prc-wrap > .prc-head { order: -2; }
#page-pricing .prc-wrap > .prc-job  { order: -1; }

/* Cards: one surface, a hairline, generous padding. */
#page-pricing .prc-wrap > .rounded-2xl {
  background: var(--glorion-surface) !important;
  border: 1px solid var(--glorion-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 20px !important;
}
#page-pricing .prc-wrap > details.rounded-2xl > summary { color: var(--glorion-text-secondary); }

/* Inset blocks inside a card read as one step deeper. */
#page-pricing .prc-job .bg-gray-50 {
  background: var(--glorion-surface-2) !important;
  border: 1px solid var(--glorion-border);
  border-radius: 12px !important;
}

/* Inputs and selects: one consistent field style. */
#page-pricing input[type="number"], #page-pricing input[type="text"], #page-pricing input[type="search"],
#page-pricing select {
  background: var(--glorion-surface-2);
  border: 1px solid var(--glorion-border);
  border-radius: 10px;
  color: var(--glorion-text-primary);
  transition: border-color .15s;
}
#page-pricing input:focus, #page-pricing select:focus {
  border-color: var(--glorion-gold); outline: none; box-shadow: 0 0 0 3px var(--glorion-gold-dim, rgba(195,155,90,.15));
}
#page-pricing label { color: var(--glorion-text-secondary); }

/* Formula tabs: the live one in gold. */
#page-pricing [data-formula-tab][aria-selected="true"] { color: var(--glorion-gold); border-color: var(--glorion-gold); }

/* ── Slice F: quote column, price hero, phone price bar ──────────────────────────────── */
#page-pricing .prc-hero { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--glorion-border); }
#page-pricing .prc-hero-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--glorion-text-hint); }
#page-pricing .prc-hero-label span { letter-spacing: .02em; text-transform: none; }
#page-pricing .prc-hero-price {
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif; font-weight: 500;
  font-size: 52px; line-height: 1.05; letter-spacing: -.02em; color: var(--glorion-text-primary);
  margin: 8px 0 4px; font-variant-numeric: lining-nums;
}
#page-pricing .prc-hero-rp { font-size: 24px; color: var(--glorion-gold); margin-right: 6px; vertical-align: 18px; }
#page-pricing .prc-hero-unit { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; color: var(--glorion-text-hint); margin-left: 6px; letter-spacing: 0; }
#page-pricing .prc-hero-note { font-size: 12px; color: var(--glorion-text-hint); min-height: 1em; }

/* Wide screens: inputs on the left, the quote in a sticky column on the right. */
@media (min-width: 1180px) {
  #page-pricing .prc-job {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    column-gap: 24px; align-items: start;
  }
  #page-pricing .prc-job > * { grid-column: 1; min-width: 0; }
  #page-pricing .prc-job > .prc-job-results {
    grid-column: 2; grid-row: 1 / span 12;
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 0 !important;
  }
  #page-pricing .prc-job-results > .prc-summary { order: -1; }
}

/* Phone/tablet: the price pinned to the bottom edge while the inputs scroll. */
#page-pricing .prc-pricebar { display: none; }
@media (max-width: 1023px) {
  #page-pricing .prc-pricebar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--glorion-surface); border-top: 1px solid var(--glorion-border);
  }
  #page-pricing .prc-pricebar b { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; font-size: 24px; color: var(--glorion-text-primary); }
  #page-pricing .prc-pricebar small { color: var(--glorion-text-hint); }
  #page-pricing .prc-pricebar-go { background: none; border: 0; color: var(--glorion-gold); font-size: 13px; padding: 8px 0; cursor: pointer; }
  #page-pricing .prc-wrap { padding-bottom: 72px; }
  #page-pricing .prc-hero-price { font-size: 44px; }
}

/* The sample source banner is drawn by renderSamplePricingBanner with inline LIGHT colours
   (#ecfdf5 / #fffbeb / #fef2f2 backgrounds, grey text). On the dark theme that is a bright box.
   Re-tone it from tokens; the status line keeps its own green/amber/red as a left border. */
#page-pricing #jobSampleSourceBanner {
  background: var(--glorion-surface-2) !important;
  border-width: 1px 1px 1px 3px !important;
  color: var(--glorion-text-primary);
}
#page-pricing #jobSampleSourceBanner [style*="#1f2937"],
#page-pricing #jobSampleSourceBanner [style*="#374151"] { color: var(--glorion-text-primary) !important; }
#page-pricing #jobSampleSourceBanner [style*="#4b5563"],
#page-pricing #jobSampleSourceBanner [style*="#6b7280"] { color: var(--glorion-text-secondary) !important; }
#page-pricing #jobSampleSourceBack {
  background: transparent !important; color: var(--glorion-gold) !important;
  border: 1px solid var(--glorion-border) !important; border-radius: 999px !important;
}

/* In the narrow quote column the cost-breakdown header (title, Bandingkan, per pc/total) does not
   fit on one line: the toggle takes its own full-width row under the title. */
#page-pricing .prc-cost > .flex:first-child { flex-wrap: wrap; row-gap: 8px; }
#page-pricing .prc-cost .prc-compare-btn { order: 3; width: 100%; justify-content: center; margin: 0; }

/* ── Slice G1: the four steps ────────────────────────────────────────────────────────────── */
#page-pricing .prc-step + .prc-step { margin-top: 14px; }
#page-pricing .prc-job-head + .prc-step { margin-top: 0; }
#page-pricing .prc-step-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
#page-pricing .prc-step-n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--glorion-gold); }
#page-pricing .prc-step-t { margin: 0; font-size: 16px; font-weight: 600; color: var(--glorion-text-primary); }
#page-pricing .prc-step-s { margin-left: auto; font-size: 12px; color: var(--glorion-text-hint); }
#page-pricing .prc-step label { color: var(--glorion-text-secondary); font-weight: 500; }

/* Advanced runtime note + machine table (step 3): one bordered box, gone when both are empty. */
#page-pricing .prc-runtime-box { border: 1px solid var(--glorion-border); border-radius: 12px; overflow: hidden; }
#page-pricing .prc-runtime-box:not(:has(#jobAdvancedRuntimeNote:not(.hidden))):not(:has(#jobMachineCompare:not(:empty))) { display: none; }

/* Folded settings and the "Detail" fold read as quiet disclosure rows. */
#page-pricing #jobSettingsPanel > summary, #page-pricing .prc-detail > summary { color: var(--glorion-text-secondary); list-style: none; }
#page-pricing #jobSettingsPanel > summary::-webkit-details-marker, #page-pricing .prc-detail > summary::-webkit-details-marker { display: none; }
#page-pricing #jobSettingsPanel[open] > summary > span:first-child { display: inline-block; transform: rotate(90deg); }
#page-pricing .prc-detail > summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform .15s; }
#page-pricing .prc-detail[open] > summary::before { transform: rotate(90deg); }

/* Wide layout: the left column now stacks head + 4 steps + the estimate panel. */
@media (min-width: 1180px) {
  #page-pricing .prc-job { row-gap: 14px; }
  #page-pricing .prc-job > .prc-step + .prc-step { margin-top: 0; }
}

/* ── Slice G2: per-material cost beside each dropdown ───────────────────────────────────── */
#page-pricing .prc-mat-row { display: flex; align-items: center; gap: 10px; }
#page-pricing .prc-mat-row > select { flex: 1 1 auto; min-width: 0; }
#page-pricing .prc-mat-cost { flex: none; min-width: 64px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--glorion-text-primary); }
#page-pricing .prc-mat-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: var(--glorion-text-secondary); }
#page-pricing .prc-mat-total { border-top: 1px solid var(--glorion-border); margin-top: 4px; padding-top: 10px; font-weight: 600; color: var(--glorion-text-primary); }