/* ══════════════════════════════════════════════════════════════════════
   HF BRAND LAYER — the ONLY deviation from stock Fomantic UI.
   Re-skins Fomantic to the HF house style (mint accent + Outfit type) and adds
   the thin chat-app layout Fomantic has no component for. Delete this file and
   the pages render as plain stock Fomantic.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --mint: #01a371;
  --mint-bright: #05c48e;
  /* Mint for SMALL text (rail rows, chips): --mint on white is ~3.2:1, which
     fails WCAG AA below ~24px. This darker step reads as the same family at
     ~5.2:1. Large display mint (the "Hello." greeting) can stay --mint. */
  --mint-ink: #027a58;
  --ink: #013026;
  --ink-soft: #46594f;
  /* ~4.7:1 on white (the old #8aada0 was ~2.4:1 — under AA even for large text). */
  --ink-faint: #5c7a6f;
  --panel: #f4f7f6;
  --line: #e4e9e7;
}

/* Lock light rendering even if the OS / host is dark — without this the dark
   mode leaks into form controls and inputs render dark-on-dark. (Mandatory.) */
html, body { color-scheme: light; }
input, button, textarea { color-scheme: light; }

html { font-size: 16px; }
body { background: #fff; color: var(--ink); font-family: 'Outfit', sans-serif; }
body, .ui.header, .ui.button, .ui.input > input, .ui.form input, h1, h2, h3, h4, h5 {
  font-family: 'Outfit', sans-serif;
}
/* Fomantic puts Lato on its component containers (.ui.menu, .ui.accordion) and
   on higher-specificity input selectors (.ui.icon.input > input) that out-rank
   the generic rule above — so the brand font silently fell back to Lato on the
   wordmark, the rail group titles, and the composer input. Re-assert Outfit at
   matching specificity; the mono `.hf-eyebrow` rule still wins where it applies. */
.ui.menu,
.ui.accordion .title:not(.ui),
.ui.icon.input > input,
.ui.icon.input > textarea { font-family: 'Outfit', sans-serif; }
.ui.header { color: var(--ink); font-weight: 500; letter-spacing: -.015em; }
a { color: var(--mint); }
a:hover { color: var(--mint-bright); }

/* Mint primary button (Fomantic's default primary is blue). */
.ui.primary.button { background-color: var(--mint); }
.ui.primary.button:hover,
.ui.primary.button:focus { background-color: #018a60; }

/* Flat theme — site-wide. Ported from Fomantic's src/themes/flat
   collections/form.overrides (the flat theme isn't in the compiled CDN bundle):
   every form input is underline-only — transparent, no box, square, 1px bottom
   border — with the focus underline in brand mint. */
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="number"],
.ui.form input[type="url"],
.ui.form input[type="tel"],
.ui.form textarea {
  background: transparent !important; border: none !important;
  border-bottom: 1px solid #ddd !important; border-radius: 0 !important; box-shadow: none !important;
  resize: none; line-height: 1.5; overflow-y: auto;
}
.ui.form input:focus,
.ui.form textarea:focus { border-bottom: 1px solid var(--mint) !important; }

/* Wordmark: slashes + dot in bright mint. */
.wordmark { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.wordmark .slash { color: var(--mint-bright); }
.wordmark-corner {
  position: fixed; top: 1.4rem; left: 1.6rem; z-index: 10;
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.wordmark-corner .slash { color: var(--mint-bright); }

/* The small uppercase mono "eyebrow" labels. */
.hf-eyebrow {
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  font-size: .66rem; letter-spacing: .14em; font-weight: 500; color: var(--ink-faint);
}

/* Override for lookup labels to show friendly text in normal case */
.lookup.hf-eyebrow {
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  color: var(--ink-faint);
}

/* ── Auth screens (sign in / link sent) ───────────────────────────────── */
/* The grid is a direct child of body: zero out Fomantic's -1rem gutter
   margins or the page overflows the viewport by 16px — a sideways jiggle on
   the first screen a guest ever sees. The column caps at its own 100% so a
   375px phone fits; 380px stays the cap on anything wider. */
.auth-grid.ui.grid { margin: 0; width: 100%; min-height: 100vh; }
.auth-column { max-width: min(380px, 100%); text-align: left; }
.auth-title { font-size: 1.7rem; margin: .35rem 0 .4rem; }
.auth-lede { color: var(--ink-soft); margin-bottom: 1.6rem; }
.auth-column .hf-eyebrow { margin-bottom: 1.1rem; }
.auth-foot { color: var(--ink-faint); font-size: .8rem; margin-top: 1.1rem; }
.auth-foot a { color: var(--mint); }
.ui.primary.large.fluid.button { margin-top: .25rem; }

.sent-column { text-align: center; max-width: 420px; }
.sent-header .circular.mail.icon { color: var(--mint); background: #e8f7f2; box-shadow: 0 0 0 .5px #bfe7d7; }
.sent-text { color: var(--ink-soft); line-height: 1.6; }
.sent-addr { color: var(--ink); }
.sent-exp { color: var(--ink-faint); font-size: .8rem; margin-top: .6rem; }
.sent-restart { display: inline-block; margin-top: 1.5rem; color: var(--mint); }

/* ── Chat shell (full-height app; Fomantic has no layout for this) ─────── */
/* The width cap + side gutters come from Fomantic's `ui container` (responsive
   max-widths, centered). We only add the full-height flex column on top. */
.app-shell.ui.container { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.ui.menu.topbar { margin: 0; border: none; box-shadow: none; border-radius: 0; min-height: 3.25rem; }
.ui.menu.topbar .item.wordmark { font-size: 1.3rem; }
.ui.menu.topbar .item.wordmark::before,
.ui.menu.topbar .right.menu .item::before { display: none; }  /* no dividers */
.ui.menu.topbar .tenant { color: var(--mint); font-size: .82rem; }
.ui.menu.topbar .email { color: var(--ink-faint); font-size: .82rem; }

.app-body { flex: 1; display: flex; min-height: 0; position: relative; }
/* min-height:0 at EVERY flex level below the viewport-capped shell, or the
   msgs column grows to its content instead of scrolling (flex items default
   to min-height:auto; one missing link and answers run off the page). */
.app-body > .pusher { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* ── Responsive shell ──────────────────────────────────────────────────── */
/* One rail element, two behaviors (P0-1 spec): a stock `ui sidebar` overlay
   drawer under Fomantic's mobile breakpoint; pinned back to a static 236px
   column at desktop widths. The overrides below are the deliberate cost of
   keeping a single accordion instance (no duplicated rail state). */
@media (min-width: 768px) {
  .rail-toggle { display: none !important; }
  .app-body > .ui.sidebar.rail-sidebar {
    position: static !important; transform: none !important;
    visibility: visible !important; display: block !important;
    width: 272px !important; flex-shrink: 0;
    height: auto !important; max-height: none !important;
    overflow-y: auto !important; box-shadow: none !important;
    background: transparent; padding: .5rem 0;
  }
}
@media (max-width: 767.98px) {
  .app-body > .ui.sidebar.rail-sidebar { background: #fff; padding: .5rem 0; }
  .ui.menu.topbar .email { display: none; }   /* keep the small topbar quiet */
  .ui.menu.topbar .tenant { display: none; }
  .msgs { padding: 1rem .9rem; }
  .composer { padding: .6rem .8rem 1.2rem; }
  .empty-state { padding: 1.4rem; }
  .turn.user { max-width: 92%; }
}
/* Phone-width topbar: with default menu paddings "Pre-IPO hiring" and Sign out
   sat off the right edge of a 375px screen — unreachable, since the hamburger
   only opens conversations. Tighten items until everything fits (measured on
   the live deploy: this exact set lands Sign out inside a 375px viewport),
   and let the bar scroll sideways as the failsafe on anything narrower. */
@media (max-width: 520px) {
  .ui.menu.topbar { overflow-x: auto; }
  .ui.menu.topbar .item.wordmark { font-size: 1rem; padding-left: .25em; padding-right: .25em; }
  .ui.menu.topbar .right.menu .item { padding-left: .3em; padding-right: .3em; font-size: .78rem; }
  .ui.menu.topbar .rail-toggle { padding-left: .5em; padding-right: .3em; }
  .ui.menu.topbar .signout-btn { padding: .3rem .15rem; }
}
/* Fade content out as it scrolls up under the topbar — sits above the scroll layer. */
.main-col::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3rem;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 1;
}

/* ── Rail — stock `ui vertical accordion menu`, de-chromed to the brand ── */
/* The structure is the documented accordion-menu pattern (see
   docs/superpowers/plans/subtasks/P0-1-rail-markup-spec.md); this layer only
   strips the menu's box chrome and recolors to the house style. Caret rotation
   is stock accordion behavior — no JS, no icon overrides needed. */
#rail-accordion.ui.vertical.menu {
  width: 100%; background: transparent;
  border: none; box-shadow: none; border-radius: 0; margin: 0;
}
#rail-accordion.ui.menu > .item { padding: 0; }        /* groups own no box */
#rail-accordion.ui.menu .item::before { display: none; }  /* no divider lines */
/* Breathing room between groups — without it closed titles stack at an exact
   42px pitch and the rail reads as one undifferentiated block. */
#rail-accordion.ui.menu > .item + .item { margin-top: .4rem; }

/* Group titles: mint Outfit; thick text underline on hover (characters only).
   font-family repeated here because Fomantic's accordion sets Lato directly on
   `.title` at higher specificity than the site-wide re-assert above. */
#rail-accordion.ui.menu .item > .title {
  color: var(--mint-ink); font-weight: 600; font-size: .94rem; line-height: 1.3;
  padding: .7rem 1rem; font-family: 'Outfit', sans-serif;
}

/* Rows nested in the open group's content: starter prompts (a.item.rail-q)
   and, later, conversation rows. Quiet — no menu hover background. Roomier
   vertical padding (~33px rows) and a shallower indent: at 2.4rem the indent
   ate 38px of the rail and forced aggressive label truncation. */
#rail-accordion.ui.menu .content .item {
  display: block; color: var(--mint-ink); background: transparent;
  font-size: .84rem; font-weight: 400; line-height: 1.4;
  padding: .45rem 1rem .45rem 1.6rem;
}

#rail-accordion.ui.menu .item > .title:hover,
#rail-accordion.ui.menu .content .item:hover {
  color: var(--mint-bright); background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--mint-bright);
  text-decoration-thickness: .12em;
  text-underline-offset: .22em;
}
/* Caret: keep the stock vertical-accordion-menu placement (floated right) —
   Fomantic's open/close rotation is designed for a right-side icon; pinning
   it left made the closed state point outward. Only opt it out of the
   hover underline. */
#rail-accordion .title .dropdown.icon { text-decoration: none; }

/* Conversations group: rows load client-side from /conversations. The list
   scrolls inside its own capped box so it can never bury the prompt groups. */
#rail-accordion .conv-empty { color: var(--ink-faint); font-size: .8rem; cursor: default; }
#rail-accordion .conv-new { font-weight: 500; }
#conv-rows { max-height: 34vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
/* Selectors below repeat the menu-row specificity on purpose: the generic
   `#rail-accordion.ui.menu .content .item` display:block would otherwise
   out-rank them (which is exactly what broke the ellipsis and the [hidden]
   placeholder in prod). */
#rail-accordion.ui.menu .content .item[hidden] { display: none; }
#rail-accordion.ui.menu .content .item.conv-row {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
}
#rail-accordion .conv-row .conv-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#rail-accordion .conv-row.active .conv-label { font-weight: 600; }
/* Archive: hover-reveal is brand CSS (no Fomantic visibility-toggle exists —
   see the P0-1 spec); the tooltip lives on the wrapping span, not the icon. */
