/* Three faces of one task: Mei's app as a list, a terminal or a pixel town, and
   Omar's usual app beside it. Every face is a screenshot from the image model,
   words included; Par's own controls (the switch, the merge, "Par asks first")
   sit around the pictures, never on them. Every rule starts at .par-yt; tokens
   come from the host with the site's values as fallbacks. */

.par-yt {
  --yt-bg: var(--bg, #f7f0e1);
  --yt-surface: var(--surface, #fffdf8);
  --yt-text: var(--text, #211a10);
  --yt-muted: var(--text-muted, #6e6350);
  --yt-faint: var(--text-faint, #8a7f68);
  --yt-border: var(--border, #e9dec7);
  --yt-border-strong: var(--border-strong, #d8cbaa);
  --yt-ink: var(--accent, #2b231b);
  --yt-display: var(--font-display, "Newsreader", Georgia, serif);
  --yt-body: var(--font-body, "Geist", system-ui, sans-serif);
  --yt-mono: var(--font-mono, "JetBrains Mono", Menlo, monospace);
  --yt-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --yt-term-bg: #0c0f0c;
  --yt-term-ink: #8cf0a0;
}

/* `hidden` always wins inside the module (a face is the one exception, below) */
.par-yt [hidden]:not(.yt-face) { display: none !important; }

/* Par's mark (the kit's drawing) in a small cream disc, on light and dark cards alike */
.par-yt .yt-p { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fffdf6; border: 1.5px solid var(--yt-ink); }
.par-yt .yt-p img { width: 66%; height: auto; }

.par-yt .yt-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 10px var(--yt-body); color: #fff; }
.par-yt .yt-av[data-who="mei"] { background: #b8862a; }
.par-yt .yt-av[data-who="omar"] { background: #4e6a42; }

.par-yt .yt-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--yt-border); background: #fffaf0; }
.par-yt .yt-bar-t { font: 400 18px/1 var(--yt-display); }
.par-yt .yt-bar-s { font: 11px var(--yt-mono); color: var(--yt-faint); }

.par-yt .yt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1.5px solid transparent; font: 500 14px var(--yt-body); text-decoration: none; cursor: pointer; transition: transform .12s var(--yt-ease); }
.par-yt .yt-btn:active { transform: translateY(1px); }
.par-yt .yt-btn-ink { background: var(--yt-ink); color: #fff8ee; }
.par-yt .yt-btn-cream { background: #f7f0e1; color: var(--yt-ink); }
.par-yt .yt-btn-line { background: transparent; color: #f7f0e1; border-color: rgba(247, 240, 225, .4); }
.par-yt .yt-btn-line-ink { background: transparent; color: var(--yt-ink); border-color: var(--yt-border-strong); }
.par-yt .yt-link { all: unset; cursor: pointer; font: 14px var(--yt-body); color: var(--yt-muted); text-decoration: underline; text-underline-offset: 3px; }
.par-yt .yt-btn:focus-visible, .par-yt .yt-sw:focus-visible, .par-yt .yt-link:focus-visible { outline: 2.5px solid #4b84d6; outline-offset: 3px; }

.par-yt .yt-tag { display: inline-block; font: 13px/1.4 var(--yt-body); color: var(--yt-muted); border: 1px solid var(--yt-border-strong); border-radius: 99px; padding: 0 8px; white-space: nowrap; }

/* ---------- the switch ---------- */

.par-yt .yt-faces { margin: 0; }
.par-yt .yt-switch { display: inline-flex; gap: 3px; padding: 4px; border-radius: 99px; background: rgba(0, 0, 0, .05); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(255, 255, 255, .35); }
.par-yt .yt-sw { min-height: 40px; padding: 0 20px; border: 0; border-radius: 99px; background: transparent; font: 500 15px var(--yt-body); color: var(--yt-muted); cursor: pointer; transition: background .18s var(--yt-ease), color .18s var(--yt-ease); }
.par-yt .yt-sw[aria-pressed="true"] { background: var(--yt-surface); color: var(--yt-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 2px 8px -4px rgba(60, 40, 10, .3); }

/* the faces are examples; the last option says Mei can ask for anything */
.par-yt .yt-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.par-yt .yt-pick-k { font: 13px var(--yt-body); color: var(--yt-muted); }
.par-yt .yt-sw-any { border: 1.5px dashed var(--yt-border-strong); color: var(--yt-text); }
.par-yt .yt-sw-any[aria-pressed="true"] { border-color: transparent; }
.par-yt .yt-any:not([hidden]) { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
/* hidden, it keeps out of the stack, so it never makes the pictures' frames taller */
.par-yt [data-yt-ready] .yt-any[hidden] { position: absolute; inset: 0; }
.par-yt .yt-any-t { margin: 0; max-width: 16em; font: 400 clamp(20px, 2.8vw, 32px)/1.15 var(--yt-display); }
.par-yt .yt-any-ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 34em; }
.par-yt .yt-any-ideas li { padding: 8px 14px; border-radius: 99px; background: #fffaf0; border: 1px solid var(--yt-border); font: italic 400 17px/1.25 var(--yt-display); }
/* a task or pull request number: a small detail beside the words, never the sentence */
.par-yt .yt-n { font: 12px var(--yt-body); color: var(--yt-muted); white-space: nowrap; }
.par-yt .yt-gate .yt-n { color: #cbbf9f; }

/* ---------- the two screens: pictures only ---------- */

.par-yt .yt-screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); gap: 28px; align-items: start; margin-top: 18px; }
.par-yt .yt-who { margin: 0 0 8px; font: 400 18px/1.2 var(--yt-display); color: var(--yt-text); }
.par-yt .yt-who span { font: 13px var(--yt-body); color: var(--yt-muted); margin-left: 6px; }
.par-yt .yt-mei { position: relative; display: grid; grid-template-areas: "who" "face"; min-width: 0; }
.par-yt .yt-mei > .yt-who { grid-area: who; }
.par-yt .yt-face, .par-yt .yt-omar-shot { grid-area: face; position: relative; min-width: 0; border: 1px solid var(--yt-border-strong); border-radius: 14px; overflow: hidden; background: var(--yt-surface); box-shadow: 0 1px 0 rgba(60, 40, 10, .05), 0 24px 50px -30px rgba(60, 40, 10, .45); }
.par-yt .yt-shot, .par-yt .yt-town-img { display: block; width: 100%; height: auto; }
/* With the module running, every face keeps its place in the stack and the
   pictures cross-fade; nothing below moves on a switch. */
.par-yt [data-yt-ready] .yt-face[hidden] { display: block; visibility: hidden; opacity: 0; }
.par-yt [data-yt-ready] .yt-face { transition: opacity .22s var(--yt-ease), visibility 0s linear .22s; }
.par-yt [data-yt-ready] .yt-face:not([hidden]) { transition: opacity .22s var(--yt-ease), visibility 0s; }

/* the town: people stand on the front pavement; positions in street pixels (assets/town.json) */
.par-yt .yt-walker, .par-yt .yt-omar-sprite { position: absolute; bottom: calc((864 - 642) / 864 * 100%); transform: translateX(-50%); }
.par-yt .yt-walker { --x: 702; left: calc(var(--x) / 1536 * 100%); width: calc(71 / 1536 * 100%); }
.par-yt .yt-omar-sprite { left: calc(180 / 1536 * 100%); width: calc(52 / 1536 * 100%); }
.par-yt .yt-walker img, .par-yt .yt-omar-sprite img { display: block; width: 100%; height: auto; }

.par-yt .yt-omar { min-width: 0; }

/* ---------- Par's controls, under the screens ---------- */

.par-yt .yt-act { margin-top: 16px; }
.par-yt .yt-act-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--yt-surface); border: 1px solid var(--yt-border-strong); }
.par-yt .yt-act-t { margin: 0; flex: 1 1 18em; font: 400 18px/1.3 var(--yt-display); }
.par-yt .yt-act:has(.yt-gate:not([hidden])) .yt-act-row { display: none; }
.par-yt .yt-gate { background: var(--yt-ink); color: #f7f0e1; border-radius: 14px; padding: 16px 18px; }
.par-yt .yt-gate-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 12.5px var(--yt-body); color: #cbbf9f; }
.par-yt .yt-k-ink { color: var(--yt-muted); }
.par-yt .yt-gate-t { margin: 8px 0 12px; font: 400 21px/1.2 var(--yt-display); }
.par-yt .yt-gate-a, .par-yt .yt-ask-a { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }

.par-yt .yt-cap { margin: 16px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--yt-muted); }
.par-yt .yt-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .par-yt .yt-screens { grid-template-columns: minmax(0, 1fr); }
  .par-yt .yt-omar-shot { max-width: 360px; }
}
@media (max-width: 620px) {
  /* a phone's face is short: the option stays one small block */
  .par-yt .yt-any:not([hidden]) { gap: 10px; padding: 12px; }
  .par-yt .yt-any-ideas { gap: 6px; }
  .par-yt .yt-any-ideas li { padding: 5px 10px; font-size: 13px; }
}
@media (max-width: 420px) {
  .par-yt .yt-sw { padding: 0 14px; font-size: 14px; }
}

.par-yt [data-reduced], .par-yt [data-reduced] *, .par-yt [data-reduced] *::before, .par-yt [data-reduced] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .par-yt *, .par-yt *::before, .par-yt *::after { transition: none !important; animation: none !important; }
}