/* Rate card — screens in public/app/views/ratecard.js.
   Tokens from app.css only. The print page (.ratecard-print) sits on the white .print-page, so it
   derives its greys from currentColor instead of the themed tokens, and uses --red for the brand. */

/* ───────── card tab ───────── */
.rc-gap { margin-bottom: 14px; }
.rc-gap-top { margin-top: 10px; }
.rc-section + .rc-section { margin-top: 28px; }
.rc-section .section-head { min-height: 28px; }
.rc-section-empty { padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.rc-foot-hint { display: flex; align-items: center; gap: 6px; margin-top: 22px; }

.rc-edit-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 20px;
  border-radius: var(--radius); background: var(--amber-soft); color: var(--text); font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}
.rc-edit-banner > .icon { color: var(--amber-ink); margin-top: 2px; }

/* packages */
.rc-packages-wrap { container-type: inline-size; }
.rc-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-top: 10px; }
@container (max-width: 680px) { .rc-packages { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

.rc-pkg {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 18px 18px;
}
.rc-pkg.is-rec { border: 2px solid var(--red); padding: 23px 17px 17px; box-shadow: 0 0 0 4px var(--red-soft); }
.rc-pkg.is-hidden { border-style: dashed; }
.rc-pkg.is-hidden > header, .rc-pkg.is-hidden > .rc-price, .rc-pkg.is-hidden > .rc-ticks, .rc-pkg.is-hidden > .rc-desc { opacity: 0.55; }
.rc-ribbon {
  position: absolute; top: -12px; left: 16px; padding: 6px 10px; border-radius: 999px;
  background: var(--red); color: white; font: 700 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.rc-pkg-name { font-size: 20px; font-weight: 800; font-variation-settings: 'wdth' 125; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.rc-pkg-sub { font: 500 11.5px/1.35 var(--mono); color: var(--muted); letter-spacing: 0.03em; margin-top: 5px; }
.rc-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rc-price-amount { font-size: 34px; font-weight: 800; font-variation-settings: 'wdth' 110; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.rc-price-unit { color: var(--muted); font-size: 12.5px; }
.rc-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rc-ticks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; color: var(--text-2); }
.rc-ticks .icon { color: var(--red-ink); margin-top: 2px; }
.rc-desc { font-style: italic; color: var(--muted); font-size: 13px; margin-top: auto; padding-top: 4px; }

.rc-internal {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--amber-soft); border: 1px dashed color-mix(in srgb, var(--amber) 50%, transparent);
  font-size: 12.5px; color: var(--text-2); margin-top: 6px; overflow-wrap: anywhere;
}
.rc-internal-tag { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-ink); }
.rc-usage { font: 500 11px/1.2 var(--mono); color: var(--muted); }

.rc-controls { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border); }
.rc-controls.compact { padding-top: 0; border-top: 0; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }
.rc-term .rc-controls.compact { justify-content: flex-start; margin-top: 6px; }
.btn.rc-delete { color: var(--red-ink); }
.btn.rc-delete:hover:not(:disabled) { background: var(--red-soft); }

/* add-ons */
.rc-addons td { vertical-align: top; }
.rc-price-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-unit-sm { display: none; }
.rc-actions-cell { width: 1%; white-space: nowrap; }
.rc-cell-meta { margin-top: 6px; }
.rc-row-hidden td:not(.rc-actions-cell) > * { opacity: 0.6; }
.rc-row-hidden td:not(.rc-actions-cell) > .rc-cell-meta { opacity: 1; }

/* terms */
.rc-terms { margin: 0; }
.rc-term { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rc-term:last-child { border-bottom: 0; }
.rc-term dt { font-weight: 700; }
.rc-term dd { margin: 0; color: var(--text-2); min-width: 0; }
.rc-term.is-hidden dt, .rc-term.is-hidden dd > div:first-child { opacity: 0.6; }

/* ───────── cost model ───────── */
.rc-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rc-rule { padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); }
.rc-rule-title { font-weight: 800; font-size: 14px; font-variation-settings: 'wdth' 110; }
.rc-rule-body { color: var(--muted); font-size: 12.5px; margin-top: 5px; }

.rc-model-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.rc-model-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 0 10px; width: 100%; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.rc-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.rc-suffix-input { position: relative; }
.rc-suffix-input .input { padding-right: 44px; }
.rc-suffix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 12.5px; }
.rc-save-row { gap: 10px; }

