/* ============================================================================
   cost.css — CostCompare's signature layer

   VOICE: the statistical yearbook. This site's whole claim is "official
   figures, shown honestly", so the design is a measured chart-room: deep
   slate-teal, ruled bar rows, tabular numerals everywhere, and one colour
   reserved exclusively for "the agencies disagree".

   Distinct from siblings by construction (AAA spec): NameCurve is warm violet
   with curves, WordLab is green felt with tiles, CostCompare is cool slate
   with horizontal bars. Same skeleton, three different companies.
   ========================================================================== */

:root {
  --cc:        #1F5E7A;   /* slate teal      */
  --cc-deep:   #164457;   /* text-safe       */
  --cc-bar:    #2E86AB;   /* bar fill        */
  --cc-me:     #C2410C;   /* the row you are on */
  --cc-warn:   #B45309;   /* disagreement, and NOTHING else */
  --cc-ok:     #0F766E;
  --cc-rule:   #DCE3E8;
  --cc-soft:   #F0F5F8;
  --cc-fg:     #16222B;
  --cc-shadow: 0 1px 2px rgba(22,68,87,.07), 0 8px 22px -10px rgba(31,94,122,.3);
  --cc-r:      10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cc: #6BB6D6; --cc-deep: #9BD0E6; --cc-bar: #4A9CC7; --cc-me: #FF9A6B;
    --cc-warn: #F0A860; --cc-ok: #34D3C2;
    --cc-rule: #2A3A44; --cc-soft: #16232B; --cc-fg: #E4EDF2;
  }
}
:root[data-theme="dark"] {
  --cc: #6BB6D6; --cc-deep: #9BD0E6; --cc-bar: #4A9CC7; --cc-me: #FF9A6B;
  --cc-warn: #F0A860; --cc-ok: #34D3C2;
  --cc-rule: #2A3A44; --cc-soft: #16232B; --cc-fg: #E4EDF2;
}
:root[data-theme="light"] {
  --cc: #1F5E7A; --cc-deep: #164457; --cc-bar: #2E86AB; --cc-me: #C2410C;
  --cc-warn: #B45309; --cc-ok: #0F766E;
  --cc-rule: #DCE3E8; --cc-soft: #F0F5F8; --cc-fg: #16222B;
}

/* --- section heads: a ruled tick, yearbook-style ------------------------- */
.cc-h { position: relative; padding-left: .8rem; margin-top: 2.6rem; }
.cc-h::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
  width: 4px; background: var(--cc); border-radius: 2px;
}

/* --- the answer ---------------------------------------------------------- */
.cc-big {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: .95;
  letter-spacing: -.03em; color: var(--cc-deep); font-variant-numeric: tabular-nums;
}
.cc-answer {
  background: var(--cc-soft); border: 1px solid var(--cc-rule);
  border-left: 4px solid var(--cc); border-radius: var(--cc-r);
  padding: clamp(1rem, 3vw, 1.5rem); margin: 1.2rem 0;
}
.cc-qual { font: 500 1.02rem/1.6 Inter, system-ui, sans-serif; margin: 0 0 .5rem; }
.cc-qual:last-child { margin-bottom: 0; }

/* --- THE BAR ROW: the set piece, repeated ------------------------------- */
.cc-list { list-style: none; margin: 1.1rem 0; padding: 0; }
.cc-row + .cc-row { border-top: 1px solid var(--cc-rule); }
.cc-row a {
  display: grid; grid-template-columns: minmax(7.5rem, 13rem) 1fr auto;
  align-items: center; gap: .8rem; padding: .55rem .3rem;
  text-decoration: none; color: inherit;
}
.cc-row a:hover { background: color-mix(in srgb, var(--cc) 7%, transparent); }
.cc-name { font: 550 .95rem/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.cc-bar { display: block; height: 12px; background: color-mix(in srgb, var(--cc) 10%, transparent); border-radius: 3px; overflow: hidden; }
.cc-bar i { display: block; height: 100%; background: var(--cc-bar); border-radius: 3px; }
.cc-val {
  font: 700 .95rem/1 ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--cc-deep); min-width: 3.4rem; text-align: right;
}
.cc-row.is-me a { background: color-mix(in srgb, var(--cc-me) 9%, transparent); }
.cc-row.is-me .cc-bar i { background: var(--cc-me); }
.cc-row.is-me .cc-name { font-weight: 700; }

/* --- the cross-check badge ---------------------------------------------- */
/* The one place --cc-warn is allowed. If this colour appears anywhere else it
   stops meaning "the agencies disagree", which is the only thing on this site
   a reader must not miss. */
