/* Validated.Directory 2.0.0 · why must my facts match everywhere (DIR 2.0.0 part D, BEA-432). Loads after
   /learn/_guide/guide.css. The page's main act: a made-up plumber's four facts read from four places at night, the way an
   AI assistant reads them. The trails light out to each place, the website's copy is the true version, the copies that
   disagree light barn, the big listings are fixed first, and when all sixteen facts agree the light runs into one clear
   answer. page.js drives it from the scroll. Still first, for scripts off and reduced motion: every copy with its old
   value struck and the true one beside it, the clear answer, every step written out. Motion only under html.m. */

.ms { position: relative; z-index: 1; background: var(--canvas); color: var(--cream); }
.ms-stage { position: relative; display: grid; gap: 24px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 40px var(--gut-r) 56px var(--gut); }
.ms-head, .ms-art, .ms-out { position: relative; z-index: 2; min-width: 0; }
.ms-head h2 { margin-top: 10px; max-width: 15ch; font-size: clamp(30px, 8.6vw, 54px); line-height: 1.06; color: var(--white); }
.ms-fit { position: relative; display: grid; gap: 14px; width: 100%; max-width: 540px; margin: 0 auto; }
.ms-fx { display: none; }

/* The customer's question and the AI assistant's answer, in one box at the head of every trail. */
.pl-k, .ms-ai-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-2); }
.ms-ask-q { margin-top: 3px; font: 400 18px/1.24 var(--display); color: var(--cream-2); }
.ms-ai-k2 { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); color: var(--gold-bright); }

/* The four places: a card each, the same four facts in the same order (name, address, phone, hours). */
.ms-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.pl { position: relative; z-index: 2; padding: 10px 9px 8px; background: rgba(29, 42, 58, 0.94); border: 1px solid rgba(240, 230, 207, 0.3); transition: border-color 0.4s, opacity 0.45s; }
.pl-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.pl-tag { position: absolute; top: -8px; right: 9px; padding: 1px 5px 2px; background: var(--canvas); border: 1px solid rgba(244, 196, 90, 0.75); font-size: 10.5px; line-height: 1.2; color: var(--gold-bright); transition: opacity 0.4s; }
.pl ul { display: grid; gap: 2px; margin-top: 5px; }
.v { display: grid; justify-items: start; font: 500 12.5px/1.3 var(--mono); color: var(--cream); }
.v > span { padding: 0 3px; transition: opacity 0.4s, background-color 0.4s, color 0.4s, box-shadow 0.4s; }
/* agreeing: lit gold. Disagreeing: the old value hatched in barn, struck in the still, with the true value under it. */
.v > span, .v .t { color: var(--gold-bright); box-shadow: inset 0 -1px 0 rgba(244, 196, 90, 0.55); }
.v .o { color: #f5c9bc; background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.55) 0 2px, transparent 2px 5px); box-shadow: inset 0 -2px 0 var(--barn); text-decoration: line-through; text-decoration-color: rgba(245, 201, 188, 0.8); }
.pl-web { border-color: rgba(244, 196, 90, 0.7); }

.ms-ai { position: relative; z-index: 2; padding: 10px 13px 12px; background: linear-gradient(180deg, var(--night), var(--canvas)); border: 1px solid rgba(244, 196, 90, 0.5); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.9); }
.ms-ai-a { display: grid; margin-top: 3px; font: 400 18px/1.3 var(--display); color: var(--white); }
.ms-ai-a > span { grid-area: 1 / 1; transition: opacity 0.45s; }
.ms-ai-a .g { padding: 0 3px; font: 500 0.78em/1 var(--mono); color: var(--canvas); background: var(--gold-bright); }
.ms-ai-a .r, .ms-ai-a .g { white-space: nowrap; }
.ms-ai-a .r { padding: 0 3px; font: 500 0.78em/1 var(--mono); color: #f5c9bc; outline: 1px dashed rgba(245, 201, 188, 0.75); outline-offset: -1px; }   /* in doubt: which one? */
.ms-ai-a .a0, .ms-ai-a .a1 { display: none; }
.ms-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 500 13px/1.3 var(--mono); color: var(--cream); }
.ms-n { color: var(--gold-bright); }
.ms-meter { display: flex; gap: 2px; }
.ms-meter i { width: 9px; height: 9px; border: 1px solid rgba(240, 230, 207, 0.35); background: var(--gold-bright); border-color: var(--gold-bright); transition: background-color 0.35s, border-color 0.35s; }
.ms-meter i:nth-child(4n):not(:last-child) { margin-right: 5px; }

/* The steps. */
.ms-steps { display: grid; gap: 14px; }
.ms-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ms-sn { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-2); }
.ms-sk { font: 600 16.5px/1.3 var(--sans); color: var(--white); }
.ms-st { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; color: var(--cream); }
.ms-tk { display: none; }

