/* Home page hero: the Rail layout, promoted from hero/rail-search/ after Hayden picked it.
   Scoped under .opt-rail-search, the class on the hero section. */

/* Option D2: Rail, brain searches. Every rule is scoped under .opt-rail-search */
.opt-rail-search{
  --rw:min(460px,100%);
  --rl-pad:max(var(--gutter),calc((100vw - var(--max))/2));
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.opt-rail-search .rl-stage{
  position:relative;
  min-height:min(80vh,800px);
  display:grid;
  align-content:center;
  padding:clamp(28px,5vw,56px) var(--rl-pad);
  overflow:hidden;
}

/* brain backdrop */
.opt-rail-search .rl-brain{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.46;
  transition:opacity .45s var(--ease);
}
.opt-rail-search .rl-brain .preview-stage{
  position:absolute;
  inset:0;
  height:100%;
}
:root[data-theme="dark"] .opt-rail-search .rl-brain{opacity:.55}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .opt-rail-search .rl-brain{opacity:.55}
}

/* the name card: a solid surface, not a wash. It is the first thing the eye lands on. */
.opt-rail-search .rl-copy{
  position:relative;
  z-index:2;
  max-width:min(60ch,calc(100% - 492px));
  justify-self:start;
  padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px) clamp(24px,3vw,34px);
  border:1px solid var(--rule-2);
  border-radius:16px;
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  -webkit-backdrop-filter:saturate(1.15) blur(14px);
  backdrop-filter:saturate(1.15) blur(14px);
  box-shadow:var(--shadow),0 40px 90px -50px color-mix(in srgb,var(--ink) 60%,transparent);
  transition:opacity .35s var(--ease);
}
.opt-rail-search .rl-copy .lead{margin-top:20px;color:var(--ink)}
.opt-rail-search .rl-copy .intro{margin-top:18px;color:var(--ink-2);font-size:16.5px}
.opt-rail-search .rl-copy .display{letter-spacing:-.01em}
.opt-rail-search .rl-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
.opt-rail-search .rl-copy .cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
/* Resume keeps its own weight; the second link is deliberately quieter than it */
.opt-rail-search .rl-copy .cta .btn{border-color:var(--ink-2);color:var(--ink);font-weight:600}
.opt-rail-search .rl-second{
  color:var(--ink-2);
  border-color:color-mix(in srgb,var(--rule-2) 80%,transparent);
  font-weight:500;
}
.opt-rail-search .rl-second:hover{color:var(--ink);border-color:var(--ink)}
.opt-rail-search .rl-copy .btn{min-height:44px}
.opt-rail-search .rl-copy .meta{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.opt-rail-search .rl-copy .meta a{min-height:40px;display:inline-flex;align-items:center}
.opt-rail-search .rl-copy .meta a:hover{color:var(--ink)}
.opt-rail-search .portrait{margin-bottom:20px}

/* the one wrapper that lives in the copy at rest and in the rail when open */
.opt-rail-search .rl-askslot{margin-top:22px}
.opt-rail-search .rl-ask{display:flex;flex-direction:column;gap:10px}
.opt-rail-search .askbar{margin:0;max-width:100%}
.opt-rail-search .askbar input{min-height:48px;font-size:16px}
.opt-rail-search .askbar .btn{min-height:48px}
.opt-rail-search .qchips{margin-top:0}
.opt-rail-search .qchip{min-height:40px;display:inline-flex;align-items:center}
.opt-rail-search .qchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* live match readout: what the brain is narrowing to while he types */
.opt-rail-search .rl-match{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--rule) 85%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--paper) 60%,transparent);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.opt-rail-search .rl-match.on{opacity:1;transform:none}
.opt-rail-search .rl-match .rl-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.opt-rail-search .rl-match .rl-t{
  font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.opt-rail-search .rl-match .rl-t::before{content:"· ";color:var(--accent)}

/* the elements vault.js looks for, present but never seen */
.opt-rail-search .rl-vhook{display:none}

/* the rail */
.opt-rail-search .rl-rail{
  position:absolute;
  top:0;right:0;bottom:0;
  width:var(--rw);
  z-index:5;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--paper);
  border-left:1px solid var(--rule-2);
  visibility:hidden;
  opacity:0;
  transform:translateX(14px);
  transition:transform .34s var(--ease),opacity .24s var(--ease),visibility .34s;
}
.opt-rail-search.rail-open .rl-rail{visibility:visible;opacity:1;transform:none}
.opt-rail-search.rail-open .rl-copy{opacity:.55}
.opt-rail-search.rail-open .rl-brain{opacity:.26}

