/* Par illustration kit: the tokens and the few components every page uses with the crayon drawings.
   Load after the page's base CSS (health.css or the site's own). Every picture is a transparent PNG/WebP
   from the image model; this file only frames them. Nothing here draws an image.

   Pending for the Site: Newsreader 700 italic (the keyword weight) must be self-hosted next to the 400s.
   Until then the study pages load it from Google Fonts. */

:root {
  /* the language */
  --pil-panel: #d8e5f5;          /* pale blue panel behind a drawing, shorter than the drawing */
  --pil-panel-r: clamp(20px, 3vw, 40px);
  --pil-cobalt: #2747b0;         /* the small kicker line and the dotted memory path in the drawings */
  --pil-ink: #1d1a16;            /* thick outlines in the UI */
  --pil-line: 2.5px;
  --pil-shadow: 6px 7px 0 var(--pil-ink);   /* hard sticker shadow for UI cards */

  /* flat crayon colours, as in the drawings */
  --pil-yellow: #f5c63c;
  --pil-yellow-soft: #fff3c9;    /* row or note the AI just touched */
  --pil-green: #2f6b45;
  --pil-green-soft: #dcebd9;
  --pil-cobalt-soft: #dfe7f8;
  --pil-red: #e0452f;
  --pil-pink: #f2a7c3;
  --pil-grey: #8f8a80;
  --pil-paper: #fffdf6;          /* UI surface */

  --pil-display: var(--font-display, "Newsreader", "Iowan Old Style", Georgia, serif);
  --pil-body: var(--font-body, "Geist", -apple-system, "Segoe UI", sans-serif);
  --pil-mono: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, monospace);
}

