/*
 * aihi-article.css - the page styles of the guides, data pages and tool pages and of the /guides/ list (Phase 3, builder
 * B2; listed in $page->css by the article template and the template of the /guides/ list). It uses the tokens, the prose column and the
 * table box of the shared stylesheet (aihi-site.css, mockup E: white cards with a #D9DBEB line, 16 px corners, Inter and
 * Plus Jakarta Sans) and adds: the meta line, "On this page", the five boxes (callouts), tables, code, figures, the
 * decision tree, the timeline, the diagram, pros and cons, dated facts, the hub lists, "What changed", the up link and
 * the admin's preview bar. Strict CSP: no inline style anywhere, so every look is a class here; inline SVG is coloured
 * through its classes. All small-screen rules sit in ONE marked block at the end.
 */

/* ---------------------------------------------------------------- head, meta line, "On this page" */

.aihi-article__head { gap: 12px; margin-bottom: 28px; }
.aihi-article__meta { font-size: 15px; color: var(--c-muted); }
.aihi-article__meta a { color: var(--c-link); }

/* "On this page", version A "Section tiles" (George, 26 Oct 2026, "Version A pls"): the whole tile is the link, with
   its number (a CSS counter) in a badge and a small arrow; two columns once the box is 520 px wide inside (a container
   query, so it follows the box, not the window), one column on phones. The tile under the pointer or the keyboard
   turns blue. */
.aihi-toc {
  container-type: inline-size;
  max-width: 44rem;
  margin: 0 0 32px;
  padding: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
}
.aihi-toc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aihi-toc__title { font-family: var(--f-text); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.aihi-toc__count { font-size: 13px; color: var(--c-muted); }
.aihi-toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; counter-reset: aihi-toc; }
@container (min-width: 520px) {
  .aihi-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aihi-toc__list li { counter-increment: aihi-toc; display: flex; min-width: 0; }
.aihi-toc__list a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-group);
  background: var(--c-tile);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.aihi-toc__list a::before {
  content: counter(aihi-toc, decimal-leading-zero);
  flex: 0 0 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-tint);
  color: var(--c-tint-text);
  font: 700 12px/1 var(--f-head);
  font-variant-numeric: tabular-nums;
  transition: background-color .15s, color .15s;
}
/* the arrow: two borders of a turned square (no character, so screen readers read nothing extra) */
.aihi-toc__list a::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-1px, -3px) rotate(45deg);
  opacity: .35;
  transition: opacity .15s, transform .15s;
}
.aihi-toc__text { min-width: 0; }
.aihi-toc__list a:focus-visible { border-color: var(--c-blue-text); background: var(--c-tile-hover); color: var(--c-link); }
.aihi-toc__list a:focus-visible::before { background: var(--c-blue); color: var(--c-white); }
.aihi-toc__list a:focus-visible::after { opacity: 1; transform: translate(-1px, -1px) rotate(45deg); }
@media (hover: hover) {
  .aihi-toc__list a:hover { border-color: var(--c-blue-text); background: var(--c-tile-hover); color: var(--c-link); }
  .aihi-toc__list a:hover::before { background: var(--c-blue); color: var(--c-white); }
  .aihi-toc__list a:hover::after { opacity: 1; transform: translate(-1px, -1px) rotate(45deg); }
}

/* ---------------------------------------------------------------- the five boxes (WRITING-STANDARD section 8) */

.aihi-prose .aihi-callout {
  margin-top: 1.6em;
  padding: 20px 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--r-card);
}
.aihi-prose .aihi-callout--tested { border-left-color: var(--c-text); }
.aihi-prose .aihi-callout--key-numbers { border-left-color: var(--c-chart-teal); }
.aihi-prose .aihi-callout--mistakes { border-left-color: var(--c-muted); }
.aihi-prose .aihi-callout__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.aihi-prose .aihi-callout ul { margin: 0; }
.aihi-callout__not { margin-top: 10px; color: var(--c-text-2); }
.aihi-callout__not strong { color: var(--c-text); }

