/* EasyApply — dark, dense aesthetic lifted from the legacy single-user
   tracker (automation/tracker/static/style.css). Intentionally hand-
   written CSS, no build step. Pico is no longer loaded; this file is
   the single source of styling.
*/

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --border: #272b36;
  --text: #e6e8ee;
  --muted: #8b93a7;
  --accent: #4f8cff;
  --danger: #e05a5a;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { margin: 0 0 0.75rem; font-size: 1.4rem; font-weight: 600; }
h2 { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; font-weight: 600; }
h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; }

.muted { color: var(--muted); }
.error { color: var(--danger); }
.count { color: var(--muted); font-weight: 400; font-size: 0.95rem; }
.spacer { flex: 1; }
.sep { color: var(--border); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--muted);
}

/* ------- top header / nav ------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

header.site-header .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

header.site-header .right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

nav.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 0.5rem;
}
nav.tabs.right { margin-left: auto; }
nav.tabs a {
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
}
nav.tabs a:hover { color: var(--text); background: rgba(79, 140, 255, 0.08); text-decoration: none; }
nav.tabs a.active {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
}

/* ------- main wrapper ------- */

main.page {
  max-width: 1600px;
  margin: 0;
  padding: 1.25rem 1.5rem 3rem;
}

/* Templates that use `.container` get a sane default; `.narrow` shrinks
   forms and read-heavy pages. */
.container { width: 100%; }
.container.narrow { max-width: 720px; margin: 0 auto; }

/* ------- page header (standard partial) -------
   Three-row structure used by every page: title row (h1 + optional meta
   + optional actions on the right), an optional description row, and an
   optional sub-nav row. Replaces the ad-hoc .profile-header pattern. */

.page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.page-header .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
.page-header h1 { margin: 0; }
/* Screen-reader-only heading: kept for accessibility on pages whose
   title would otherwise just duplicate the active top-nav tab. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-header .page-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}
.page-header .page-description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 70ch;
}
.page-header .subnav-tabs { grid-column: 1 / -1; margin-top: 0.25rem; }

/* Horizontal sub-navigation tabs (used by admin and any future section
   that needs sub-navigation). Replaces the legacy left-rail .admin-sidebar
   so admin pages share the same archetype as everything else. */
.subnav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}
.subnav-tabs a {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.subnav-tabs a:hover { color: var(--text); background: rgba(79, 140, 255, 0.08); text-decoration: none; }
.subnav-tabs a.active {
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
}

/* ------- form archetype -------
   Centered card with labels-above-fields. Used by auth, profile, and
   search-profile edit so every form page shares one shape.

   .form-page constrains an entire form page (header + card) to the
   same narrow width so the h1 aligns with the card edge. The card
   itself fills its parent — the page wrapper sets the visual width. */

.form-page { max-width: 640px; margin: 0 auto; }
.form-page.wide { max-width: 820px; }
.form-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
}
.form-card p,
.form-card label {
  display: block;
  margin: 0 0 0.85rem;
}
.form-card label { font-weight: 500; }
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="url"],
.form-card input[type="number"],
.form-card select,
.form-card textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
}
.form-card .helptext {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}
.form-card .form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.form-card .errorlist {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  list-style: none;
  background: rgba(224, 90, 90, 0.08);
  border: 1px solid var(--danger);
  border-radius: 6px;
  color: var(--danger);
  font-size: 0.9rem;
}

/* ------- detail archetype -------
   Two-column grid (main + sidebar). Generalizes the existing .app-grid;
   keeps .app-grid as an alias for templates that haven't been migrated. */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
}
/* Sidebar-left variant — Application detail uses this so the persistent
   sidebar (status / fit rating / metadata / notes / downloads) sits on
   the left while the tabs + active document occupy the wider right
   column. Recommendation detail stays on the default (main-left). */