#rail-accordion .conv-row .conv-archive { opacity: 0; flex-shrink: 0; }
#rail-accordion .conv-row:hover .conv-archive { opacity: 1; }
#rail-accordion .conv-row .conv-archive i.icon { color: var(--ink-faint); margin: 0; }
#rail-accordion .conv-row .conv-archive:hover i.icon { color: var(--mint-bright); }

/* Empty state — centered greeting. */
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2rem; text-align: left; }
.empty-greeting { margin-bottom: .4rem; }   /* size owned by Fomantic `ui huge header` */
/* `.ui.header` (two classes) out-ranks a single `.empty-greeting`, so qualify it
   to make the mint win. */
.ui.header.empty-greeting { color: var(--mint); }
.empty-sub { color: var(--ink-faint); font-size: 1.05rem; }
.empty-state.hidden { display: none; }

/* Messages. */
.msgs { flex: 1; overflow-y: auto; padding: 1.6rem 1.9rem; display: none; flex-direction: column; gap: 1.1rem; }
.msgs.active { display: flex; }
/* Bottom-anchored chat: a short conversation sits just above the composer and
   grows upward; once it overflows the height, margin-top:auto collapses to 0 and
   it scrolls normally with the newest turn at the bottom. */
.msgs > :first-child { margin-top: auto; }
.turn.user { align-self: flex-end; max-width: 80%; color: var(--mint); font-weight: 600;
  font-size: .98rem; line-height: 1.5; text-align: right; white-space: pre-wrap; }