.aihi-callout__facts { display: grid; gap: 6px; margin: 0; font-size: 16px; }
.aihi-callout__facts > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0 16px; }
.aihi-callout__facts dt { font-weight: 600; color: var(--c-text-2); }
.aihi-callout__facts dd { margin: 0; }

.aihi-prose .aihi-keynums {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 16px;
}
.aihi-prose .aihi-keynums li + li { margin-top: 0; }
.aihi-keynums li { display: flex; flex-direction: column; gap: 2px; }
.aihi-keynums__value { font-family: var(--f-head); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.aihi-keynums__unit { font-family: var(--f-text); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--c-text-2); }
.aihi-keynums__label { font-size: 15px; line-height: 1.4; color: var(--c-text); }
.aihi-keynums__source { font-size: 13px; color: var(--c-muted); }

.aihi-prose .aihi-mistakes { list-style: none; padding: 0; display: grid; gap: 12px; }
.aihi-prose .aihi-mistakes li + li { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--c-row-line); }
.aihi-mistakes__wrong { font-weight: 600; }
.aihi-mistakes__fix { margin-top: 2px; color: var(--c-text-2); }
.aihi-mistakes__fix strong { color: var(--c-text); }

/* ---------------------------------------------------------------- tables, code, figures */

.aihi-art-table { margin-top: 1.4em; }
.aihi-art-table__verdict { font-weight: 600; margin-bottom: 10px; }
.aihi-art-table th, .aihi-art-table td { min-width: 5.5em; }
.aihi-art-table caption { padding: 12px 12px 8px; }
.aihi-art-table tbody th { font-weight: 700; }
.aihi-art-table tbody tr:last-child th, .aihi-art-table tbody tr:last-child td { border-bottom: 0; }
.aihi-art-table .aihi-table-scroll:focus-visible { outline-offset: 3px; }

.aihi-art-code__lang {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.aihi-art-code pre { margin: 0; }

.aihi-art-figure { margin-top: 1.6em; }
.aihi-art-figure img { display: block; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-white); }
.aihi-art-figure figcaption { margin-top: 8px; font-size: 14px; color: var(--c-muted); }

/* ---------------------------------------------------------------- decision tree (text first, connectors drawn by CSS) */

.aihi-prose .aihi-dtree { margin-top: 1.6em; }
.aihi-prose .aihi-dtree__title { margin: 0 0 12px; font-size: 21px; }
.aihi-prose .aihi-dtree__qs { list-style: none; padding: 0; display: grid; gap: 14px; }
.aihi-prose .aihi-dtree__qs > li + li { margin-top: 0; }
.aihi-dtree__q {
  padding: 16px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  scroll-margin-top: 24px;
}
.aihi-dtree__ask { font-weight: 700; }
.aihi-dtree__n {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--c-pressed-bg);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 600;
  vertical-align: 2px;
}
.aihi-prose .aihi-dtree__as { list-style: none; margin: 10px 0 0 6px; padding: 0 0 0 18px; border-left: 2px solid var(--c-line); }
.aihi-prose .aihi-dtree__as li { position: relative; padding: 4px 0 4px 6px; }
.aihi-prose .aihi-dtree__as li + li { margin-top: 2px; }
.aihi-dtree__as li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 0.95em;
  width: 14px;
  border-top: 2px solid var(--c-line);
}
.aihi-dtree__a { font-weight: 600; }

/* ---------------------------------------------------------------- timeline */

.aihi-prose .aihi-timeline { margin-top: 1.6em; }
.aihi-prose .aihi-timeline__title { margin: 0 0 12px; font-size: 21px; }
.aihi-prose .aihi-timeline__list { list-style: none; padding: 0 0 0 22px; border-left: 2px solid var(--c-line); margin-left: 6px; }
.aihi-prose .aihi-timeline__list li { position: relative; padding: 2px 0 10px; }
.aihi-prose .aihi-timeline__list li + li { margin-top: 0; }
.aihi-timeline__list li::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-blue);
}
.aihi-timeline__list time { display: block; font-size: 14px; font-weight: 600; color: var(--c-text-2); }

