/* 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;       /* single secondary-text grey */
  --accent: #4f8cff;
  --accent-hover: #6ea0ff;
  --danger: #e05a5a;
  --danger-hover: #d04a4a;

  /* Type scale — font-size declarations snap to these steps. */
  --fs-2xs: 0.72rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.85rem;
}

* { 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.9rem; font-weight: 600; }

.muted { color: var(--muted); }
.error { color: var(--danger); }
.count { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.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.9rem;
  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; }
/* Small uppercase label above a page title (e.g. "EDIT SEARCH PROFILE" over the
   profile name). flex-basis:100% forces it onto its own row inside the wrapping
   .page-title flex container so the title sits cleanly beneath it. */
.page-eyebrow {
  flex-basis: 100%;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
/* 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.9rem;
  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; }

/* Global primary-action button. Marketing pages already had this scoped
   to .marketing-cta; promote it here so the hero Sign-in button next to
   the password field and the /accounts/login/ submit button get the
   same visible blue treatment. */
button.btn-primary, a.btn-primary, .btn.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  font-weight: 600;
}
button.btn-primary:hover, a.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

/* Secondary action — outlined, lower emphasis than the primary blue.
   Pairs with .btn-primary for cancel / alternate actions. */
button.btn-secondary, a.btn-secondary, .btn.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
}
button.btn-secondary:hover, a.btn-secondary:hover, .btn.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Disabled buttons (no styling existed before — relied on browser defaults).
   Covers the disabled attribute and the dirty-state Save guard. */
button:disabled, .btn:disabled, button[disabled], .btn[disabled],
button.btn-primary:disabled, button.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button:disabled:hover, .btn:disabled:hover, button[disabled]:hover, .btn[disabled]:hover {
  border-color: var(--border);
  color: inherit;
}

button.danger {
  color: var(--danger);
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
}
/* Muted utility link (mark-read, inline form actions). Underlines on hover to
   match the other text-action links instead of being permanently underlined. */
button.link, .link {
  background: none; border: none; padding: 0; color: var(--muted);
  cursor: pointer; text-decoration: none;
}
button.link:hover, .link:hover { color: var(--accent); text-decoration: underline; }

/* Bare button reset — strips the default button chrome (border/background/
   padding) so a <button> can host arbitrary inline content (e.g. a status
   badge in the search-profile toggle) without looking like a form control. */
.btn-bare {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; line-height: inherit;
}
.btn-bare:hover { border: none; }

/* Inline text actions (Edit / Delete in table rows). One shared treatment so
   sibling actions match: link-blue at rest, underline on hover, and a danger
   variant that goes red on hover to flag a destructive action. Works on both
   <a> and <button> (the button reset keeps them visually identical). */
.action-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; line-height: inherit; cursor: pointer;
  color: var(--accent); text-decoration: none;
}
.action-link:hover { text-decoration: underline; }
.action-link.danger:hover { color: var(--danger); }
.row-actions { white-space: nowrap; }
.row-actions form.inline { display: inline; }
.action-sep { color: var(--muted); margin: 0 0.15rem; }

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.9rem;
  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.8rem;
  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.9rem;
  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;
}

/* Collapsed C ("weak fit") tier — the <summary> is the toggle. */
.tier-collapse > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tier-collapse > summary::-webkit-details-marker { display: none; }
.tier-collapse > summary h3 {
  display: inline-block;
  margin: 0;
}
.tier-collapse > summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.tier-collapse[open] > summary::before { transform: rotate(90deg); }
.tier-collapse[open] > summary h3 { margin-bottom: 0.5rem; }

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.7rem;
  font-size: var(--fs-sm);
  color: var(--accent);
  border-color: var(--accent);
}
.add-btn:hover {
  color: var(--bg);
  background: var(--accent);
  border-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.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: #444;
  white-space: nowrap;
  line-height: 1.5;
}

