/*
 * aihi-data.css - the live data blocks of the articles (Phase 3, builder B3; _docs/phase3-design.md sections 4.4-4.8):
 * price boxes, cost summaries, charts, the agent cost calculator and the data tables for download. Listed in $page->css
 * by inc/aihi-blocks-data.php only on pages that print one of them (printed after the shared aihi-site.css).
 * The look follows the approved mockup's table card (white card, line colour #D9DBEB, radius 16 px, muted headers in
 * capitals) and the shared tokens of aihi-site.css. Chart colours are SVG presentation attributes in the markup (blue
 * #0069FF, navy #000C2A, mid grey #5A6285, chart teal #1A828C; gridlines #D9DBEB; never yellow).
 * Strict CSP: no inline style anywhere, so the positions along a chart axis are the classes .aihi-at-0 ... .aihi-at-100
 * at the end of the file. All small-screen rules sit in ONE marked block before them.
 */

/* ---------------------------------------------------------------- boxes */

.aihi-data { margin: 28px 0; font-variant-numeric: normal; }
.aihi-prose > .aihi-data { margin-top: 28px; margin-bottom: 28px; }
.aihi-data__scroll {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
}
.aihi-data__title { font-family: var(--f-head); font-weight: 700; font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.aihi-data__lead { margin: 0 0 12px; }
.aihi-data__foot { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.aihi-data__note { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--c-text-2); }
.aihi-data__gone { margin: 20px 0; font-size: 15px; color: var(--c-text-2); }
.aihi-data a:not(.aihi-btn) { color: var(--c-link); text-underline-offset: 2px; }
.aihi-data__foot + .aihi-data__scroll, .aihi-data__note + .aihi-data__scroll { margin-top: 18px; }
/* numbers line up in columns; other text keeps its normal letter widths (a hyphen is not as wide as a digit) */
.aihi-dtable__num, .aihi-price__amount, .aihi-chart__value, .aihi-chart__tick, .aihi-live { font-variant-numeric: tabular-nums; }

/* a Visit button inside a text or a box: white words on blue (a link colour of the text around it never applies) */
.aihi-prose .aihi-btn--visit, .aihi-data .aihi-btn--visit,
.aihi-prose .aihi-btn--visit:visited, .aihi-data .aihi-btn--visit:visited { color: var(--c-white); text-decoration: none; }
@media (hover: hover) {
  .aihi-prose .aihi-btn--visit:hover, .aihi-data .aihi-btn--visit:hover { color: var(--c-white); background: #0058D6; }
}
.aihi-prose .aihi-btn--visit:focus-visible, .aihi-data .aihi-btn--visit:focus-visible { color: var(--c-white); }

/* ---------------------------------------------------------------- tables of the data blocks */

.aihi-dtable, .aihi-prose .aihi-dtable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.aihi-dtable caption, .aihi-prose .aihi-dtable caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 8px;
  font-size: 14px;
  color: var(--c-muted);
}
.aihi-dtable thead th, .aihi-prose .aihi-dtable thead th {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-table-line);
}
.aihi-dtable tbody th, .aihi-dtable tbody td, .aihi-prose .aihi-dtable tbody th, .aihi-prose .aihi-dtable tbody td {
  padding: 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-row-line);
}
.aihi-dtable tbody tr:last-child th, .aihi-dtable tbody tr:last-child td { border-bottom: 0; }
.aihi-dtable tbody th { font-weight: 700; }
.aihi-dtable thead th:first-child, .aihi-dtable tbody th:first-child, .aihi-dtable tbody td:first-child { padding-left: 18px; }
.aihi-dtable thead th:last-child, .aihi-dtable tbody td:last-child { padding-right: 18px; }
.aihi-dtable tbody th a { color: var(--c-text); text-decoration-color: var(--c-line); }
.aihi-dtable__num { white-space: nowrap; }
.aihi-dtable__money { font-weight: 700; }
.aihi-dtable__total th, .aihi-dtable__total td { background: var(--c-filter-bg); }
.aihi-dtable__total th { text-align: right; }
.aihi-dtable--chart tbody th { font-weight: 600; }
.aihi-dtable .aihi-price__note, .aihi-dtable .aihi-price__date { white-space: normal; }
.aihi-dtable .aihi-cell { min-width: 9rem; }
.aihi-dtable .aihi-cell .aihi-price { margin-top: 6px; }
.aihi-dtable tbody th .aihi-cell__main { font-weight: 700; }