/* ---------------------------------------------------------------- diagram (inline SVG; one drawing shows at a time) */

.aihi-prose .aihi-diagram {
  margin-top: 1.6em;
  padding: 18px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
}
.aihi-diagram__cap { margin-bottom: 14px; font-size: 15px; color: var(--c-muted); }
.aihi-diagram__title { display: block; font-family: var(--f-head); font-size: 18px; font-weight: 700; color: var(--c-text); }
.aihi-diagram__svg { display: block; max-width: 100%; height: auto; }
.aihi-diagram__svg--wide { display: none; }
.aihi-dg-box { fill: var(--c-surface); stroke: var(--c-blue); stroke-width: 1.5; }
.aihi-dg-label { fill: var(--c-text); font-family: var(--f-text); font-size: 15px; font-weight: 700; }
.aihi-dg-note { fill: var(--c-text-2); font-family: var(--f-text); font-size: 13px; }
.aihi-dg-line { stroke: var(--c-text); stroke-width: 1.5; }
.aihi-dg-head { fill: var(--c-text); }
.aihi-dg-arrow { fill: var(--c-text-2); font-family: var(--f-text); font-size: 13px; }
.aihi-prose .aihi-diagram__text { margin-top: 14px; padding-left: 1.4em; font-size: 15px; color: var(--c-text-2); }

/* ---------------------------------------------------------------- other questions, sources */

.aihi-prose .aihi-otherq h3 { font-size: 19px; }
.aihi-prose .aihi-sources { margin-top: 2.4em; }
.aihi-prose .aihi-sources__list { font-size: 15px; }
.aihi-sources__notes { font-size: 15px; color: var(--c-text-2); }

/* ---------------------------------------------------------------- pros and cons */

.aihi-prose .aihi-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 1.6em; }
.aihi-proscons__col { padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.aihi-prose .aihi-proscons__title { margin: 0 0 8px; font-size: 18px; }
.aihi-proscons__col--pros { border-top: 4px solid var(--c-blue); }
.aihi-proscons__col--cons { border-top: 4px solid var(--c-muted); }
.aihi-prose .aihi-proscons ul { margin: 0; }

/* ---------------------------------------------------------------- hub lists, the /guides/ list, "What changed", up link */

.aihi-prose .aihi-hublist { margin-top: 2em; }
.aihi-prose .aihi-hublist__title { margin: 0 0 12px; }
.aihi-prose .aihi-hublist__list { list-style: none; padding: 0; display: grid; gap: 10px; }
.aihi-prose .aihi-hublist__list li + li { margin-top: 0; }
.aihi-hublist__item { padding: 14px 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); }
.aihi-hublist__item--hub { border-left: 4px solid var(--c-blue); }
.aihi-hublist__link { font-weight: 700; font-size: 18px; }
.aihi-prose .aihi-hublist__all { margin-top: 14px; font-weight: 600; }
.aihi-hublist__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--c-filter-bg);
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 600;
  vertical-align: 2px;
}
.aihi-hublist__desc { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--c-text-2); }
/* a card with a picture: the small preview on the left, the whole card is the link's click area */
.aihi-hublist__item { position: relative; }
.aihi-hublist__item--img { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.aihi-hublist__img { display: block; width: 132px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--c-filter-bg); }
.aihi-hublist__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.aihi-hublist__item { transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .aihi-hublist__item:hover { border-color: var(--c-select-border); box-shadow: 0 8px 24px rgba(0, 12, 42, 0.06); } }
.aihi-hublist__item:focus-within { border-color: var(--c-focus); }
.aihi-guides__empty { color: var(--c-text-2); }

.aihi-prose .aihi-changes__list { list-style: none; padding: 0; }
.aihi-changes__list time { font-weight: 600; }
.aihi-article__up { margin-top: 40px; font-weight: 600; }

/* ---------------------------------------------------------------- the admin's preview bar (aihi-admin/preview.php) */

