/*
 * PrepSheet SaaS launch candidate, 13 Sep 2026.
 * Additive product-surface layer. It keeps the approved green/citron/Outfit
 * brand while neutralising the remaining dark-tool and copper-era defaults.
 * No markup, ids, names, links, event handlers, or API semantics are changed.
 */
body.ps-site {
  --bg: var(--ps-white);
  --bg2: var(--ps-paper);
  --bg3: var(--ps-surface);
  --cream: var(--ps-paper);
  --cream2: var(--ps-surface-2);
  --ink: var(--ps-green);
  --text: var(--ps-green);
  --muted: var(--ps-muted);
  --dim: #68776d;
  --line: var(--ps-line);
  --line2: var(--ps-line-strong);
  --copper: var(--ps-green);
  --copper-hot: #1e5c42;
  --copper-deep: var(--ps-green-dark);
  --herb: #2d6b4e;
  --ok: #2d6b4e;
  --alert: var(--ps-red);
  color-scheme: light;
  background: var(--ps-white);
  background-image: none;
}

body.ps-site :is(.card, .acct, .upsell, .wc-move, .csv-preview, .cap-rejected,
  .ing-hist, .stat, .data-card, .book-card, .scale-primary, .cost-card,
  #price-report, #prep-result-card, #whatchanged, #capture, #view-ingredients) {
  background: var(--ps-paper);
  color: var(--ps-green);
  border-color: var(--ps-line);
  box-shadow: none;
}

body.ps-site :is(.card h2, .upsell h3, .acct-copy b, .acct-in b, .wc-dish .name,
  .ps-head .t, .ps-foot b, .ing-cost, summary) {
  color: var(--ps-green);
}

body.ps-site :is(.card h2 .sub, label, .hint, .small, .acct-copy span,
  .acct-in, .acct-plan, .saved, .ps-head .m, .ps-foot, .faq p, .note,
  .wc-dish .figs, .cap-status, .cap-page-badge, .cap-conf) {
  color: var(--ps-muted);
}

body.ps-site :is(input, select, textarea) {
  background: var(--ps-paper);
  color: var(--ps-green);
  border-color: var(--ps-line-strong);
  color-scheme: light;
}

body.ps-site :is(input, select, textarea):focus {
  border-color: var(--ps-green);
  box-shadow: 0 0 0 3px rgba(238, 242, 131, .95);
  outline: 0;
}
body.ps-site .cream-card input:focus {
  border-color: var(--ps-green);
  box-shadow: 0 0 0 3px rgba(238, 242, 131, .95);
  outline: 0;
}

body.ps-site :focus-visible {
  outline: 3px solid var(--ps-green);
  outline-offset: 3px;
}

body.ps-site :is(.btn-primary, #add, .seg button.on, .ps-nav-cta) {
  background: var(--ps-green);
  color: var(--ps-citron);
  border-color: var(--ps-green);
}

body.ps-site :is(.btn-primary, #add, .seg button.on, .ps-nav-cta):hover {
  background: var(--ps-green-dark);
  color: var(--ps-citron);
  border-color: var(--ps-green-dark);
}

body.ps-site :is(.btn-ghost, .quick button, .linkbtn) {
  color: var(--ps-green);
}

body.ps-site :is(.btn-ghost, .quick button):hover {
  color: var(--ps-green-dark);
  border-color: var(--ps-green);
  background: var(--ps-surface);
}

body.ps-site :is(.linkbtn:hover, .linkbtn.danger:hover) {
  color: var(--ps-green-dark);
}

body.ps-site :is(.factor, .seg button, .quick button, .ps-head, .ps-foot) {
  background: var(--ps-surface);
  color: var(--ps-green);
  border-color: var(--ps-line);
}

body.ps-site .factor,
body.ps-site .price-line .big,
body.ps-site .acct-state,
body.ps-site .cap-badge,
body.ps-site .cap-browse {
  color: var(--ps-green);
}

body.ps-site .saved .dot { background: var(--ps-green); }
body.ps-site .v.good,
body.ps-site .wc-move .pct.down,
body.ps-site .cap-status.ok { color: var(--ps-green); }
body.ps-site .v.warn { color: #6a5a00; }
body.ps-site :is(.v.bad, .wc-move .pct.up, .cap-status.bad, .cap-file-err,
  .cap-rejected p) { color: var(--ps-red); }

body.ps-site .ps {
  background: var(--ps-paper);
  border-color: var(--ps-line-strong);
}
body.ps-site .ps-head { border-bottom-color: var(--ps-line); }
body.ps-site table.pst th,
body.ps-site table.pst td,
body.ps-site .ps-foot { border-color: var(--ps-line); }
body.ps-site table.pst th { background: var(--ps-surface-2); }
body.ps-site table.pst td { color: var(--ps-green); }
body.ps-site table.pst td.qty { color: var(--ps-green-dark); }

body.ps-site th { background: var(--ps-surface); color: var(--ps-green); }
body.ps-site :is(td, th) { border-color: var(--ps-line); }
body.ps-site .cap-drop:hover,
body.ps-site .cap-drop.drag {
  border-color: var(--ps-green);
  background: rgba(238, 242, 131, .24);
}
body.ps-site .cap-spin { border-color: var(--ps-line-strong); border-top-color: var(--ps-green); }
body.ps-site .cap-rejected { background: var(--ps-surface); }
body.ps-site .cream-card {
  background: var(--ps-citron);
  color: var(--ps-green);
  border: 1px solid rgba(22, 56, 44, .18);
}
body.ps-site .cream-card :is(h3, p, .small) { color: var(--ps-green); }
body.ps-site .cream-card input { border-color: var(--ps-green); }
body.ps-site .cream-card .btn-primary { background: var(--ps-green); color: var(--ps-citron); }

@media (max-width: 680px) {
  body.ps-site .card { padding: 18px 16px; }
  body.ps-site .acct-fields,
  body.ps-site #cap-waitlist-form { align-items: stretch; }
  body.ps-site .acct-fields :is(input, .btn),
  body.ps-site #cap-waitlist-form :is(input, .btn) { width: 100%; max-width: none; }
  body.ps-site .book .bbtns { width: 100%; }
  body.ps-site .book .bbtns .btn,
  body.ps-site .book .bbtns select { flex: 1 1 140px; min-width: 0; }
  body.ps-site .cap-drop { padding: 22px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ps-site *, body.ps-site *::before, body.ps-site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* Paid scan controls stay part of the existing capture card. Pack labels and
 * prices are supplied by the server; this layer only provides layout. */
body.ps-site .cap-head { align-items: center; }
body.ps-site .cap-purchase { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.ps-site .cap-purchase select { width: auto; min-width: 190px; min-height: 38px; font-size: 13px; }
body.ps-site .cap-purchase-msg { margin: 8px 0 0; }
body.ps-site .cap-return-msg { margin: 10px 0 0; }
body.ps-site #cap-buy:disabled { cursor: wait; opacity: .7; }
/* Keep stateful capture panels hidden when the base flex rules are active. */
body.ps-site [hidden] { display: none !important; }
@media (max-width: 680px) {
  body.ps-site .cap-purchase { width: 100%; align-items: stretch; }
  body.ps-site .cap-purchase select,
  body.ps-site .cap-purchase .btn { width: 100%; min-width: 0; }
}