.turn.assistant { align-self: flex-start; max-width: 100%; width: 100%; display: flex;
  flex-direction: column; gap: .5rem; }
/* Extra breathing room between a user prompt and the response that follows it. */
.turn.user + .turn.assistant { margin-top: 1.4rem; }

/* A look-up: a mono eyebrow with a Fomantic spinner (running) -> check (done). */
.lookup { display: flex; align-items: center; gap: .5rem; font-size: .66rem; color: var(--ink-soft); }
.lookup[data-done] { color: var(--mint); }
.lookup i.icon { margin: 0; }

/* Assistant markdown (markdown-it output carries no Fomantic classes). */
.md { width: 100%; line-height: 1.62; color: var(--ink); font-size: 1rem; }
.md :first-child { margin-top: 0; }
.md :last-child { margin-bottom: 0; }
.md h2, .md h3, .md h4 { font-weight: 500; letter-spacing: -.015em; margin: 1.1rem 0 .4rem; }
.md code { font-family: 'IBM Plex Mono', monospace; font-size: .88em; }
.md pre { background: var(--panel); color: var(--ink); padding: .85rem 1rem; border-radius: .4rem;
  overflow-x: auto; font-family: 'IBM Plex Mono', monospace; font-size: .82rem; line-height: 1.5; }
