/* v1-bridge — the one card between V1 and V2 (prototype, 2026-09-14).
 * Verdict → info board (like "Before we begin…", darker) → e-mail (required) → two
 * CTAs in the intro family. Every width comes from the FUNNEL LAYOUT CONSTANTS in
 * codex-skin-v2.css (:root --funnel-*); nothing here invents a dimension.
 * The CTAs are the LAST element of the card in normal flow (never pinned). */
/* v1-later (paused state) shares this design: same board, same case number. */
:is(#v1-bridge, #v1-later).on { display: flex !important; flex-direction: column; }
:is(#v1-bridge, #v1-later) > main { display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; }
:is(#v1-bridge, #v1-later) #bridge-ask, :is(#v1-bridge, #v1-later) #bridge-saved { display: flex; flex-direction: column; flex: 1 0 auto; }

/* Content column = the funnel's content column. */
:is(#v1-bridge, #v1-later) .bridge-board,
:is(#v1-bridge, #v1-later) .bridge-input,
:is(#v1-bridge, #v1-later) .bridge-micro,
:is(#v1-bridge, #v1-later) .bridge-error,
:is(#v1-bridge, #v1-later) .bridge-casefile,
:is(#v1-bridge, #v1-later) .bridge-actions {
  width: 100% !important;
  max-width: var(--funnel-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* The board is the funnel's welcome board, only darker (Roman). */
html body section.card:is(#v1-bridge, #v1-later) .w1-welcome.bridge-board {
  background: linear-gradient(180deg, rgba(24, 22, 20, .94), rgba(15, 14, 13, .96)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
:is(#v1-bridge, #v1-later) .bridge-board .w1-w-strong { font-weight: 500 !important; }
:is(#v1-bridge, #v1-later) .bridge-board .w1-w-soft { font-weight: 300 !important; }
:is(#v1-bridge, #v1-later) .bridge-board b { font-weight: 500; }

:is(#v1-bridge, #v1-later) .bridge-input { margin-top: 14px !important; margin-bottom: 0 !important; height: var(--funnel-field-height) !important; border-radius: var(--funnel-radius-field) !important; font-weight: 300 !important; }
:is(#v1-bridge, #v1-later) .bridge-input.is-valid { border-color: rgba(46, 125, 88, .72) !important; }
:is(#v1-bridge, #v1-later) .bridge-input.is-shake { animation: bridge-shake .5s; }
@keyframes bridge-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
:is(#v1-bridge, #v1-later) .bridge-micro { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 12.5px; font-weight: 300; color: rgba(238, 241, 247, .45); }
:is(#v1-bridge, #v1-later) .bridge-error { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 13px; font-weight: 300; color: #ff8a8a; }

/* Saved state: the case number sits centered on its own line — smaller,
   heavier and more transparent than the title (Roman, 2026-09-14). */
:is(#v1-bridge, #v1-later) .bridge-casefile { margin-top: 22px !important; margin-bottom: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
:is(#v1-bridge, #v1-later) .bridge-case-label { font: 500 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 241, 247, .45); }
:is(#v1-bridge, #v1-later) .bridge-case-id { font: 600 20px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .12em; color: rgba(238, 241, 247, .58); }

/* Actions: last in flow; both the same width = the content column. The ask
   state keeps them at the bottom; the saved/paused state brings the CTA
   closer to the case number instead of parking it at the screen edge. */
:is(#v1-bridge, #v1-later) .bridge-actions { margin-top: auto !important; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
:is(#v1-bridge, #v1-later) #bridge-saved .bridge-actions { margin-top: clamp(28px, 9vh, 72px) !important; }
:is(#v1-bridge, #v1-later) .bridge-cta { appearance: none; -webkit-appearance: none; width: 100%; border-radius: var(--funnel-radius-cta); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: "Fraunces", "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; color: #eef1f7; transition: opacity .2s, transform .15s, box-shadow .2s; }
:is(#v1-bridge, #v1-later) .bridge-cta .l { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; white-space: nowrap; }
:is(#v1-bridge, #v1-later) .bridge-cta svg { width: 32px; height: 11px; flex: 0 0 auto; }
/* Hebrew: the flow runs right-to-left, so the arrow points left (text arrows are flipped by the HE dictionary; this one is an SVG). */
[dir="rtl"] :is(#v1-bridge, #v1-later) .bridge-cta svg { transform: scaleX(-1); }
:is(#v1-bridge, #v1-later) .bridge-cta .s { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 300; font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 244, 240, .62); white-space: nowrap; }
:is(#v1-bridge, #v1-later) .bridge-primary { min-height: 72px; font-size: 22.5px; background: linear-gradient(180deg, #6a1e2f, #4a1422); border: 1px solid rgba(214, 76, 96, .55); box-shadow: 0 10px 30px rgba(120, 20, 40, .35); }
:is(#v1-bridge, #v1-later) .bridge-secondary { min-height: 58px; font-size: 20px; background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: rgba(238, 241, 247, .86); }
:is(#v1-bridge, #v1-later) .bridge-cta.is-wait { opacity: .42; cursor: default; box-shadow: none; }
:is(#v1-bridge, #v1-later) .bridge-cta.is-busy { opacity: .8; cursor: progress; }
:is(#v1-bridge, #v1-later) .bridge-cta:not(.is-wait):hover { transform: translateY(-1px); }
:is(#v1-bridge, #v1-later) .bridge-cta:focus-visible, :is(#v1-bridge, #v1-later) .bridge-link:focus-visible { outline: 2px solid #e0505a; outline-offset: 2px; }
:is(#v1-bridge, #v1-later) .bridge-link { margin-top: 2px; text-align: center; font: 300 13px "Inter", system-ui, sans-serif; color: rgba(238, 241, 247, .45); background: none; border: 0; cursor: pointer; letter-spacing: .04em; }
:is(#v1-bridge, #v1-later) [hidden] { display: none !important; }
@media (min-width: 800px) {
  :is(#v1-bridge, #v1-later) .bridge-actions { gap: 12px; }
  :is(#v1-bridge, #v1-later) .bridge-cta svg { width: 38px; height: 12px; }
  :is(#v1-bridge, #v1-later) .bridge-cta .s { font-size: 12.5px; letter-spacing: .06em; }
  :is(#v1-bridge, #v1-later) .bridge-primary { min-height: 80px; font-size: 28px; }
  :is(#v1-bridge, #v1-later) .bridge-secondary { min-height: 60px; font-size: 22px; }
  :is(#v1-bridge, #v1-later) .bridge-case-id { font-size: 22px; }
}
/* Phones (mobile audit 2026-09-15): long labels (DE/FR/PT/HE) wrap inside the
   button instead of running past both edges; the arrow stays glued to the last
   word; the sub-line wraps too. EN still fits on one line — no change there. */
@media (max-width: 799px) {
  :is(#v1-bridge, #v1-later) .bridge-cta { box-sizing: border-box; padding: 12px 18px; }
  :is(#v1-bridge, #v1-later) .bridge-cta .l { display: block; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.15; max-width: 100%; }
  :is(#v1-bridge, #v1-later) .bridge-cta .l svg { display: inline-block; vertical-align: middle; margin-inline-start: 6px; }
  :is(#v1-bridge, #v1-later) .bridge-cta .s { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { :is(#v1-bridge, #v1-later) .bridge-cta, :is(#v1-bridge, #v1-later) .bridge-input { transition: none; animation: none; } }
/* Saved state: the e-mail on file sits on its own line under the strong sentence. */
:is(#v1-bridge, #v1-later) .bridge-board .bridge-saved-mail { margin: 4px 0 8px !important; }
:is(#v1-bridge, #v1-later) .bridge-board .bridge-saved-mail b { font-weight: 500; color: #eef1f7; }