/* a live price inside a sentence: "$8.79 a month (checked 25 October 2026)"; only the amount is bold, as in the tables */
.aihi-live { font-weight: 600; }
.aihi-live__date { font-weight: 400; }

/* a Visit button inside a sentence ([Visit](go:...)) */
.aihi-btn--inline { min-height: 32px; min-width: 0; padding: 0 12px; font-size: 15px; vertical-align: baseline; }

/* ---------------------------------------------------------------- charts */

/* the reading width also outside an article (provider and test pages): the SVG scales with its box, so a wider box
   would blow up its text */
.aihi-chart { margin: 32px 0; max-width: 44rem; }
/* dark mode: the chart keeps the light colours (aihi-site.css sets them on .aihi-chart) in a white box (George: charts
   on white only); light mode: no box, as before */
.aihi-chart { color: var(--c-text); background: var(--chart-bg); padding: var(--chart-pad); border-radius: var(--chart-r); }
.aihi-chart__cap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.aihi-chart__title { font-family: var(--f-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--c-text); }
.aihi-chart__sub { font-size: 15px; color: var(--c-text-2); }
.aihi-chart__dates { font-size: 14px; color: var(--c-muted); }
.aihi-chart__draw { margin-bottom: 14px; }
.aihi-chart__svg { display: block; width: 100%; height: auto; }
.aihi-chart__svg--wide { display: none; }
.aihi-chart__svg--narrow { max-width: 420px; }
.aihi-chart .aihi-data__scroll { margin-top: 14px; }

/* bars and dots: HTML rows (label, number, bar in the markup), one stretched SVG bar each; narrow screens: the label and
   the number on one line above the bar; from 600 px: label | bar | number (dense placement keeps each row on one line) */
.aihi-chart__plot { margin-bottom: 6px; }
.aihi-chart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
}
.aihi-chart__label { grid-column: 1; font-size: 15px; line-height: 1.35; color: var(--c-text); padding-top: 8px; }
.aihi-chart__value { grid-column: 2; font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; padding-top: 8px; }
.aihi-chart__bar { grid-column: 1 / -1; display: block; }
.aihi-chart__barsvg { display: block; width: 100%; height: 20px; }
.aihi-chart__corner { display: none; }
.aihi-chart__axis {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 20px;
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-muted);
}
.aihi-chart__axis--refs { margin: 4px 0 0; color: var(--c-text-2); }
.aihi-chart__tick { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.aihi-chart__tick--first { transform: none; }
.aihi-chart__tick--last { transform: translateX(-100%); }
.aihi-chart__ref { font-weight: 600; }

@media (min-width: 600px) {
  .aihi-chart__svg--wide { display: block; }
  .aihi-chart__svg--narrow { display: none; }
  .aihi-chart__grid { grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) auto; grid-auto-flow: row dense; row-gap: 10px; }
  .aihi-chart__label { grid-column: 1; padding-top: 0; }
  .aihi-chart__bar { grid-column: 2; }
  .aihi-chart__value { grid-column: 3; min-width: 4.5rem; padding-top: 0; }
  .aihi-chart__axis { grid-column: 2; margin: 0; }
  .aihi-chart__axis--refs { margin: 0; }
  .aihi-chart__corner { display: block; }
  .aihi-chart__corner--l { grid-column: 1; }
  .aihi-chart__corner--r { grid-column: 3; }
}

/* ---------------------------------------------------------------- the agent cost calculator */

.aihi-calc__form {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 16px;
}
.aihi-calc__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 16px 20px;
  margin-bottom: 18px;
}
.aihi-calc__field { min-width: 0; }
.aihi-calc__select { display: block; width: 100%; min-height: var(--touch); font-size: 16px; }
.aihi-calc__input { max-width: 12rem; }
.aihi-calc__field .aihi-error { margin-top: 6px; }

/* ---------------------------------------------------------------- data tables for download */

.aihi-dataset__download { margin: 12px 0 0; font-weight: 600; }

/* ---------------------------------------------------------------- positions along a chart axis (no inline style) */

