/* ============================================================
   SCOPE DISCLOSURE
   Renders from four product fields: benefits, exclusions,
   scope_note, upgrade_product_id. Included reads affirmative;
   excluded is marked by a slate rule + a ban icon + the words
   "not included" — never by color alone.

   Icons are Font Awesome 6 (the icon set base.html actually
   loads); the design mockup used Bootstrap Icons, which this
   app does not ship. Rules here select on `i` so the icon set
   is swappable without touching this file.
   ============================================================ */
:root{--surge-slate:#3f5165;--surge-gold-deep:#7a5a0f}
.scope-block{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;container-type:inline-size}
.scope-panel-label{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--surge-gold-deep);margin-bottom:.5rem}
.scope-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.scope-list li{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.5rem;font-size:.875rem;line-height:1.5;color:var(--surge-ink)}
.scope-list i{color:var(--surge-gold-deep);font-size:.82rem;line-height:1.6}
.scope-excluded{background:rgba(63,81,101,.05);border-left:3px solid var(--surge-slate);border-radius:8px;padding:.75rem .9rem .85rem}
.scope-excluded .scope-panel-label,.scope-excluded .scope-list i,.scope-final .scope-list i{color:var(--surge-slate)}
.scope-excluded-empty{font-size:.85rem;color:var(--surge-muted);background:rgba(13,27,42,.02);border-radius:8px;padding:.6rem .8rem}
.scope-note{grid-column:1/-1;display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.5rem;background:rgba(13,27,42,.02);border-radius:8px;padding:.6rem .8rem;font-size:.875rem;color:var(--surge-ink)}
.scope-note i{color:var(--surge-muted)}
/* upgrade pointer — the path forward. Uses the gold "reward" language the app
   already reserves for good news, so a limitation ends on an offer, not a wall. */
