/* California SB 54 EPR Packaging TCO Calculator — component styles (Tailwind handles layout utilities) */
:root {
  --ink: #14231c; --muted: #5f6f66; --line: #dfe5df; --paper: #f5f4ee;
  --brand: #1f6b4a; --brand-dark: #154b34; --low: #e9f4ec; --accent: #c8892b;
}

/* ---------- surfaces ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; box-shadow: 0 1px 2px rgba(20, 35, 28, .04); }
.h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.sect { margin: 1.1rem 0 .6rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- form controls ---------- */
.lbl { display: block; font-size: .78rem; font-weight: 500; color: var(--ink); margin-bottom: .3rem; }
.inp { width: 100%; height: 2.4rem; padding: 0 .7rem; font-size: .9rem; color: var(--ink); background: #fff; border: 1px solid #cdd6ce; border-radius: 8px; font-variant-numeric: tabular-nums; }
.inp:disabled { background: var(--paper); color: var(--muted); text-align: center; cursor: not-allowed; }
.inp:focus { outline: 2px solid rgba(31, 107, 74, .35); outline-offset: 0; border-color: var(--brand); }
select.inp { padding-right: 1.6rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.3; cursor: pointer; }
.check input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: var(--brand); flex: none; }
.check em { font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.reveal { margin: .6rem 0 .4rem 1.6rem; padding: .75rem; background: var(--paper); border-radius: 10px; }
.warn { margin-top: .6rem; font-size: .78rem; color: #9a5b00; }

.inp-material { font-weight: 600; background: var(--paper); }
.hint { margin-top: .35rem; font-size: .76rem; color: var(--muted); }
.hint em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid #cdd6ce; border-radius: 8px; overflow: hidden; }
.seg { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: .3rem .5rem; font-size: .78rem; font-weight: 500; text-align: center; line-height: 1.2; color: var(--muted); background: #fff; }
.seg + .seg span { border-left: 1px solid #cdd6ce; }
.seg input:checked + span { background: var(--brand); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid rgba(31, 107, 74, .5); outline-offset: -2px; }
.mod { padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .6); }
.mod-on { background: rgba(255, 255, 255, .14); color: #fff; }
.cmp .sub { font-size: .74rem; color: var(--muted); font-weight: 400; }

.sect .opt { margin-left: .35rem; padding: .08rem .4rem; border-radius: 999px; background: var(--paper); font-size: .62rem; letter-spacing: .06em; }
.lbl.sub-h { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.lbl.sub-h.mt-4 { margin-top: 1rem; }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost { height: 2.4rem; padding: 0 1rem; border-radius: 8px; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.btn-ghost { background: #fff; border: 1px solid #cdd6ce; color: var(--ink); }
.btn-ghost:hover { background: var(--paper); }
.icon-btn { width: 2rem; height: 2rem; border-radius: 8px; color: var(--muted); flex: none; }
.icon-btn:hover { background: var(--paper); color: var(--ink); }
.chip-num { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .2rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .78rem; font-weight: 600; display: grid; place-items: center; }

/* ---------- tabs ---------- */
.tab { padding: .7rem 1rem; border-radius: 10px 10px 0 0; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.tab[disabled] { cursor: not-allowed; }
.tab-active { background: var(--paper); color: var(--ink); font-weight: 600; }
.soon { margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- scenario mini result ---------- */
.mini { margin-top: 1.1rem; padding: .8rem; background: var(--paper); border-radius: 10px; }
.mini dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mini dd { font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini .costs { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.mini .costs div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .18rem 0; }
.mini .costs dt { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink); }
.mini .costs dt span { display: block; font-size: .7rem; color: var(--muted); }
.mini .costs dd { font-size: .86rem; white-space: nowrap; }
.mini .costs .total { margin-top: .25rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.mini .costs .total dt { font-weight: 600; }
.mini .costs .total dd { color: var(--brand); font-size: .95rem; }
.cat-pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cat-n { background: #e2f1e6; color: #1b5e3f; }
.cat-p { background: #fbecd2; color: #7c4f07; }

/* ---------- comparison table ---------- */
.summary { margin-top: .9rem; padding: .7rem .9rem; background: var(--low); border-left: 3px solid var(--brand); border-radius: 6px; font-size: .9rem; }
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: .5rem .75rem; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { vertical-align: bottom; font-weight: 600; min-width: 11rem; border-bottom: 2px solid var(--ink); }
.cmp th:first-child { text-align: left; font-weight: 400; color: var(--muted); min-width: 13rem; position: sticky; left: 0; background: #fff; }
.cmp tr.grp th { padding-top: 1.1rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); border-bottom: 1px solid var(--line); background: #fff; }
.cmp tr.strong td, .cmp tr.strong th:first-child { font-weight: 600; color: var(--ink); }
.cmp tr.big td { font-size: 1.02rem; }
.cmp .low { background: var(--low); }
.cmp thead th.low { border-top: 3px solid var(--brand); border-radius: 8px 8px 0 0; }
.low-badge { display: inline-block; margin-top: .3rem; padding: .1rem .5rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.th-name { line-height: 1.25; }

/* ---------- comparison table: total cost of ownership block ---------- */
.cmp tr.spacer td { height: 1.5rem; padding: 0; border: 0; background: transparent; }
.cmp tr.grp-tco th { padding: .8rem 1rem; font-size: .8rem; letter-spacing: .14em; color: #fff; background: var(--brand-dark); border-bottom: 0; border-radius: 10px 10px 0 0; position: static; }
.cmp tr.tco th:first-child, .cmp tr.tco td { vertical-align: middle; padding: .8rem 1rem; font-size: .98rem; color: var(--ink); background: #f0f6f1; border-bottom: 1px solid #d3e3d7; }
.cmp tr.tco th:first-child { border-left: 4px solid var(--brand); }
.cmp tr.tco td:last-child { border-right: 1px solid #d3e3d7; }
.cmp tr.tco td.low { background: #d3ebd9; font-weight: 600; }
.cmp tr.tco.big th:first-child { font-size: 1.05rem; }
.cmp tr.tco.big td { font-size: 1.45rem; font-weight: 700; color: var(--brand-dark); letter-spacing: -.01em; }
.cmp tr.tco-last th:first-child { border-radius: 0 0 0 10px; border-bottom: 2px solid var(--brand); }
.cmp tr.tco-last td { border-bottom: 2px solid var(--brand); }
.cmp tr.tco-last td:last-child { border-radius: 0 0 10px 0; }
.cmp-report tr.spacer td { height: 12px; }
.cmp-report tr.grp-tco th { padding: 7px 9px; font-size: 10.5px; }
.cmp-report tr.tco th:first-child, .cmp-report tr.tco td { padding: 7px 9px; font-size: 12.5px; }
.cmp-report tr.tco.big th:first-child { font-size: 13px; }
.cmp-report tr.tco.big td { font-size: 17px; }

/* ---------- contact card ---------- */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.5rem; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 100%); box-shadow: 0 10px 28px rgba(21, 75, 52, .22); }
.contact-icon { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.contact-body { flex: 1 1 16rem; min-width: 0; }
.contact-body h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.contact-body p { margin-top: .25rem; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.contact-btn { flex: 0 1 auto; display: flex; flex-direction: column; gap: .1rem; padding: .7rem 1.25rem; border-radius: 12px; background: #fff; color: var(--brand-dark);
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.contact-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.contact-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.contact-btn-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-btn-addr { font-size: 1.05rem; font-weight: 700; word-break: break-all; }
@media (max-width: 520px) { .contact-btn { flex: 1 1 100%; } }

/* ---------- PDF / print report ---------- */
#report-host { position: absolute; left: -10000px; top: 0; width: 740px; }
.report { box-sizing: border-box; width: 740px; padding: 0; background: #fff; color: var(--ink); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.report-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 3px solid var(--brand-dark); }
.report-brand { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); font-weight: 600; }
.report h1 { font-size: 19px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -.01em; line-height: 1.2; }
.report-sub { font-size: 12px; color: var(--muted); }
.report-meta { font-size: 11.5px; flex: none; width: 230px; }
.report-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.report-meta span { color: var(--muted); }
table.cmp-report { width: 100%; table-layout: auto; font-size: 11.5px; }
.cmp-report th, .cmp-report td { padding: 4px 8px; }
.cmp-report thead th, .cmp-report th:first-child { min-width: 0; }
.cmp-report th:first-child { position: static; width: 190px; }
.cmp-report tr.big td { font-size: 13px; }
.cmp-report tr { page-break-inside: avoid; }
.report-note { margin-top: 12px; font-size: 9.5px; line-height: 1.5; color: var(--muted); }

table.cmp-report { table-layout: fixed; }
.cmp-report tr.grp th:first-child { width: auto; }
.cmp-report th, .cmp-report td { overflow-wrap: break-word; }
.tco-block { margin-top: 14px; page-break-inside: avoid; break-inside: avoid; }
.report-contact { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px 18px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 100%); page-break-inside: avoid; break-inside: avoid; }
.report-contact-title { font-size: 14px; font-weight: 600; }
.report-contact-text { margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, .85); }
.report-contact-btn { flex: none; padding: 8px 14px; border-radius: 9px; background: #fff; color: var(--brand-dark); }
.report-contact-btn span { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.report-contact-btn strong { display: block; font-size: 13px; font-weight: 700; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  #report-host { position: static; width: auto; }
  .report { width: auto !important; }
  .report-contact, .report-contact-btn, .cmp .low, .cmp tr.tco th, .cmp tr.tco td, .cmp tr.grp-tco th, .low-badge, .cat-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- packaging type picker ---------- */
.picker { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem; }
.pick { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: .2rem;
  padding: .6rem .6rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.pick-art { display: block; background: var(--paper); border-radius: 9px; padding: .35rem .5rem; margin-bottom: .45rem; }
.pick-art svg { display: block; width: 100%; height: auto; }
.pick-name { font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.25; }
.pick-desc { font-size: .76rem; color: var(--muted); line-height: 1.35; flex: 1; }
.pick-cta { margin-top: .5rem; font-size: .78rem; font-weight: 600; color: var(--brand); }
.pick:hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 6px 18px rgba(20, 35, 28, .08); transform: translateY(-2px); }
.pick:hover:not(:disabled) .pick-art { background: var(--low); }
.pick:focus-visible { outline: 2px solid rgba(31, 107, 74, .5); outline-offset: 2px; }
.pick:disabled { cursor: not-allowed; }
.pick:disabled .pick-art { opacity: .55; }
.pick:disabled .pick-name { color: var(--muted); }
.pick:disabled .pick-cta { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }

/* packaging type shown on a scenario card */
.mat-tag { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; background: var(--paper); border-radius: 10px; }
.mat-thumb { flex: none; width: 58px; }
.mat-thumb svg { display: block; width: 100%; height: auto; }
.mat-tag-k { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mat-tag-v { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); }

.empty-scen { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; font-size: .9rem; color: var(--muted);
  border: 1.5px dashed #cdd6ce; border-radius: 14px; }
.scenario { scroll-margin-top: 1rem; }
.scenario.just-added { animation: justAdded 1.6s ease-out; }
@keyframes justAdded { 0% { box-shadow: 0 0 0 4px rgba(31, 107, 74, .45); } 100% { box-shadow: 0 0 0 4px rgba(31, 107, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .pick { transition: none; } .pick:hover:not(:disabled) { transform: none; } .scenario.just-added { animation: none; outline: 2px solid var(--brand); } }

/* ---------- EPR fee details dropdown on each card ---------- */
.costs-wrap .costs { margin-top: 1.1rem; padding: .8rem; background: var(--paper); border-radius: 10px; }
.costs-wrap .costs:empty { display: none; }
.costs-wrap .costs div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .18rem 0; }
.costs-wrap .costs dt { font-size: .8rem; color: var(--ink); }
.costs-wrap .costs dt span { display: block; font-size: .7rem; color: var(--muted); }
.costs-wrap .costs dd { font-size: .86rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.costs-wrap .costs .total { margin-top: .25rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.costs-wrap .costs .total dt { font-weight: 600; }
.costs-wrap .costs .total dd { color: var(--brand); font-size: .95rem; }
.epr-det { margin-top: .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.epr-det > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; cursor: pointer; border-radius: 10px; }
.epr-det > summary::-webkit-details-marker { display: none; }
.epr-det > summary::before { content: ''; flex: none; width: .45rem; height: .45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-right: .1rem; }
.epr-det[open] > summary::before { transform: rotate(45deg); }
.epr-det > summary:hover { background: var(--paper); }
.epr-det > summary:focus-visible { outline: 2px solid rgba(31, 107, 74, .5); outline-offset: 1px; }
.epr-det-t { flex: 1; font-size: .84rem; font-weight: 600; color: var(--ink); }
.epr-det-v { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.epr-det .mini { margin: 0 .5rem .5rem; padding-top: .55rem; }
.epr-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .3rem 0; }
.epr-rows dt { font-size: .8rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.epr-rows dt span { display: block; font-size: .7rem; color: var(--muted); }
.epr-rows dd { font-size: .86rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.epr-rows .total { margin-top: .25rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.epr-rows .total dt { font-weight: 600; }