/* ===========================================================================
   Rates — the public rate card (screen and A4 print) and the few admin pieces
   the shared components do not cover: the room figure, the floor check, the
   quote totals. Tokens from flayr.css only.
   ======================================================================== */

/* ------------------------------------------------------------ card ------ */
.print-only { display: none; }
.rates-card section[id], .rates-card #top { scroll-margin-top: 120px; }

.rc-hero { padding: clamp(56px, 9vw, 104px) 0 clamp(32px, 5vw, 56px); }
.rc-hero .lead { color: var(--muted); max-width: 760px; }
.rc-spec { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.rc-spec > div { background: var(--surface); border-radius: var(--r); padding: 12px 18px; min-width: 120px; }
.rc-spec dt { font-size: var(--fs-2xs); color: var(--muted); margin-bottom: 2px; }
.rc-spec dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.rc-jump { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 5vw, 48px); }
.rc-jump-tile { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border-radius: var(--r-lg); padding: 18px 20px; color: var(--text); text-decoration: none; transition: transform .25s var(--ease); }
.rc-jump-tile:hover { transform: translateY(-2px); text-decoration: none; }
.rc-jump-eyebrow { font-size: var(--fs-2xs); font-weight: 600; color: var(--teal-ink); }
.rc-jump-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.rc-jump-hint { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 900px) { .rc-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rc-section { padding: clamp(48px, 8vw, 96px) 0; }
.rc-section-alt { background: var(--surface); }
.rc-head { max-width: 820px; margin-bottom: clamp(24px, 4vw, 40px); }
.rc-head .lead { color: var(--muted); }
.rc-group { font-size: var(--fs-4); margin: clamp(32px, 5vw, 48px) 0 12px; }
.rc-note { font-size: var(--fs-sm); color: var(--muted); max-width: 880px; margin: 12px 0 0; }
.rc-note strong { color: var(--ink); }

.rc-callout { background: var(--mint-soft); border-radius: var(--r-lg); padding: 22px 26px; font-size: var(--fs-sm); color: var(--text); margin: 16px 0; }
.rc-callout p { margin: 0 0 .7em; }
.rc-callout p:last-child { margin: 0; }
.rc-callout strong { color: var(--ink); }

.rc-table-wrap { background: var(--surface); border-radius: var(--r-lg); padding: 6px 8px; overflow-x: auto; }
.rc-section-alt .rc-table-wrap { background: var(--bg); }
.rc-table { font-size: var(--fs-sm); }
.rc-table .rc-item { color: var(--ink); font-weight: 500; width: 32%; }
.rc-table .rc-desc { color: var(--muted); }
.rc-table .rc-price { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-table small, .rc-table th small { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--faint); }
.rc-table .rc-ref { color: var(--faint); font-weight: 400; }
.rc-tag { margin-left: 6px; vertical-align: 1px; }
.rc-table tbody tr:hover td { background: transparent; }

.rc-models, .rc-plans { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-model, .rc-plan { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 32px); }
.rc-section-alt .rc-model, .rc-section-alt .rc-plan { background: var(--bg); }
.rc-model p { color: var(--muted); font-size: var(--fs-sm); }
.rc-model .rc-who { margin: 0; color: var(--text); }
.rc-model .rc-who strong { color: var(--ink); }
.rc-plan.is-flag { background: var(--navy); color: rgba(255, 255, 255, .8); }
.rc-plan.is-flag h4, .rc-plan.is-flag .rc-plan-price { color: #fff; }
.rc-plan.is-flag .eyebrow { color: var(--teal); }
.rc-plan h4 { font-size: var(--fs-3); margin-bottom: 4px; }
.rc-plan-price { font-size: var(--fs-3); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 14px; }
.rc-plan-price small { display: block; font-size: var(--fs-xs); font-weight: 400; opacity: .7; letter-spacing: 0; }
.rc-plan ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); }
.rc-plan li { margin: .3em 0; }
@media (max-width: 860px) { .rc-models, .rc-plans { grid-template-columns: minmax(0, 1fr); } .rc-table .rc-item { width: auto; } }

.rc-foot { padding-top: 0; }
.rc-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--surface); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); }
.rc-cta > div:first-child { max-width: 620px; }
.rc-colophon { font-size: var(--fs-xs); color: var(--faint); margin: 24px 0 0; text-align: center; }
.subnav-links .btn { opacity: 1; font-size: var(--fs-2xs); }

/* Phones: the stacked table puts the label on the left; keep the price bold on the right. */
@media (max-width: 760px) {
  .rc-table-wrap { background: transparent; padding: 0; }
  .rc-section-alt .rc-table-wrap { background: transparent; }
  .rc-section .table-stack tr { background: var(--surface); }
  .rc-section-alt .table-stack tr { background: var(--bg); }
  .rc-table .rc-desc { text-align: right; }
}

