/* YMH Engineer, landing + chat surface. Independent of the concierge helm
   overlay; this page is the full experience, not a floating widget. */

.eng-hero { padding: calc(var(--nav-h) + 24px) 22px 24px; text-align: center; color: var(--cream); background: linear-gradient(180deg, #0f1428 0%, #171c2f 100%); min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: flex-start; }
.eng-hero-inner { max-width: 980px; margin: 0 auto; width: 100%; }
.eng-eyebrow { display: inline-block; padding: 5px 11px; background: rgba(254,162,0,.15); color: var(--orange); border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.eng-h1 { font-family: var(--serif, Georgia, serif); font-size: clamp(28px, 3.8vw, 44px); line-height: 1.1; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; }
.eng-sub { font-size: 15px; line-height: 1.5; color: rgba(245,241,235,.72); max-width: 560px; margin: 0 auto 20px; }

/* Boat intake, single search-as-you-type input. Type "focus 3x" → top
   matches appear in a dropdown → click one → preview panel renders.
   No form fields, no CTA button, no cascading picker friction. */
.eng-intake { max-width: 620px; margin: 0 auto 14px; }
.eng-intake-hint { font-size: 13px; color: rgba(245,241,235,.6); font-style: italic; margin-bottom: 10px; text-align: center; }
.eng-intake-search { position: relative; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(254,162,0,.4); border-radius: 999px; padding: 4px 6px 4px 16px; transition: border-color .18s ease, background .18s ease; }
.eng-intake-search:focus-within { border-color: var(--orange); background: rgba(255,255,255,.08); }
.eng-intake-search-icon { flex: none; color: var(--orange); display: grid; place-items: center; }
.eng-intake-search-icon svg { width: 18px; height: 18px; }
.eng-intake-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--cream); font-family: inherit; font-size: 15px; font-weight: 500; padding: 10px 8px; }
.eng-intake-input::placeholder { color: rgba(245,241,235,.5); font-weight: 400; }
.eng-intake-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: #1a2140; border: 1px solid rgba(254,162,0,.35); border-radius: 12px;
  padding: 6px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
}
.eng-intake-suggestion { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--cream); font-size: 14px; transition: background .12s ease; }
.eng-intake-suggestion:hover, .eng-intake-suggestion.active { background: rgba(254,162,0,.14); }
.eng-intake-suggestion-name { font-weight: 600; }
.eng-intake-suggestion-meta { font-size: 12px; color: rgba(245,241,235,.55); font-weight: 400; }
.eng-intake-empty { padding: 12px 14px; font-size: 13px; color: rgba(245,241,235,.55); font-style: italic; text-align: center; }
.eng-intake-empty b { color: var(--orange); font-style: normal; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Live preview panel, appears after the captain picks a boat. On desktop
   it slides in to the right of the intake row; on smaller screens it
   stacks below. Content composed by /api/preview/vessel. */
.eng-preview { max-width: 720px; margin: 0 auto 18px; background: rgba(255,255,255,.96); color: var(--ocean); border-radius: 14px; padding: 20px 22px; text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: engFadeIn .4s cubic-bezier(.2,.9,.3,1.05) both; }
.eng-preview-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 12px; }
.eng-preview-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(254,162,0,.5); animation: engBlink 1.6s ease-in-out infinite; }
.eng-preview-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--disabled); margin-bottom: 4px; }
.eng-preview-head b { color: var(--ocean); font-weight: 600; }
.eng-preview-title { font-family: var(--serif, Georgia, serif); font-size: 22px; font-weight: 600; color: var(--ocean); margin: 4px 0 4px; }
.eng-preview-intro { font-size: 13px; color: #55606c; margin: 0 0 14px; line-height: 1.45; }
.eng-preview-list-label { font-size: 12px; font-weight: 600; color: var(--ocean); margin: 0 0 10px; }
.eng-preview-list { display: grid; gap: 10px; }
.eng-preview-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--cream); border-radius: 10px; }
.eng-preview-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(254,162,0,.15); color: var(--orange); display: grid; place-items: center; }
.eng-preview-icon svg { width: 16px; height: 16px; }
.eng-preview-text { flex: 1; min-width: 0; }
.eng-preview-text .t { font-size: 13.5px; font-weight: 600; color: var(--ocean); line-height: 1.3; }
.eng-preview-text .s { font-size: 12px; color: #55606c; line-height: 1.4; margin-top: 2px; }
.eng-preview-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(23,28,47,.08); font-size: 12px; color: #55606c; line-height: 1.5; }
.eng-preview-footer a { color: var(--orange); font-weight: 600; text-decoration: none; }
.eng-preview-footer a:hover { text-decoration: underline; }
.eng-preview.loading { opacity: .6; }

/* Hero input takes precedence, sits right below the sub so a captain can
   type immediately without scrolling to find the box. Cards live below as
   a "or pick a starter" alternative entry. */
.eng-input-hero { max-width: 620px; margin: 0 auto 10px; }
.eng-hint { color: rgba(245,241,235,.5); font-size: 12.5px; font-style: italic; margin-bottom: 18px; }

/* 4-col grid on wide screens so all 8 capabilities fit in 2 rows. Steps
   down through 3 → 2 → 1 as viewport shrinks. */
.eng-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: left; }
@media (max-width: 1100px) { .eng-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .eng-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .eng-cards { grid-template-columns: 1fr; } }

