/* wwwroot/pillar/flipping.css — calculator + tables for /costco-{metal}-flipping */

/* The global Paces theme forces data-bs-theme=dark on non-landing routes; bare
   headings/inputs inherit dark styling on this light surface unless pinned to the
   landing design tokens (pillar.css does the same via its section classes). */
.flipping-page { color-scheme: light; }
.flipping-page h1 { font-family: var(--sans, inherit); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink, #0c0c0a); margin: 0 0 .75rem; }
.flipping-page h2 { font-family: var(--sans, inherit); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; color: var(--ink, #0c0c0a); margin: 2.5rem 0 .75rem; }
.flipping-page h3 { font-family: var(--sans, inherit); font-size: 1.05rem; font-weight: 700; color: var(--ink, #0c0c0a); margin: 1rem 0 .35rem; }
.flipping-page p, .flipping-page li, .flipping-page label, .flipping-page td, .flipping-page th { color: var(--ink-soft, #3d3a33); }
.flipping-page p b, .flipping-page li b, .flipping-page td b { color: var(--ink, #0c0c0a); font-weight: 600; }
.flipping-page .lede { font-size: 1.1rem; line-height: 1.6; }
.flip-side input, .flip-side select { background: #fff; color: var(--ink, #0c0c0a); }
.flip-side input::placeholder { color: var(--ink-muted, #8a8578); }
.flip-calc { background: #fff; }
.flip-hero .data-freshness { font-size: .85rem; opacity: .7; margin-top: .25rem; }
.flip-calc { border: 1px solid var(--line, #e5e2d9); border-radius: 12px; padding: 1.25rem; margin: 1.5rem 0; }
.flip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .flip-grid { grid-template-columns: 1fr; } }
.flip-side label { display: block; margin: .5rem 0; font-size: .9rem; }
.flip-side input, .flip-side select { width: 100%; padding: .45rem .6rem; margin-top: .2rem; border: 1px solid var(--line, #d8d4c8); border-radius: 8px; font: inherit; }
.flip-side label.chk { display: flex; align-items: center; gap: .5rem; }
.flip-side label.chk input { width: auto; }
.flip-side input[readonly], .flip-side input:disabled { background: var(--surface-2, #f5f4ef); color: var(--ink-muted, #646260); cursor: not-allowed; }
.table-scroll { overflow-x: auto; }
.flip-tax-table, .flip-example, .flip-bids-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.flip-tax-table th, .flip-tax-table td, .flip-example td, .flip-bids-table th, .flip-bids-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--line, #eee9dd); text-align: left; }
.flip-tax-table tr.taxed td { background: rgba(180, 35, 24, .06); }
.flip-example tr.main td { font-weight: 700; }
.flip-bids-table thead th { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted, #646260); background: var(--surface-2, #f5f4ef); }
.flip-cta, .flip-cta-final { margin-top: 1rem; }

/* ============ fieldset reset (contract) ============
   Default UA `min-width: min-content` on fieldset breaks the 720px grid
   collapse (a fieldset refuses to shrink below its content's intrinsic
   width). border/padding/margin reset so <legend><h3> owns all spacing. */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ============ Product select (contract a) ============
   Sits above .flip-grid, so the `.flip-side select` scoping below never
   reaches it — needs its own width/skin rule. */
.flip-product-label { display: block; margin: .25rem 0 1rem; font-size: .9rem; font-weight: 600; color: var(--ink, #0c0c0a); }
#flip-product {
  width: 100%;
  padding: .55rem .7rem;
  margin-top: .3rem;
  border: 1px solid var(--line, #d8d4c8);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink, #0c0c0a);
}

/* ============ Note slots (contract g) ============
   Price hint / price context / venue note / page-age note. Pre-rendered
   empty by Razor; JS fills textContent. */
.flip-note { margin: .35rem 0 0; font-size: .8rem; color: var(--ink-muted, #646260); }
#flip-price-reset {
  margin-left: .35rem;
  padding: .1rem .55rem;
  font-size: .72rem;
  font-weight: 500;
  border: 1px solid var(--line, #d8d4c8);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #0c0c0a);
  cursor: pointer;
}
#flip-price-reset:hover { background: var(--surface-2, #f5f4ef); }
#flip-age-note:not(:empty) {
  margin-top: .75rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  background: var(--surface-2, #f5f4ef);
}

/* ============ Summary strip (contract b) ============ */
.flip-summary {
  margin: .75rem 0 1.15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line, #e5e2d9);
  border-radius: 10px;
  background: #fff;
}
.flip-summary-name { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--ink, #0c0c0a); }
.flip-summary-name .item {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-muted, #646260);
}
.flip-summary-meta { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.flip-summary-meta a { font-size: .82rem; }
.flip-summary .data-freshness { margin: 0; font-size: .8rem; color: var(--ink-muted, #646260); }

/* Local badge styles (mirrors pillar.css:263-287's .sku-row .badge look, but
   NOT reusing that selector — it's `.pillar-page .sku-row .badge`-scoped and
   must not be loosened onto the summary strip). */
.flipping-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
}
.flipping-page .badge.in { background: var(--in-stock-bg, #ecfdf3); color: var(--in-stock, #15803d); }
.flipping-page .badge.in::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--in-stock, #15803d); }
.flipping-page .badge.out { background: var(--surface-2, #f5f4ef); color: var(--ink-muted, #646260); }

/* deal-* chips (contract HIGH item): admin app.min.css's dark-surface colors
   fail WCAG here. Reuse DealQuality's band names/classes, but define light-
   surface color pairs from the landing tokens (mirrors pillar.css:261-262's
   per-band approach, extended to all four bands + a chip background since
   this is a pill, not bare colored text). */
.flipping-page .deal-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 999px;
}
.flipping-page .deal-exceptional { background: var(--in-stock-bg, #ecfdf3); color: var(--in-stock, #15803d); }
.flipping-page .deal-great { background: var(--gold-50, #fbf3df); color: var(--gold-700, #7a5618); }
.flipping-page .deal-fair { background: rgba(180, 83, 9, .10); color: var(--warn, #b45309); }
.flipping-page .deal-poor { background: rgba(185, 28, 28, .08); color: var(--out-stock, #b91c1c); }

/* ============ Verdict banner (contract d) ============
   The page's one live region (role="status") — colored per pos/neg. */
.flip-verdict {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--line, #e8e7e0);
  background: var(--surface-2, #f5f4ef);
}
.flip-verdict strong { display: block; font-size: 1.15rem; color: var(--ink, #0c0c0a); }
.flip-verdict .bridge { display: block; margin-top: .25rem; font-size: .85rem; color: var(--ink-soft, #4a4945); }
.flip-verdict.pos { background: var(--in-stock-bg, #ecfdf3); border-color: rgba(21, 128, 61, .25); }
.flip-verdict.pos strong { color: var(--in-stock, #15803d); }
.flip-verdict.neg { background: rgba(185, 28, 28, .06); border-color: rgba(185, 28, 28, .25); }
.flip-verdict.neg strong { color: var(--out-stock, #b91c1c); }

/* ============ Outputs (dl/dt/dd, contract d) ============
   Replaces the old span/b row styling now that the markup is a real
   description list. Browser UA margins on dl/dt/dd are reset so the
   flex .row layout still lines up.
*/
.flip-outputs { margin: 1rem 0 0; border-top: 1px solid var(--line, #e5e2d9); padding-top: .75rem; }
.flip-outputs .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .3rem 0; }
.flip-outputs .row dt { margin: 0; font-weight: 400; color: var(--ink-soft, #4a4945); }
.flip-outputs .row dd { margin: 0; font-weight: 600; color: var(--ink, #0c0c0a); text-align: right; }
.flip-outputs .row.main { font-size: 1.15rem; }
.flip-outputs output.pos { color: var(--in-stock, #15803d); }
.flip-outputs output.neg { color: var(--out-stock, #b91c1c); }

@media (max-width: 880px) {
  .flip-calc { padding: 1rem; }
}
@media (max-width: 720px) {
  .flip-summary-meta { gap: .4rem; }
  .flip-outputs .row { flex-wrap: wrap; }
}