/* ==========================================================================
   FlowQuest — shared UI stylesheet (presentational only)
   --------------------------------------------------------------------------
   One place for the form-control / button / card / chip look so every bot
   (Firm Finder, Email Finder, Talent Finder, Building Finder, Outreach,
   Intent Scorer, Settings) renders the same design language instead of raw
   grey native controls next to polished gradient buttons.

   This file is linked AFTER each page's inline <style> block, so equal-
   specificity rules here win. Anything a component styles more specifically
   (e.g. `.tf-subrow select`) still wins over the base rules below — the few
   places where that mattered are reconciled at the bottom of this file.

   Rules of the road for this file:
     • Cosmetics only. No layout that could change what a control does, no
       display:none, no pointer-events, no content injection into controls.
     • No !important (except where it has to beat an existing !important).
     • Keyboard accessibility is a feature here, not a side effect: every
       interactive element gets a visible focus state.
   ========================================================================== */

:root{
  /* Native widgets (scrollbars, date pickers, number spinners, the select
     popup itself) follow the page instead of rendering light-on-dark. */
  color-scheme: dark;

  /* ── radii ─────────────────────────────────────────────────────────── */
  --fq-radius-sm: 8px;    /* dense controls: small chips, table-row buttons */
  --fq-radius-md: 10px;   /* inputs, selects, textareas, buttons           */
  --fq-radius-lg: 14px;   /* cards and panels                              */
  --fq-radius-pill: 999px;

  /* ── control surfaces ──────────────────────────────────────────────── */
  /* Kept at the value already hard-coded across the app so fields that this
     sheet does not reach still match the ones it does. */
  --fq-ctl-bg: #0b0d14;
  --fq-ctl-bg-hover: #0e1119;
  --fq-ctl-border: #2a3145;        /* a touch lighter than --line: reads as interactive */
  --fq-ctl-border-hover: #3a4364;
  --fq-placeholder: #7b8296;       /* ~5:1 on --fq-ctl-bg */

  /* ── accent / focus ────────────────────────────────────────────────── */
  --fq-accent-soft: #9b7cf6;                     /* between --accent and --accent2 */
  --fq-focus-ring: 0 0 0 3px rgba(155,124,246,.32);
  --fq-focus-ring-bad: 0 0 0 3px rgba(248,81,73,.28);
  --fq-gradient: linear-gradient(135deg, var(--accent), var(--accent2));

  /* ── elevation ─────────────────────────────────────────────────────── */
  --fq-elev-card: 0 1px 0 rgba(255,255,255,.02) inset,
                  0 12px 32px -22px rgba(0,0,0,.95);
  --fq-elev-pop: 0 16px 40px -20px rgba(0,0,0,.95);

  /* Chevron for <select>. Two variants so the arrow can pick up the accent
     on hover/focus without a second element in the markup. */
  --fq-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%239aa0b4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fq-chevron-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23b9a6ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================================
   1. Text fields, textareas, selects — one shared field look
   ========================================================================== */

input,
select,
textarea{
  font-family: inherit;
  background-color: var(--fq-ctl-bg);
  border: 1px solid var(--fq-ctl-border);
  border-radius: var(--fq-radius-md);
  color: var(--fg);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input:hover:not(:disabled):not([readonly]),
textarea:hover:not(:disabled):not([readonly]){
  border-color: var(--fq-ctl-border-hover);
}

input:focus,
textarea:focus{
  outline: none;
  border-color: var(--fq-accent-soft);
  box-shadow: var(--fq-focus-ring);
  background-color: var(--fq-ctl-bg-hover);
}

::placeholder{ color: var(--fq-placeholder); opacity: 1 }

input:disabled,
select:disabled,
textarea:disabled{
  opacity: .55;
  cursor: not-allowed;
}

input[readonly],
textarea[readonly]{ color: #c3c9da }

/* Invalid fields keep the red border the app already sets, and get a red
   ring on focus rather than the purple one. */
input.invalid:focus,
select.invalid:focus,
textarea.invalid:focus{
  border-color: var(--bad);
  box-shadow: var(--fq-focus-ring-bad);
}


/* ==========================================================================
   2. <select> — custom chrome, native behaviour
   --------------------------------------------------------------------------
   appearance:none only removes the OS-drawn box; the popup, keyboard nav
   (arrows / type-ahead / Home / End) and form value are untouched.
   ========================================================================== */

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: var(--fq-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 34px;           /* clear of the chevron */
  /* Long option labels truncate instead of sliding under the chevron. */
  text-overflow: ellipsis;
}

select:hover:not(:disabled){
  border-color: var(--fq-ctl-border-hover);
  background-color: var(--fq-ctl-bg-hover);
  background-image: var(--fq-chevron-hot);
}

select:focus{
  outline: none;
  border-color: var(--fq-accent-soft);
  box-shadow: var(--fq-focus-ring);
  background-image: var(--fq-chevron-hot);
}

/* Firefox: kill the dotted inner focus ring, keep our own. */
select:-moz-focusring{ color: transparent; text-shadow: 0 0 0 var(--fg) }

/* The popup list is drawn by the OS — these keep it dark on platforms that
   honour author colours (Windows/Linux Chrome, Firefox). */
select option,
select optgroup{
  background-color: var(--card, #11131c);
  color: var(--fg);
}

/* A select with size/multiple is a list box, not a dropdown: no chevron. */
select[multiple],
select[size]:not([size="1"]){
  background-image: none;
  padding-right: 11px;
  cursor: default;
}


/* ==========================================================================
   3. Inputs that must NOT look like text fields
   ========================================================================== */

/* Checkboxes / radios stay native (accent-color tints them) — only the focus
   ring is added so keyboard users can see where they are. */
input[type="checkbox"],
input[type="radio"]{
  background: none;
  border: none;
  border-radius: 0;
  accent-color: var(--fq-accent-soft);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{
  outline: none;
  box-shadow: var(--fq-focus-ring);
  border-radius: 4px;
}

/* Sliders: gradient thumb on a slim track, matching the progress bars. */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  height: 18px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: var(--fq-radius-pill);
  background: #161a26;
  border: 1px solid var(--fq-ctl-border);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 15px; height: 15px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--fq-gradient);
  border: 2px solid var(--fq-ctl-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: var(--fq-radius-pill);
  background: #161a26;
  border: 1px solid var(--fq-ctl-border);
}
input[type="range"]::-moz-range-thumb{
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--fq-gradient);
  border: 2px solid var(--fq-ctl-bg);
}
input[type="range"]:focus{ outline: none; box-shadow: none }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow: var(--fq-focus-ring) }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow: var(--fq-focus-ring) }

/* File picker: the "Choose file" button becomes a secondary button. */
input[type="file"]{
  padding: 7px 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
input[type="file"]::file-selector-button{
  margin-right: 10px;
  padding: 6px 13px;
  border-radius: var(--fq-radius-sm);
  border: 1px solid var(--fq-ctl-border);
  background: rgba(255,255,255,.045);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
input[type="file"]:hover::file-selector-button{
  border-color: var(--fq-accent-soft);
  background: rgba(155,124,246,.14);
}

/* Search inputs: drop Safari's native pill so they match the other fields. */
input[type="search"]{ -webkit-appearance: none; appearance: none }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none }


/* ==========================================================================
   4. Buttons
   --------------------------------------------------------------------------
   Primary keeps the existing violet gradient, untouched. Secondary buttons
   get one shared outlined/subtle-fill treatment so they complement it.
   ========================================================================== */

.btn{
  border-radius: var(--fq-radius-md);
  font-family: inherit;
}

.btn:focus-visible{
  outline: none;
  box-shadow: var(--fq-focus-ring);
}

/* Secondary — subtle fill + 1px border, warms toward the accent on hover. */
.btn.ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--fq-ctl-border);
  color: #d8dcea;
}
.btn.ghost:hover{
  background: rgba(155,124,246,.12);
  border-color: rgba(155,124,246,.5);
  color: var(--fg);
  box-shadow: 0 6px 18px -12px rgba(155,124,246,.9);
}
.btn.ghost:focus-visible{ box-shadow: var(--fq-focus-ring) }