.pill-status-new            { background: #7aa7ff; color: var(--bg); }

/* "+ 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 {
  /* Primary action: same accent as every other .btn-primary (was a lighter
     #7aa7ff that read as a different blue). */
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  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: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
  text-decoration: none;
}
.pill-status-submitted      { background: var(--accent); }
.pill-status-scheduled      { background: #2eb88a; }
.pill-status-in_progress    { background: #f5a524; color: var(--bg); }
.pill-status-offer          { background: #1b9e3e; }
.pill-status-rejected       { background: var(--danger); }
.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: var(--accent); }
.pill-tier-b { background: #f5a524; color: var(--bg); }
.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: var(--accent); }
.pill-fit-stretch  { background: #f5a524; color: var(--bg); }
.pill-fit-weak     { background: var(--danger); }
.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-running  { background: #2f5fb0; }
.badge-incomplete { background: #5b6173; }  /* slate: worker-death, not a real scrape error */

/* Spinner glyph shared by the scans "Running" badge, the Scans page
   "Scan is running…" button, and the synchronous Recommend button. */
.scan-spinner {
  display: inline-block;
  animation: scan-spin 1.1s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scan-spinner { animation: none; }
}

.badge-status-new            { background: #7aa7ff; color: var(--bg); }
.badge-status-submitted      { background: var(--accent); }
.badge-status-scheduled      { background: #2eb88a; }
.badge-status-in_progress    { background: #f5a524; color: var(--bg); }
.badge-status-offer          { background: #1b9e3e; }
.badge-status-rejected       { background: var(--danger); }
.badge-status-not_attempted  { background: #8b93a7; }
.badge-status-ghosted        { background: #6b5b95; }

.badge-tier-S { background: #1b9e3e; color: #fff; }
.badge-tier-A { background: var(--accent); color: #fff; }
.badge-tier-B { background: #f5a524; color: var(--bg); }
.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; }

/* Full-width "refine with instructions" bar on its own row under a document
   pane's header: a flush-growing textarea + the (re)generate button. Replaces
   the old cramped in-the-button-row layout. */
.refine-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}
.refine-bar-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  resize: vertical;
  padding: 0.4rem 0.55rem;
  min-height: 2.1rem;
}
.refine-bar-btn { white-space: nowrap; flex-shrink: 0; }
/* "Refined with: …" line under the refine bar, echoing the last steer used. */
.refined-with { margin: 0.1rem 0 0.6rem; font-size: 0.85rem; font-style: italic; }

/* 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; }

/* ------- admin overview panels (always-on snapshot row) -------
   Rendered by {% admin_overview_panels %} at the top of every admin
   page so today's KPIs (users, scans, tokens, errors) stay visible
   regardless of which admin subpage is active. */
.admin-overview-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.admin-overview-panels .overview-panel {
  background: var(--panel, #fff);
  border: 1px solid var(--border, var(--text));
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-overview-panels .panel-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.admin-overview-panels .panel-value {
  font-size: 1.25rem;
  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. */

/* The `hidden` attribute must win over component display rules — .notification
   sets display:grid, which would otherwise reveal a [hidden] banner (e.g. the
   import "Uploading…" progress) on page load. */
[hidden] { display: none !important; }

.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.9rem;
  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.8rem;
  color: var(--muted);
  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: var(--muted);
  margin-left: 0.15rem;
}
.stat-sub {
  font-size: 0.8rem;
}

/* AI-usage cards: tokens and cost shown together at the same size/type
   (one line, one weight) rather than one big value + a muted sub. */
.usage-dual {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.15rem 0 0.25rem;
}

/* Per-task AI usage breakdown table on the stats page. */
.usage-by-kind { margin-top: 1rem; }
.usage-by-kind th.num,
.usage-by-kind td.num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-bg-tag { font-size: 0.72rem; }
.usage-foot { margin-top: 0.5rem; font-size: 0.78rem; }

/* Shared framed bar chart (Submissions + AI usage), see _bar_chart.html.
   A left y-axis (tick labels) + a baseline so bars sit on an axis instead of
   floating; trimmed to active days so bars are wide and centered, not thin.
   The plot reserves top padding (BAR_HEADROOM) so the per-bar value labels sit
   above the tallest bar without clipping, and the y-axis shares that padding so
   its 0 tick lands on the baseline and ymax on the bar-zone top. */
.chart { display: flex; gap: 8px; margin: 0.75rem 0 0.25rem; }
.chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 170px;
  padding-top: 1.9rem; /* BAR_HEADROOM — keep in sync with .chart-plot */
  box-sizing: border-box;
  min-width: 2.7rem;
  font-size: 0.65rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chart-main { flex: 1; min-width: 0; }
.chart-plot {
  display: flex;
  align-items: end;
  justify-content: flex-start; /* anchor bars to the y-axis, read left→right */
  gap: 6px;
  height: 170px;
  padding: 1.9rem 6px 0; /* BAR_HEADROOM top */
  box-sizing: border-box;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.chart-col {
  flex: 1 1 0;
  min-width: 18px;
  max-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 100%;
}
.chart-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
}
.chart-sub { color: var(--muted); }
.chart-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
.chart-bar[style*="height: 0%"] { background: transparent; }
.chart-dates { display: flex; justify-content: flex-start; gap: 6px; padding: 0.3rem 6px 0; }
.chart-date {
  flex: 1 1 0;
  min-width: 18px;
  max-width: 58px;
  text-align: center;
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
}
.chart-caption { font-size: 0.8rem; margin-top: 0.25rem; }

.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: var(--muted);
  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: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 1px;
}
.tl-bar[style*="height: 0%"] {
  background: transparent;
}
.tl-count {
  font-size: 0.65rem;
  color: var(--muted);
}
.tl-date {
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 0.2rem;
  white-space: nowrap;
  transform-origin: top;
  transform: rotate(-60deg) translateY(0.4rem);
}
.tl-meta {
  font-size: 0.8rem;
  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: var(--danger-hover); }
.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: var(--danger-hover); color: #fff; }
.seg-0 { background: var(--accent); }
.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: var(--accent);
  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.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  line-height: 1.5;
}
.template-card-set-active:hover {
  background: var(--accent);
  color: var(--bg);
}
.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: var(--danger);
}

/* 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 var(--accent);
  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: var(--muted); }
.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: var(--text); }

.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%, var(--bg) 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: var(--accent); }
.marketing-hero p.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--muted);
  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: var(--accent);
  color: var(--bg);
}
.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: var(--text);
  border: 1px solid #2a2e36;
}
.marketing-cta .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.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.9rem;
  border-radius: 8px;
  border: 1px solid #2a2e36;
  background: #14171c;
  color: var(--text);
}
.hero-login input::placeholder { color: #6b7280; }
.hero-login input:focus {
  outline: none;
  border-color: var(--accent);
  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.9rem;
  white-space: nowrap;
}
.hero-signup-link {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.hero-signup-link a { color: var(--accent); 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: var(--muted);
  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: var(--accent);
  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: var(--muted);
  font-size: 0.9rem;
}

/* "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: var(--muted); font-size: 0.9rem; }

/* 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: var(--accent);
  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: var(--accent); }

/* FAQ accordion-ish layout (no JS — just <details>). */
.faq-group { margin-bottom: 2rem; }
.faq-group h2 {
  font-size: 1.15rem;
  color: var(--accent);
  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: var(--accent);
}
.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: var(--accent); }

/* 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). */
/* Auto-pipeline status line. Sits below the tabs strip on the
   application detail page; HTMX-polls every 2s while any step is
   non-terminal. The per-tab state lives inside .tab-status badges
   inside each tab button (updated via hx-swap-oob from the same
   response), so this strip only carries a short status sentence —
   and renders empty when the pipeline is fully complete. */
.pipeline-status {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.3rem 0 0.9rem;
  min-height: 1.2rem; /* avoid layout jump when terminal->empty */
}
.pipeline-status-mount { min-height: 1.2rem; }
.pipeline-status-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pipeline-status-line.status-warning { color: var(--danger); font-weight: 500; }

/* Live generation badges: "updating…" in a pane header, "generating…" in a
   pane body, and the WIP placeholder row in the downloads list. */
.gen-updating,
.gen-generating,
.gen-wip {
  font-size: var(--fs-2xs);
  color: var(--accent);
}
.gen-updating { margin-left: 0.4rem; }
.gen-updating::before,
.gen-wip::before { content: "⟳ "; }
.gen-wip-row { opacity: 0.75; }

/* Per-tab status badge rendered inside each .tabs-strip button.
   States: none (empty), queued, running (spinner), done, failed. */
.tabs-strip button { display: inline-flex; align-items: center; gap: 0.3rem; }
.tab-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  line-height: 1;
  min-width: 0.9em;
  color: var(--muted);
}
.tab-status-none { display: none; }
.tab-status-queued { color: var(--muted); opacity: 0.7; }
.tab-status-running {
  color: var(--accent);
  animation: tab-status-spin 1.2s linear infinite;
}
.tab-status-done { color: #5fc35f; }
.tab-status-failed { color: var(--danger); }
@keyframes tab-status-spin {
  to { transform: rotate(360deg); }
}

/* Downloads section: compact icon-link with a small format tag (.md/.pdf). */
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: var(--accent);
}
.download-link:hover { background: rgba(79, 140, 255, 0.10); text-decoration: none; }
.download-link .download-icon { flex: 0 0 auto; }
.download-link .download-fmt { font-size: 0.85em; font-variant-numeric: tabular-nums; }

/* Inline button that looks like a small link — used for the "Snapshot"
   retry button in the Downloads sidebar when the JD snapshot is missing. */
.link-button {
  background: none;
  border: none;
  padding: 0.1rem 0.35rem;
  margin: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.link-button:hover { background: rgba(79, 140, 255, 0.10); }

/* Signup-closed standalone panel rendered at /accounts/signup/ when
   SignupConfig.is_open is False. Reuses the .panel chrome but adds a
   centered CTA row. */
.signup-closed {
  max-width: 640px;
  margin: 3rem auto;
  text-align: center;
}
.signup-closed h1 { margin-top: 0; }
.signup-closed .lede { color: var(--muted); font-size: 1.05rem; }
.signup-closed-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.signup-closed-actions .btn-primary,
.signup-closed-actions .btn-secondary {
  padding: 0.65rem 1.3rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.signup-closed-actions .btn-primary {
  background: var(--accent);
  color: var(--bg);
}
.signup-closed-actions .btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid #2a2e36;
}
.signup-closed-actions .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.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: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
/* The Logout control is a <button> (it POSTs to log out) styled as a help-link
   so it sits flush with the Tutorial/FAQ anchors. Strip the default button
   chrome; the .help-link rule above supplies color/padding/size. */
.site-header button.help-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.site-header button.help-link:hover { border: none; }
.site-header .help-link:hover { color: var(--accent); }
.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.9rem;
  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; }

/* EDD activity-log report (HTML view). PDF render uses its own
   self-contained <style> block in templates/applications/activity_log_pdf.html. */
.activity-log-actions { display: flex; justify-content: flex-end; margin: 0 0 0.85rem; }
.activity-week { margin-bottom: 1.25rem; }
.activity-week-header {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.activity-week-header h2 { margin: 0; font-size: 1rem; }
.table-wrap { overflow-x: auto; }
.activity-log-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.activity-log-table th,
.activity-log-table td {
  text-align: left; padding: 0.35rem 0.5rem; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.activity-log-table th { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.activity-log-table .nowrap { white-space: nowrap; }
.activity-log-table .jd-cell { word-break: break-word; }
.activity-log-table .jd-source-link { margin-right: 0.4rem; }

/* Rendered markdown artifacts (fit eval / company profile / interview prep).
   Replaces the old raw <pre> dump with formatted, readable HTML. */
.md-rendered { font-size: var(--fs-md); line-height: 1.55; color: var(--text); }
.md-rendered > :first-child { margin-top: 0; }
.md-rendered h1, .md-rendered h2, .md-rendered h3, .md-rendered h4 {
  margin: 1.2em 0 0.4em; line-height: 1.25; color: var(--text);
}
.md-rendered h1 { font-size: var(--fs-xl); }
.md-rendered h2 {
  font-size: var(--fs-lg); color: var(--accent);
  border-bottom: 1px solid var(--border); padding-bottom: 0.2em;
}
.md-rendered h3 { font-size: var(--fs-base); }
.md-rendered h4 {
  font-size: var(--fs-md); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.md-rendered p { margin: 0.5em 0; }
.md-rendered ul, .md-rendered ol { margin: 0.5em 0; padding-left: 1.4em; }
.md-rendered li { margin: 0.2em 0; }
.md-rendered a { color: var(--accent); }
.md-rendered a:hover { text-decoration: underline; }
.md-rendered code {
  background: rgba(255, 255, 255, 0.06); padding: 0.1em 0.35em;
  border-radius: 4px; font-size: 0.9em;
}
.md-rendered pre {
  background: rgba(255, 255, 255, 0.06); padding: 0.7em 0.9em;
  border-radius: 6px; overflow-x: auto;
}
.md-rendered pre code { background: none; padding: 0; }
.md-rendered blockquote {
  margin: 0.6em 0; padding: 0.2em 0.9em;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.md-rendered hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.md-rendered table {
  border-collapse: collapse; width: 100%; margin: 0.6em 0; font-size: 0.92em;
}
.md-rendered th, .md-rendered td {
  border: 1px solid var(--border); padding: 0.4em 0.6em;
  text-align: left; vertical-align: top;
}
.md-rendered th { background: var(--panel); font-weight: 600; }
.md-rendered tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* Search-profile row controls — present the status toggle (Active/Inactive) and
   the row actions (Edit/Delete) as ONE consistent pill family: same soft-tinted,
   rounded shape, distinguished only by semantic color. Without this the row
   mixed a bold filled badge with thin text links, reading as three styles.
   Scoped to .profile-table so global .badge / .action-link are unaffected. */
.profile-table .badge,
.profile-table .row-actions .action-link {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}
.profile-table .badge-active   { background: rgba(46, 184, 138, 0.16); color: #5fc88a; }
.profile-table .badge-inactive { background: rgba(139, 147, 167, 0.16); color: var(--muted); }
.profile-table .row-actions .action-link {
  background: rgba(79, 140, 255, 0.12); color: var(--accent);
}
.profile-table .row-actions .action-link:hover {
  background: rgba(79, 140, 255, 0.22); text-decoration: none;
}
.profile-table .row-actions .action-link.danger {
  background: rgba(224, 90, 90, 0.12); color: var(--danger);
}
.profile-table .row-actions .action-link.danger:hover {
  background: rgba(224, 90, 90, 0.22); color: var(--danger); text-decoration: none;
}
/* The chips read as discrete controls, so the middot separator is redundant. */
.profile-table .row-actions .action-sep { display: none; }
.profile-table .row-actions { display: flex; gap: 0.4rem; align-items: center; }