.detail-grid.sidebar-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.detail-grid > .detail-main { min-width: 0; }
.detail-grid > .detail-side { min-width: 0; }
@media (max-width: 900px) {
  .detail-grid,
  .detail-grid.sidebar-left { grid-template-columns: 1fr; }
}

/* ------- forms / buttons ------- */

input, select, textarea, button, .btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font: inherit;
}

textarea { width: 100%; min-height: 12rem; }

button, .btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; }

button.danger {
  color: var(--danger);
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
}
button.link, .link {
  background: none; border: none; padding: 0; color: var(--muted);
  cursor: pointer; text-decoration: underline;
}
button.link:hover, .link:hover { color: var(--accent); }

form.inline { display: inline; margin: 0; }
form.inline select { padding: 0.2rem 0.4rem; }

label.toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--muted); font-size: 0.9rem;
  user-select: none; cursor: pointer;
}
label.toggle input { margin: 0; }

.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.toolbar label {
  display: inline-flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--muted);
}

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end;
  margin-bottom: 0.85rem;
}
.filter-bar label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.8rem; color: var(--muted);
}
/* Filter-bar buttons align to the input bottom (not the label-row bottom)
   because the label-text adds vertical height above the input. */
.filter-bar > button,
.filter-bar > .btn { align-self: end; }
/* Multi-checkbox dropdown — pattern lifted from the legacy single-user
   tracker. Toggle button shows current selection summary; checkboxes
   are real form inputs, so submission flows through the existing
   server-side filter. */
