/*
 * Component styles for /tools/ai-search-interface-design/ - the "Building
 * an AI search interface" walkthrough. Ported from a standalone HTML
 * artifact (18 mocked search/AI screens comparing a generic search
 * engine, "Meridian", against a council's own "Riverside AI") into real,
 * editable ProcessWire pages. See ai-search-hub.php, ai-search-tool.php
 * and ai-search-step.php.
 *
 * Loaded only on this section's templates via pw-append (not part of
 * the site-wide Tailwind build), so everything here is deliberately
 * scoped under .ai-search-page rather than touching :root/body/html -
 * this stylesheet must never leak into the rest of the site. Several
 * class names from the original artifact were renamed to avoid clashing
 * with real site-wide classes of the same name (.eyebrow in particular
 * plays a different role already - see tailwind-source.css).
 *
 * Typography is Bitter throughout (the site's own font, already loaded
 * on every page via tailwind-source.css, so no new @font-face rules are
 * needed here) - the one exception is Meridian's own mocked panel
 * (.mer), which stays on a plain system-UI sans stack rather than
 * Bitter, so it still reads as someone else's product pasted into the
 * page rather than pop pop's own brand voice. That costs nothing to
 * load, since it's just the OS default, not a webfont.
 */


.ai-search-page {
  --paper: #F5EFEE; --surface: #FBF7F6; --ink: #20141A; --ink-soft: #5A424C;
  --accent: #DD227C; --accent-text: #CB1F72; --accent-tint: #FCEDF5; --accent-contrast: #FFFFFF;
  --caution: #8A5A08; --caution-tint: #F1E4CC; --error: #C4271F;
  --line: #DCC9CF; --line-strong: #C9AEB8; --shadow: 32 20 26;
  --note-bg: #F1EEE4; --note-line: #B9AF98; --note-tape: rgba(90, 80, 55, 0.16);
  --riverside: #1F7A4D; --riverside-text: #166039; --riverside-tint: #E3F1E9; --riverside-contrast: #FFFFFF;

  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(var(--shadow), 0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(var(--shadow), 0.05) 0 1px, transparent 1px 32px),
    var(--paper);
  color: var(--ink);
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Vertical rhythm only - no horizontal padding here. This sits inside
     .container, which already handles the responsive side margins (see
     tailwind-source.css); adding our own on top of that was double
     padding, squeezing the readable column narrower than every other
     page on mobile. */
  padding: 1.5rem 0 3rem;
}

.ai-search-page h1, .ai-search-page h2, .ai-search-page h3 {
  font-family: 'Bitter', Georgia, serif;
}

/* Riverside AI screens use the council's green as their accent instead
   of pop pop's own pink, so it's never ambiguous which product a screen
   belongs to. Applied via a modifier class on the .exhibit wrapper. */
.ai-search-page.ai-riverside-skin {
  --accent: var(--riverside);
  --accent-text: var(--riverside-text);
  --accent-tint: var(--riverside-tint);
  --accent-contrast: var(--riverside-contrast);
}

.ai-search-page .ai-eyebrow {
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); margin: 0 0 0.9em;
}
.ai-search-page .masthead {
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}
.ai-search-page .masthead h1 {
  font-family: 'Bitter', Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 1.55rem + 2vw, 3.05rem);
  line-height: 1.1; letter-spacing: -0.005em; margin: 0 0 0.55em; text-wrap: balance;
}
.ai-search-page .dek { font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 34rem; margin: 0; }
.ai-search-page .dek em { font-style: italic; color: var(--ink); }

.ai-search-page .scenario {
  display: flex; flex-direction: column; gap: 0.4em;
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  padding: 1.1rem 1.4rem;
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}
.ai-search-page .scenario-label {
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-text); margin: 0;
}
.ai-search-page .scenario-text {
  font-family: 'Bitter', Georgia, serif; font-size: 1.15rem; line-height: 1.55;
  color: var(--ink); margin: 0;
}
.ai-search-page .scenario-text em { font-style: italic; color: var(--accent-text); }