.aihi-preview-bar { background: var(--c-navy); color: var(--c-white); font-size: 15px; }
.aihi-preview-bar p { max-width: var(--container); margin: 0 auto; padding: 10px var(--gutter); }
.aihi-preview-bar a { color: var(--c-on-dark-link); }
.aihi-preview-bar :focus-visible { outline-color: var(--c-on-dark-link); }

/* ---------------------------------------------------------------- wide screens (George, 28 Oct 2026: "Why on desktop
   you use just half the screen isn't it better to use all the space", then "Execute.") */

/* from 1200 px a guide with "On this page" gets two columns: the list in a sidebar that stays in view while you read
   (aihi-toc.js marks the section you are in), the text at its reading width, and tables, charts and boxes across the
   whole main column. The page and its breadcrumbs widen to 1320 px. Below 1200 px nothing changes. */
@media (min-width: 1200px) {
  .aihi-crumbs-wrap:has(+ .aihi-article), .aihi-container.aihi-article { max-width: 1320px; }
  .aihi-article:has(> .aihi-toc) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
  .aihi-article:has(> .aihi-toc) > .aihi-article__head { grid-column: 1 / -1; }
  .aihi-article > .aihi-toc {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--aihi-hh, 0px) + 24px);
    max-width: none;
    max-height: calc(100vh - var(--aihi-hh, 0px) - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 18px 12px 12px;
  }
  .aihi-article > .aihi-toc .aihi-toc__head { padding: 0 6px; }
  .aihi-article > .aihi-toc .aihi-toc__list { gap: 2px; }
  .aihi-article > .aihi-toc .aihi-toc__list a { min-height: 0; padding: 7px 8px; gap: 10px; border-color: transparent; background: none; font-size: 14px; line-height: 1.35; }
  .aihi-article > .aihi-toc .aihi-toc__list a::before { flex-basis: 26px; height: 24px; font-size: 11px; }
  .aihi-article > .aihi-toc .aihi-toc__list a::after { display: none; }
  .aihi-article > .aihi-toc .aihi-toc__list a.is-current { background: var(--c-tile-hover); color: var(--c-link); font-weight: 600; }
  .aihi-article > .aihi-toc .aihi-toc__list a.is-current::before { background: var(--c-blue); color: var(--c-white); }
  .aihi-article:has(> .aihi-toc) > .aihi-prose { grid-column: 1; grid-row: 2; max-width: none; }
  .aihi-article:has(> .aihi-toc) > .aihi-prose > :is(p, ul, ol, h2, h3, h4, blockquote, dl) { max-width: 44rem; }
  .aihi-article:has(> .aihi-toc) .aihi-hublist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the /guides/ list: the cards two a line across the page from 1024 px (its words stay at reading width) */
@media (min-width: 1024px) {
  .aihi-page:not(.aihi-article) > .aihi-prose { max-width: none; }
  .aihi-page:not(.aihi-article) > .aihi-prose > :is(p, ul, ol, h3) { max-width: 44rem; }
  .aihi-page:not(.aihi-article) .aihi-hublist__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* the row drawing of a diagram with two or three boxes from 720 px (its smallest text stays at 12 px or more) */
@media (min-width: 720px) {
  .aihi-diagram--n2 .aihi-diagram__svg--wide, .aihi-diagram--n3 .aihi-diagram__svg--wide { display: block; }
  .aihi-diagram--n2 .aihi-diagram__svg--narrow, .aihi-diagram--n3 .aihi-diagram__svg--narrow { display: none; }
}
@media (max-width: 640px) {
  .aihi-hublist__item--img { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .aihi-hublist__img { width: 88px; height: 64px; }
  .aihi-prose .aihi-proscons { grid-template-columns: minmax(0, 1fr); }
  .aihi-callout__facts > div { grid-template-columns: minmax(0, 1fr); }
  .aihi-prose .aihi-callout, .aihi-prose .aihi-diagram, .aihi-dtree__q { padding: 16px; }
  .aihi-toc { padding: 16px; }
}
@media (max-width: 1024px) {
  .aihi-hublist__link, .aihi-article__up a, .aihi-hublist__all a { display: inline-block; padding: 10px 0; }
}