.cc-cross {
  border-radius: var(--cc-r); padding: .85rem 1rem; margin: 1.2rem 0;
  font: 500 .95rem/1.6 Inter, system-ui, sans-serif;
  border: 1px solid var(--cc-rule); border-left-width: 4px;
}
.cc-cross.is-ok  { border-left-color: var(--cc-ok);   background: color-mix(in srgb, var(--cc-ok) 7%, transparent); }
.cc-cross.is-off { border-left-color: var(--cc-warn); background: color-mix(in srgb, var(--cc-warn) 9%, transparent); }

/* --- the versus block ---------------------------------------------------- */
.cc-vs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.3rem 0;
}
.cc-vs > div {
  background: var(--cc-soft); border: 1px solid var(--cc-rule);
  border-radius: var(--cc-r); padding: 1rem; text-align: center;
}
.cc-vs-n { display: block; font: 650 .9rem/1.3 Inter, system-ui, sans-serif; }
.cc-vs-v {
  display: block; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: 2.3rem; line-height: 1.1; color: var(--cc-deep);
  font-variant-numeric: tabular-nums;
}
.cc-vs-y { display: block; font: 500 .75rem/1 Inter, sans-serif; color: var(--muted, #6b7680); }

/* --- tables -------------------------------------------------------------- */
.cc-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cc-tbl th, .cc-tbl td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--cc-rule); }
.cc-tbl thead th {
  font: 700 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cc-deep);
  background: color-mix(in srgb, var(--cc) 8%, transparent);
}
.cc-tbl td.n, .cc-tbl th.n { text-align: right; font-family: ui-monospace, Consolas, monospace; }
.cc-tbl td.up { color: var(--cc-me); font-weight: 700; }
.cc-tbl td.down { color: var(--cc-ok); font-weight: 700; }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.with-rail > * { min-width: 0; }

/* --- caveats: styled so they read as part of the answer ----------------- */
.cc-caveats { margin: 1rem 0; padding-left: 1.1rem; }
.cc-caveats li { margin: .5rem 0; line-height: 1.6; }
.cc-absent { color: var(--muted, #6b7680); font-style: italic; line-height: 1.65; }

/* --- hero ---------------------------------------------------------------- */
.cc-hero {
  background:
    radial-gradient(100% 130% at 0% 0%, color-mix(in srgb, var(--cc) 13%, transparent) 0%, transparent 62%),
    var(--cc-soft);
  border: 1px solid var(--cc-rule); border-radius: 16px;
  padding: clamp(1.2rem, 4vw, 2.2rem); margin-bottom: 1.4rem;
}
.cc-proof {
  font: 600 1.05rem/1.5 Inter, system-ui, sans-serif;
  border-left: 4px solid var(--cc-ok); padding-left: .9rem; margin: 1.1rem 0 0;
}
.cc-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.cc-pills a {
  padding: .6rem 1.05rem; border-radius: 99px; text-decoration: none; color: #fff;
  font: 650 .92rem/1 Inter, system-ui, sans-serif; background: var(--cc);
}
.cc-pills a:nth-child(2) { background: var(--cc-ok); }
.cc-pills a:nth-child(3) { background: var(--cc-me); }
.cc-pills a:nth-child(4) { background: var(--cc-deep); }
.cc-pills a:hover { filter: brightness(1.08); }

/* --- the picker ---------------------------------------------------------- */
.cc-pick { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin: 1rem 0; }
.cc-pick label { font: 600 .8rem/1.8 Inter, system-ui, sans-serif; display: flex; flex-direction: column; }
.cc-pick select {
  font: 500 .98rem/1 Inter, system-ui, sans-serif; padding: .62rem .7rem;
  border: 1px solid var(--cc-rule); border-radius: 8px; background: var(--paper, #fff);
  color: inherit; min-width: 12rem;
}
.cc-btn {
  font: 700 .95rem/1 Inter, system-ui, sans-serif; cursor: pointer; border: 0;
  background: var(--cc); color: #fff; border-radius: 8px; padding: .72rem 1.3rem;
}
.cc-btn:hover { filter: brightness(1.08); }

.cardgrid .card { border-radius: var(--cc-r); }

/* --- touch + motion ------------------------------------------------------ */
@media (pointer: coarse) {
  .cc-row a { padding: .7rem .3rem; min-height: 44px; }
  .cc-btn { min-height: 48px; }
  .cc-pick select { min-height: 44px; }
  .cc-pills a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 30rem) {
  .cc-row a { grid-template-columns: minmax(5.5rem, 8rem) 1fr auto; gap: .5rem; }
  .cc-vs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-pills a, .cc-btn { transition: none; }
}