.ai-search-page .exhibit-note {
  font-size: 0.95rem; font-style: italic; color: var(--ink-soft);
  margin: 0 0 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line);
}
.ai-search-page .exhibit-frame {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Annotation: OUR commentary pointing at something specific inside a
   mocked result - deliberately NOT styled as part of the mocked
   system's own UI, or even of our own branded (pink) system. Neutral
   kraft-note colours, a slight rotation, a drop shadow and a "tape"
   accent make it read as something physically stuck onto the page
   after the fact. Set in italic Bitter - the narrator's voice
   throughout this piece. (Used to carry a hand-drawn arrow pointing
   back at the thing it's annotating too, at both the mobile and 80rem+
   layouts - dropped, it wasn't earning its keep at either size once
   the note itself already sits right next to what it's about.)
   IMPORTANT: its DOM position still determines where it lands - in
   normal flow (mobile) it appears right after whatever precedes it,
   and at 80rem+ it leaves the page into the side gutter. So the
   annotation markup must still sit immediately after the exact
   element it's annotating, not just "somewhere in the same block".
   Progressive enhancement: below 80rem viewport width it sits in
   normal flow just under the thing it's about. At 80rem+ there's
   enough gutter beside the page column for it to genuinely leave the
   page - positioned via `left: 100%` against .exhibit-frame (the
   nearest positioned ancestor, via :has() below), which needs no JS
   measurement and can't drift on resize. */
.ai-search-page .annotation {
  position: relative;
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem 0.75rem 1.1rem;
  max-width: 24rem;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: 2px;
  box-shadow: 0 5px 14px -4px rgba(var(--shadow), 0.32), 0 1px 3px rgba(var(--shadow), 0.2);
  transform: rotate(-1.1deg);
}
.ai-search-page .annotation::before {
  content: "";
  position: absolute; top: -0.55rem; left: 50%;
  width: 2.2rem; height: 0.85rem;
  background: var(--note-tape);
  transform: translateX(-50%) rotate(-3deg);
}
.ai-search-page .annotation-text {
  font-family: 'Bitter', Georgia, serif; font-style: italic;
  font-size: 0.95rem; line-height: 1.5; color: var(--ink); margin: 0;
}

.ai-search-page :has(> .annotation) { position: relative; }

@media (min-width: 80rem) {
  .ai-search-page .annotation {
    position: absolute;
    top: 0;
    left: 100%;
    margin: 0 0 0 1.75rem;
    width: 14rem;
    max-width: 14rem;
  }
}

/* ============================================================
   Form mockups. Rules follow Adam Silver's "Form Design: From Zero to
   Hero" (adamsilver.io): every input has a real label; hint text, not
   placeholder text, carries examples; inputs/buttons are >=44px tall;
   button text is a verb, sentence case.
   Steps in Meridian's voice render inside a fixed, always-light .mer
   panel (a "screenshot" of someone else's product) using Meridian's
   own brand colours and a plain system sans, deliberately not Bitter,
   to read as an outside tool pasted into our own case-file framing.
   Riverside's own screens carry a small riverside.gov.uk mark wherever
   the AI composer appears, so it's never ambiguous which site an AI
   box belongs to.
   ============================================================ */
.ai-search-page .mock { font-family: 'Bitter', Georgia, serif; }

.ai-search-page .mock-field { display: flex; flex-direction: column; }
.ai-search-page .mock-field label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ai-search-page .mock-turn-ai .mock-field { margin-top: 1rem; }
.ai-search-page .mock-hint { font-size: 0.875rem; color: var(--ink-soft); margin: 0.35em 0 0.75em; }
.ai-search-page .mock-row { display: flex; gap: 0.6rem; }
.ai-search-page .mock-row input[type="text"] {
  flex: 1 1 auto; min-width: 0; min-height: 2.75rem;
  font-family: inherit; font-size: 1rem; padding: 0.6em 0.9em;
  border: 1.5px solid var(--line-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}
.ai-search-page .mock-row input[type="text"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.ai-search-page .mock-row button {
  flex: 0 0 auto; min-height: 2.75rem; font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: 0.6em 1.4em; border: 1.5px solid var(--accent); border-radius: 3px;
  background: var(--accent); color: var(--accent-contrast); cursor: pointer;
}
.ai-search-page .mock-row button:hover { filter: brightness(1.08); }
.ai-search-page .mock-row button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-field textarea {
  font-family: inherit; font-size: 1rem; padding: 0.6em 0.9em;
  border: 1.5px solid var(--line-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink); resize: vertical; min-height: 5rem;
}
.ai-search-page .mock-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.ai-search-page .mock-ai { max-width: 30rem; margin: 0 auto; text-align: center; }
.ai-search-page .mock-header {
  display: flex; align-items: center; gap: 0.65rem; text-align: left;
  margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong);
}
.ai-search-page .mock-header-mark { width: 1.75rem; height: 1.75rem; color: var(--accent); flex: 0 0 auto; }
.ai-search-page .mock-header-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.ai-search-page .mock-header-name {
  font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.ai-search-page .mock-header-service {
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.05em; color: var(--accent-text);
}
.ai-search-page .mock-ai-flag {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.04em; font-weight: 600; color: var(--accent-text);
  background: var(--accent-tint); padding: 0.25em 0.65em; border-radius: 999px;
  margin: 0 0 0.9rem;
}
.ai-search-page .mock-ai-flag svg { width: 0.7rem; height: 0.7rem; color: var(--accent-text); }
.ai-search-page .mock-ai-greeting {
  font-family: 'Bitter', Georgia, serif; font-weight: 500;
  font-size: 1.2rem; color: var(--ink); margin: 0 0 1.1rem;
}
.ai-search-page .mock-ai-composer {
  text-align: left; display: flex; align-items: flex-end; gap: 0.5rem;
  background: var(--paper); border: 1.5px solid var(--line-strong);
  border-radius: 20px; padding: 0.6rem 0.6rem 0.6rem 1rem;
  box-shadow: 0 10px 28px -14px rgba(var(--shadow), 0.4);
}
.ai-search-page .mock-ai-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint), 0 10px 28px -14px rgba(var(--shadow), 0.4);
}
.ai-search-page .mock-ai-composer textarea {
  flex: 1 1 auto; min-width: 0; display: block; width: 100%;
  border: none; background: transparent; resize: none;
  font-family: 'Bitter', Georgia, serif; font-size: 1rem; color: var(--ink);
  padding: 0.55em 0; min-height: 1.4em; max-height: 8em;
}
.ai-search-page .mock-ai-composer textarea:focus-visible { outline: none; }
.ai-search-page .icon-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; border: none;
  background: var(--accent); color: var(--accent-contrast); cursor: pointer;
}
.ai-search-page .icon-btn:hover { filter: brightness(1.08); }
.ai-search-page .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .icon-btn svg { width: 1.15rem; height: 1.15rem; }
.ai-search-page .icon-btn-mic {
  background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--ink-soft);
}
.ai-search-page .icon-btn-mic:hover { background: var(--accent-tint); color: var(--accent-text); filter: none; }