.eng-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px 14px; text-align: left; cursor: pointer; color: var(--cream); font-family: inherit; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.eng-card:hover { background: rgba(255,255,255,.07); border-color: rgba(254,162,0,.35); transform: translateY(-1px); }
.eng-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.eng-card-tag { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; font-weight: 600; }
.eng-card-t { font-size: 13.5px; font-weight: 600; color: #fff; margin-bottom: 3px; line-height: 1.3; }
.eng-card-s { font-size: 12px; line-height: 1.4; color: rgba(245,241,235,.55); }

/* Chat surface, hidden until first question is asked. When active it's
   a flex column that fills the viewport (minus nav) so the input pins
   at the bottom naturally instead of floating mid-page after a short
   thread. Same technique used by mobile below; making it the default
   fixes desktop too. */
.eng-chat { display: none; background: linear-gradient(180deg, #171c2f 0%, #0f1428 100%); padding: 24px 22px 24px; color: var(--cream); min-height: calc(100vh - var(--nav-h)); flex-direction: column; }
.eng-chat.on { display: flex; }
.eng-chat-inner { max-width: var(--chat-max-w, 720px); margin: 0 auto; flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 0; }
.eng-thread { display: flex; flex-direction: column; gap: 18px; padding: 20px 0; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* Messages hug the bottom of the thread so a short conversation sits right
   above the input instead of floating at the top with a huge gap below.
   When the thread fills up, margin-top:auto on the first child reverts to
   natural top-alignment and normal overflow scroll takes over. Standard
   chat-UX pattern (WhatsApp, iMessage, ChatGPT do the same). */
.eng-thread > *:first-child { margin-top: auto; }

.eng-msg { max-width: 88%; padding: 14px 18px; border-radius: 16px; line-height: 1.55; font-size: var(--fs-chat-body, 16px); animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both; }
.eng-msg.user { align-self: flex-end; background: var(--chat-fill); color: #fff; font-weight: 500; border-radius: 16px 16px 4px 16px; }
.eng-msg.bot { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: var(--cream); border-radius: 16px 16px 16px 4px; font-size: var(--fs-chat-body, 15.5px); line-height: 1.65; white-space: pre-wrap; }
.eng-msg.typing { align-self: flex-start; padding: 12px 20px; }
.eng-msg.typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin: 0 2px; opacity: .4; animation: engBlink 1.2s infinite; }
.eng-msg.typing i:nth-child(2) { animation-delay: .15s; }
.eng-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes engBlink { 0%,60%,100% { opacity: .3; transform: translateY(0);} 30% { opacity: 1; transform: translateY(-3px);} }
@keyframes engFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Streaming shimmer skeleton (spec 0105 G3). Replaces the bouncing
   dots with three shimmering lines the moment the send button fires,
   so the user sees answer-shape immediately instead of a 900ms gap.
   First streamed token strips `.shimmer` and swaps in the real text. */
.eng-msg.shimmer { align-self: flex-start; padding: 14px 18px; min-height: 68px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 16px 16px 16px 4px; overflow: hidden; }
.eng-shimmer { display: flex; flex-direction: column; gap: 8px; }
.eng-shimmer-line { height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 100%); background-size: 200% 100%; animation: engShimmer 1.4s ease-in-out infinite; }
.eng-shimmer-line.short { width: 62%; }
.eng-shimmer-line.mid { width: 88%; }
.eng-shimmer-line.long { width: 96%; }
@keyframes engShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Client markdown rendering (spec 0105 G2). Restrained styling that
   matches the concierge palette. Reset margins on paragraphs so the
   bubble padding controls vertical rhythm, add readable list padding,
   code blocks lean into a dark-monospaced treatment. */
.eng-msg.bot p { margin: 0 0 8px 0; }
.eng-msg.bot p:last-child { margin-bottom: 0; }
.eng-msg.bot ul, .eng-msg.bot ol { margin: 6px 0 8px 0; padding-left: 22px; }
.eng-msg.bot ul li, .eng-msg.bot ol li { margin: 2px 0; }
.eng-msg.bot h1, .eng-msg.bot h2, .eng-msg.bot h3, .eng-msg.bot h4 { margin: 10px 0 6px 0; font-family: var(--sans, "Open Sans", system-ui, sans-serif); font-weight: 600; }
.eng-msg.bot h1 { font-size: 1.08em; }
.eng-msg.bot h2 { font-size: 1.04em; }
.eng-msg.bot h3, .eng-msg.bot h4 { font-size: 1em; }
.eng-msg.bot blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); font-style: italic; }
.eng-msg.bot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; }
.eng-msg.bot pre { margin: 6px 0; padding: 10px 12px; background: rgba(0,0,0,.35); border-radius: 8px; overflow-x: auto; }
.eng-msg.bot pre code { background: transparent; padding: 0; font-size: .88em; line-height: 1.5; }
.eng-md-codewrap { position: relative; }
.eng-md-copy { position: absolute; top: 8px; right: 8px; padding: 3px 8px; font-size: 11px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 4px; cursor: pointer; font-family: var(--sans, system-ui); }
.eng-md-copy:hover { background: rgba(255,255,255,.18); }
.eng-msg.bot table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: .96em; }
.eng-msg.bot th, .eng-msg.bot td { border: 1px solid rgba(255,255,255,.15); padding: 5px 8px; text-align: left; vertical-align: top; }
.eng-msg.bot th { background: rgba(255,255,255,.06); font-weight: 600; }
.eng-msg.bot a { color: var(--orange, #FEA200); text-decoration: underline; text-underline-offset: 2px; }
.eng-msg.bot a:hover { filter: brightness(1.15); }
.eng-msg.bot strong { font-weight: 700; }
.eng-msg.bot em { font-style: italic; }

/* Inline plan cards rendered by the show_membership_cards tool */
/* Inline plan-card triptych on /try paywall + concierge-inherited surfaces.
   Same consistency rules the .scard cards on the concierge stage follow:
   uniform border, ribbon on the recommended card gets INNER accent (not
   an outward border-color swap), CTAs pinned at the bottom with a
   uniform height, feature lists share a min-height so the mid-card
   content area is visually equal even when bullet counts differ. */
.eng-plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 4px; align-items: stretch; animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both; }
@media (max-width: 720px) { .eng-plan-cards { grid-template-columns: 1fr; margin-top: 6px; } }
/* Self-contained dark card so plan cards read on both light chat surfaces
   (/try) and dark ones (/focus). Prior rule used semi-transparent white
   which vanished on light backgrounds. */
.eng-plan-card { position: relative; background: #1b2b41; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px 18px 18px; color: var(--cream, #F5F1EB); display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(23,28,47,.14); }
.eng-plan-card.rec { background: #212f47; box-shadow: 0 0 0 2px rgba(254,162,0,.65), 0 22px 40px rgba(23,28,47,.32); }
.eng-plan-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--orange, #FEA200); color: var(--ocean); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.eng-plan-name { font-family: var(--serif, Georgia, serif); font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.eng-plan-tag { font-size: 12.5px; color: rgba(245,241,235,.65); line-height: 1.4; margin: 0 0 14px; min-height: 34px; }
.eng-plan-price { margin-bottom: 14px; }
.eng-plan-price-big { font-family: var(--serif, Georgia, serif); font-size: 30px; font-weight: 600; color: #fff; }
.eng-plan-price-per { font-size: 13px; color: rgba(245,241,235,.6); margin-left: 2px; }
.eng-plan-price-custom { font-family: var(--serif, Georgia, serif); font-size: 20px; font-weight: 600; color: var(--orange, #FEA200); }
.eng-plan-price-sub { font-size: 11.5px; color: rgba(245,241,235,.5); margin-top: 2px; }
/* Feature list min-height so triptych visual weight matches even when
   the bullet count differs across plans (Fleet = 4, Yacht Master = 5,
   Live Telemetry = 6). Overflow content still flows; short lists get
   padded via the auto margin on the CTA. */
.eng-plan-card ul { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; flex: 1; min-height: 180px; }
.eng-plan-card li { padding-left: 18px; position: relative; color: rgba(245,241,235,.75); margin-bottom: 4px; }
.eng-plan-card li::before { content: "✔"; position: absolute; left: 0; color: var(--orange, #FEA200); font-size: 11px; }
/* CTA: fixed height, always pinned to card bottom (margin-top:auto). All
   three CTAs across the triptych land on the same y-baseline. */
.eng-plan-cta { background: var(--chat-fill); color: #fff; border: 1px solid transparent; padding: 0 16px; min-height: 44px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, opacity .18s ease, border-color .18s ease; }
.eng-plan-cta:hover { transform: translateY(-1px); }
/* Ghost variant for waitlist / contact-only plans. Same shape and height
   as the primary; softer treatment via a visible border on transparent.
   Hover swaps to warm orange so it still reads as a real button, not a
   faded placeholder. */
.eng-plan-cta.secondary { background: transparent; border-color: rgba(245,241,235,.32); color: var(--cream); }
.eng-plan-cta.secondary:hover { border-color: rgba(254,162,0,.55); color: var(--orange, #FEA200); background: rgba(254,162,0,.08); }

/* Inline checkout card rendered by the create_membership_checkout tool */
.eng-checkout-card { max-width: 480px; background: linear-gradient(180deg, rgba(34,47,89,.55), rgba(23,28,47,.65)); border: 1px solid rgba(254,162,0,.35); border-radius: 16px; padding: 22px 24px; color: var(--cream); animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.eng-checkout-head { border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 12px; margin-bottom: 14px; }
.eng-checkout-title { font-family: var(--serif, Georgia, serif); font-size: 20px; color: #fff; font-weight: 600; margin-bottom: 2px; }
.eng-checkout-plan { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange, #FEA200); font-weight: 600; }
.eng-checkout-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; }
.eng-checkout-row.muted { font-size: 12px; color: rgba(245,241,235,.55); }
.eng-checkout-cta { display: block; margin: 16px 0 8px; text-align: center; background: var(--chat-fill); color: #fff !important; text-decoration: none; padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: transform .12s ease; }
.eng-checkout-cta:hover { transform: translateY(-1px); }
.eng-checkout-foot { font-size: 11.5px; color: rgba(245,241,235,.55); text-align: center; }
.eng-checkout-fleet { margin: 10px 0 6px; padding: 10px 12px; background: rgba(254,162,0,.08); border: 1px solid rgba(254,162,0,.3); border-radius: 8px; font-size: 12.5px; color: rgba(245,241,235,.85); line-height: 1.45; }

/* Inline boat identification card, rendered by lookup_boat / web_search_boat.
 * Restyled for the light /try + /focus app surface, the old dark-marketing
 * treatment left the title white-on-white when this card leaked into an
 * app-shell thread. Light card, dark ink, orange primary CTA. */
.eng-boat-card { max-width: 480px; background: #ffffff; border: 1px solid #e6ebf1; border-radius: 14px; padding: 18px 20px; color: #0b1e33; box-shadow: 0 6px 16px rgba(11,20,32,.06); animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both; }
.eng-boat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef2f6; flex-wrap: wrap; }
.eng-boat-title { font-family: var(--serif, Georgia, serif); font-size: 18px; color: #0b1e33; font-weight: 700; }
.eng-boat-years { font-size: 13px; color: #6b8099; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-left: 4px; }
.eng-boat-src { font-size: 11px; color: #6b8099; font-style: italic; }
.eng-boat-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; color: #0b1e33; }
.eng-boat-row > span:first-child { color: #6b8099; }
.eng-boat-unverified { margin: 10px 0 4px; font-size: 12px; color: #b46b00; font-style: italic; padding: 8px 12px; background: rgba(254,162,0,.10); border: 1px solid rgba(254,162,0,.28); border-radius: 8px; }
.eng-boat-actions { display: flex; gap: 8px; margin-top: 14px; }
.eng-boat-cta { flex: 1; padding: 10px 14px; border-radius: 8px; border: 1px solid #d8dee5; background: transparent; color: #0b1e33; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.eng-boat-cta:hover { border-color: var(--orange, #FEA200); color: var(--orange, #FEA200); }
.eng-boat-cta.primary { background: var(--orange, #FEA200); color: var(--ocean); border: 1px solid var(--orange, #FEA200); }
.eng-boat-cta.primary:hover { transform: translateY(-1px); color: var(--ocean); border-color: var(--orange, #FEA200); }

/* Inline waitlist confirmation card */
.eng-waitlist-card { display: flex; gap: 14px; align-items: flex-start; max-width: 460px; background: rgba(255,255,255,.05); border: 1px solid rgba(48,209,88,.35); border-radius: 12px; padding: 16px 18px; color: var(--cream); animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both; }
.eng-waitlist-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(48,209,88,.15); color: #4ade80; display: grid; place-items: center; font-size: 18px; }
.eng-waitlist-title { font-family: var(--serif, Georgia, serif); font-size: 16px; color: #fff; font-weight: 600; margin-bottom: 4px; }
.eng-waitlist-body { font-size: 13.5px; line-height: 1.5; color: rgba(245,241,235,.75); }

/* Feedback bar under each bot reply */
.eng-msg-wrap { display: flex; flex-direction: column; align-self: flex-start; max-width: 88%; }
.eng-msg-wrap.user { align-self: flex-end; }
.eng-msg-wrap.user .eng-msg.user { max-width: 100%; }
.eng-msg-wrap.bot .eng-msg.bot { max-width: 100%; }
.eng-fb { display: flex; gap: 6px; align-items: center; padding: 6px 4px 0 4px; opacity: 0.6; transition: opacity .18s ease; }
.eng-msg-wrap:hover .eng-fb { opacity: 1; }
.eng-fb-btn { background: transparent; border: 1px solid rgba(255,255,255,.12); color: var(--cream); font-size: 15px; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: border-color .18s ease, transform .12s ease, color .18s ease, background .18s ease; display: inline-flex; align-items: center; justify-content: center; }
.eng-fb-btn:hover { border-color: rgba(254,162,0,.55); transform: translateY(-1px); }
.eng-fb-btn.speak { padding: 4px 8px; }
.eng-fb-btn.speaking { background: rgba(254,162,0,.18); border-color: var(--orange); color: var(--orange); animation: engSpeakPulse 1.4s ease-in-out infinite; }
@keyframes engSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254,162,0,.35); }
  50% { box-shadow: 0 0 0 6px rgba(254,162,0,0); }
}
.eng-fb-thanks { font-size: 12px; color: rgba(245,241,235,.55); font-style: italic; }
.eng-fb-comment { display: flex; gap: 6px; align-items: center; margin-top: 4px; width: 100%; }
.eng-fb-in { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--cream); padding: 6px 10px; border-radius: 8px; font-size: 13px; font-family: inherit; }
.eng-fb-in:focus { outline: none; border-color: rgba(254,162,0,.55); }
.eng-fb-submit, .eng-fb-skip { background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--cream); font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.eng-fb-submit { border-color: rgba(254,162,0,.5); color: var(--orange); }

.eng-input-wrap { display: flex; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; margin-top: 10px; }
.eng-input { flex: 1; background: transparent; border: 0; color: #fff; font-size: 16px; font-family: inherit; padding: 6px 8px; outline: none; }
.eng-input::placeholder { color: rgba(245,241,235,.4); }
.eng-mic { width: 40px; height: 40px; flex: none; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--cream); cursor: pointer; display: grid; place-items: center; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.eng-mic:hover { background: rgba(255,255,255,.08); border-color: rgba(254,162,0,.5); color: var(--orange); }
.eng-mic.listening { background: rgba(255,69,58,.15); border-color: #ff453a; color: #ff453a; animation: micPulse 1.2s ease-in-out infinite; }
.eng-mic[hidden] { display: none; }
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,58,.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,69,58,0); }
}

.eng-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--chat-fill); color: #fff; cursor: pointer; font-size: 17px; display: grid; place-items: center; transition: transform .16s ease; }
.eng-send:hover { transform: scale(1.05); }
.eng-send:disabled { opacity: .5; cursor: wait; }

.eng-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 0; font-size: 12.5px; color: rgba(245,241,235,.55); flex-wrap: wrap; gap: 8px; }
.eng-autospeak { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; cursor: pointer; font-size: 12px; color: rgba(245,241,235,.55); }
.eng-autospeak input { accent-color: var(--orange); margin: 0; }
.eng-autospeak[hidden] { display: none; }
.eng-foot em { font-style: italic; color: rgba(245,241,235,.7); }
.eng-foot a { color: var(--orange); text-decoration: none; font-weight: 500; }
.eng-foot a:hover { text-decoration: underline; }

/* 11-13" laptops (MacBook Air 11, 13"), the previous design assumed
   full-screen desktop widths and read like a slide deck at this size. */
@media (max-width: 1200px) {
  .eng-hero { padding: calc(var(--nav-h) + 18px) 20px 20px; }
  .eng-h1 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; }
  .eng-sub { font-size: 14px; margin-bottom: 16px; }
  .eng-hint { font-size: 12px; margin-bottom: 14px; }
  .eng-cards { gap: 9px; }
  .eng-card { padding: 11px 13px 13px; }
  .eng-card-t { font-size: 13px; }
  .eng-card-s { font-size: 11.5px; }
  .eng-chat { padding: 20px 18px 20px; }
  .eng-thread { padding: 16px 0; gap: 12px; }
  .eng-msg { padding: 12px 16px; }
  .eng-mic, .eng-send { width: 36px; height: 36px; }
}

/* Short viewports (11" MacBook Air landscape at ~600px usable, or any
   laptop with browser chrome eating vertical space). Fresh-eyes agent
   saw only 4 of 8 cards on a 1366x600 viewport. Squeeze hero + cards
   so all 8 fit without scroll: drop the sub entirely (the badge and
   the chip labels convey what the surface is), tighten spacing, hide
   the card subtitle, and keep tag+title only. */
@media (max-height: 720px) {
  .eng-hero { padding: calc(var(--nav-h) + 10px) 20px 12px; }
  .eng-eyebrow { margin-bottom: 8px; }
  .eng-h1 { font-size: 26px; margin-bottom: 8px; }
  .eng-sub { display: none; }
  .eng-input-hero { margin-bottom: 6px; }
  .eng-hint { margin-bottom: 10px; font-size: 11.5px; }
  .eng-cards { gap: 8px; }
  .eng-card { padding: 9px 12px 10px; }
  .eng-card-tag { margin-bottom: 3px; font-size: 9.5px; }
  .eng-card-t { font-size: 12.5px; margin-bottom: 0; }
  .eng-card-s { display: none; }
}
@media (max-width: 620px) {
  .eng-foot { flex-direction: column; gap: 6px; text-align: center; }
  .eng-msg { max-width: 94%; }
  .eng-input-wrap { padding: 10px 12px; }
  .eng-mic, .eng-send { width: 34px; height: 34px; }
}

/* When chat is on, collapse the hero so the conversation is the focus.
   Also hide the marketing footer at every size so the pinned input sits
   at the true bottom of the viewport instead of leaving a scroll-only
   gap of "YMH ENGINEER / INQUIRE" below it. */
body.eng-chatting .eng-hero { display: none; }
body.eng-chatting > footer.pad { display: none; }
/* Body default background is #fff which peeks through as a white strip
   at the bottom edge whenever the chat container falls a pixel short
   of covering the viewport (rounding, keyboard mount, etc). Paint the
   body dark while chatting so any leaked area matches. */
body.eng-chatting { background: #0f1428; }

/* Mobile chat: pin the chat surface to the viewport so only the thread
   scrolls. Previous behavior: whole page scrolled, which meant the input
   bar disappeared under the fixed nav on scroll-up, and the message text
   passed behind the logo. Fix: on <900px, .eng-chat becomes a fixed
   container starting below the nav, and inside it a flex column of
   [scrollable thread] + [pinned input] + [foot]. Nav stays untouched. */
@media (max-width: 900px) {
  body.eng-chatting { overflow: hidden; }
  body.eng-chatting .eng-chat {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px 12px;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.eng-chatting .eng-chat-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }
  body.eng-chatting .eng-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  body.eng-chatting .eng-input-wrap { flex: none; margin-top: 8px; }
  body.eng-chatting .eng-foot { flex: none; padding: 6px 4px 0; }
  /* footer.pad hide rule lives at the top-level now, applies everywhere. */
}
/* Use dynamic viewport height on modern browsers so the input pin holds
   when the mobile browser chrome (address bar) collapses on scroll. */
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    body.eng-chatting .eng-chat { height: calc(100dvh - var(--nav-h)); }
  }
}

/* ── Spec 0150 Layer 5 · Chat bubble overflow guard ─────────────────
 * Owner iPhone screenshot 2026-08-14 showed message text clipping past
 * the right edge of the viewport at 375px. Root cause: long unbroken
 * strings (URLs, part numbers, SPN codes) blew through the flex
 * container. Bubble max-width was already relative (88%) but a single
 * unbroken token forced the whole bubble wider than its parent. Fix
 * both the width cap (belt-and-suspenders 85vw at <=640) and the word
 * break policy so URLs and codes wrap mid-string instead of pushing.
 * Additive: does not touch the desktop bubble rules above. */
@media (max-width: 640px) {
  .eng-msg,
  .eng-msg.user,
  .eng-msg.bot,
  .eng-msg.shimmer {
    max-width: min(85vw, 100%) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .eng-msg.bot pre,
  .eng-msg.bot code {
    /* Code blocks still get their own overflow: don't let them force
       the bubble past viewport. */
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .eng-msg-wrap,
  .eng-msg-wrap.user,
  .eng-msg-wrap.bot {
    max-width: 85vw;
  }
}

/* ── Spec 0150 Layer 5 · Compose bar safe-area + z-index ────────────
 * Owner iPhone screenshot showed compose bar underlapping content and
 * clipping at iOS home indicator. Enforce z-index above scroll content
 * and pad for env(safe-area-inset-bottom). Additive: only applies at
 * mobile widths and does not affect desktop or the /app/* surfaces
 * (which have their own 0149.L1 rule already). */
@media (max-width: 900px) {
  body.eng-chatting .eng-input-wrap {
    position: relative;
    z-index: 5;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    margin-bottom: 0;
  }
  .eng-input {
    font-size: 16px; /* iOS: prevents zoom on focus */
  }
}

/* ── Spec 0150 Layer 2 · /engineer right rail collapse below chat ───
 * Owner iPhone screenshot showed .appshell-rail bleeding past the
 * viewport at 375. The desktop rail on /engineer sits at grid col 3;
 * app-shell-mobile.css already re-stacks the rail below main on
 * <=767.98 via grid-row: 3 for /app/* pages. /engineer uses the same
 * class names so those rules apply, but the rail's inline widget
 * padding still overflowed. Constrain widget widths and drop right
 * rail sections into a tidy single-column stack. */
@media (max-width: 767.98px) {
  .appshell-rail {
    box-sizing: border-box;
  }
  .appshell-rail > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .appshell-rail .rail-photo,
  .appshell-rail .rail-focus-care,
  .appshell-rail .oemd-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 0150-hotfix: keep tiles single-column all the way through 767 so
   * content doesn't clip on iPhone Plus / Pro Max (428). Owner
   * screenshot 2026-08-14 confirmed 2-col at 428 was clipping right
   * column tiles. 2-col only from 768+ where each tile has room. */
  .oemd-tiles {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inspection checklist card (rendered inline in chat by
   focus-checklist-render.js). Light-theme app surface. ────────────── */
.ymh-cl-card {
  max-width: 620px;
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  padding: 18px 20px 16px;
  color: #0b1e33;
  box-shadow: 0 6px 16px rgba(11,20,32,.06);
  animation: engFadeIn .35s cubic-bezier(.2,.9,.3,1.05) both;
}
.ymh-cl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.ymh-cl-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px; color: #0b1e33; font-weight: 700;
}
.ymh-cl-meta {
  font-size: 11.5px; color: #6b8099; text-align: right;
}
.ymh-cl-meta b { color: #0b1e33; font-weight: 700; }
.ymh-cl-desc {
  font-size: 13px; color: #6b8099; margin: 0 0 12px; line-height: 1.5;
}
.ymh-cl-still-good {
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(245,166,35,.55);
  background: rgba(245,166,35,.08);
  color: #b46b00;
  font: 600 12.5px/1.3 inherit;
  cursor: pointer;
  text-align: left;
}
.ymh-cl-still-good:hover { background: rgba(245,166,35,.14); }

.ymh-cl-body { display: flex; flex-direction: column; gap: 14px; }
.ymh-cl-section {
  border-top: 1px solid #eef2f6;
  padding-top: 10px;
}
.ymh-cl-section:first-child { border-top: 0; padding-top: 0; }
.ymh-cl-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6b8099; margin-bottom: 6px;
}

.ymh-cl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid transparent;
  margin-bottom: 6px;
}
.ymh-cl-row.passed  { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.20); }
.ymh-cl-row.flagged { background: rgba(217,119,6,.08);   border-color: rgba(217,119,6,.22); }

.ymh-cl-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  user-select: none;
}
.ymh-cl-check input { display: none; }
.ymh-cl-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid #c9d4e1; background: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
  transition: all .12s ease;
}
.ymh-cl-check input:checked + .ymh-cl-box {
  background: #16a34a; border-color: #16a34a;
}
.ymh-cl-check input:checked + .ymh-cl-box::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ymh-cl-label {
  font-size: 13.5px; color: #0b1e33; font-weight: 500;
  line-height: 1.35;
}
.ymh-cl-hint {
  padding-left: 28px; font-size: 11.5px; color: #6b8099;
  font-style: italic; margin-top: -2px;
}
.ymh-cl-prior {
  padding-left: 28px; font-size: 11.5px; color: #b46b00;
  margin-top: 2px;
}
.ymh-cl-learned {
  padding-left: 28px; font-size: 11px; color: #4a5c73;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px;
}
.ymh-cl-learned svg { color: #f5a623; flex: 0 0 auto; }
.ymh-cl-note {
  margin-left: 28px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  background: #ffffff;
  font: 400 12.5px/1.3 inherit;
  color: #0b1e33;
  transition: border-color .12s ease;
}
.ymh-cl-note:focus {
  outline: none; border-color: var(--ymh-orange, #f5a623);
  box-shadow: 0 0 0 3px rgba(245,166,35,.14);
}
.ymh-cl-note:placeholder-shown { background: #f7f9fc; }

.ymh-cl-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #eef2f6;
  flex-wrap: wrap;
}
.ymh-cl-status {
  font-size: 12.5px; color: #6b8099; line-height: 1.4;
}
.ymh-cl-status b { color: #0b1e33; font-weight: 700; }
.ymh-cl-save {
  padding: 10px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--ymh-orange, #f5a623);
  color: var(--ocean);
  font: 700 13px/1.2 inherit;
  cursor: pointer;
  transition: filter .12s ease;
}
.ymh-cl-save:hover:not(:disabled) { filter: brightness(1.03); }
.ymh-cl-save:disabled { opacity: .45; cursor: not-allowed; }

/* ── Rail widget: last inspection summary ────────────────────────── */
/* Same surface as the passport's other rail cards (.app-rail-crew and
   friends): white ground, the same hairline, the same radius and
   padding. It used to sit on #f7f9fc with a different border token,
   which read as a panel borrowed from another page rather than one of
   the rail's own. */
.rail-inspection {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(11,26,47,.06);
  display: flex; flex-direction: column; gap: 6px;
}
.rail-inspection-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.rail-inspection-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ymh-muted, #6b8099);
}
.rail-inspection-when {
  font-size: 11px; color: var(--ymh-muted, #6b8099); font-weight: 600;
}
.rail-inspection-body {
  font-size: 12.5px; color: var(--ymh-ink, #0b1e33); font-weight: 600;
}
.rail-inspection-flags {
  font-size: 11px; color: #b46b00; line-height: 1.4;
}
/* The rail tile's CTA was removed: this card reports, it does not act.
   Starting a walk belongs on the Inspections page. Styles dropped with
   it rather than left orphaned. */

/* ── Sign-up card (mid-chat free-tier capture, 4 fields) ─────────────
 * Replaces the old thin "save this thread" strip. Full card treatment
 * because the ask is bigger (email + boat) and the payoff is bigger
 * (unlocks basic tier with 30 chats / 5hr window). */
.eng-signup-card {
  padding: 18px 20px 16px;
  border: 1px solid rgba(245,166,35,.35);
  background: linear-gradient(135deg, rgba(245,166,35,.06) 0%, #ffffff 60%);
  border-radius: 14px;
  color: #0b1e33;
  box-shadow: 0 6px 20px rgba(11,20,32,.08);
}
.eng-signup-eyebrow {
  font-size: 10.5px; letter-spacing: .09em; font-weight: 700;
  color: var(--orange, #FEA200); text-transform: uppercase;
  margin-bottom: 6px;
}
.eng-signup-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px; font-weight: 700; color: #0b1e33;
  line-height: 1.25; margin-bottom: 4px;
}
.eng-signup-sub {
  font-size: 13px; color: #6b8099; line-height: 1.5;
  margin-bottom: 14px;
}
.eng-signup-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 0; padding: 0;
}
.eng-signup-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.eng-signup-field-full { grid-column: 1 / -1; }
.eng-signup-field span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: #6b8099; text-transform: uppercase;
}
.eng-signup-field input,
.eng-signup-field select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e0e6ed;
  background: #ffffff;
  font: 500 13.5px/1.3 inherit;
  color: #0b1e33;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  min-width: 0;
}
.eng-signup-field input:focus,
.eng-signup-field select:focus {
  border-color: var(--orange, #FEA200);
  box-shadow: 0 0 0 3px rgba(245,166,35,.14);
}
.eng-signup-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px;
}
.eng-signup-submit {
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--orange, #FEA200);
  color: var(--ocean);
  font: 700 13px/1.2 inherit;
  cursor: pointer;
  transition: filter .12s ease;
}
.eng-signup-submit:hover:not(:disabled) { filter: brightness(1.03); }
.eng-signup-submit:disabled { opacity: .55; cursor: not-allowed; }
.eng-signup-form .eng-capture-skip {
  background: transparent; border: 0;
  color: #6b8099; font: 500 12px/1.2 inherit;
  cursor: pointer; padding: 0 6px;
}
.eng-signup-form .eng-capture-skip:hover { color: #0b1e33; }
.eng-signup-note {
  grid-column: 1 / -1;
  font-size: 11px; color: #8a9baf; line-height: 1.4;
  margin-top: 2px;
}
/* Turn-0 magic-profile preview panel. Sits inside the sign-up card below
   the form so the captain sees the profile materialize as they type. */
.eng-preview-panel {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(11,30,51,.04);
  border: 1px dashed rgba(11,30,51,.14);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.eng-preview-panel[data-empty="true"] {
  opacity: .78;
}
.eng-preview-panel:not([data-empty="true"]) {
  background: rgba(245,166,35,.06);
  border-style: solid;
  border-color: rgba(245,166,35,.32);
}
.eng-preview-silhouette svg { width: 88px; height: auto; display: block; }
.eng-preview-label {
  font-size: 10.5px; letter-spacing: .09em; font-weight: 700;
  color: var(--orange, #FEA200); text-transform: uppercase;
  margin-bottom: 4px;
}
.eng-preview-vessel {
  font-size: 13.5px; color: #0b1e33; font-weight: 600;
  line-height: 1.35; margin-bottom: 6px;
}
.eng-preview-bullets {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 11.5px; color: #6b8099;
}
.eng-preview-bullets span::before {
  content: "✓";
  color: var(--orange, #FEA200);
  margin-right: 4px;
  font-weight: 700;
}
@media (max-width: 520px) {
  .eng-preview-panel { grid-template-columns: 1fr; }
  .eng-preview-silhouette svg { width: 64px; margin: 0 auto; }
}

/* Post-signup guide tiles, capability triage right after profile capture,
   so the captain doesn't stare at a blank input wondering what to ask. */
.eng-guide-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 720px) { .eng-guide-tiles { grid-template-columns: 1fr 1fr; } }
.eng-guide-tile {
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(11,30,51,.10);
  border-radius: 10px;
  padding: 12px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.eng-guide-tile:hover {
  border-color: var(--orange, #FEA200);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11,20,32,.10);
}
.eng-guide-tile-title {
  font-size: 13px; font-weight: 700; color: #0b1e33; margin-bottom: 2px;
}
.eng-guide-tile-sub {
  font-size: 11.5px; color: #6b8099; line-height: 1.35;
}

.eng-signup-card-ok {
  border-color: rgba(22,163,74,.35);
  background: linear-gradient(135deg, rgba(22,163,74,.06) 0%, #ffffff 60%);
}
@media (max-width: 640px) {
  .eng-signup-form { grid-template-columns: 1fr; }
}

/* ── Rate-limit wall (basic member hits 30/5hr cap) ─────────────────── */
.eng-rl-wrap {
  grid-column: 1 / -1;
  max-width: 620px;
  width: 100%;
  margin: 12px auto 0;
}
.eng-rl-card {
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #171c2f 0%, #0f1428 100%);
  color: var(--cream);
  border: 1px solid rgba(245,166,35,.28);
  box-shadow: 0 12px 30px rgba(11,20,32,.35);
}
.eng-rl-eyebrow {
  font-size: 10.5px; letter-spacing: .12em; font-weight: 700;
  color: var(--orange, #FEA200); text-transform: uppercase;
  margin-bottom: 8px;
}
.eng-rl-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px; font-weight: 600; color: #ffffff;
  line-height: 1.25; margin-bottom: 8px;
}
.eng-rl-timer {
  font-size: 14.5px; color: rgba(245,241,235,.9); margin-bottom: 12px;
}
.eng-rl-timer b { color: var(--orange, #FEA200); font-weight: 700; }
.eng-rl-sub {
  font-size: 13px; color: rgba(245,241,235,.65); line-height: 1.55;
  margin-bottom: 16px;
}
.eng-rl-actions { display: flex; flex-direction: column; gap: 8px; }
.eng-rl-upgrade {
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--orange, #FEA200);
  color: var(--ocean);
  font: 700 13.5px/1.2 inherit;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.eng-rl-upgrade:hover { filter: brightness(1.05); transform: translateY(-1px); }
.eng-rl-secondary {
  font-size: 11.5px; color: rgba(245,241,235,.55);
  text-align: center; line-height: 1.4;
}

/* Floating guide bubble, contextual chip anchored bottom-right of the chat
   surface. Whispers guidance instead of demanding action. Auto-swaps text
   as identity + turn count evolve; dismissible per session. */
.eng-guide-bubble {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  background: #0b1e33;
  color: var(--cream);
  border-radius: 999px;
  border: 1px solid rgba(245,166,35,.35);
  box-shadow: 0 12px 28px rgba(11,20,32,.35);
  font: 600 12.5px/1.2 inherit;
  max-width: 320px;
  animation: engGuideFadeIn .4s ease both;
}
@keyframes engGuideFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.eng-guide-bubble-icon { color: var(--orange, #FEA200); display: inline-flex; }
.eng-guide-bubble-text { flex: 1 1 auto; min-width: 0; }
.eng-guide-bubble-close {
  background: transparent; border: 0; color: rgba(245,241,235,.5);
  font: 700 16px/1 inherit; cursor: pointer; padding: 0 4px;
  transition: color .12s ease;
}
.eng-guide-bubble-close:hover { color: #fff; }
@media (max-width: 520px) {
  .eng-guide-bubble { bottom: 96px; right: 8px; left: 8px; max-width: none; }
}

/* Trip-profile + crew picker at the top of the pre-departure checklist.
   Two rows of pills so the captain sets 'coastal / offshore / delivery'
   and 'solo / with crew' before the items render. Choice persists per
   vessel in localStorage. */
.ymh-cl-profile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; margin: 0 0 12px;
  background: rgba(11,30,51,.04);
  border: 1px solid rgba(11,30,51,.10);
  border-radius: 10px;
}
.ymh-cl-profile-row {
  display: flex; align-items: center; gap: 10px;
}
.ymh-cl-profile-label {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: #6b8099; width: 40px;
}
.ymh-cl-profile-pills {
  display: inline-flex; gap: 4px;
  background: #fff; border: 1px solid rgba(11,30,51,.10);
  border-radius: 999px; padding: 3px;
}
.ymh-cl-profile-pills button {
  background: transparent; border: 0; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  font: 600 12px/1 inherit; color: #6b8099;
  transition: background .12s ease, color .12s ease;
}
.ymh-cl-profile-pills button.active {
  background: #0b1e33; color: #fff;
}
.ymh-cl-weather {
  font-size: 11.5px; color: #6b8099; line-height: 1.4;
  padding: 6px 2px 0;
}
.ymh-cl-weather b { color: #0b1e33; font-weight: 700; }

/* Source badge next to items added by trip profile or weather rules.
   Keeps the captain aware WHY a given item is on this run's list. */
.ymh-cl-src {
  display: inline-block;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  margin-left: 8px;
  vertical-align: 1px;
}
.ymh-cl-src.trip { background: rgba(59,130,246,.14); color: #1d4ed8; }
.ymh-cl-src.weather { background: rgba(245,166,35,.16); color: #7c2d12; }

/* Standing accuracy notice under the composer, the way a chat product should carry
   it: visible while you type, not buried in a policy page. The engineer answers
   marine engineering questions for anyone, free and with no signup, so this is the
   only place a visitor is guaranteed to see it. */
.eng-disclaimer { margin: 8px 0 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: #3d4b5c; }
.eng-disclaimer a { color: #1f2d3d; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .eng-disclaimer { font-size: 11.5px; } }

/* Every surface that renders .eng-disclaimer is light: /try, /app, and /focus all
   sit on #f5f7f9. It was previously cream, on the mistaken assumption that /try was
   a dark page, which made the notice invisible there. The colour above is the dark
   ink that works on all three; there is no dark variant because there is no dark
   surface. #3d4b5c on #f5f7f9 is 8.29:1, the link 13.03:1, against AA's 4.5:1. */
.eng-disclaimer a:hover,
.eng-disclaimer a:focus-visible { color: #b5720c; }

/* ── Chat stream polish (2026-08-21) · caret, pinning chip, native
   entrances, edge fades. Mechanics only — no visual redesign. ── */

/* Streaming caret: the spec-0105 rule in oem-dashboard.css owns the caret
   itself (.oemd-chat-hero .eng-msg.streaming::after), and #engThread sits
   inside .oemd-chat-hero, so it renders. What did not survive is its
   reduced-motion off switch, restored in the block below. */

/* Jump-to-latest chip: shown only when a stream is running and the
   reader scrolled up. */
.eng-jump-latest {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(20, 30, 44, .92);
  color: var(--cream, #f5f1eb);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 20;
  backdrop-filter: blur(6px);
}
.eng-jump-latest--on {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The thread melts at its edges instead of clipping hard under the
   bars — pure CSS, guarded so unsupporting browsers lose nothing. */
@supports (mask-image: linear-gradient(black, black)) {
  .eng-thread {
    mask-image: linear-gradient(to bottom, transparent 0, black 16px, black calc(100% - 12px), transparent 100%);
  }
}

/* Native entrance: transition + @starting-style on a spring where the
   browser has both; the engFadeIn keyframe (declared above) remains
   the fallback everywhere else. */
@supports (transition-timing-function: linear(0, 1)) {
  .eng-msg {
    animation: none;
    transition: opacity 260ms linear(
      0, 0.0047 0.9%, 0.0195 1.9%, 0.0462 3%, 0.0921 4.5%, 0.1809 7%,
      0.4194 12.6%, 0.6544 18.2%, 0.8442 24.1%, 0.9748 30.5%, 1.0163 33.8%,
      1.0562 41.2%, 1.0439 53.2%, 1.0052 72.6%, 1
    ), transform 260ms linear(
      0, 0.0047 0.9%, 0.0195 1.9%, 0.0462 3%, 0.0921 4.5%, 0.1809 7%,
      0.4194 12.6%, 0.6544 18.2%, 0.8442 24.1%, 0.9748 30.5%, 1.0163 33.8%,
      1.0562 41.2%, 1.0439 53.2%, 1.0052 72.6%, 1
    );
  }
  @starting-style {
    .eng-msg { opacity: 0; transform: translateY(8px) scale(0.985); }
  }
}

/* Send button gets a tactile press. */
.eng-send:active { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .eng-msg { animation: none; transition: none; }
  /* The line above stops the bubble, not its pseudo-element: an animation on
     ::after is a separate animation and is not cancelled by turning the
     parent's off. The caret blinks via aiCursor in oem-dashboard.css, which
     carries no reduced-motion block of its own, so without this line a reader
     who asked for less motion gets an infinite blink. */
  .eng-msg.streaming::after { animation: none; }
  .eng-jump-latest { transition: none; }
  .eng-thread { mask-image: none; }
}


/* Unconfirmed-equipment disclosure on the in-chat checklist.
   A captain with 21 items on file and none confirmed gets a five-item
   generic walk. The list looks complete because every list looks
   complete, so the omission has to be stated rather than inferred. */
.ymh-cl-notice {
  background: rgba(210,153,34,.10);
  border: 1px solid rgba(210,153,34,.30);
  color: #d29922;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  font-size: 13px;
  line-height: 1.5;
}
.ymh-cl-notice a { color: #d29922; font-weight: 600; text-underline-offset: 2px; }