.multiselect { position: relative; }
.ms-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 11rem;
  justify-content: space-between;
}
.ms-caret { color: var(--muted); font-size: 0.8rem; }
.ms-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ms-option,
.filter-bar .ms-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--text);
}
.ms-option:hover { background: rgba(79, 140, 255, 0.1); }
.ms-option input { margin: 0; }
.ms-actions {
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}
.ms-clear, .ms-select-all {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.ms-clear:hover, .ms-select-all:hover { color: var(--accent); }

/* ------- tables ------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  user-select: none;
}
th[data-sort] { cursor: pointer; }
th[data-sort] a { color: inherit; text-decoration: none; }
th[data-sort]:hover, th[data-sort]:hover a { color: var(--accent); }

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(79, 140, 255, 0.05); }

.profile-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.profile-table th, .profile-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); }

.pagination {
  display: flex; gap: 1rem; align-items: center; margin-top: 1rem;
  color: var(--muted);
}

/* ------- panels / sections ------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.panel-title {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.panel-subtitle {
  margin: 1.1rem 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

/* ------- listings (recommendations, dense lists) ------- */

.tier {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.tier h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

ul.listings {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.listings li.listing {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}
ul.listings li.listing:last-child { border-bottom: none; }

a.listing-title, span.listing-title {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
a.listing-title { border-bottom: 1px dashed var(--border); }
a.listing-title:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

.listing-company { font-weight: 600; color: var(--text); min-width: 9rem; }
.listing-location { color: var(--muted); font-size: 0.9rem; }

/* Recommendations table — Company | Role | Location | Action */
.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.rec-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}
.rec-table tbody tr:last-child td { border-bottom: none; }
.rec-table .rec-company { font-weight: 600; color: var(--text); white-space: nowrap; }
.rec-table .rec-location { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.rec-table .rec-action { text-align: right; white-space: nowrap; }
.rec-table a.rec-role {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
.rec-table a.rec-role:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.add-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.add-btn:hover { color: var(--accent); }

/* role link as used in legacy app list */
a.role-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
a.role-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ------- pills (status + tier) ------- */

.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: #444;
  white-space: nowrap;
  line-height: 1.5;
}

.pill-status-new            { background: #7aa7ff; color: #0f1115; }

/* "+ New" button on the Applications filter bar — shares the new-status
   color so the visual link between "click this to add" and "rows that
   show up in the new state" is reinforced. */
.btn-new-app {
  background: #7aa7ff;
  color: #0f1115;
  border: 1px solid #7aa7ff;
  font-weight: 600;
  /* Push to the right edge of the filter bar so it visually anchors
     the row's "primary action" position, separated from the filter
     controls + Clear filters on the left. */
  margin-left: auto;
}
.btn-new-app:hover {
  background: #4f8cff;
  border-color: #4f8cff;
  color: #0f1115;
  text-decoration: none;
}
.pill-status-submitted      { background: #4f8cff; }
.pill-status-scheduled      { background: #2eb88a; }
.pill-status-in_progress    { background: #f5a524; color: #0f1115; }
.pill-status-offer          { background: #1b9e3e; }
.pill-status-rejected       { background: #e05a5a; }
.pill-status-not_attempted  { background: #8b93a7; }
.pill-status-ghosted        { background: #6b5b95; }

/* Generic 'Active' pill — used on the PDF-templates cards on the
   Profile page to mark the user's current selection. Same green as the
   Active toggle and the OFFER status pill. */
.pill-active                { background: #1b9e3e; color: #fff; }

.pill-tier-s { background: #1b9e3e; }
.pill-tier-a { background: #4f8cff; }
.pill-tier-b { background: #f5a524; color: #0f1115; }
.pill-tier-c { background: #6b7280; }

/* Fit-rating pills (sidebar of Application detail). Map the LLM's freeform
   rating to a four-tier color: strong → green, solid → blue, stretch →
   amber, weak → red, unknown → muted gray. */
.pill-fit-strong   { background: #1b9e3e; }
.pill-fit-solid    { background: #4f8cff; }
.pill-fit-stretch  { background: #f5a524; color: #0f1115; }
.pill-fit-weak     { background: #e05a5a; }
.pill-fit-unknown  { background: #6b7280; }

/* ------- badges (legacy class names — preserved for tests) ------- */

.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.25rem;
  font-size: 0.82em;
  font-weight: 600;
  background: #333;
  color: #fff;
  line-height: 1.5;
}
.badge-active   { background: #1b6e1b; }
.badge-inactive { background: #555; }
.badge-ok       { background: #1b6e1b; }
.badge-halted   { background: #b8860b; }
.badge-error    { background: #b22222; }

.badge-status-new            { background: #7aa7ff; color: #0f1115; }
.badge-status-submitted      { background: #4f8cff; }
.badge-status-scheduled      { background: #2eb88a; }
.badge-status-in_progress    { background: #f5a524; color: #0f1115; }
.badge-status-offer          { background: #1b9e3e; }
.badge-status-rejected       { background: #e05a5a; }
.badge-status-not_attempted  { background: #8b93a7; }
.badge-status-ghosted        { background: #6b5b95; }

.badge-tier-S { background: #1b9e3e; color: #fff; }
.badge-tier-A { background: #4f8cff; color: #fff; }
.badge-tier-B { background: #f5a524; color: #0f1115; }
.badge-tier-C { background: #6b7280; color: #fff; }

.tier-section { margin: 1rem 0 1.25rem; }
.rationale {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

/* Section header inside a .panel — title on the left, action buttons on
   the right. Used by the fit-evaluation card. */
.app-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.app-section-header .panel-title { margin: 0; }
.app-section-actions { display: flex; gap: 0.4rem; align-items: center; }
.app-section-actions form.inline { margin: 0; }

/* Fit-evaluation body — markdown rendered as preformatted text so tables,
   headings, and bullets keep their structure without a markdown→HTML
   library. Wraps long lines so wide tables don't overflow the panel. */
/* All four Application-detail tab bodies share the same vertical
   height (44rem ≈ doubled from the 22rem snapshot) so the editor
   surfaces have room to breathe without going edge-to-edge. Long
   content scrolls inside the body. */
.fit-eval-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(79, 140, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 44rem;
  overflow: auto;
  color: var(--text);
}
.doc-editor-textarea {
  display: block;
  width: 100%;
  height: 44rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Application detail header — Role + status + fit-rating on row 1
   alongside the tabs strip; Company on row 2. Replaces the generic
   .page-header treatment for this one page so the tabs anchor at the
   top of the page (not inside the right column). */
.app-detail-header { margin-bottom: 1rem; }
.app-detail-titlebar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.app-detail-titles { min-width: 0; }
.app-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.app-detail-title-row h1 { margin: 0; font-size: 1.4rem; }
.app-detail-titles .listing-company {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
}
.app-detail-header .tabs-strip {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
}

/* Inline status form lives inside the DETAILS dl row. Wraps select +
   button so they sit on the same baseline without stretching the dd. */
.inline-status-form {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}
.inline-status-form select { padding: 0.2rem 0.4rem; }

/* Notes panel textarea — wide, fixed-rows, monospace consistent with
   the sidebar density (no helptext / no full form rendering). */
.notes-textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
}

/* ------- profile / dl widgets ------- */

.profile-header {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; margin-bottom: 1rem;
}
.profile-fields p { margin: 0.25rem 0; }
.profile-limits dl,
dl.profile-limits {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
dl.profile-limits dt { font-weight: 600; color: var(--muted); }
dl.profile-limits dd { margin: 0; }

/* ------- application detail layout ------- */

.app-header {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.75rem; margin-bottom: 1rem;
}
.app-subline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.75rem; color: var(--muted); margin: 0.1rem 0 1rem;
}
.app-subline .sep { color: var(--border); }

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; }
}

/* ------- bell ------- */

.bell-wrap { position: relative; display: inline-flex; align-items: center; }
.bell-link {
  display: inline-flex; align-items: center; color: var(--muted);
  padding: 0.25rem 0.4rem; border-radius: 6px;
}
.bell-link:hover { color: var(--text); background: rgba(79,140,255,0.08); text-decoration: none; }
.bell-wrap .badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); padding: 0.05rem 0.35rem; font-size: 0.7rem;
}

/* ------- admin dashboard layout ------- */

.admin-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem;
}
@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
}
.admin-sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.admin-sidebar h2 { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.5rem; }
.admin-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.admin-sidebar li a {
  display: block; padding: 0.35rem 0.5rem; border-radius: 4px;
  color: var(--muted); text-decoration: none;
}
.admin-sidebar li a:hover { background: rgba(79,140,255,0.08); color: var(--text); }
.admin-stats { width: auto; }
.admin-stats th { text-align: left; padding-right: 1rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.admin-stats td { font-weight: 600; }

/* ------- tabs (Application detail) -------
   Single-page tabbed view backed by ``static/js/tabs.js``. The strip is
   visually similar to ``.subnav-tabs`` but anchored to a content panel
   instead of the page header. Inactive panels are hidden via ``hidden``
   attribute toggled in JS so non-JS users still see the first panel. */

.tabs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.85rem;
}
.tabs-strip button {
  background: none;
  border: 1px solid transparent;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tabs-strip button:hover {
  color: var(--text);
  background: rgba(79, 140, 255, 0.08);
}
.tabs-strip button.is-active {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
}

.tab-panel { display: block; }
.tab-panel[hidden] { display: none; }

/* Sidebar fit-rating block — the rating pill plus a 1-line summary lifted
   from the eval. Tightens the visual hierarchy in the sidebar. */
.fit-summary { display: flex; flex-direction: column; gap: 0.3rem; }
.fit-summary .pill { align-self: flex-start; }

/* ------- inline notifications -------
   Used by HTMX-swapped partials (rate-limit, in-flight, server error)
   to replace an action target with a clear, actionable card. Three
   intent variants — info / warning / error — each with a colored
   left rail, an icon-glyph prefix, a title, body copy, and an
   optional row of action buttons. */

.notification {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 0.85rem;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 0;
}
.notification-icon {
  font-size: 1.35rem;
  line-height: 1;
  grid-row: span 2;
  align-self: center;
}
.notification-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.notification-body { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.notification-actions {
  grid-column: 2;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.notification-info    { border-left-color: var(--accent); }
.notification-info    .notification-icon { color: var(--accent); }
.notification-warning { border-left-color: #f5a524; }
.notification-warning .notification-icon { color: #f5a524; }
.notification-error   { border-left-color: var(--danger); }
.notification-error   .notification-icon { color: var(--danger); }

/* ------- doc editor / CodeMirror ------- */

/* Base-resume editor — fixed viewport height, internal scroll. Without
   the height cap CodeMirror grows to fit its content and forces page-
   level scrolling for long resumes. */
.cm-editor {
  border: 1px solid var(--border);
  border-radius: 6px;
  height: calc(100vh - 240px);
  min-height: 18rem;
}
.cm-editor .cm-scroller { overflow: auto; }
/* Fallback textarea (CodeMirror not yet attached) gets the same shape. */
#base-resume-content {
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 18rem;
  resize: vertical;
}

/* ------- htmx indicator ------- */

.htmx-indicator { color: var(--muted); margin-left: 0.5rem; display: none; }
.htmx-request .htmx-indicator { display: inline; }

/* ------- responsive ------- */

@media (max-width: 700px) {
  header.site-header { flex-wrap: wrap; }
  nav.tabs { order: 3; flex-basis: 100%; margin: 0.25rem 0 0; }
  main.page { padding: 1rem; }
}

/* ------------------------------------------------------------------------- */
/* v1.7 — Stats page (KPI cards, today strip, status bars, 30d timeline)     */
/* ------------------------------------------------------------------------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.stat-card {
  background: #1a1d23;
  border: 1px solid #2a2e36;
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.stat-label {
  font-size: 0.78rem;
  color: #98a2b3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0.15rem 0 0.25rem;
  line-height: 1.1;
}
.stat-unit {
  font-size: 1rem;
  font-weight: 500;
  color: #98a2b3;
  margin-left: 0.15rem;
}
.stat-sub {
  font-size: 0.78rem;
}

.today-strip {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: #14171c;
  border: 1px solid #2a2e36;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.today-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.today-num {
  font-size: 1.4rem;
  font-weight: 700;
}
.today-label {
  color: #98a2b3;
  font-size: 0.85rem;
}

.status-bars {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sb-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px 50px;
  align-items: center;
  gap: 0.6rem;
}
.sb-label .pill {
  width: 100%;
  text-align: center;
}
.sb-track {
  background: #2a2e36;
  border-radius: 4px;
  height: 0.85rem;
  overflow: hidden;
}
.sb-bar {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}
.sb-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sb-pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  align-items: end;
  height: 140px;
  margin: 0.5rem 0;
}
.tl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 100%;
}
.tl-bar {
  width: 100%;
  background: #4f8cff;
  border-radius: 2px 2px 0 0;
  min-height: 1px;
}
.tl-bar[style*="height: 0%"] {
  background: transparent;
}
.tl-count {
  font-size: 0.65rem;
  color: #98a2b3;
}
.tl-date {
  font-size: 0.6rem;
  color: #98a2b3;
  margin-top: 0.2rem;
  white-space: nowrap;
  transform-origin: top;
  transform: rotate(-60deg) translateY(0.4rem);
}
.tl-meta {
  font-size: 0.78rem;
  margin-top: 1.5rem;
}
.tl-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  min-height: 1px;
}
.tl-seg { width: 100%; min-height: 1px; }
.tl-bar-error { background: #d04a4a; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}
.legend-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #2a313e;
  color: #cbd2dc;
}
.seg-OK, .seg-ok { background: #1b9e3e; color: #fff; }
.seg-HALTED, .seg-halted { background: #f5a524; color: #1a1a1a; }
.seg-ERROR, .seg-error { background: #d04a4a; color: #fff; }
.seg-0 { background: #4f8cff; }
.seg-1 { background: #9b6bff; }
.seg-2 { background: #1b9e3e; }
.seg-3 { background: #f5a524; }
.seg-4 { background: #14b8a6; }
.seg-5 { background: #ec4899; }
.seg-6 { background: #6b7280; }
.seg-7 { background: #f97316; }
.seg-0, .seg-1, .seg-2, .seg-3, .seg-4, .seg-5, .seg-6, .seg-7 { color: #fff; }

/* Base-resume editor toolbar (Save button row above + below the textarea) */
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.editor-toolbar-bottom {
  justify-content: flex-end;
}

/* v1.9 — PDF template config page (cards + upload rows) */
.template-section { margin-bottom: 1.5rem; }
.template-cards {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}
.template-card {
  border: 1px solid #2a2e36;
  background: #1a1d23;
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
}
.template-card.is-active {
  border-color: #4f8cff;
  background: #1d2531;
}
.template-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.template-card-actions {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
}
.template-card-actions form.inline { display: inline; }
.template-card-actions button.link {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0;
}
.template-card-head form.inline { display: inline; }
.template-card-set-active {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #4f8cff;
  color: #4f8cff;
  background: transparent;
  cursor: pointer;
  line-height: 1.5;
}
.template-card-set-active:hover {
  background: #4f8cff;
  color: #0f1115;
}
.template-card-upload {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed #2a2e36;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.template-card-upload input[type="file"] {
  font-size: 0.8rem;
}

/* v1.x — Scan sites panel (Phase 18) */
.scan-site-rows {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.4rem 1rem;
}
.scan-site-rows-stacked {
  /* Inside the 3-column Basic information grid, stack each site on its
     own row so labels read top-down rather than wrapping in a narrow column. */
  grid-template-columns: 1fr;
}
.scan-site-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Basic information panel: 3 columns × 2 rows of cards. Each card is its own
   bordered rectangle; the Scan sites card spans both rows so its bottom
   aligns with the Slack rectangle below it. Collapses to a single stacked
   column under ~900px. */
.basic-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "user  limits scan"
    "slack slack  scan";
  gap: 1rem;
  align-items: stretch;
}
.basic-info-user        { grid-area: user; }
.basic-info-limits      { grid-area: limits; }
.basic-info-scan-sites  { grid-area: scan; }
.basic-info-slack       { grid-area: slack; }

.basic-info-card {
  border: 1px solid #2a2e36;
  background: #14171c;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  min-width: 0;  /* lets long emails wrap inside the card */
  display: flex;
  flex-direction: column;
}
.basic-info-card .panel-subtitle:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  .basic-info-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "user"
      "limits"
      "scan"
      "slack";
  }
}

/* Search-profile form: three card-style columns side-by-side, collapsing
   to a single stacked column under ~900px. Reuses the .basic-info-card
   visual treatment from the Profile page so the two settings surfaces
   feel consistent. */
.search-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .search-profile-grid { grid-template-columns: 1fr; }
}
.search-profile-grid .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.85rem;
}
.search-profile-grid .form-row > label {
  font-weight: 500;
  font-size: 0.9rem;
}
.search-profile-grid .form-row input[type="text"],
.search-profile-grid .form-row input[type="url"],
.search-profile-grid .form-row input[type="number"],
.search-profile-grid .form-row select,
.search-profile-grid .form-row textarea {
  width: 100%;
  box-sizing: border-box;
}
.search-profile-grid .form-row textarea {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", monospace;
  font-size: 0.85rem;
}
.search-profile-grid .form-row .inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.search-profile-grid .form-row.has-error input,
.search-profile-grid .form-row.has-error select,
.search-profile-grid .form-row.has-error textarea {
  border-color: #e05a5a;
}

/* Search-profile Active toggle: a small banner-style row above the 3-column
   grid so the on/off switch reads as a top-level state, not a third-column
   afterthought. */
.search-profile-toggle {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid #2a2e36;
  background: #14171c;
  border-radius: 8px;
}

/* Toggle switch: native checkbox visually hidden (still posts + screen-
   readable); the styled track + thumb beside it flips green (checked) /
   gray (unchecked). Label text swaps Active/Inactive in lockstep via
   sibling-selector. Used for the search-profile Active state and is
   reusable elsewhere. */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.toggle-switch-track {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  background: #6b7280;
  border-radius: 999px;
  transition: background 120ms ease-in-out;
  flex-shrink: 0;
}
.toggle-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 120ms ease-in-out;
}
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track {
  background: #1b9e3e;
}
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track::after {
  transform: translateX(16px);
}
.toggle-switch input[type="checkbox"]:focus-visible ~ .toggle-switch-track {
  outline: 2px solid #4f8cff;
  outline-offset: 2px;
}
.toggle-switch-label .toggle-switch-on,
.toggle-switch-label .toggle-switch-off {
  font-weight: 600;
}
.toggle-switch-label .toggle-switch-on  { display: none; color: #1b9e3e; }
.toggle-switch-label .toggle-switch-off { color: #98a2b3; }
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-label .toggle-switch-on  { display: inline; }
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-label .toggle-switch-off { display: none; }

/* ========================================================================== */
/* Marketing pages: home / tutorial / faq                                     */
/* ========================================================================== */

/* Make the marketing pages full-bleed (no max-width container constraint
   on the hero) while keeping a comfortable reading width inside content
   sections. */
.marketing { line-height: 1.55; color: #e6e8eb; }

.marketing-hero {
  position: relative;
  padding: 5rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse at top right, rgba(79, 140, 255, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(27, 158, 62, 0.10), transparent 55%),
    linear-gradient(180deg, #0c0e13 0%, #0f1115 100%);
  border-bottom: 1px solid #1c1f25;
}
.marketing-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.marketing-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.marketing-hero h1 .accent { color: #4f8cff; }
.marketing-hero p.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: #9aa4b3;
  max-width: 720px;
  margin: 0 auto 1.75rem;
}
.marketing-cta {
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.marketing-cta .btn-primary,
.marketing-cta .btn-secondary {
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.marketing-cta .btn-primary {
  background: #4f8cff;
  color: #0f1115;
}
.marketing-cta .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 140, 255, 0.35);
}
.marketing-cta .btn-secondary {
  background: transparent;
  color: #e6e8eb;
  border: 1px solid #2a2e36;
}
.marketing-cta .btn-secondary:hover {
  border-color: #4f8cff;
  color: #4f8cff;
}

.hero-login {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 580px;
  margin: 0 auto;
  padding: 0.5rem;
  border: 1px solid #2a313e;
  background: rgba(20, 23, 28, 0.7);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.hero-login input[type="email"],
.hero-login input[type="password"] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #2a2e36;
  background: #14171c;
  color: #e6e8eb;
}
.hero-login input::placeholder { color: #6b7280; }
.hero-login input:focus {
  outline: none;
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.18);
}
.hero-login button.btn-primary {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  white-space: nowrap;
}
.hero-signup-link {
  margin: 0.85rem 0 0;
  color: #9aa4b3;
  font-size: 0.9rem;
}
.hero-signup-link a { color: #4f8cff; text-decoration: none; }
.hero-signup-link a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .hero-login { flex-direction: column; padding: 0.85rem; }
  .hero-login input,
  .hero-login button { width: 100%; }
}

.marketing-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.marketing-section h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.marketing-section .section-lede {
  color: #9aa4b3;
  margin: 0 0 2rem;
  max-width: 720px;
}

/* Feature card grid (icon + headline + body). 3 cols → 2 → 1 responsive. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: #14171c;
  border: 1px solid #1c1f25;
  border-radius: 12px;
  padding: 1.4rem 1.25rem 1.5rem;
  transition: border-color 120ms ease;
}
.feature-card:hover { border-color: #2a313e; }
.feature-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(79, 140, 255, 0.12);
  color: #4f8cff;
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.85rem;
}
.feature-card .icon svg { width: 22px; height: 22px; }
.feature-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}
.feature-card p {
  margin: 0;
  color: #9aa4b3;
  font-size: 0.95rem;
}

/* "Spend more time on X, not Y" comparison row. */
.time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 700px) { .time-row { grid-template-columns: 1fr; } }
.time-card {
  background: #14171c;
  border: 1px solid #1c1f25;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.time-card.win { border-color: rgba(27, 158, 62, 0.55); }
.time-card.win .badge-pill { background: #1b9e3e; }
.time-card.lose { opacity: 0.78; }
.time-card.lose .badge-pill { background: #6b7280; }
.time-card .badge-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.time-card h4 { margin: 0 0 0.2rem; font-size: 1rem; }
.time-card p  { margin: 0; color: #9aa4b3; font-size: 0.93rem; }

/* Tutorial step layout — numbered cards with rich bodies. */
.tutorial-steps { counter-reset: step; }
.tutorial-step {
  position: relative;
  padding: 1.4rem 1.25rem 1.4rem 4.5rem;
  background: #14171c;
  border: 1px solid #1c1f25;
  border-radius: 12px;
  margin-bottom: 1rem;
}
.tutorial-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 1.2rem;
  left: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(79, 140, 255, 0.15);
  color: #4f8cff;
  font-weight: 700;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
}
.tutorial-step h3 { margin: 0 0 0.3rem; }
.tutorial-step p, .tutorial-step ul { color: #c4cad3; margin: 0.4rem 0; }
.tutorial-step ul { padding-left: 1.2rem; }
.tutorial-step a { color: #4f8cff; }

/* FAQ accordion-ish layout (no JS — just <details>). */
.faq-group { margin-bottom: 2rem; }
.faq-group h2 {
  font-size: 1.15rem;
  color: #4f8cff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}
.faq-item {
  background: #14171c;
  border: 1px solid #1c1f25;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.faq-item summary {
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 0.9rem;
  font-size: 1.2rem;
  color: #4f8cff;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-answer {
  padding: 0 1.1rem 1rem;
  color: #c4cad3;
}
.faq-item .faq-answer p { margin: 0.5rem 0; }
.faq-item .faq-answer ul { padding-left: 1.2rem; }
.faq-item a { color: #4f8cff; }

/* Marketing footer cross-link strip. */
.marketing-footer {
  border-top: 1px solid #1c1f25;
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
  background: #0c0e13;
}
.marketing-footer .marketing-cta { margin-top: 0.9rem; }

/* Anonymous-only top nav links (Home / Tutorial / FAQ). */
.site-header .nav-marketing {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.site-header .nav-marketing a {
  color: #c4cad3;
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
}
.site-header .nav-marketing a.active,
.site-header .nav-marketing a:hover {
  color: #fff;
  background: rgba(79, 140, 255, 0.10);
}
.site-header .help-link {
  color: #9aa4b3;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
.site-header .help-link:hover { color: #4f8cff; }
.site-header .help-link.active {
  color: #fff;
  background: rgba(79, 140, 255, 0.10);
}

.flashes {
  max-width: 1100px;
  margin: 0.85rem auto 0;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.flash {
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--panel);
  font-size: 0.92rem;
  color: var(--text);
}
.flash-success { border-left-color: #1b9e3e; }
.flash-info    { border-left-color: var(--accent); }
.flash-warning { border-left-color: #f5a524; }
.flash-error   { border-left-color: var(--danger); color: #ffd1d1; }
.flash-debug   { border-left-color: #6b7280; }