/* Validated.Directory 2.0.0 · What do I do when AI gets my business wrong? (DIR 2.0.0 part D, BEA-432). Loads after
   /learn/_guide/guide.css. The main act is a trace: a wrong answer at the top, the question "Where did you get that?"
   sending light back down to the places it read, the stale listing found and fixed where it lives, then the answer
   reported and reading right, the light running back up. Steps follow the scroll and reverse; only opacity and transform
   move. Motion only under html.m. Reduced motion and scripts off: the five steps as a list and the trace at its end,
   the wrong words struck beside the right ones. */

.pk { position: relative; z-index: 1; padding-top: 28px; }
.pk-head h2 { margin-top: 12px; max-width: 18ch; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.08; color: var(--ink); }
.pk-stage { position: relative; overflow: hidden; }
.pk-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pk-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 26px; padding-bottom: 40px; }

/* The words: the sample line, the five steps, their ticks. */
.pk-sample { justify-self: start; padding: 6px 9px 7px; background: var(--paper-hi); border: 1px solid var(--ink); font: 500 12px/1.45 var(--mono); color: var(--ink); }
.pk-steps { display: grid; gap: 16px; margin-top: 16px; }
.pk-steps li { display: grid; gap: 4px; }
.pk-n { font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.pk-k { font: 400 clamp(24px, 6.4vw, 30px)/1.12 var(--display); color: var(--ink); }
.pk-t { max-width: 34ch; font: 400 16px/1.48 var(--sans); color: var(--ink); }
.pk-tk { display: none; }

/* Two words in one place: the wrong one and the right one. Still, the wrong one is struck and the right one follows. */
.pk-sw { display: grid; }
.pk-sw > span { display: block; }
.pk-sw .wr { text-decoration: line-through; text-decoration-color: var(--barn); text-decoration-thickness: 1.5px; }

/* The answer: night, because AI lives at night. */
.pk-map { position: relative; }
.pk-q { position: relative; display: grid; gap: 6px; padding: 12px 14px 13px; background: var(--night); color: var(--cream); border: 1px solid var(--night); box-shadow: 0 24px 40px -30px rgba(35, 31, 26, 0.75); --cm: rgba(35, 31, 26, 0.7); }
.pk-qk { font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.pk-qa { font: 400 clamp(19px, 5.2vw, 23px)/1.22 var(--display); }
.pk-q .pk-sw .wr { opacity: 0.7; }
.pk-you { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--rule); font: 400 15px/1.4 var(--sans); color: var(--cream); }
.pk-you b { margin-right: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.pk-you .yq { margin-bottom: 4px; }
.pk-q .pk-sw .yq { text-decoration: none; opacity: 1; }

/* The places it read. */
.pk-cards { display: grid; gap: 12px; margin: 22px 0 0 42px; }
.pk-c { padding: 9px 11px 11px; background: var(--paper-hi); border: 1px solid var(--ink-2); box-shadow: 0 20px 34px -30px rgba(35, 31, 26, 0.8); --cm: rgba(35, 31, 26, 0.55); }
.pk-ck { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pk-name { font: 400 19px/1.1 var(--display); color: var(--ink); min-width: 0; }
.pk-st { display: grid; justify-items: end; min-width: 0; max-width: 48%; }
.pk-st span { grid-area: 1 / 1; min-width: 0; max-width: 100%; padding: 2px 6px 3px; border: 1px solid currentColor; font: 500 11px/1.3 var(--mono); letter-spacing: 0; text-transform: uppercase; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.pk-st .ok { color: var(--gold-ink); }
.pk-st .no { color: var(--barn); }
.pk-q .pk-st .no { color: #f0a493; }
.pk-st .win { color: var(--ink); background: var(--gold-bright); border-color: var(--gold-ink); }
.pk-st span:not(:last-child) { visibility: hidden; }
.pk-cells { display: grid; gap: 5px; margin-top: 9px; }
.pk-cells > div { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; min-width: 0; max-width: 100%; padding: 4px 8px 5px; border: 1px solid rgba(35, 31, 26, 0.22); }
.pk-cells > div::before, .pk-cells > div::after { content: ""; position: absolute; inset: -1px; pointer-events: none; }
.pk-cells .ok::before, .pk-cells .bad::before { border: 1px solid var(--gold-ink); background: rgba(244, 196, 90, 0.34); }
.pk-cells .bad::after { border: 1px solid var(--barn); background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.2) 0 3px, transparent 3px 7px); opacity: 0; }
.pk-cells dt { position: relative; z-index: 1; min-width: 0; max-width: 100%; font: 400 12.5px/1.3 var(--mono); color: var(--ink-2); }
.pk-cells dd { position: relative; z-index: 1; min-width: 0; max-width: 100%; margin: 0; font: 500 13.5px/1.3 var(--mono); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.pk-cells .none dd { color: var(--ink-2); }

/* With motion: the stage pins and the steps take turns. JS sets s1 to s5 on the stage (s3 means step 3 or later),
   .read on a place once the light reaches it, and .done once the answer is reported. */
.m .pk-track { height: calc(100svh * 4.8); }
.m .pk-stage { position: sticky; top: 0; height: 100svh; }
.m .pk-in { height: 100%; align-content: center; padding-top: 70px; padding-bottom: 22px; gap: 18px; }
.m .pk-steps { margin-top: 12px; }
.m .pk-steps li { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.m .pk-steps li.on { opacity: 1; transform: none; }
.m .pk-tk { display: flex; gap: 6px; margin-top: 12px; }
.pk-tk i { width: 22px; height: 3px; background: rgba(35, 31, 26, 0.2); }
.pk-tk i.on { background: var(--gold-ink); }

.m .pk-sw > span { grid-area: 1 / 1; text-decoration: none; transition: opacity 0.4s; }
.m .pk-q .pk-sw .wr { opacity: 1; }
.m .pk-sw .rt { opacity: 0; }
.m .pk-stage.done .pk-q .pk-sw .wr, .m .s4 .pk-c .pk-sw .wr { opacity: 0; }
.m .pk-stage.done .pk-q .pk-sw .rt, .m .s4 .pk-c .pk-sw .rt { opacity: 1; }
.m .pk-you { opacity: 0; transition: opacity 0.4s; }
.m .s2 .pk-you { opacity: 1; }
.m .pk-you .yq { margin: 0; }
.m .pk-st span { visibility: visible; opacity: 0; transition: opacity 0.3s; }
.m .pk-st span.on { opacity: 1; }

.m .pk-c :is(.pk-name, .pk-cells) { opacity: 0.78; transition: opacity 0.4s; }
.m .pk-c.read :is(.pk-name, .pk-cells) { opacity: 1; }
.m .pk-cells dd { opacity: 0; transform: translateY(3px); transition: opacity 0.3s, transform 0.3s; }
.m .pk-c.read .pk-cells dd { opacity: 1; transform: none; }
.m .pk-c.read .pk-cells > div:nth-child(2) dd { transition-delay: 0.08s; }
.m .pk-cells > div::before, .m .pk-cells > div::after { opacity: 0; transition: opacity 0.4s; }
.m .s3 .pk-cells .ok::before { opacity: 1; }
.m .s3 .pk-cells .bad::after { opacity: 1; }
.m .s4 .pk-cells .bad::after { opacity: 0; }
.m .s4 .pk-cells .bad::before { opacity: 1; }

@media (max-width: 360px) {
  .pk-cards { margin-left: 36px; gap: 10px; }
  .pk-c { padding: 8px 9px 9px; }
  .pk-name { font-size: 18px; }
  .pk-t { font-size: 15.5px; }
  .pk-you { font-size: 14.5px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .m .pk-in { padding-top: 62px; gap: 12px; }
  .m .pk-steps { margin-top: 8px; }
  .pk-k { font-size: 23px; }
  .pk-cards { margin-top: 16px; gap: 9px; }
  .pk-q { padding: 9px 12px 11px; }
  .pk-qa { font-size: 19px; }
}

/* Laptops: the words on the left; the answer above, the two places it read below, spread across the land. */
@media (min-width: 900px) {
  .pk { padding-top: 56px; }
  .pk-in { grid-template-columns: minmax(300px, 380px) minmax(0, 760px); column-gap: clamp(40px, 6vw, 96px); align-items: center; justify-content: space-between; }
  .pk-k { font-size: clamp(32px, 3vw, 40px); }
  .pk-t { font-size: 19px; }
  .pk-sample { font-size: 12.5px; }
  .pk-q { width: min(560px, 100%); margin-inline: auto; padding: 16px 20px 18px; }
  .pk-qa { font-size: 27px; }
  .pk-you { font-size: 16.5px; }
  .pk-cards { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: space-around; align-items: start; gap: 40px; margin: 150px 0 0; }
  .pk-c { padding: 12px 14px 14px; }
  .pk-c[data-who="1"] { margin-top: 64px; }
  .pk-name { font-size: 23px; }
  .pk-cells dd { font-size: 14px; }
  .m .pk-in { padding-top: 84px; padding-bottom: 40px; }
}