/* SM-251: the Goal Interceptor -- /app/start/. Full-bleed conversational
   takeover (position:fixed above the site nav, no base.html edit needed --
   see the completion report for why this approach was chosen over hiding
   .sm-nav directly). Theme variables only -- no new hex, no private
   namespace, per AGENTS.md's UI THEME gate.
   SM-255 (Jason, 2026-08-04, after using the live v1 -- LAYOUT REVISION,
   see system/goal-interceptor-ux-spec.md's own header section):
   .gi-page is now a flex column (topbar fixed at top, .gi-card fills the
   rest) so .gi-card's own `justify-content:center` vertically centers the
   title+field unit -- and, because .gi-card is the ONE scroll container
   (.gi-page itself no longer scrolls), that centering holds even when
   principles/chips/a longer prompt push total content height around;
   .gi-card falls back to its own inner scroll (vertical inner scroll is
   fine per the spec) if content genuinely exceeds the viewport. */
.gi-page {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
}
.gi-page * { box-sizing: border-box; min-width: 0; }

.gi-topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 4px;
}
.gi-brand {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .08em;
  color: var(--text);
  text-decoration: none;
  font-size: 18px;
}
.gi-close {
  background: transparent;
  border: none;
  color: var(--text-mid);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}
.gi-close:hover { color: var(--accent); }

/* SM-255: the ONE scroll container -- flex column, vertically centers its
   own children (title+field+chips+list as a group) when they fit, scrolls
   internally when they don't. Every render function (question, transient,
   END, welcome-back, loading) shares this same centering for free. */
.gi-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 20px 40px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* principles -- shown once ever, then permanently collapsed */
.gi-principles { margin: 10px 0 26px; flex: none; }
.gi-principles p { color: var(--text-mid); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.gi-principles.gi-collapsed { display: none; }

/* chip trail -- progress + revise + END evidence, one element. SM-255:
   on a question screen this now sits BENEATH the field, ABOVE the list
   (renderQuestion's own emission order) -- "so the user can always see
   what they just chose." */
.gi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; flex: none; }
.gi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 6px 10px 6px 14px;
  font-size: 13px;
  color: var(--text);
  background: var(--card-bg);
  max-width: 100%;
}
.gi-chip span { overflow-wrap: anywhere; }
.gi-chip button {
  flex: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.gi-chip button:hover { color: var(--accent); }

/* question prompt + (?) why -- SM-255: "a little bigger" than v1 */
.gi-prompt {
  flex: none;
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .04em;
  font-weight: 400;
  font-size: clamp(24px, 5vw, 30px);
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.25;
  text-align: center;
}
.gi-why-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  vertical-align: middle;
}
.gi-why-btn:hover { color: var(--accent); }
.gi-why-bubble {
  display: none;
  font-size: 12px;
  color: var(--text-mid);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0 4px;
}
.gi-why-bubble.gi-open { display: block; }
.gi-multi-hint { flex: none; color: var(--text-dim); font-size: 12px; margin: 0 0 6px; text-align: center; }

/* input + suggestion list -- same pattern for free-typed root AND
   enumerable follow-ups (no button-grid state anywhere) */
.gi-input-wrap { flex: none; position: relative; margin: 14px 0 4px; }
.gi-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  padding: 13px 42px 13px 16px;
  font-family: 'Open Sans', sans-serif;
}
.gi-input:focus { outline: none; border-color: var(--accent); }
.gi-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
  font-size: 15px;
}

/* SM-255: FIXED 3-item viewport onto the matched-suggestion list --
   height = exactly 3 x .gi-suggestion's own 44px row height. Inner
   overflow-y:auto scrolls the ITEMS; the viewport's own height never
   changes as the list filters (zero page growth/layout shift). Bottom
   fade is a mask (not padding) -- same fade-on-scrollable-element pattern
   already used elsewhere on this site (e.g. the ux-ribbon's own edge
   fades). "Something else.../I'm not sure/Continue" are DELIBERATELY
   OUTSIDE this viewport (in .gi-suggestions-footer, below it) so those
   escape hatches are always reachable without scrolling, never buried
   under 3+ matched items. */