.scope-upgrade{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin-top:.35rem;padding:.85rem 1rem;background:rgba(226,182,89,.07);border:1px solid rgba(226,182,89,.35);border-radius:10px}
.scope-upgrade-label{display:flex;align-items:center;gap:.35rem;width:100%;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--surge-gold-deep)}
.scope-upgrade-name{font-size:.95rem;font-weight:600;color:var(--surge-ink)}
.scope-upgrade-price{font-family:Lora,Georgia,serif;font-size:1.2rem;font-weight:700;color:var(--surge-ink);line-height:1.15}
.scope-upgrade-delta{width:100%;font-size:.8rem;color:var(--surge-muted);margin:-.15rem 0 0}
.scope-upgrade .btn{margin-left:auto}
.scope-card{border:1px solid var(--surge-border);border-radius:10px;background:var(--surge-white);padding:1.1rem 1.25rem 1.2rem;container-type:inline-size}
.scope-card-title{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.85rem}
.scope-card-title strong{font-family:Lora,Georgia,serif;font-size:1.05rem;font-weight:600}
/* per-row disclosure in the package table */
.scope-toggle{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;padding:.1rem 0;background:transparent;border:0;border-bottom:1px solid rgba(226,182,89,.6);color:var(--surge-gold-deep);font:600 .76rem/1.3 "DM Sans";cursor:pointer}
.scope-toggle:hover{color:var(--surge-navy);border-bottom-color:var(--surge-navy)}
.scope-toggle:focus-visible{outline:2px solid var(--surge-navy);outline-offset:3px}
.scope-toggle span{font-weight:400;color:var(--surge-muted)}
.scope-toggle i{font-size:.68rem;transition:transform .18s ease}
.scope-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
tr.scope-detail-row>td{padding:0 .75rem;background:rgba(13,27,42,.015);border-top:0}
tr.scope-detail-row .scope-clip{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
tr.scope-detail-row.is-open .scope-clip{grid-template-rows:1fr}
tr.scope-detail-row .scope-clip>div{overflow:hidden}
tr.scope-detail-row .scope-clip .scope-block{padding:1rem 0 1.15rem}
/* in-package cross-reference: an exclusion resolved by another line already in this package */
.scope-crosslink{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;font-size:.82rem;color:var(--surge-slate);background:rgba(63,81,101,.06);border-radius:8px;padding:.5rem .7rem}
.scope-crosslink strong{color:var(--surge-ink);font-weight:600}
/* the acknowledgment moment */
.scope-final{border:1px solid rgba(63,81,101,.3);border-left:4px solid var(--surge-slate);border-radius:10px;background:rgba(63,81,101,.05);padding:1.1rem 1.25rem 1.2rem;margin-bottom:1.25rem}
.scope-final-title{display:flex;align-items:center;gap:.45rem;font-family:Lora,Georgia,serif;font-size:1.1rem;font-weight:600;color:var(--surge-ink);margin-bottom:.15rem}
.scope-final-lead{font-size:.85rem;color:var(--surge-muted);margin-bottom:.85rem}
.scope-final-group{margin-top:.9rem}
.scope-final-group+.scope-final-group{border-top:1px solid rgba(63,81,101,.18);padding-top:.9rem}
.scope-final-group-name{font-size:.8rem;font-weight:700;color:var(--surge-ink);margin-bottom:.35rem}
.scope-consent{border:1px solid var(--surge-border);border-radius:10px;background:var(--surge-white);padding:1rem 1.15rem}
.scope-consent .form-check-input{margin-top:.28rem}
.scope-consent .form-check-label{font-size:.92rem;line-height:1.5}
@container (max-width:620px){.scope-block{grid-template-columns:1fr}.scope-upgrade .btn{margin-left:0;width:100%}}
@media (max-width:620px){.scope-block{grid-template-columns:1fr}}

/* ---- Package contents on narrow screens -------------------------------
   The 5-column contents table squeezed the product column to ~120px on a
   375px viewport while still scrolling sideways, so the description read a
   word or two per line. Below 640px each line item becomes a card: the
   product and its description get the full width, and the remaining columns
   become label/value rows in a left gutter. */
@media (max-width:640px){
  .package-contents-wrap{overflow-x:visible}
  /* header is redundant once each cell carries its own label, but keep it
     reachable for screen readers */
  .package-contents thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .package-contents,.package-contents>tbody,.package-contents>tbody>tr,.package-contents>tbody>tr>td{display:block;width:100%}
  /* the scope disclosure row is toggled via the hidden attribute - display:block
     above would otherwise force it open */
  .package-contents>tbody>tr[hidden]{display:none}
  .package-contents>tbody>tr{border:1px solid var(--surge-border);border-radius:10px;padding:.85rem 1rem;margin-bottom:.75rem;background:var(--surge-white)}
  .package-contents>tbody>tr>td{border:0;padding:0;box-shadow:none}
  .package-contents .pc-product{padding-bottom:.55rem}
  .package-contents .pc-product small{display:block;margin-top:.2rem}
  /* label in a fixed gutter, so stacked values (price, interval, struck-through
     original) keep their own vertical rhythm */
  .package-contents td[data-label]{position:relative;min-height:1.5rem;padding:.3rem 0 .3rem 6.25rem;text-align:left!important}
  .package-contents td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:.42rem;width:5.75rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--surge-muted)}
  .package-contents td[data-label] .d-block{display:block}
  /* keep a line item visually joined to its own scope disclosure */
  .package-contents>tbody>tr:has(+ .scope-detail-row){margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .package-contents>tbody>tr.scope-detail-row{border-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:0}
  .package-contents>tbody>tr.scope-detail-row>td{padding:0}
}

/* Purchase record — the client's durable copy of one checkout.
   Printing it is the point (a client filing it, or sending it to an
   accountant), so the browser's own print path has to produce something
   presentable without a PDF pipeline. */
.purchase-record .agreement-content{max-height:24rem;overflow-y:auto;font-size:.9rem}
@media print{
  .purchase-record .d-print-none{display:none !important}
  /* A collapsed <details> prints collapsed, which would silently drop the
     agreement text from the printed record. */
  .purchase-record details>summary{display:none}
  .purchase-record details>*{display:block !important}
  .purchase-record .agreement-content{max-height:none;overflow:visible}
  .purchase-record .card{border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid}
}