/* Destructive stays red in both its filled and outlined forms. */
.btn.ghost.danger,
.btn.ghost.danger:hover{
  color: #ffb3ad;
  border-color: rgba(248,81,73,.55);
  background: rgba(248,81,73,.10);
  box-shadow: none;
}
.btn.danger:hover{ box-shadow: 0 6px 18px -12px rgba(248,81,73,.9) }

.btn:disabled,
.btn[aria-disabled="true"]{ box-shadow: none; transform: none }
.btn:disabled:hover{ transform: none; box-shadow: none }

/* Small/extra-small variants keep the same radius family, just tighter. */
.btn.sm{ border-radius: var(--fq-radius-sm) }
.btn.xs{ border-radius: var(--fq-radius-sm) }

/* Bare/icon buttons that are not .btn — give them a focus state at least. */
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
a.ob-relink:focus-visible,
.tag:focus-visible,
.chip-btn:focus-visible,
.cat-tab:focus-visible,
.seg-btn:focus-visible,
.mv:focus-visible{
  outline: none;
  box-shadow: var(--fq-focus-ring);
  border-radius: var(--fq-radius-sm);
}

/* Segmented control — the group reads as one control, active half gradient. */
.seg{ border-radius: var(--fq-radius-md); border-color: var(--fq-ctl-border) }
.seg-btn{ transition: background .15s ease, color .15s ease }
.seg-btn:hover:not(.active){ background: var(--fq-ctl-bg-hover); color: var(--fg) }
.seg-btn.active{ background: var(--fq-gradient); color: #fff }

/* Inline "refresh" style text actions next to labels. */
.ob-relink{ border-radius: 4px; transition: color .15s ease }
.ob-relink:hover{ color: var(--fq-accent-soft) }

/* Toggle chips (.tag / .chip-btn / .cat-tab / .fb-chip) — shared hover so a
   selectable chip never looks like dead text. */
.tag,
.chip-btn,
.cat-tab,
.fb-chip{
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tag:hover:not(.selected),
.chip-btn:hover:not(.active),
.cat-tab:hover:not(.active),
.fb-chip:hover:not(.on){
  border-color: var(--fq-accent-soft);
  background: rgba(155,124,246,.10);
  color: var(--fg);
}

/* Building Finder list/map toggle — match the secondary button language. */
.bf-toggle button{
  border-radius: var(--fq-radius-sm);
  border-color: var(--fq-ctl-border);
  background: rgba(255,255,255,.04);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bf-toggle button:hover:not(.active){
  border-color: var(--fq-accent-soft);
  background: rgba(155,124,246,.12);
  color: var(--fg);
}
.bf-toggle button.active{ background: var(--fq-gradient); color: #fff; border-color: transparent }


/* ==========================================================================
   5. Cards, panels and section headers
   ========================================================================== */

.card{
  border-radius: var(--fq-radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--fq-elev-card);
}

/* Inset sub-panels inside a card share the card's border language. */
.guide,
.ef-import-panel,
.paste-post-box,
.ag-card,
.intent-card,
.coverage-strip,
.li-card,
.email-card,
.candidate-card,
.provider-card,
.mode-card,
.wu-metric{
  border-radius: var(--fq-radius-md);
}

.industry-ac,
.run-picker-menu,
.industry-override-dropdown{
  border-radius: var(--fq-radius-md);
  border-color: var(--fq-ctl-border);
  box-shadow: var(--fq-elev-pop);
}

/* Accordion summaries — hover affordance without moving anything. */
details.guide > summary,
details.serp-acc > summary,
details.oa-acc > summary{
  border-radius: var(--fq-radius-sm);
}


/* ==========================================================================
   6. Chips and badges — one pill shape
   ========================================================================== */

.badge,
.chip,
.msg-badge,
.opt-badge,
.oa-badge,
.req-tag,
.wu-status,
.wu-pri,
.count-badge,
.sidebar-badge{
  border-radius: var(--fq-radius-pill);
  letter-spacing: .05em;
  white-space: nowrap;
}

/* "DEFAULT" / "YOUR COPY" beside the message-editor labels. The badge text is
   filled in by script; before that it is an empty padded pill, so hide it
   until it actually says something. */
.msg-badge{ padding: 2px 9px }
.msg-badge:empty{ display: none }
.msg-badge.custom{
  background: rgba(155,124,246,.16);
  color: #bda9ff;
}

/* "Agency Plan" and the other plan pills already use the gradient — just
   keep the pill geometry identical to every other chip. */
.pchip{ border-radius: var(--fq-radius-pill) }

/* Sub-type / keyword / flag chips in the results tables. */
.subtype-chip,
.kw-chip,
.hc-flag,
.name-flag,
.email-handoff-chip,
.bldg-btn,
.bldg-linked,
.bldg-needs{
  border-radius: var(--fq-radius-pill);
}


/* ==========================================================================
   7. Reconciliation — components that set their own field geometry
   --------------------------------------------------------------------------
   These selectors already exist in the page stylesheet and out-specify the
   base rules above; matched here so no field is left on an odd radius or
   with its text running under the chevron.
   ========================================================================== */

/* Talent Finder location-mode select (kept inline with its checkbox). It
   declares `background:` as a shorthand, which wipes the chevron set on the
   base `select` rule — so put the chevron back explicitly here. */
.tf-subrow select{
  padding: 7px 32px 7px 10px;
  border-radius: var(--fq-radius-sm);
  border-color: var(--fq-ctl-border);
  background-image: var(--fq-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}
.tf-subrow select:hover:not(:disabled),
.tf-subrow select:focus{ background-image: var(--fq-chevron-hot) }

/* Email Finder cost-cap select. */
.ef-cost-row select{ border-radius: var(--fq-radius-md) }

/* Approach-guidance draft editor. */
.ag-input,
.ag-textarea{
  border-radius: var(--fq-radius-sm);
  border-color: var(--fq-ctl-border);
}

/* Paste-a-post inputs. */
.ppb-row .ppb-input{
  border-radius: var(--fq-radius-md);
  border-color: var(--fq-ctl-border);
}

/* Bulk-paste company textareas (Email Finder / LinkedIn Fixer). */
textarea#ef_companies,
textarea#li_companies{
  border-radius: var(--fq-radius-md);
  border-color: var(--fq-ctl-border);
}

/* LinkedIn queue draft box. */
.li-draft{
  border-radius: var(--fq-radius-md);
  border-color: var(--fq-ctl-border);
}

/* Per-row rating note field in the firm results table. */
.rate-note input{
  border-radius: var(--fq-radius-sm);
  border-color: var(--fq-ctl-border);
}

/* Show/hide password toggle is a sibling beside the field, not inside its
   border — the input keeps its own ring; the button just needs one too. */
.input-with-toggle .toggle-vis:focus-visible{
  outline: none;
  box-shadow: var(--fq-focus-ring);
  border-radius: var(--fq-radius-sm);
}


/* ==========================================================================
   8. Motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  input, select, textarea, .btn, .tag, .chip-btn, .cat-tab, .fb-chip,
  .seg-btn, .bf-toggle button{
    transition: none;
  }
  .btn:hover{ transform: none }
}