/* realtime. Every rule starts at .par-realtime; the cards themselves are the kit's
   (kit.css: pil-ui, pil-ui-top, pil-live, pil-ui-list, li.is-new, pil-chip), which the
   page loads. This file only lays them out, draws the dotted paths and moves things:
   outline, colour and motion, never a picture. */

.par-realtime {
  --rt-ink: var(--pil-ink, #1d1a16);
  --rt-muted: var(--text-muted, #6e6350);
  --rt-faint: var(--text-faint, #8a7f68);
  --rt-paper: var(--pil-paper, #fffdf6);
  --rt-cobalt: var(--pil-cobalt, #2747b0);
  --rt-path: #b9c3dc;
  --rt-yellow: var(--pil-yellow, #f5c63c);
  --rt-yellow-soft: var(--pil-yellow-soft, #fff3c9);
  --rt-green: var(--pil-green, #2f6b45);
  --rt-display: var(--pil-display, "Newsreader", Georgia, serif);
  --rt-body: var(--pil-body, "Geist", -apple-system, sans-serif);
  --rt-mono: var(--pil-mono, "JetBrains Mono", Menlo, monospace);
  --rt-gap: 26px;
  --rt-bw: 112px;
  --rt-link-ms: 1600ms;
  /* slow enough to follow on a phone: everything eases in and out */
  --rt-glide: cubic-bezier(0.45, 0, 0.55, 1);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  color: var(--rt-ink);
  font: 400 15px/1.45 var(--rt-body);

  &, & * { box-sizing: border-box; }
  & :where(.rt-brain, .rt-mem, .rt-chat-box) { margin: 0; padding: 0; }
  & :where(button) { font: inherit; color: inherit; cursor: pointer; }
  & :where(button):focus-visible { outline: 3px solid var(--rt-cobalt); outline-offset: 2px; }

  & .rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ---------- the stage: the chat, the brain under it, the two apps under the brain ---------- */
  & .rt-stage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rt-gap); min-width: 0; }
  & .rt-chat { grid-column: 1 / -1; grid-row: 1; }
  & .rt-hub { grid-column: 1 / -1; grid-row: 2; }
  /* Each card as tall as what it holds: the shorter one is not stretched into an empty band. */
  & .rt-left { grid-column: 1; grid-row: 3; align-self: start; }
  & .rt-right { grid-column: 2; grid-row: 3; align-self: start; }

  /* the kit's card, tuned for a small column */
  & .rt-card { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
  & .rt-card .pil-ui-top h3 { font-size: 24px; }
  & .rt-card .pil-ui-list li { grid-template-columns: 40px minmax(0, 1fr); padding: 9px 14px; transition: background-color 900ms var(--rt-glide); }
  & .rt-icon { display: block; width: 40px; height: auto; }
  /* The tick takes 36 px of the row (no taller than a name and its line under it), so a
     chip adds the same height to any row it moves to; its tap area is still 44 px. */
  & .rt-tick { display: block; width: 44px; height: 44px; margin: -4px; padding: 4px; border: 0; background: none; border-radius: 50%; }
  & .rt-tick:disabled { cursor: default; }
  & .rt-tick .rt-icon { width: 100%; height: 100%; object-fit: contain; }
  & .rt-tick.is-tap { animation: rt-tap 800ms ease-out; }
  /* A new line lights up, holds about two seconds, then settles to the kit's pale yellow;
     its check and its chip fade in with it. */
  & :is(.pil-ui-list li, .rt-foot).is-arriving { animation: rt-arrive 2800ms var(--rt-glide) both; }
  & .is-arriving :is(.rt-icon, .pil-chip:not(.rt-ghost)) { animation: rt-fade 700ms var(--rt-glide) both; }
  /* Every chip, with the sparkle or without, in a row or in the foot, is one line of the
     same height; the card keeps that line empty at rest (rt-ghost). */
  & .pil-chip { display: flex; width: max-content; height: 26px; margin-top: 6px; white-space: nowrap; }
  & .pil-chip img { width: auto; height: 14px; }
  & .pil-chip.rt-ghost { visibility: hidden; }
  & .rt-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; color: var(--rt-ink); transition: background-color 900ms var(--rt-glide); }
  /* A card without a foot (the list) must not keep the foot's padding as an empty band. */
  & .rt-foot[hidden] { display: none; }
  & .rt-foot.is-new { background: var(--rt-yellow-soft); }
  & .rt-foot-t b { font-weight: 600; }
  & .rt-bar { display: block; height: 14px; border: 2px solid var(--rt-ink); border-radius: 99px; background: var(--rt-paper); overflow: hidden; }
  & .rt-bar i { display: block; height: 100%; width: calc(var(--done, 0) * 100%); background: var(--rt-yellow); border-right: 2px solid var(--rt-ink); transition: width 1400ms var(--rt-glide); }
  & .rt-foot .pil-chip { margin-top: -1px; }

  /* the brain and its memory line, under the chat */
  & .rt-hub { position: relative; height: 184px; }
  & .rt-brain { position: absolute; left: 50%; top: 18px; width: 260px; margin: 0 0 0 -130px; text-align: center; }
  & .rt-poses { position: relative; display: block; width: var(--rt-bw); height: 104px; margin: 0 auto; }
  & .rt-pose { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 500ms var(--rt-glide); }
  & .rt-pose.is-on { opacity: 1; }
  /* One line that never wraps: when a value changes, the box widens to the new words (the
     script sets the widths), the old value is struck and the new one fades in. */
  & .rt-mem { display: inline-block; margin-top: 2px; padding: 3px 10px 5px; border: 2px solid transparent; border-radius: 12px; font: 400 13.5px/1.35 var(--rt-body); white-space: nowrap; overflow: hidden; vertical-align: top; transition: width 700ms var(--rt-glide), background-color 600ms var(--rt-glide), border-color 600ms var(--rt-glide); }
  & .rt-mem-t { display: block; font: 600 12px/1.3 var(--rt-body); color: var(--rt-muted); }
  & .rt-mem-k, & .rt-mem-v { font-weight: 600; }
  & .rt-mem del { color: var(--rt-faint); font-weight: 400; }
  & .rt-mem ins { text-decoration: none; color: var(--rt-cobalt); }
  & .rt-mem.is-new { border-color: var(--rt-ink); background: var(--rt-yellow-soft); }
  & .rt-mem.is-flip del { animation: rt-strike 900ms var(--rt-glide) both; }
  & .rt-mem.is-flip ins { animation: rt-fade 800ms 500ms var(--rt-glide) both; }
  & .rt-again { position: absolute; top: 12px; right: 0; display: none; min-height: 34px; padding: 4px 12px; border: 1.5px solid var(--rt-ink); border-radius: 99px; background: var(--rt-paper); font-size: 13px; font-weight: 600; }
  &[data-turn] .rt-again { display: block; }

  /* the dotted paths: down from the chat to the brain, and from the brain out and down to
     each app (grid areas of the stage hold them, so they reach the cards at any height) */
  & .rt-arm, & .rt-stem { position: absolute; border: 0 dotted var(--rt-path); transition: border-color 600ms var(--rt-glide); }
  & .rt-stem { left: 50%; top: 0; height: 18px; margin-left: -2px; border-left-width: 4px; }
  /* Both lines named: for a positioned grid child a missing end line means the stage's edge. */
  & .rt-arm { grid-row: 2 / 3; grid-column: 1 / -1; top: 70px; bottom: 0; border-top-width: 4px; }
  & .rt-arm[data-side="left"] { left: calc((100% - var(--rt-gap)) / 4); right: calc(50% + var(--rt-bw) / 2 + 4px); border-left-width: 4px; border-top-left-radius: 22px; }
  & .rt-arm[data-side="right"] { right: calc((100% - var(--rt-gap)) / 4); left: calc(50% + var(--rt-bw) / 2 + 4px); border-right-width: 4px; border-top-right-radius: 22px; }
  & .rt-arm[data-flow], & .rt-stem[data-flow] { border-color: var(--rt-cobalt); }
  & .rt-arm i, & .rt-stem i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--rt-yellow); border: 2px solid var(--rt-ink); opacity: 0; }
  & .rt-stem i { left: 0; top: 0; }
  & .rt-arm[data-side="left"].is-run[data-flow="out"] i { animation: rt-l var(--rt-link-ms) var(--rt-glide) both; }
  & .rt-arm[data-side="left"].is-run[data-flow="in"] i { animation: rt-l var(--rt-link-ms) var(--rt-glide) reverse both; }
  & .rt-arm[data-side="right"].is-run[data-flow="out"] i { animation: rt-r var(--rt-link-ms) var(--rt-glide) both; }
  & .rt-arm[data-side="right"].is-run[data-flow="in"] i { animation: rt-r var(--rt-link-ms) var(--rt-glide) reverse both; }
  & .rt-stem.is-run[data-flow="in"] i { animation: rt-down var(--rt-link-ms) var(--rt-glide) both; }

  /* the chat with the AI */
  & .rt-chat {
    justify-self: center; display: flex; align-items: center; gap: 10px; width: min(440px, 100%); min-width: 0; padding: 8px 8px 8px 14px;
    border: 2.5px solid var(--rt-ink); border-radius: 22px; background: var(--rt-paper); box-shadow: 4px 4px 0 var(--rt-ink);
  }
  & .rt-chat-who { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 600 12px/1 var(--rt-body); }
  & .rt-chat-who img { width: 18px; height: auto; }
  & .rt-chat-box { flex: 1; min-width: 0; margin: 0; font-size: 15px; }
  & .rt-hint { color: var(--rt-faint); }
  & .rt-chat:not([data-empty]) .rt-hint { display: none; }
  & .rt-chat.is-typing .rt-say::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: rt-caret 900ms steps(1) infinite; }
  & .rt-send { flex: none; min-height: 36px; padding: 6px 13px; border: 2px solid var(--rt-ink); border-radius: 12px; background: var(--rt-yellow); font: 600 13px/1 var(--rt-body); transition: background-color 500ms var(--rt-glide); }
  & .rt-chat[data-sent] .rt-send { background: var(--rt-paper); }
  & .rt-send.is-press { animation: rt-press 500ms var(--rt-glide); }

  /* Side by side but tight (a page column): the titles keep to one line, so both apps'
     rows start at the same height. */
  @container (min-width: 560px) and (max-width: 619px) {
    & .rt-card .pil-ui-top h3 { font-size: 21px; }
  }

  /* ---------- narrow: the list first (the ticks start there), then the recipes; the
     paths run down the two gutters beside the cards ---------- */
  @container (max-width: 559px) {
    & .rt-stage { grid-template-columns: 14px minmax(0, 1fr) 14px; column-gap: 0; }
    & .rt-chat { grid-column: 2; flex-wrap: wrap; width: 100%; padding: 10px 10px 10px 12px; }
    & .rt-chat-box { flex-basis: 100%; order: 3; }
    & .rt-send { order: 2; margin-left: auto; min-height: 32px; }
    & .rt-right { grid-column: 2; grid-row: 3; }
    & .rt-left { grid-column: 2; grid-row: 4; margin-top: 18px; }
    & .rt-hub { height: 172px; }
    & .rt-brain { width: calc(100% - 44px); margin-left: calc(22px - 50%); }
    & .rt-poses { width: 100px; height: 92px; }
    & .rt-arm { top: 64px; border-bottom-width: 4px; }
    & .rt-arm[data-side="right"] { grid-row: 2 / 3; left: calc(50% + 54px); right: 7px; bottom: -30px; border-bottom-right-radius: 14px; }
    & .rt-arm[data-side="left"] { grid-row: 2 / 4; left: 7px; right: calc(50% + 54px); bottom: -48px; border-bottom-left-radius: 14px; }
    & .rt-card .pil-ui-top h3 { font-size: 23px; }
  }

  /* ---------- reduced motion: end states, nothing moves ---------- */
  &[data-reduced], &[data-reduced] * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .par-realtime, .par-realtime * { transition: none !important; animation: none !important; }
}

/* Out of the brain: along the top, then down the side to the card. */
@keyframes rt-l { 0% { left: 100%; top: -2px; opacity: 0; } 10% { opacity: 1; } 50% { left: -2px; top: -2px; } 90% { opacity: 1; } 100% { left: -2px; top: 100%; opacity: 0; } }
@keyframes rt-r { 0% { left: 0; top: -2px; opacity: 0; } 10% { opacity: 1; } 50% { left: calc(100% + 2px); top: -2px; } 90% { opacity: 1; } 100% { left: calc(100% + 2px); top: 100%; opacity: 0; } }
@keyframes rt-down { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes rt-arrive { 0% { background-color: var(--pil-paper, #fffdf6); } 20%, 75% { background-color: var(--pil-yellow, #f5c63c); } 100% { background-color: var(--pil-yellow-soft, #fff3c9); } }
@keyframes rt-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rt-strike { 0% { color: var(--pil-ink, #1d1a16); text-decoration-color: transparent; } 100% { color: var(--text-faint, #8a7f68); text-decoration-color: currentColor; } }
@keyframes rt-tap { 0% { box-shadow: 0 0 0 0 rgb(245 198 60 / 0.9); } 100% { box-shadow: 0 0 0 16px rgb(245 198 60 / 0); } }
@keyframes rt-press { 50% { transform: scale(0.9); } }
@keyframes rt-caret { 50% { opacity: 0; } }