.md .ui.table { margin: .6rem 0; }
/* Fomantic tables default to a near-black (rgba(0,0,0,.87)) that breaks from the
   warm brand ink used elsewhere; re-tone cells to ink and quiet the heavy 700
   header to a softer brand weight. */
.md .ui.table td { color: var(--ink); }
.md .ui.table th { color: var(--ink-soft); font-weight: 600; }
.fade-in { animation: fadein .6s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Composer — the flat input comes from the site-wide flat-theme rule above; here
   only the layout and the overlaid send button (the one non-Fomantic bit, kept
   so the existing submit JS is unchanged). */
.composer { flex-shrink: 0; padding: .9rem 1.2rem 4rem; position: relative; }
.composer-input .send-btn {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; padding: .2rem .35rem;
  display: flex; align-items: center; color: var(--mint);
}
.composer-input .send-btn:hover { color: #018a60; }
.composer-input .send-btn i.icon { font-size: 1.05rem; margin: 0; }
.composer-count {
  position: absolute;
  right: 2.5rem;
  bottom: .7rem;
  font-size: .7rem;
  color: var(--ink-faint);
}
/* Fomantic's `ui icon input` flex-sizes only a child `input`; a textarea child
   collapses to intrinsic width (the docs never pair fluid+textarea — verified
   broken), so give it the same sizing by hand. */
.composer-input > textarea {
  width: 100%; flex: 1 1 auto; margin: 0;
  padding: .67em 2.67em .67em 1em;   /* mirrors .ui.icon.input > input's room for the icon */
  /* No scrollbar until the autosize cap — a default overflow-y:auto paints
     Windows scrollbar arrows on an empty one-line box; resize() flips it. */
  overflow-y: hidden;
}

/* Turn error message */
.turn-error {
  color: #b3423a;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Suggestion chips */
.suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

.suggest-chip {
  background: transparent;
  border: 1px solid var(--mint);
  border-radius: 1rem;
  color: var(--mint-ink);  /* chip label is small text — needs the AA mint */
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggest-chip:hover {
  background: var(--mint);
  color: white;
}

.suggest-chip:focus {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
}

/* Turn actions — copy + email side by side at the lower right of each
   finished answer. align-self is load-bearing: as a flex child of
   .turn.assistant the row would otherwise stretch to the full content width
   (which is exactly what left the old copy button as an invisible ~800px
   click strip). */
.turn-actions {
  align-self: flex-end;
  display: inline-flex;
  gap: .25rem;
  margin-top: .25rem;
}
.turn-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: transparent;
  border: none;
  border-radius: .3rem;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.turn-actions button i.icon { margin: 0; }
.turn-actions button:hover { opacity: 1; color: var(--mint-ink); }
.turn-actions button:disabled { opacity: .35; cursor: default; }
.turn-actions button:disabled:hover { color: var(--ink-faint); }
.turn:hover .turn-actions button { opacity: 1; }

/* On pointer-coarse devices (touchscreens), always show turn actions */
@media (pointer: coarse) {
  .turn-actions button {
    opacity: 1;
  }
}

/* Sign out button styles */
.signout-btn {
  color: var(--ink-faint);
  font-size: 0.82rem;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.signout-btn:hover {
  color: var(--mint);
}