.gi-suggestions-viewport {
  flex: none;
  border-top: 1px solid var(--card-border);
  margin-top: 8px;
  height: 132px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}
.gi-suggestions-footer { flex: none; margin-top: 4px; }

.gi-suggestion {
  display: flex;
  align-items: center;
  flex: none;
  height: 44px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
  font-size: 15px;
  padding: 0 4px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
}
.gi-suggestion:hover, .gi-suggestion:focus { color: var(--accent); outline: none; }
.gi-suggestion.gi-ghost { color: var(--text-dim); font-style: italic; }
.gi-suggestion.gi-ghost:hover { color: var(--accent); }
.gi-empty-note { color: var(--text-dim); font-size: 13px; padding: 12px 4px 4px; }

/* SM-253 Part B: multi-select picked state (accumulate-then-Continue). */
.gi-suggestion.gi-picked { color: var(--accent); font-weight: 700; }

/* "I'm not sure" transient -- auto-advances, nothing to click */
.gi-transient {
  flex: none;
  text-align: center;
  padding: 50px 10px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.7;
}

/* free-text acknowledgment toast */
.gi-toast { flex: none; text-align: center; color: var(--accent); font-size: 15px; padding: 40px 0; }

/* END / recommendation */
.gi-end { flex: none; text-align: center; padding: 6px 0 20px; }
.gi-end-chips { justify-content: center; }
.gi-end-lead { color: var(--text-mid); font-size: 15px; margin: 20px 0 4px; }
.gi-end-model {
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .06em;
  font-weight: 400;
  font-size: clamp(26px, 6vw, 34px);
  color: var(--accent);
  margin: 0 0 18px;
}
.gi-end-because { color: var(--text-mid); font-size: 14px; line-height: 1.6; margin: 0 0 30px; }
.gi-end-cta-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 20px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.gi-end-cta-btn:hover { filter: brightness(1.08); }
.gi-end-secondary { display: inline-block; color: var(--text-dim); font-size: 13px; text-decoration: none; }
.gi-end-secondary:hover { color: var(--accent); }

/* welcome back (returning cookie) */
.gi-welcome-title {
  flex: none;
  font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  letter-spacing: .06em;
  font-weight: 400;
  font-size: clamp(24px, 5vw, 30px);
  text-align: center;
  margin: 12px 0 4px;
}
.gi-welcome-sub { flex: none; text-align: center; color: var(--text-mid); font-size: 13px; margin: 0 0 18px; }
.gi-welcome-lead { flex: none; color: var(--text-mid); font-size: 14px; margin: 16px 0 20px; text-align: center; }
.gi-btn-primary {
  flex: none;
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  margin-bottom: 10px;
}
.gi-btn-primary:hover { filter: brightness(1.08); }
.gi-btn-text {
  flex: none;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
}
.gi-btn-text:hover { color: var(--accent); }
.gi-confirm-row { flex: none; display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.gi-confirm-row button {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.gi-confirm-row button:hover { border-color: var(--accent); color: var(--accent); }

/* loading skeleton -- never a blank white flash */
.gi-loading { flex: none; padding: 30px 0; }
.gi-skel-line { height: 14px; border-radius: 4px; background: var(--card-bg); margin-bottom: 14px; animation: gi-pulse 1.2s ease-in-out infinite; }
.gi-skel-w70 { width: 70%; }
.gi-skel-w90 { width: 90%; }
.gi-skel-w50 { width: 50%; }
@keyframes gi-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }

@media (max-width: 420px) {
  .gi-card { padding: 6px 16px 40px; }
  .gi-topbar { padding: 14px 16px 4px; }
}