/* Estudios: the charts (apps/estudios/charts.py), the Datos box and the stale-data banner.
   Linked from templates/estudios/estudio_page.html. The kit's CSP is style-src 'self', so the
   SVG carries no style attribute: every colour, font and number style is a class here, on the
   kit's tokens, which also carry dark mode. */

/* ---------- the figure ---------- */
.pk-chart { margin-block: 28px; max-width: 720px; }
.pk-prose .pk-chart { margin-top: 28px; }
.pk-chart__svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.pk-chart__narrow { display: none; }
@media (max-width: 40rem) {
  .pk-chart__wide { display: none; }
  .pk-chart__narrow { display: block; }
}
.pk-chart figcaption { margin-top: 12px; font-size: var(--pk-meta, 14px); line-height: 1.5; color: var(--color-muted); }
.pk-chart__cap { display: block; max-width: 70ch; }
.pk-chart__cap + .pk-chart__cap { margin-top: 4px; }

/* ---------- the marks ---------- */
.pk-chart__svg text { font-family: var(--font-sans); font-size: 13px; fill: var(--color-ink); }
.pk-chart__value { font-variant-numeric: tabular-nums; }
.pk-chart__svg .pk-chart__tick { font-size: 12px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.pk-chart__label--hl { font-weight: 600; }
.pk-chart__bar, .pk-chart__dot { fill: var(--color-brand); }
/* The highlight is the ink colour: in this theme --color-brand-ink equals --color-brand, so a
   brand-ink bar would not stand out at all. */
.pk-chart__bar--hl { fill: var(--color-ink); }
.pk-chart__line { stroke: var(--color-brand); }
.pk-chart__axis { stroke: var(--color-line-strong, var(--color-line)); }

/* ---------- the states left out of the ranking ---------- */
.pk-chart__flagged { margin-top: 16px; max-width: 720px; }
.pk-prose .pk-chart__flagged { margin-top: 20px; }
.pk-prose .pk-chart__flagged table { display: table; max-width: none; overflow: visible; }
.pk-chart__flagged caption { caption-side: top; text-align: left; padding: 14px 20px 4px; font-weight: 700; color: var(--color-ink); }
.pk-chart__flagged th { text-transform: none; letter-spacing: 0; font-size: var(--pk-meta, 14px); }
.pk-chart__flagged td, .pk-chart__flagged th { padding: 8px 20px; line-height: 1.35; vertical-align: top; }
.pk-chart__flagged td:first-child { font-weight: 600; }
.pk-chart__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) {
  .pk-chart__flagged td, .pk-chart__flagged th { padding: 8px 10px; }
  .pk-chart__flagged caption { padding: 12px 10px 4px; }
}

/* ---------- the Datos box ---------- */
.estudio-datos > h2 { font-size: 20px; }
.estudio-datos__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; }
.estudio-datos__list > div { display: contents; }
.estudio-datos__list dt, .estudio-datos__list dd { padding: 10px 0; border-top: 1px solid var(--color-line); }
.estudio-datos__list dt { padding-right: 20px; font-weight: 600; color: var(--color-ink); }
.estudio-datos__list dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.estudio-datos__list dd code { font-size: 0.92em; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .estudio-datos__list { grid-template-columns: minmax(0, 1fr); }
  .estudio-datos__list dt { padding-bottom: 0; }
  .estudio-datos__list dd { border-top: 0; padding-top: 2px; }
}

/* ---------- the stale-data banner (our own class: the kit owns the pk- namespace) ---------- */
.estudio-stale { background: var(--color-card); border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-card); padding: 14px 18px; color: var(--color-ink); }

/* ---------- paper ---------- */
@media print {
  .pk-chart, .estudio-datos { break-inside: avoid; page-break-inside: avoid; }
  .pk-chart__flagged tr { break-inside: avoid; page-break-inside: avoid; }
  .pk-chart figcaption { break-before: avoid; page-break-before: avoid; color: #000; }
  /* paper is wider than a phone: always the wide drawing, at its own size */
  .pk-chart__wide { display: block !important; }
  .pk-chart__narrow { display: none !important; }
  .pk-chart__svg { width: 100% !important; max-width: 720px; height: auto !important; }
  .pk-chart__svg text { fill: #000; }
  .pk-chart__bar, .pk-chart__dot { fill: #0e6b4f; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .pk-chart__bar--hl { fill: #000; }
  .pk-chart__line { stroke: #0e6b4f; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- the essay's own tables (pipe tables in the draft) ----------
   The kit leaves a prose table bare (display:block, no rules), which reads as loose columns
   beside the styled flagged-states table. On an estudio page they take the same quiet table
   look: hairline rows, sentence-case headers, tabular figures. */
.pk-prose > table { display: table; width: 100%; max-width: 720px; border-collapse: collapse;
  font-size: var(--pk-meta, 15px); line-height: 1.35; background: var(--color-card);
  border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.pk-prose > table th { text-align: left; vertical-align: bottom; font-weight: 700; color: var(--color-muted);
  background: var(--color-surface-2, var(--color-card)); padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.pk-prose > table td { padding: 7px 14px; border-bottom: 1px solid var(--color-line); vertical-align: top;
  font-variant-numeric: tabular-nums; }
.pk-prose > table tr:last-child td { border-bottom: 0; }
.pk-prose > table td:first-child { font-weight: 600; }
@media (max-width: 40rem) {
  .pk-prose > table { font-size: 14px; }
  .pk-prose > table th, .pk-prose > table td { padding: 7px 8px; }
}
@media print {
  .pk-prose > table tr { break-inside: avoid; page-break-inside: avoid; }
}