/* ==== In motion: the stage pins; the drawing in the middle is scaled to its room; the step in hand at the foot ======= */
.m .ms-track { height: calc(5.4 * 100vh); height: calc(5.4 * 100svh); }
.m .ms-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .ms-head h2 { margin-top: 6px; font-size: clamp(24px, 7vw, 44px); }
.m .ms-art { display: grid; place-items: center; min-height: 0; }
.js .ms-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.m .ms-steps { gap: 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.m .ms-steps > li { grid-area: 1 / 1; align-content: start; padding-top: 0; border-top: 0; opacity: 0; transition: opacity 0.35s; }
.m .ms-steps > li.cur { opacity: 1; }
.m .ms-st { min-height: calc(3 * 1.45em); }
.m .ms-tk { display: flex; gap: 4px; margin-top: 8px; }
.m .ms-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.2); transition: background-color 0.3s; }
.m .ms-tk i.on { background: var(--gold-bright); }

/* the states page.js sets: a place .on once its trail reaches it; a value .on once it is compared, .fixed once corrected */
.m .pl:not(.on) { opacity: 0.32; }
.m .pl-web:not(.on), .m .pl:not(.agree) { border-color: rgba(240, 230, 207, 0.3); }
.m .pl.agree { border-color: rgba(244, 196, 90, 0.7); }
.m .pl.off { border-color: rgba(214, 112, 92, 0.85); }
.m .pl-tag:not(.on) { opacity: 0; }
.m .v { justify-items: stretch; }
.m .v > span { grid-area: 1 / 1; justify-self: start; }
.m .v:not(.on) > span { color: var(--cream); background: transparent; box-shadow: none; }
.m .v .o { text-decoration: none; }
.m .v.bad:not(.fixed) .t, .m .v.bad.fixed .o { opacity: 0; }
.m .ms-ai-a .a0, .m .ms-ai-a .a1 { display: block; }
.m .a0.on, .m .a1:not(.on), .m .a1.fixed, .m .a2:not(.on) { opacity: 0; }
.m .ms-tally:not(.on) { opacity: 0; }
.ms-tally { transition: opacity 0.4s, border-color 0.4s; }
.m .ms-tally.done { border-top-color: rgba(244, 196, 90, 0.6); }
.m .ms-meter i:not(.on) { background: transparent; border-color: rgba(240, 230, 207, 0.35); }
.m .ms-meter i.on.off { background: repeating-linear-gradient(135deg, var(--barn) 0 2px, transparent 2px 4px); border-color: #d6705c; }

@media (max-width: 360px) {
  .ms-places { gap: 10px 18px; }
  .pl { padding: 10px 7px 8px; }
  .v { font-size: 12px; }
  .ms-ask-q, .ms-ai-a { font-size: 16.5px; }
  .ms-meter i { width: 6px; height: 6px; }
  .ms-meter i:nth-child(4n):not(:last-child) { margin-right: 2px; }
  .ms-tally { font-size: 12px; }
  .m .ms-head h2 { font-size: 23px; }
  .m .ms-st { font-size: 15px; }
  .m .ms-fit { gap: 11px; }
}
/* short phones (667 to 720 tall): a little less round the drawing, so it keeps nearly its full size */
@media (max-width: 899px) and (max-height: 720px) {
  .m .ms-stage { gap: 10px; padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
  .m .ms-head h2 { margin-top: 4px; font-size: 22px; }
  .m .ms-fit { gap: 10px; }
  .m .ms-st { font-size: 15px; }
  .ms-ask-q, .ms-ai-a { font-size: 16.5px; }
  .pl-k, .ms-ai-k { font-size: 10.5px; }
}
@media (min-width: 600px) {
  .v { font-size: 14px; }
  .pl { padding: 10px 12px 11px; }
  .ms-ask-q, .ms-ai-a { font-size: 21px; }
}
/* Laptops: the words at the left, the drawing at the right, as the waterfall does. */
@media (min-width: 900px) {
  .ms-stage { max-width: none; width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; padding-top: 72px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .ms-head { grid-column: 1; grid-row: 1; }
  .ms-art { grid-column: 2; grid-row: 1 / span 2; }
  .ms-out { grid-column: 1; grid-row: 2; }
  .ms-fit { max-width: 680px; gap: 20px; }
  .ms-places { gap: 18px 38px; }
  .pl { padding: 14px 16px 14px; }
  .pl-k, .ms-ask-k, .ms-ai-k { font-size: 12px; }
  .v { font-size: 15.5px; }
  .pl ul { gap: 5px; margin-top: 9px; }
  .ms-ai { padding: 14px 18px 16px; }
  .ms-ask-q, .ms-ai-a { font-size: 24px; }
  .ms-tally { font-size: 14px; }
  .ms-meter i { width: 11px; height: 11px; }
  .m .ms-stage { grid-template-rows: auto minmax(0, 1fr); padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: 48px; }
  .m .ms-head h2 { font-size: clamp(36px, 3.6vw, 52px); }
  .m .ms-out { align-self: end; }
  .ms-sk { font-size: 19px; }
  .ms-st { font-size: 17.5px; }
}