.opt-rail-search .rl-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:8px 10px;
  border-bottom:1px solid var(--rule);
  flex:0 0 auto;
}
.opt-rail-search .rl-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--rule-2);
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  font-size:20px;line-height:1;
  cursor:pointer;
}
.opt-rail-search .rl-close:hover{border-color:var(--ink)}

/* the thread scrolls inside the rail, never the page */
.opt-rail-search .asklog{
  flex:1 1 auto;
  min-height:0;
  margin-top:0;
  padding:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.opt-rail-search .asklog .msg.ai{font-size:15.5px}
.opt-rail-search .asklog .msg.user{max-width:min(40ch,90%)}
.opt-rail-search .asklog .pulled{margin-top:2px}

.opt-rail-search .rl-foot{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  /* never let the footer eat the thread: it caps itself and scrolls inside */
  max-height:min(58%,300px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);
  background:var(--paper);
}
/* the input row itself never shrinks or scrolls away */
.opt-rail-search .rl-foot .askbar{flex:0 0 auto}
@media (max-height:560px){
  .opt-rail-search .rl-head{padding:4px 8px}
  .opt-rail-search .rl-foot{gap:8px;padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
  .opt-rail-search .asklog{padding:12px}
}
.opt-rail-search .rl-foot .askfine{margin-top:0}
/* in the rail the chips sit above the input, the live matches stay against it */
.opt-rail-search.rail-open .rl-foot .rl-ask{flex-direction:column-reverse}

/* below 1081px a 460px rail would sit on top of the copy, so the rail takes the
   whole stage: one surface at a time, and the copy stays put underneath, dimmed */
@media (max-width:1080px){
  .opt-rail-search .rl-copy{max-width:60ch}
  .opt-rail-search .rl-rail{left:0;right:0;width:100%;border-left:0}
}

/* phone: the brain gets its own band across the top, the copy sits under it on a
   solid card, and asking replaces the copy entirely with a full sheet */
@media (max-width:760px){
  /* the global section padding puts 64px of nothing between the nav and the brain,
     which on a phone is a tenth of the screen spent before anything starts */
  .opt-rail-search{padding-top:0}
  .opt-rail-search .rl-stage{
    min-height:auto;
    align-content:start;
    /* the band is sized so the name card clears the fold on a 667px phone, which is
       the shortest screen worth designing for. 34dvh pushed it under. */
    padding:calc(25dvh + 14px) var(--gutter) clamp(24px,7vw,36px);
  }
  .opt-rail-search .rl-brain{
    bottom:auto;
    height:25dvh;
    min-height:150px;
    opacity:.85;
  }
  :root[data-theme="dark"] .opt-rail-search .rl-brain{opacity:.9}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .opt-rail-search .rl-brain{opacity:.9}
  }
  /* the band fades into the page instead of ending on a hard line */
  .opt-rail-search .rl-brain::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:38%;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--paper));
  }
  .opt-rail-search .rl-copy{
    /* phone measure: never wider than the card needs, so the line length holds */
    max-width:min(100%,22rem);
    background:color-mix(in srgb,var(--paper) 97%,transparent);
    padding:clamp(18px,5vw,24px);
  }
  .opt-rail-search .rl-copy .intro{font-size:15.5px}
  /* two buttons, one column, both the full width of the card */
  .opt-rail-search .rl-cta{flex-direction:column;align-items:stretch;gap:8px}
  .opt-rail-search .rl-cta .cta{display:block}
  .opt-rail-search .rl-cta .btn{width:100%;justify-content:center}
  .opt-rail-search .asklog{padding:14px}

  /* asking: one surface only. The copy is replaced, the sheet is the screen. */
  .opt-rail-search.rail-open .rl-stage{
    min-height:76dvh;
    padding:0;
  }
  .opt-rail-search.rail-open .rl-copy{display:none}
  .opt-rail-search.rail-open .rl-brain{display:none}
  .opt-rail-search .rl-rail{
    top:0;left:0;right:0;bottom:0;
    width:100%;
    border-left:0;
    transform:translateY(16px);
  }
  .opt-rail-search.rail-open .rl-rail{transform:none}
  .opt-rail-search .rl-foot{max-height:min(64%,340px)}
}

@media (prefers-reduced-motion:reduce){
  .opt-rail-search .rl-rail,
  .opt-rail-search .rl-copy,
  .opt-rail-search .rl-match,
  .opt-rail-search .rl-brain{transition:none}
  .opt-rail-search .rl-rail{transform:none}
}


