/* ============================================================================
   Depth 01 · the AI-bias prompt + the industry paragraph.

   Loaded last, after theme.css, so the light-mode overrides at the bottom of
   this file can live beside the dark ones they answer — the feature stays in
   one file and one <link> still removes all of it.

   Nothing here restyles an existing selector. `.selftest[data-d01-replaced]`
   is the single exception and it only hides markup this feature supersedes:
   drop the <link> and the original self-test reappears exactly as it was.
   ============================================================================ */

/* The predecessor block. Hidden rather than deleted so the revert is a link
   removal and not a restoration job. */
.selftest[data-d01-replaced]{display:none}

.d01{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}

/* The positioning paragraph, which sits BELOW the prompt at the foot of the
   card — the founder's call. The prompt is the thing to act on, and 150 words
   in front of it would bury the action. Set at reading width and at the same
   colour as the page's other body copy — it is the argument, not a caption.

   26px of clearance from the dashed prompt box above it: the paragraph is a
   separate beat, not a caption hanging off the box. */
.d01-copy{color:var(--ink-2);font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.68;
  max-width:60ch;margin:26px 0 0}

.d01-test{border:1px dashed var(--line-2);border-radius:14px;padding:18px 20px;
  background:rgba(14,15,18,.45)}
.d01-test .d01-stl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-bright);display:block;margin-bottom:10px}

/* The prompt itself. It has to survive being read on a 390px screen and being
   dragged over with a cursor, so it wraps rather than scrolls: a prompt you
   have to scroll sideways to read is a prompt nobody pastes. */
.d01-prompt{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.5;
  color:var(--ink);margin:0;
  white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:none}
.d01-prompt .v{color:var(--accent-bright)}
/* The unfilled town. Underlined like a blank on a form, because that is what
   it is — the visitor is meant to notice it is theirs to fill. */
.d01-prompt .blank{color:var(--ink-4);border-bottom:1px dashed var(--ink-4);
  padding-bottom:1px;font-style:italic}

.d01-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
/* Sized around the placeholder, not the answer. "Enter your city, click copy
   the prompt" is an instruction rather than a hint, so it has to survive being
   read in full — a city name needs a fraction of this width. */
.d01-town{flex:1 1 300px;min-width:0;max-width:340px;
  background:rgba(14,15,18,.55);border:1px solid var(--line-2);border-radius:12px;
  color:var(--ink);font-family:var(--sans);font-size:15px;padding:11px 14px}
/* The placeholder rides smaller than the value typed over it, for the same
   reason: 38 characters at 15px do not fit a field a city name would rattle
   around in, and a truncated instruction is not an instruction. */
.d01-town::placeholder{color:var(--ink-4);font-size:13px}
.d01-town:focus{outline:none;border-color:var(--accent-bright)}

.d01-copybtn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line-2);border-radius:100px;padding:10px 16px;cursor:pointer;
  transition:border-color .16s,color .16s;flex:0 0 auto}
.d01-copybtn:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.d01-copybtn:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.d01-copybtn[data-state="ok"]{border-color:var(--positive);color:var(--positive)}

/* Copy feedback is announced, not just coloured — the whole point of the
   control is that the visitor knows something landed on their clipboard. */
.d01-msg{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-4);margin:0;flex:1 1 100%;min-height:1.4em;line-height:1.4}
.d01-msg[data-state="ok"]{color:var(--positive)}
.d01-msg[data-state="ask"]{color:var(--accent-bright)}

.d01-note{font-size:.86rem;color:var(--ink-3);line-height:1.55;margin-top:14px}

/* Phones: the town field and the button each get a full row rather than being
   squeezed onto one. 390px minus the card's padding leaves ~236px, which is
   not enough for both without the button losing its tap target. The explicit
   min-height is that tap target — the pill's padding alone measured 41px on a
   390px screen, under the 44px minimum the footer nav already respects. */
@media (max-width:520px){
  .d01-row{gap:12px}
  .d01-town{flex:1 1 100%;max-width:none}
  /* 390px minus the card's padding leaves the field 236px wide, and the
     placeholder is a full instruction rather than a word. At 13px it clips by
     three pixels — near enough to fit that it reads as a rendering bug. */
  .d01-town::placeholder{font-size:12px}
  .d01-copybtn{flex:1 1 100%;min-height:46px;
    display:inline-flex;align-items:center;justify-content:center}
}

/* ---- light theme ---- */
:root[data-theme="light"] .d01-test{background:rgba(255,255,255,.6)}
:root[data-theme="light"] .d01-town{background:#FFFFFF;border-color:var(--line-2);color:var(--ink)}
:root[data-theme="light"] .d01-town::placeholder{color:var(--ink-4)}

@media (prefers-reduced-motion:reduce){
  .d01-copybtn{transition:none}
}