/* ------------------------------------------------------ card: print ----- */
/* A designed A4 document: white page, logo and version at the top, sections
   flowing without breaking a table row or orphaning a group heading. */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html { font-size: 10pt; }
  /* Re-scale the type tokens for paper: screen px sizes print far too large. */
  body.rates-card { background: #fff; color: var(--text); --fs-body: 9.5pt; --fs-sm: 8.5pt; --fs-xs: 7.5pt; --fs-2xs: 7pt; --fs-4: 11pt; --fs-3: 13pt; --fs-lead: 10.5pt; font-size: var(--fs-body); }
  .rc-model p, .rc-plan li { font-size: 8.5pt; }
  .rc-model h3, .rc-plan h4 { font-size: 11pt; }
  .rates-card .no-print, .rates-card .subnav, .rates-card .nav, .rates-card .footer { display: none !important; }
  .rates-card .print-only { display: flex; }
  .rates-card .container { max-width: none; padding: 0; }
  .rc-print-head { justify-content: space-between; align-items: center; padding-bottom: 6mm; margin-bottom: 6mm; box-shadow: inset 0 -1px 0 var(--hairline); font-size: 8.5pt; color: var(--muted); }
  .rc-print-head img { height: 7mm; width: auto; }
  .rc-hero { padding: 0 0 4mm; }
  .rc-hero .hero-title { font-size: 30pt; }
  .rc-hero .lead, .rc-head .lead { font-size: 11pt; }
  .rc-spec > div { background: var(--surface-2); padding: 2mm 4mm; min-width: 0; }
  .rc-section, .rc-section-alt { background: #fff; padding: 4mm 0 1mm; }
  .rc-head { margin-bottom: 3mm; }
  .rc-page-break { break-before: page; }
  .rc-head h2 { font-size: 18pt; }
  .rc-group { font-size: 12pt; margin: 5mm 0 2mm; break-after: avoid; }
  .rc-head, .rc-group, .rc-note { break-inside: avoid; }
  .rc-head { break-after: avoid; }
  .rc-table-wrap, .rc-section-alt .rc-table-wrap { background: #fff; padding: 0; overflow: visible; }
  .rc-table { font-size: 8.5pt; table-layout: auto; }
  /* The page is narrower than the 860px breakpoint, so restate the column widths. */
  .rc-table .rc-item { width: 34%; }
  .rc-table .rc-price { width: 1%; }
  .rc-table th, .rc-table td { padding: 1.1mm 2mm; }
  .rc-table thead { display: table-header-group; }
  .rc-table tr { break-inside: avoid; }
  .rc-callout { background: var(--mint-soft); padding: 3mm 4mm; font-size: 8.5pt; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-models, .rc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
  .rc-model, .rc-plan { background: var(--surface-2); padding: 4mm; border-radius: var(--r); break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-plan.is-flag { background: var(--navy); }
  .rc-cta { background: var(--surface-2); padding: 4mm; }
  a { color: inherit; }
}
@media print and (max-width: 760px) {
  /* Some browsers print at a phone width; never print the stacked-card layout. */
  .rates-card .table-stack thead { display: table-header-group; }
  .rates-card .table-stack, .rates-card .table-stack tbody { display: table-row-group; }
  .rates-card .table-stack { display: table; }
  .rates-card .table-stack tr { display: table-row; }
  .rates-card .table-stack td { display: table-cell; text-align: left; }
  .rates-card .table-stack td::before { content: none; }
}

/* ----------------------------------------------------------- admin ------ */
.rates-room { display: inline-block; min-width: 44px; text-align: center; padding: 2px 8px; border-radius: var(--pill); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--ok-soft); color: var(--ok); }
.rates-room.is-tight { background: var(--warn-soft); color: var(--warn); }
.rates-room.is-under { background: var(--danger-soft); color: var(--danger); }
.rates-room.is-none { background: transparent; color: var(--faint); }
.rates-lines .table td { padding-top: 8px; padding-bottom: 8px; }
.rates-lines .cell-input { min-width: 70px; }
.rates-lines .cell-input.num { text-align: right; min-width: 72px; }
.rates-lines tr.is-unpublished td { opacity: .55; }
.rates-lines .col-item { min-width: 200px; }
.rates-lines .col-detail { min-width: 220px; }
.rates-lines .col-note { min-width: 240px; }
.rates-group-title { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 4px; }
.rates-group-title h2 { font-size: 17px; margin: 0; }

.rates-floor { border-radius: var(--r); padding: 14px 16px; font-size: var(--fs-sm); background: var(--ok-soft); color: var(--ok); }
.rates-floor strong { display: block; font-size: var(--fs-body); margin-bottom: 2px; }
.rates-floor.is-warn { background: var(--warn-soft); color: var(--warn); }
.rates-floor.is-bad { background: var(--danger-soft); color: var(--danger); }
.rates-floor.is-empty { background: var(--surface-2); color: var(--muted); }
.rates-totals .summary-row.is-total { font-size: var(--fs-4); }
.rates-builder .cell-input.num { text-align: right; max-width: 110px; }
.rates-card-expired { box-shadow: inset 3px 0 0 var(--danger); }

/* The printable quote: plain document, no admin chrome. */
.rates-quote-doc { background: var(--surface); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); max-width: 860px; }
.rates-quote-doc header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.rates-quote-doc header img { height: 28px; width: auto; }
@media print {
  body.admin { background: #fff; }
  .admin-content { padding: 0; max-width: none; }
  .rates-quote-doc { padding: 0; max-width: none; border-radius: 0; }
  .rates-quote-doc .table { font-size: 9.5pt; }
  .rates-quote-doc .summary-row { font-size: 9.5pt; }
}