/* FIX (blocker found in verification): the ask input was inside .rl-foot, which is a
   capped scroller, with the chips stacked above it. Once the chip block grew past the
   cap the input slid below the fold of a nested scroller nothing signals, on phone and
   desktop both. That is the exact complaint this layout exists to solve, so the input
   must never live inside a scrolling box. The footer no longer scrolls; the chips do,
   as a single row. */
.opt-rail-search .rl-foot{max-height:none;overflow:visible}
.opt-rail-search.rail-open .rl-foot .rl-chips{
  max-height:44px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.opt-rail-search.rail-open .rl-foot .rl-chips::-webkit-scrollbar{display:none}
.opt-rail-search.rail-open .rl-foot .rl-chips .qchips{flex-wrap:nowrap}
.opt-rail-search.rail-open .rl-foot .rl-chips .qchip{flex:0 0 auto}
.opt-rail-search .rl-foot .askbar{flex:0 0 auto;position:relative;z-index:1}


/* LIGHT THEME CONTRAST FIX.

   Two things made the light theme unreadable while the dark one looked right.
   Opening the rail dimmed the whole copy block with opacity:.55, which on a dark
   background reads as "recessed" but on cream turns near-black text into pale grey.
   And the brain was tuned against a dark backdrop, so the same opacity that reads as
   a constellation on black almost disappears on paper.

   Text contrast is never adjusted with opacity here. The copy block stays fully
   opaque in light; the rail is already a separate surface, which is what signals
   which one is active. Dark keeps a gentle dim because it can afford one. */

.opt-rail-search.rail-open .rl-copy{opacity:1}
.opt-rail-search .rl-brain{opacity:.66}
.opt-rail-search.rail-open .rl-brain{opacity:.44}

:root[data-theme="dark"] .opt-rail-search.rail-open .rl-copy{opacity:.78}
:root[data-theme="dark"] .opt-rail-search .rl-brain{opacity:.55}
:root[data-theme="dark"] .opt-rail-search.rail-open .rl-brain{opacity:.26}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .opt-rail-search.rail-open .rl-copy{opacity:.78}
  :root:not([data-theme="light"]) .opt-rail-search .rl-brain{opacity:.55}
  :root:not([data-theme="light"]) .opt-rail-search.rail-open .rl-brain{opacity:.26}
}

/* the card needs to sit on solid paper in light, not on a translucent wash, or the
   graph shows through the intro paragraph */
.opt-rail-search .rl-copy{background:var(--paper)}
:root[data-theme="dark"] .opt-rail-search .rl-copy{background:color-mix(in srgb,var(--paper) 92%,transparent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .opt-rail-search .rl-copy{background:color-mix(in srgb,var(--paper) 92%,transparent)}
}


/* The rail must be an opaque surface, not a tint. In dark the graph showing faintly
   through it reads as depth; in light it made the answer text unreadable against the
   nodes. Raising it out of the brain's stacking context and painting it solid. */
.opt-rail-search .rl-rail{
  z-index:20;
  isolation:isolate;
  background:var(--paper);
}
:root[data-theme="dark"] .opt-rail-search .rl-rail{background:color-mix(in srgb,var(--paper) 96%,transparent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .opt-rail-search .rl-rail{background:color-mix(in srgb,var(--paper) 96%,transparent)}
}


/* The answer follows you down the hero, then stops.

   The rail spans the whole stage, so its contents were pinned to the top of a very
   tall column: scroll a little and the answer left the screen while the empty middle
   of the rail stayed. This makes the contents stick to the top of the viewport for as
   long as the hero is on screen, and release at the hero's bottom edge so the next
   section pushes it away rather than overlapping it.

   The rail itself becomes a plain block: a sticky element needs a normal-flow parent,
   and the flex column moves onto the sticky wrapper where the layout rules still apply. */
.opt-rail-search .rl-rail{display:block}
.opt-rail-search .rl-sticky{
  position:sticky;
  top:var(--nav-h,60px);
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:calc(100dvh - var(--nav-h,60px));
  height:100%;
}
@media (max-width:760px){
  /* on a phone the rail is already a full-screen sheet, so sticking it does nothing
     useful and the fixed positioning does the job instead */
  .opt-rail-search .rl-rail{display:flex}
  .opt-rail-search .rl-sticky{position:static;max-height:none;height:100%;display:flex}
}