/* Validated.Directory 2.0.0 · why does Google change my hours (DIR 2.0.0 part D, BEA-432). Loads after
   /learn/_guide/guide.css. The page's main act, at night, the way the facts travel: three places feed a made-up shop's
   Google profile (a stranger's suggested edit, a data company, the shop's own website), and the profile feeds what an AI
   assistant answers. The hours are set; a suggested edit arrives; left unanswered, a typo on the website backs it and
   Tuesday turns closed; the source is fixed and Tuesday stays open. page.js drives it from the scroll. Still first, for
   scripts off and reduced motion: every place with its wrong value struck and the right one beside it, the right 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(3, minmax(0, 1fr)); gap: 46px 10px; }
.ms-places + .ms-ai { margin-top: 26px; }
.pl-gbp { grid-column: 1 / -1; }
.pl-note { margin-top: 5px; font: 500 11px/1.3 var(--mono); color: var(--cream-2); transition: opacity 0.4s; }
/* The week on the profile: the open days lit gold; Tuesday hatched in barn while it shows closed. */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 7px; }
.wk > span { display: grid; place-items: center; height: 26px; font: 500 11.5px/1 var(--mono); border: 1px solid rgba(240, 230, 207, 0.3); color: var(--cream-2); transition: background-color 0.4s, border-color 0.4s, color 0.4s; }
.wk .op { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--canvas); }
.flag { display: inline-block; margin-left: 6px; padding: 2px 6px 3px; font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #fff8ea; background: var(--barn); vertical-align: 3px; }
.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); }

.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 .g { white-space: nowrap; }
.ms-ai-a .a0, .ms-ai-a .a1 { display: none; }

/* 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(4.6 * 100vh); height: calc(4.6 * 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: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 .pl:not(.on) .v > span, .m .v.bad:not(.on) .o { color: var(--cream); background: transparent; box-shadow: none; }
.m .pl:not(.on) .wk .op { background: transparent; color: var(--cream-2); border-color: rgba(240, 230, 207, 0.3); }
.m .wk .tu.on:not(.fixed) { background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.75) 0 2px, transparent 2px 5px); border-color: #d6705c; color: #f5c9bc; }
.m .pl-note:not(.on) { opacity: 0; }
.m .v .o { text-decoration: none; }
.m .v.bad:not(.fixed) .t, .m .v.bad.fixed .o, .m .v.flip:not(.on) .o { opacity: 0; }
.m .v.flip:not(.on) .t { opacity: 1; }
.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; }

@media (max-width: 360px) {
  .ms-places { gap: 34px 8px; }
  .ms-places + .ms-ai { margin-top: 16px; }
  .pl { padding: 10px 6px 7px; }
  .v { font-size: 11px; }
  .pl-k { font-size: 10px; }
  .wk > span { height: 22px; font-size: 11px; }
  .ms-ask-q, .ms-ai-a { font-size: 16.5px; }
        .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: 64px 16px; }
  .ms-places + .ms-ai { margin-top: 40px; }
  .wk > span { height: 34px; font-size: 13px; }
  .pl-note { font-size: 12.5px; }
  .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; }
      .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; }
}