/* Validated.Directory 2.0.0 · How do I check what AI says? (DIR 2.0.0 part D, BEA-432). Loads after guide.css. The free
   check's form, and the main act: one question a new customer asks goes out to four AI assistants, the answers come
   back, each is read (named and right, named but wrong, not named), and the month's grid of five questions fills.
   page.js drives it. Still first, for scripts off and reduced motion: the question, the four answers read, the grid,
   every step written out. In motion the stage pins for --xs-len screens. A made-up plumber, and it says so. */

/* ==== The free check's form (sent to the live directory Worker's POST /check; page.js) =============================== */
.g-check { position: relative; z-index: 1; margin-top: 8px; padding: 22px 18px 24px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.42); box-shadow: 0 28px 50px -38px rgba(35, 31, 26, 0.6); max-width: 760px; }
.g-check h2 { margin: 0; font-size: clamp(28px, 7.4vw, 42px); line-height: 1.08; color: var(--ink); }
.g-check > p { margin-top: 10px; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--ink); }
.g-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.g-form[hidden] { display: none; }
.g-fl { display: grid; gap: 12px; min-width: 0; }
.g-fl > span { font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.g-fl .cm { display: block; }
.g-form .fine { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.g-got { display: none; gap: 10px; margin-top: 18px; }
.g-got:target, .g-got.show { display: grid; }
.g-got .brand-day { align-items: flex-start; }
.g-got h3 { font: 400 clamp(26px, 6.6vw, 36px)/1.1 var(--display); color: var(--ink); }
.g-got p { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 52ch; }
.g-got .fine { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.g-act .btn[aria-busy="true"] { cursor: progress; opacity: 0.72; }
.send-err { font: 500 14px/1.5 var(--mono); color: #8a2f22; max-width: 52ch; outline: none; }
.send-err[hidden] { display: none; }
.send-err a { color: inherit; overflow-wrap: anywhere; }

/* ==== The scene ======================================================================================================= */
.xs { position: relative; z-index: 1; }
.xs-stage { position: relative; display: grid; gap: 22px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 44px var(--gut-r) 44px var(--gut); }
.xs-head h2 { margin-top: 10px; max-width: 16ch; font-size: clamp(30px, 8.4vw, 52px); line-height: 1.06; color: var(--ink); }
.xs-tag { display: inline-block; max-width: 46ch; margin-top: 12px; padding: 6px 10px 7px; border: 1px solid var(--ink-2); background: var(--paper-hi); font: 500 12px/1.4 var(--mono); color: var(--ink); }
.xs-art { position: relative; min-width: 0; }
.xs-fit { position: relative; display: grid; gap: 22px; width: min(100%, 470px); margin: 0 auto; }
.xs-fx { display: none; }
.js .xs-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* The question: a card at the top, in Caslon, its kicker in mono. */
.cq { position: relative; z-index: 2; padding: 11px 13px 12px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.cq-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cq-a { margin-top: 4px; font: 400 clamp(19px, 5.4vw, 23px)/1.2 var(--display); color: var(--ink); }

/* The four answers: panels of night, since AI lives at night (FOUNDATION 2), two by two. */
.cbox { position: relative; display: grid; gap: 16px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ca { position: relative; z-index: 2; display: grid; align-content: start; gap: 6px; min-height: 132px; padding: 9px 10px 10px; background: linear-gradient(180deg, var(--night-2), var(--night)); border: 1px solid rgba(35, 31, 26, 0.55); color: var(--cream); box-shadow: 0 18px 30px -22px rgba(10, 16, 36, 0.8); }
.ca-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.ca-a { font: 400 15px/1.28 var(--display); color: var(--white); }
.ca-a .ok, .ca-a .bad { padding: 0 3px; font: 500 0.82em/1.3 var(--mono); white-space: nowrap; }
.ca-v { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--rule); font: 600 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); }
.ca-v i, .cg i { flex: 0 0 auto; display: inline-block; width: 11px; height: 11px; border: 1px solid currentColor; }
.ca-v.y { color: var(--gold-bright); }
.ca-v.y i, .cg i.y { background: var(--gold-bright); border-color: var(--gold-ink); }
.ca-v.w { color: #f0b3a6; }
.ca-v.w i, .cg i.w { background: repeating-linear-gradient(135deg, var(--barn) 0 2px, rgba(166, 75, 59, 0.25) 2px 4px); border-color: var(--barn); }
.ca-v.n { color: var(--cream-2); }
.ca-v.n i { background: transparent; }
/* read: the right phone lights gold, the old one takes the barn hatch */
.ca-a .ok { color: var(--canvas); background: var(--gold-bright); }
.ca-a .bad { color: #fff3ee; background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.9) 0 2px, rgba(166, 75, 59, 0.55) 2px 5px); box-shadow: inset 0 -2px 0 #f0b3a6; }

/* The month's grid: five questions down the side, four AI assistants across the top. */
.cg { position: relative; z-index: 2; padding: 10px 12px 12px; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.45); }
.cg-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cg table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.cg th, .cg td { padding: 6px 2px; border-top: 1px solid var(--rule-ink); font: 500 9.5px/1.25 var(--mono); color: var(--ink-2); text-align: center; vertical-align: middle; }
.cg thead th { border-top: 0; letter-spacing: 0.02em; }
.cg tbody th { text-align: left; font: 600 12.5px/1.25 var(--sans); color: var(--ink); padding-right: 6px; }
.cg i { width: 14px; height: 14px; border-color: rgba(35, 31, 26, 0.45); }
.cg tr.now th { color: var(--ink); }
.cg tr.now { background: rgba(244, 196, 90, 0.16); }
.cg-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 10.5px/1.3 var(--mono); color: var(--ink-2); }
.cg-key span { display: inline-flex; align-items: center; gap: 6px; }
.cg-key i { width: 11px; height: 11px; }

/* The steps, written out (still); in motion one at a time with its ticks. */
.xs-steps { display: grid; gap: 14px; }
.xs-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: start; gap: 3px 10px; padding-top: 12px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.xs-n { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.xs-k { font: 600 16.5px/1.3 var(--sans); color: var(--ink); }
.xs-t { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; color: var(--ink); }
.xs-tk { display: none; }

.m .xs-track { height: calc(var(--xs-len, 5.4) * 100vh); height: calc(var(--xs-len, 5.4) * 100svh); }
.m .xs-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 .xs-head h2 { margin-top: 6px; font-size: clamp(24px, 7vw, 44px); }
.m .xs-tag { margin-top: 8px; padding: 4px 8px 5px; font-size: 11.5px; }
.m .xs-art { display: grid; place-items: start center; min-height: 0; }
.m .xs-out { padding-top: 10px; border-top: 1px solid rgba(35, 31, 26, 0.24); }
.m .xs-steps { gap: 0; }
.m .xs-steps > li { grid-area: 1 / 1; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.m .xs-steps > li.cur { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s; }
.m .xs-t { min-height: calc(3 * 1.45em); }
.m .xs-tk { display: flex; gap: 4px; margin-top: 8px; }
.xs-tk i { flex: 0 1 22px; height: 4px; background: rgba(35, 31, 26, 0.18); transition: background-color 0.3s; }
.xs-tk i.on { background: var(--gold-ink); }
/* the moves: the question arrives, the answers write in, the verdicts land, the cards give way to the grid */
.m .xs [data-at], .m .xs [data-off] { transition: opacity 0.45s, transform 0.45s; }
.m .xs [data-at]:not(.on) { opacity: 0; transform: translateY(6px); }
.m .cbox { display: grid; }
.m .cbox > * { grid-area: 1 / 1; }
.m .cards.off { opacity: 0; transform: scale(0.97); pointer-events: none; }
.m .cg { align-self: start; }
.m .ca-a .ok, .m .ca-a .bad { transition: background-color 0.4s, color 0.4s, box-shadow 0.4s; }
.m .xs:not([data-k="4"]):not([data-k="5"]) .ca-a .ok, .m .xs:not([data-k="4"]):not([data-k="5"]) .ca-a .bad { color: inherit; background: transparent; box-shadow: none; }
.m .cg tbody tr { transition: opacity 0.4s; }
.m .cg tbody tr:not(.now):not(.lit) td i { opacity: 0; }
.m .cg tbody td i { transition: opacity 0.4s; }
html:not(.m) .cg { margin-top: 4px; }

@media (max-width: 380px) {
  .ca { min-height: 122px; padding: 8px 8px 9px; }
  .ca-a { font-size: 14px; }
  .cg tbody th { font-size: 11.5px; }
  .cg th, .cg td { font-size: 8.5px; padding: 5px 1px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .m .xs-head h2 { font-size: clamp(21px, 6.2vw, 26px); }
  .m .xs-stage { padding-top: calc(68px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .m .xs-t { min-height: calc(3 * 1.4em); font-size: 15px; line-height: 1.4; }
  .m .xs-tag, .m .xs-head .eyebrow { display: none; }
}
@media (min-width: 600px) {
  .g-check { padding: 28px 28px 30px; }
}
@media (min-width: 900px) {
  .xs-stage { max-width: none; width: 100%; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 56px); padding: 72px var(--read-x) 72px; }
  .xs-head { grid-column: 1; grid-row: 1; }
  .xs-out { grid-column: 1; grid-row: 2; }
  .xs-art { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .xs-fit { width: min(100%, 560px); gap: 26px; }
  .m .xs-stage { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 108px; padding-bottom: 48px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .xs-art { grid-row: 1 / 4; align-self: stretch; }   /* page.js centres the scaled drawing in its room */
  .m .xs-out { grid-row: 3; align-self: end; }
  .m .xs-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .xs-t { font-size: 21px; line-height: 1.4; }
  .m .xs-t { min-height: calc(3 * 1.4em); }
  .xs-k { font-size: 20px; }
  .cq-a { font-size: 26px; }
  .ca { min-height: 150px; padding: 12px 13px 13px; gap: 8px; }
  .ca-a { font-size: 18px; }
  .ca-k { font-size: 11.5px; }
  .cg { padding: 14px 16px 16px; }
  .cg th, .cg td { font-size: 11px; padding: 8px 4px; }
  .cg tbody th { font-size: 14.5px; }
}