/* --- signed in: a real, honest trade-off, not just a worse default --- */
.ai-search-page .mock-account-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 1.25rem; text-align: left;
}
.ai-search-page .mock-account-badge {
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.04em; font-weight: 600; color: var(--accent-contrast);
  background: var(--accent); padding: 0.25em 0.65em; border-radius: 999px;
}
.ai-search-page .mock-account-link {
  font-family: 'Bitter', Georgia, serif; font-size: 0.85rem;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px;
}
.ai-search-page .mock-account-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-status-card {
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.85rem 1rem;
  margin: 0 0 1.5rem; text-align: left; background: var(--paper);
}
.ai-search-page .mock-status-label {
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 0.3em;
}
.ai-search-page .mock-status-value { font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 0.95rem; color: var(--ink); margin: 0; }

/* --- previous chats: history without an account --- */
.ai-search-page .mock-recent {
  text-align: left; margin: 0 0 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ai-search-page .mock-recent-label {
  font-family: 'Bitter', Georgia, serif; font-size: 0.75rem;
  letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 0.6em;
}
.ai-search-page .mock-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ai-search-page .mock-recent-list a {
  font-family: 'Bitter', Georgia, serif; font-size: 0.95rem;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px;
}
.ai-search-page .mock-recent-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- incognito: a real toggle, not a decorative icon --- */
.ai-search-page .mock-incognito-row { margin: 0 0 1.5rem; text-align: left; }
.ai-search-page .mock-toggle { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; }
.ai-search-page .mock-toggle input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ai-search-page .mock-toggle-track {
  position: relative; width: 2.75rem; height: 1.5rem; flex: 0 0 auto;
  background: var(--line-strong); border-radius: 999px;
}
.ai-search-page .mock-toggle-track::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem;
  width: 1.2rem; height: 1.2rem; background: var(--surface); border-radius: 50%;
}
.ai-search-page .mock-toggle input:checked + .mock-toggle-track { background: var(--accent); }
.ai-search-page .mock-toggle input:checked + .mock-toggle-track::after { left: calc(100% - 1.35rem); }
.ai-search-page .mock-toggle input:focus-visible + .mock-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-toggle-squiggle { width: 1.2rem; height: 1.2rem; color: var(--ink-soft); flex: 0 0 auto; }
.ai-search-page .mock-toggle-label { font-family: 'Bitter', Georgia, serif; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.ai-search-page .mock-incognito-status {
  font-family: 'Bitter', Georgia, serif; font-size: 0.85rem; color: var(--accent-text);
  margin: 1rem 0 0; text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-search-page .mock-toggle-track, .ai-search-page .mock-toggle-track::after { transition: background-color 0.15s ease, left 0.15s ease; }
}

.ai-search-page .mock-thread { display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.ai-search-page .mock-turn-user {
  align-self: flex-end; max-width: 82%;
  background: var(--accent-tint); color: var(--ink);
  border-radius: 16px 16px 4px 16px; padding: 0.7em 1.05em;
  font-size: 1rem; line-height: 1.5;
  position: relative;
}
.ai-search-page .mock-turn-ai-label {
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 0.6em;
}
.ai-search-page .mock-turn-ai {
  position: relative; max-width: 90%;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 4px 16px 16px 16px; padding: 0.9em 1.15em;
}
.ai-search-page .mock-answer { font-size: 1rem; line-height: 1.7; color: var(--ink); }
.ai-search-page .mock-answer p { margin: 0 0 0.85em; }
.ai-search-page .mock-answer p:last-child { margin-bottom: 0; }
.ai-search-page .mock-sources { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ai-search-page .mock-sources-label {
  font-family: 'Bitter', Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.05em; color: var(--ink-soft); margin: 0 0 0.7em;
}
.ai-search-page .mock-source { display: block; margin-bottom: 0.85em; }
.ai-search-page .mock-source:last-child { margin-bottom: 0; }
.ai-search-page .mock-source a {
  font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 0.95rem;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px;
}
.ai-search-page .mock-source a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-source-domain {
  display: block; font-family: 'Bitter', Georgia, serif; font-size: 0.8rem;
  color: var(--ink-soft); margin-top: 0.2em;
}

/* --- a person, not an AI answer --- */
.ai-search-page .mock-handoff {
  border: 1.5px solid var(--line-strong); border-radius: 8px;
  padding: 1.1rem 1.25rem; background: var(--surface);
}
.ai-search-page .mock-handoff-kicker {
  font-family: 'Bitter', Georgia, serif; font-size: 0.75rem;
  letter-spacing: 0.05em; font-weight: 600; color: var(--accent-text); margin: 0 0 0.6em;
}
.ai-search-page .mock-handoff-text {
  font-family: 'Bitter', Georgia, serif; font-size: 0.95rem; line-height: 1.6;
  color: var(--ink); margin: 0 0 0.9em;
}
.ai-search-page .mock-handoff-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.6em 1.2em;
  font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 0.95rem;
  background: var(--accent); color: var(--accent-contrast); border-radius: 3px; text-decoration: none;
}
.ai-search-page .mock-handoff-cta:hover { filter: brightness(1.08); }
.ai-search-page .mock-handoff-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-handoff-hours {
  font-family: 'Bitter', Georgia, serif; font-size: 0.78rem;
  color: var(--ink-soft); margin: 0.7em 0 0;
}

/* --- a prompt check: confirm or correct the paraphrase before it answers --- */
.ai-search-page .mock-check-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.ai-search-page .mock-check-actions button {
  min-height: 2.75rem; padding: 0.6em 1.3em; font-family: 'Bitter', Georgia, serif;
  font-weight: 600; font-size: 0.95rem; border-radius: 3px; cursor: pointer;
}
.ai-search-page .mock-check-yes { background: var(--accent); color: var(--accent-contrast); border: 1.5px solid var(--accent); }
.ai-search-page .mock-check-yes:hover { filter: brightness(1.08); }
.ai-search-page .mock-check-yes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-check-no { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); }
.ai-search-page .mock-check-no:hover { filter: brightness(1.05); }
.ai-search-page .mock-check-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- an honest "I don't have that" answer, with a way to suggest it gets added --- */
.ai-search-page .mock-suggest { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.1rem; }
.ai-search-page .mock-suggest-heading {
  font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 1rem;
  color: var(--ink); margin: 0 0 0.8em;
}
.ai-search-page .mock-suggest .mock-field { margin-bottom: 1rem; }
.ai-search-page .mock-suggest button[type="submit"] {
  min-height: 2.75rem; padding: 0.6em 1.3em; font-family: 'Bitter', Georgia, serif;
  font-weight: 600; font-size: 0.95rem; border: 1.5px solid var(--accent); border-radius: 3px;
  background: var(--accent); color: var(--accent-contrast); cursor: pointer;
}
.ai-search-page .mock-suggest button[type="submit"]:hover { filter: brightness(1.08); }
.ai-search-page .mock-suggest button[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- closing: not a mock, our own voice, plainly --- */
.ai-search-page .closing {
  font-family: 'Bitter', Georgia, serif; font-size: 1.1rem; line-height: 1.7;
  color: var(--ink); max-width: 32rem;
}
.ai-search-page .closing p { margin: 0 0 1.1em; }
.ai-search-page .closing p:last-child { margin-bottom: 0; }
.ai-search-page .closing-line {
  font-weight: 600; font-size: 1.3rem; font-style: italic; color: var(--accent-text);
}

.ai-search-page .mock-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.ai-search-page .mock-result-heading { margin: 0 0 0.3em; font-size: 1.05rem; line-height: 1.4; }
.ai-search-page .mock-result-heading a {
  font-family: 'Bitter', Georgia, serif; font-weight: 600;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px;
}
.ai-search-page .mock-result-heading a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-search-page .mock-result-url {
  font-family: 'Bitter', Georgia, serif; font-size: 0.78rem;
  color: var(--ink-soft); margin: 0 0 0.4em;
}
.ai-search-page .mock-result-snippet { font-family: 'Bitter', Georgia, serif; font-size: 0.95rem; line-height: 1.6; color: var(--ink); margin: 0; }
.ai-search-page .mock-result-meta { display: flex; align-items: center; gap: 0.5em; margin-top: 0.5em; }
.ai-search-page .mock-badge {
  display: inline-block; font-family: 'Bitter', Georgia, serif;
  font-size: 0.7rem; letter-spacing: 0.04em; color: var(--caution);
  background: var(--caution-tint); padding: 0.2em 0.5em; border-radius: 3px;
}
.ai-search-page .mock-result-date {
  font-family: 'Bitter', Georgia, serif; font-size: 0.78rem; color: var(--caution);
}

/* --- Meridian / Meridian AI: fixed-light "screenshot" panel, never
   themed to Riverside's green - it's someone else's product. --- */
.ai-search-page .mer {
  background: #FFFFFF; color: #202124;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  border: 1px solid #E8EAED; border-radius: 10px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.ai-search-page .mer-brand { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0 0 1.5rem; }
.ai-search-page .mer-mark { width: 1.4rem; height: 1.4rem; }
.ai-search-page .mer-mark circle { mix-blend-mode: multiply; }
.ai-search-page .mer-wordmark { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: #202124; }
.ai-search-page .mer-wordmark-ai { font-size: 0.95rem; font-weight: 600; color: #5F6368; }

.ai-search-page .mer-searchbox { max-width: 26rem; margin: 0 auto; }
.ai-search-page .mer-search-row {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid #E8EAED; border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 1.1rem; box-shadow: 0 1px 6px rgba(32,33,36,0.12);
}
.ai-search-page .mer-search-row svg.mer-search-icon { width: 1.05rem; height: 1.05rem; color: #5F6368; flex: 0 0 auto; }
.ai-search-page .mer-search-row input[type="text"] {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1rem; color: #202124; min-height: 2.2rem;
}
.ai-search-page .mer-submit {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: none;
  background: #1558D6; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-search-page .mer-submit:focus-visible { outline: 2px solid #1558D6; outline-offset: 2px; }
.ai-search-page .mer-submit svg { width: 1.05rem; height: 1.05rem; }

.ai-search-page .mer-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.35rem; text-align: left; }
.ai-search-page .mer-ad-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; color: #4D5156;
  border: 1px solid #E8EAED; border-radius: 3px; padding: 0.05em 0.4em; margin-bottom: 0.35em;
}
.ai-search-page .mer-result-url { font-size: 0.85rem; color: #188038; margin: 0 0 0.15em; }
.ai-search-page .mer-result-heading { margin: 0; font-size: 1.12rem; line-height: 1.4; }
.ai-search-page .mer-result-heading a { color: #1558D6; text-decoration: none; }
.ai-search-page .mer-result-heading a:hover, .ai-search-page .mer-result-heading a:focus-visible { text-decoration: underline; }
.ai-search-page .mer-result-heading a:focus-visible { outline: 2px solid #1558D6; outline-offset: 2px; }
.ai-search-page .mer-result-snippet { font-size: 0.92rem; color: #202124; line-height: 1.55; margin: 0.3em 0 0; }

.ai-search-page .mer-ai { max-width: 30rem; margin: 0 auto; text-align: center; }
.ai-search-page .mer-ai-greeting {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  font-weight: 600; font-size: 1.05rem; color: #202124; margin: 0 0 1.1rem;
}
.ai-search-page .mer-ai-greeting svg { width: 1.1rem; height: 1.1rem; color: #1558D6; }
.ai-search-page .mer-ai-composer {
  text-align: left; display: flex; align-items: flex-end; gap: 0.5rem;
  background: #F8F9FA; border: 1px solid #E8EAED; border-radius: 20px;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
}
.ai-search-page .mer-ai-composer:focus-within { border-color: #1558D6; box-shadow: 0 0 0 3px rgba(21,88,214,0.15); }
.ai-search-page .mer-ai-composer-followup { margin-top: 1.75rem; }
.ai-search-page .mer-ai-composer textarea {
  flex: 1 1 auto; min-width: 0; width: 100%; border: none; background: transparent; resize: none;
  font-family: inherit; font-size: 1rem; color: #202124; padding: 0.55em 0; min-height: 1.4em; max-height: 8em;
}
.ai-search-page .mer-ai-composer textarea:focus-visible { outline: none; }
.ai-search-page .mer-icon-btn {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: none;
  background: #1558D6; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-search-page .mer-icon-btn:focus-visible { outline: 2px solid #1558D6; outline-offset: 2px; }
.ai-search-page .mer-icon-btn svg { width: 1.1rem; height: 1.1rem; }
.ai-search-page .mer-icon-btn-secondary { background: transparent; color: #5F6368; }
.ai-search-page .mer-icon-btn-secondary:hover { background: #F1F3F4; }
.ai-search-page .mer-icon-btn-secondary:focus-visible { outline: 2px solid #1558D6; outline-offset: 2px; }

.ai-search-page .mer-thread { display: flex; flex-direction: column; gap: 1.4rem; text-align: left; }
.ai-search-page .mer-turn-ai {
  max-width: 90%; background: #FFFFFF; border: 1px solid #E8EAED;
  border-radius: 4px 16px 16px 16px; padding: 0.9em 1.15em;
}
.ai-search-page .mer-turn-user {
  align-self: flex-end; max-width: 82%; background: #F1F3F4; color: #202124;
  border-radius: 16px 16px 4px 16px; padding: 0.7em 1.05em; font-size: 1rem; line-height: 1.5;
}
.ai-search-page .mer-turn-ai-label { display: flex; align-items: center; gap: 0.4em; font-size: 0.78rem; font-weight: 600; color: #5F6368; margin: 0 0 0.6em; }
.ai-search-page .mer-turn-ai-label svg { width: 0.95rem; height: 0.95rem; color: #1558D6; }
.ai-search-page .mer-answer { font-size: 1rem; line-height: 1.7; color: #202124; }
.ai-search-page .mer-answer p { margin: 0 0 0.85em; }
.ai-search-page .mer-answer p:last-child { margin-bottom: 0; }
.ai-search-page .mer-disclaimer { font-size: 0.75rem; color: #5F6368; margin-top: 1rem; }

.ai-search-page .step-nav {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.ai-search-page .step-nav .btn-next { margin-left: auto; text-align: right; }
.ai-search-page .step-progress {
  font-family: 'Bitter', Georgia, serif; font-size: 0.75rem;
  color: var(--ink-soft); letter-spacing: 0.02em; margin: 0; flex: 1 0 100%; order: -1;
}

@media (max-width: 30rem) {
  .ai-search-page .mock-row { flex-direction: column; align-items: stretch; }
  .ai-search-page .mock-turn-user, .ai-search-page .mer-turn-user, .ai-search-page .mock-turn-ai, .ai-search-page .mer-turn-ai { max-width: 100%; }
  .ai-search-page .step-nav .btn-next { margin-left: 0; width: 100%; }
}