/* ── Type ─────────────────────────────────────────────── */
/* One keyword per headline, bold italic, often on its own line. */
.pil-key { font-style: italic; font-weight: 700; letter-spacing: -0.025em; }
.pil-key--line { display: block; }
/* The small cobalt line above a headline: a quote, a promise, a "why". */
.pil-kicker { font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--pil-display); color: var(--pil-cobalt); }
.pil-cite { display: block; margin-top: 6px; font: 13px var(--pil-mono); font-style: normal; color: var(--text-muted, #6e6350); }

/* ── Drawings ─────────────────────────────────────────── */
.pil-art { display: block; margin: clamp(20px, 3vw, 40px) 0 0; }
.pil-art img { display: block; width: 100%; height: auto; }
/* The panel sits behind the middle band of the drawing, so heads and feet break out of it. */
.pil-art--panel { position: relative; isolation: isolate; padding-inline: clamp(8px, 2.4vw, 36px); }
.pil-art--panel::before { content: ""; position: absolute; inset: 15% 0 9%; z-index: -1; background: var(--pil-panel); border-radius: var(--pil-panel-r); }
.pil-art--strip::before { inset: 10% 0 6%; }
/* A small drawing beside a paragraph. */
.pil-spot { width: min(100%, 420px); }
/* A diagram that swaps to its tall version on phones: use <picture> with the tall source at max-width 760px
   and put the captions in .pil-diagram-caps; on phones they sit beside each third of the tall drawing. */
.pil-diagram { display: grid; grid-template-columns: 1fr; }
.pil-diagram-caps { list-style: none; margin: 0; padding: 0 clamp(8px, 2.4vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center; }
.pil-diagram-caps li { font: 400 clamp(19px, 1.9vw, 25px)/1.25 var(--pil-display); }
.pil-diagram-caps b { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 10px; border-radius: 50%; background: var(--pil-ink); color: var(--bg, #f7f0e1); font: 600 13px/1 var(--pil-body); }

/* ── The AI sign ──────────────────────────────────────── */
/* The four-pointed sparkle marks what an AI did. Use the sticker, never a font glyph. */
.pil-ai { display: inline-flex; align-items: center; gap: 6px; }
.pil-ai img { width: 1.1em; height: auto; }

/* ── Generic Par UI ───────────────────────────────────── */
.pil-ui { background: var(--pil-paper); border: var(--pil-line) solid var(--pil-ink); border-radius: 26px; box-shadow: var(--pil-shadow); overflow: hidden; color: var(--pil-ink); }
.pil-ui-top { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: var(--pil-line) solid var(--pil-ink); }
.pil-ui-top h3 { margin: 0; font: 400 26px/1.1 var(--pil-display); letter-spacing: -0.01em; }
.pil-ui-top h3 em { font-style: italic; font-weight: 700; }
.pil-ui-faces { margin-left: auto; display: flex; }
.pil-ui-faces img { width: 36px; height: 36px; margin-left: -8px; }
.pil-live { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--pil-body); padding: 6px 9px 5px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-green-soft); }
.pil-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pil-green); }
.pil-ui-sub { margin: 0; padding: 10px 18px 0; font-size: 14px; color: #5e5546; }
/* A line the AI brought from memory. */
.pil-ui-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 14px 4px; padding: 10px 12px; border: 2px solid var(--pil-ink); border-radius: 16px; background: var(--pil-yellow-soft); font-size: 14.5px; line-height: 1.35; }
.pil-ui-note img { width: 26px; flex: none; }
.pil-ui-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pil-ui-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; border-top: 2px solid #e6dcc6; }
.pil-ui-list li > img:first-child { width: 44px; }
.pil-ui-list li.is-new { background: var(--pil-yellow-soft); }
.pil-ui-name { font: 500 15.5px/1.25 var(--pil-body); }
.pil-ui-name small { display: block; font: 400 13px/1.3 var(--pil-body); color: #6e6350; }
.pil-ui-state img { width: 28px; }
.pil-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 12px/1 var(--pil-body); padding: 5px 8px 4px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-yellow); }
.pil-chip img { width: 14px; }
.pil-ui-foot { margin: 0; padding: 12px 18px 16px; border-top: 2px solid #e6dcc6; font-size: 14px; color: #6e6350; }
.pil-btn { display: inline-block; font: 600 15px/1 var(--pil-body); padding: 13px 18px; border: 2px solid var(--pil-ink); border-radius: 14px; background: var(--pil-yellow); color: var(--pil-ink); text-decoration: none; box-shadow: 3px 3px 0 var(--pil-ink); }
/* Empty and waiting states: one brain pose and two short lines. */
.pil-empty { padding: 26px 22px 30px; text-align: center; }
.pil-empty img { width: min(80%, 300px); margin: 0 auto; }
.pil-empty h4 { margin: 6px 0 0; font: 400 28px/1.1 var(--pil-display); }
.pil-empty h4 em { font-weight: 700; }
.pil-empty p { margin: 8px 0 0; font-size: 15px; color: #5e5546; }

/* ── Icons ────────────────────────────────────────────── */
.pil-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.pil-icons li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.pil-icons img { width: 96px; aspect-ratio: 1; object-fit: contain; }
.pil-icons b { display: block; font: 400 24px/1.15 var(--pil-display); }
.pil-icons span { font-size: 15px; color: var(--text-muted, #6e6350); }

@media (max-width: 860px) { .pil-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pil-art { margin-inline: calc(-1 * var(--gutter, 16px)); }
  .pil-art--panel { padding-inline: 4px; }
  .pil-art--panel::before { border-radius: 0; inset: 14% 0 8%; }
  /* tall diagram: drawing on the left, the three captions beside its thirds */
  .pil-diagram { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  .pil-diagram .pil-art { margin-inline: 0 0; margin-left: calc(-1 * var(--gutter, 16px)); }
  .pil-diagram .pil-art--panel::before { inset: 0 0 0 0; border-radius: 0 var(--pil-panel-r) var(--pil-panel-r) 0; }
  .pil-diagram-caps { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 0; padding: 0 0 0 12px; text-align: left; margin-top: clamp(20px, 3vw, 40px); }
  .pil-diagram-caps li { align-self: center; font-size: 19px; }
  .pil-diagram-caps b { margin: 0 0 8px; }
  .pil-icons { grid-template-columns: 1fr; }
}

/* One idea per pill, or a few numbered steps, instead of a paragraph: past two sentences, the
   site says it as points (Gustavo, 23/10). Points sit in a row and wrap; steps read top to bottom. */
.pil-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pil-points li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px 6px; border: 1.5px solid var(--pil-ink); border-radius: 99px; background: var(--pil-paper); font: 500 15px/1.25 var(--pil-body); color: var(--pil-ink); }
.pil-points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pil-yellow); border: 1.5px solid var(--pil-ink); }
.pil-points--names li::before { display: none; }
.pil-steps { list-style: none; counter-reset: pil-step; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.pil-steps li { counter-increment: pil-step; position: relative; min-height: 28px; margin: 0; padding: 2px 0 0 42px; font: 400 17px/1.4 var(--pil-body); color: var(--pil-ink); }
.pil-steps li::before { content: counter(pil-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pil-ink); color: var(--pil-paper); font: 600 14px/1 var(--pil-body); }
.pil-knows { display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--pil-yellow-soft); font: 500 15px/1.3 var(--pil-body); color: var(--pil-ink); }
.pil-knows img { flex: none; width: 34px; height: auto; }
@media (max-width: 560px) { .pil-points li, .pil-steps li, .pil-knows { font-size: 14.5px; } }