.rc-calc-inputs { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.rc-calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rc-calc-out .stat { background: var(--surface-2); }
.rc-floor { border-color: var(--border-strong); }
.rc-floor .stat-value { font-size: 30px; }
.rc-healthy { border-color: color-mix(in srgb, var(--red) 60%, transparent); background: var(--red-soft) !important; }
.rc-healthy .stat-value { font-size: 30px; }
.rc-compare td { vertical-align: middle; }
.rc-margin { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.rc-margin-num { width: 54px; text-align: right; font-weight: 700; }
.rc-extra { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.rc-extra > .icon { color: var(--muted); margin-top: 2px; }

/* ───────── history ───────── */
.rc-history { list-style: none; margin: 0; padding: 0; }
.rc-hist { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rc-hist:last-child { border-bottom: 0; }
.rc-hist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rc-hist-who { font-weight: 700; }
.rc-hist-what { color: var(--text-2); overflow-wrap: anywhere; }
.rc-hist-when { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rc-changes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rc-change { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.rc-change-line { display: flex; align-items: flex-start; gap: 6px; }
.rc-change.is-price { color: var(--text); font-weight: 700; }
.rc-change.is-price .icon { color: var(--red-ink); margin-top: 3px; }
.rc-diff { margin-top: 4px; }
.rc-diff summary { cursor: pointer; color: var(--muted); font-size: 12.5px; width: fit-content; }
.rc-diff summary:hover { color: var(--text); }
.rc-diff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.rc-diff-grid > div { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-weight: 400; }
.rc-diff-grid .pre { margin-top: 4px; font-size: 12.5px; }

/* ───────── responsive (app screens) ───────── */
@media (max-width: 1100px) {
  .rc-calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rc-rules { grid-template-columns: minmax(0, 1fr); }
  .rc-model-grid, .rc-calc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rc-model-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-calc-inputs > .field:first-child { grid-column: 1 / -1; }
  .rc-term { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rc-unit-sm { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
  .rc-diff-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-margin { min-width: 180px; }
  .rc-price-amount { font-size: 30px; }
}
@media (max-width: 420px) {
  .rc-calc-out { grid-template-columns: minmax(0, 1fr); }
}

/* ───────── print page (client-facing) ───────── */
.rc-print-state { padding: 40px 16px; max-width: 640px; margin: 0 auto; }

.ratecard-print {
  --rc-soft: color-mix(in srgb, currentColor 64%, transparent);
  --rc-line: color-mix(in srgb, currentColor 14%, transparent);
}
.ratecard-print .rcp-sheet { max-width: 1000px; margin: 0 auto; }
.ratecard-print a.plain { color: inherit; text-decoration: none; }
.ratecard-print .rcp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid currentColor; }
.ratecard-print .rcp-brand { display: flex; align-items: center; gap: 12px; }
.ratecard-print .rcp-brand img { height: 36px; width: auto; }
.ratecard-print .rcp-brand-name { font-weight: 800; font-variation-settings: 'wdth' 125; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; }
.ratecard-print .rcp-eyebrow { font: 500 11px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rc-soft); }

.ratecard-print .rcp-title {
  display: flex; flex-direction: column; margin: 34px 0 14px;
  font-size: clamp(34px, 6.2vw, 62px); line-height: 0.95; font-weight: 800;
  font-variation-settings: 'wdth' 125; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.005em;
}
.ratecard-print .rcp-accent { color: var(--red); }
.ratecard-print .rcp-lede { max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--rc-soft); }
.ratecard-print .rcp-empty { margin: 30px 0; color: var(--rc-soft); }

.ratecard-print .rcp-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 36px; }
.ratecard-print .rcp-pkg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 18px 18px; border: 1px solid var(--rc-line); border-radius: 10px; break-inside: avoid; }
.ratecard-print .rcp-pkg.is-rec { border: 2px solid var(--red); padding: 23px 17px 17px; }
.ratecard-print .rcp-ribbon { position: absolute; top: -10px; left: 16px; padding: 5px 9px; border-radius: 999px; background: var(--red); color: white; font: 700 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ratecard-print .rcp-pkg-name { font-size: 22px; font-weight: 800; font-variation-settings: 'wdth' 125; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.ratecard-print .rcp-pkg-sub { font: 500 10.5px/1.35 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-soft); }
.ratecard-print .rcp-price { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 4px; }
.ratecard-print .rcp-unit { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--rc-soft); margin-left: 6px; }
.ratecard-print .rcp-ticks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ratecard-print .rcp-ticks li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; }
.ratecard-print .rcp-ticks .icon { color: var(--red); margin-top: 3px; }
.ratecard-print .rcp-desc { margin-top: auto; padding-top: 6px; font-style: italic; font-size: 12.5px; color: var(--rc-soft); }

.ratecard-print .rcp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; }
.ratecard-print .rcp-block { break-inside: avoid; }
.ratecard-print .rcp-h2 { font: 600 11.5px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid currentColor; margin-bottom: 2px; }
.ratecard-print .rcp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ratecard-print .rcp-table td { padding: 9px 0; border-bottom: 1px solid var(--rc-line); vertical-align: top; }
.ratecard-print .rcp-table td.rcp-amt { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.ratecard-print .rcp-note { margin-top: 2px; font-size: 12px; color: var(--rc-soft); }
.ratecard-print .rcp-terms { margin: 0; }
.ratecard-print .rcp-term { padding: 9px 0; border-bottom: 1px solid var(--rc-line); break-inside: avoid; }
.ratecard-print .rcp-term dt { font-weight: 700; font-size: 13.5px; }
.ratecard-print .rcp-term dd { margin: 2px 0 0; font-size: 12.5px; color: var(--rc-soft); }

.ratecard-print .rcp-contact { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-top: 36px; padding-top: 16px; border-top: 2px solid currentColor; font-size: 13px; }
.ratecard-print .rcp-contact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ratecard-print .rcp-dot { color: var(--rc-soft); }
.ratecard-print .rcp-tagline { font: 600 11px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.ratecard-print .rcp-asof { margin-top: 10px; font-size: 11.5px; color: var(--rc-soft); }

@media screen and (max-width: 760px) {
  .print-page.ratecard-print { padding: 24px 16px 40px; }
  .ratecard-print .rcp-packages { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ratecard-print .rcp-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ratecard-print .rcp-title { margin-top: 26px; }
}

@media print {
  .ratecard-print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ratecard-print .rcp-sheet { max-width: none; }
  .ratecard-print .rcp-title { font-size: 46px; margin: 22px 0 10px; }
  .ratecard-print .rcp-lede { font-size: 13px; }
  .ratecard-print .rcp-packages { margin: 24px 0 26px; gap: 12px; }
  .ratecard-print .rcp-pkg { padding: 20px 14px 14px; }
  .ratecard-print .rcp-price { font-size: 30px; }
  .ratecard-print .rcp-ticks, .ratecard-print .rcp-table { font-size: 12px; }
  .ratecard-print .rcp-contact { margin-top: 24px; }
}