.aihi-at-0{left:0%}.aihi-at-1{left:1%}.aihi-at-2{left:2%}.aihi-at-3{left:3%}.aihi-at-4{left:4%}.aihi-at-5{left:5%}
.aihi-at-6{left:6%}.aihi-at-7{left:7%}.aihi-at-8{left:8%}.aihi-at-9{left:9%}.aihi-at-10{left:10%}.aihi-at-11{left:11%}
.aihi-at-12{left:12%}.aihi-at-13{left:13%}.aihi-at-14{left:14%}.aihi-at-15{left:15%}.aihi-at-16{left:16%}.aihi-at-17{left:17%}
.aihi-at-18{left:18%}.aihi-at-19{left:19%}.aihi-at-20{left:20%}.aihi-at-21{left:21%}.aihi-at-22{left:22%}.aihi-at-23{left:23%}
.aihi-at-24{left:24%}.aihi-at-25{left:25%}.aihi-at-26{left:26%}.aihi-at-27{left:27%}.aihi-at-28{left:28%}.aihi-at-29{left:29%}
.aihi-at-30{left:30%}.aihi-at-31{left:31%}.aihi-at-32{left:32%}.aihi-at-33{left:33%}.aihi-at-34{left:34%}.aihi-at-35{left:35%}
.aihi-at-36{left:36%}.aihi-at-37{left:37%}.aihi-at-38{left:38%}.aihi-at-39{left:39%}.aihi-at-40{left:40%}.aihi-at-41{left:41%}
.aihi-at-42{left:42%}.aihi-at-43{left:43%}.aihi-at-44{left:44%}.aihi-at-45{left:45%}.aihi-at-46{left:46%}.aihi-at-47{left:47%}
.aihi-at-48{left:48%}.aihi-at-49{left:49%}.aihi-at-50{left:50%}.aihi-at-51{left:51%}.aihi-at-52{left:52%}.aihi-at-53{left:53%}
.aihi-at-54{left:54%}.aihi-at-55{left:55%}.aihi-at-56{left:56%}.aihi-at-57{left:57%}.aihi-at-58{left:58%}.aihi-at-59{left:59%}
.aihi-at-60{left:60%}.aihi-at-61{left:61%}.aihi-at-62{left:62%}.aihi-at-63{left:63%}.aihi-at-64{left:64%}.aihi-at-65{left:65%}
.aihi-at-66{left:66%}.aihi-at-67{left:67%}.aihi-at-68{left:68%}.aihi-at-69{left:69%}.aihi-at-70{left:70%}.aihi-at-71{left:71%}
.aihi-at-72{left:72%}.aihi-at-73{left:73%}.aihi-at-74{left:74%}.aihi-at-75{left:75%}.aihi-at-76{left:76%}.aihi-at-77{left:77%}
.aihi-at-78{left:78%}.aihi-at-79{left:79%}.aihi-at-80{left:80%}.aihi-at-81{left:81%}.aihi-at-82{left:82%}.aihi-at-83{left:83%}
.aihi-at-84{left:84%}.aihi-at-85{left:85%}.aihi-at-86{left:86%}.aihi-at-87{left:87%}.aihi-at-88{left:88%}.aihi-at-89{left:89%}
.aihi-at-90{left:90%}.aihi-at-91{left:91%}.aihi-at-92{left:92%}.aihi-at-93{left:93%}.aihi-at-94{left:94%}.aihi-at-95{left:95%}
.aihi-at-96{left:96%}.aihi-at-97{left:97%}.aihi-at-98{left:98%}.aihi-at-99{left:99%}.aihi-at-100{left:100%}

/* ================================================================ SMALL SCREENS (every small-screen rule is here) */

@media (max-width: 1024px) {
  .aihi-btn--inline { min-height: var(--touch); }
  .aihi-dataset__download a { display: inline-block; padding: 10px 0; }
}
@media (max-width: 599.98px) {
  .aihi-calc__form { padding: 16px; }
  .aihi-calc__input { max-width: none; }
  .aihi-dtable caption, .aihi-prose .aihi-dtable caption { padding: 12px 14px 6px; }
  .aihi-dtable thead th, .aihi-dtable tbody th, .aihi-dtable tbody td { padding-left: 12px; padding-right: 12px; }
}