/* Epic 2 pages: nav, login, board, trends, companies. Builds on the tokens in app.css (light + dark). No inline styles anywhere. */

/* ---------- chart palette (validated: dataviz palette, all checks pass on #ffffff / #111317) ---------- */
:root {
  --series-0: #2a78d6; --series-1: #eb6834; --series-2: #1baf7a; --series-3: #eda100;
  --series-4: #e87ba4; --series-5: #008300; --series-6: #4a3aa7; --series-7: #e34948;
  --series-other: #8b9099;
  --chart-grid: #ebeae6; --chart-base: #c9c8c2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-0: #3987e5; --series-1: #d95926; --series-2: #199e70; --series-3: #c98500;
    --series-4: #d55181; --series-5: #008300; --series-6: #9085e9; --series-7: #e66767;
    --series-other: #6b727c; --chart-grid: #1f2329; --chart-base: #383d45;
  }
}
:root[data-theme="dark"] {
  --series-0: #3987e5; --series-1: #d95926; --series-2: #199e70; --series-3: #c98500;
  --series-4: #d55181; --series-5: #008300; --series-6: #9085e9; --series-7: #e66767;
  --series-other: #6b727c; --chart-grid: #1f2329; --chart-base: #383d45;
}

/* ---------- header nav: tabs after the brand, profile at the far right (all inside .chrome .top) ---------- */
a.brand { text-decoration: none; color: inherit; flex: none; }
.top { min-width: 0; }
.topnav { flex: none; min-width: 0; }
.navlinks { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.navlinks a { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 7px; text-decoration: none; color: var(--muted); font-weight: 550; font-size: 13.5px; white-space: nowrap; }
.navlinks a:hover { background: var(--hover); color: var(--text); }
.navlinks a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
.profile { position: relative; flex: none; margin-left: 4px; }
.profile-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; text-decoration: none; max-width: 260px; }
.profile-btn:hover { border-color: var(--line-strong); background: var(--hover); }
.profile-btn[aria-expanded="true"] { border-color: var(--accent); }
.profile-btn .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.profile-btn.signin { color: var(--accent-strong); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.profile-btn svg.i { width: 18px; height: 18px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 24px)); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; }
.menu[hidden] { display: none; }
.menu-head { display: grid; gap: 1px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; font-size: 13px; }
.menuitem { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; font-size: 13.5px; }
.menuitem:hover, .menuitem:focus-visible { background: var(--hover); }
.menuitem:disabled { opacity: .55; cursor: wait; }
@media (max-width: 1180px) { .top .brand .sub { display: none; } }
@media (max-width: 900px) {
  .profile-btn { padding: 0 8px; }
  .profile-btn .who { display: none; }
  .profile-btn.signin .who { display: none; }
  .health .txt { max-width: 120px; }
}
@media (max-width: 860px) {
  /* phones: the header wraps to two rows; the tabs become a scrollable strip inside the header */
  .chrome .top { height: auto; flex-wrap: wrap; row-gap: 2px; padding-top: 8px; padding-bottom: 4px; }
  .topnav { order: 10; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
  .topnav::-webkit-scrollbar { display: none; }
  .navlinks a { height: 34px; padding: 0 12px; }
  #help-btn { display: none; }
  .health .txt { max-width: 96px; }
}

/* ---------- page frame ---------- */
.page { padding: 18px var(--row-pad-x) 80px; }
.page.narrow { padding-top: 32px; }
.page.narrow .login-card { max-width: 440px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.page-head p { margin: 4px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.grow { flex: 1; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 14px; }
.card h2 { margin: 0 0 2px; font-size: 15px; letter-spacing: -.01em; }
.note { max-width: 90ch; background: var(--info-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.note p { margin: 0; }
.banner { margin: 0 0 12px; }
.empty-card { text-align: center; padding: 36px 20px; margin-bottom: 14px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); }
.empty-card h2 { color: var(--text); font-size: 16px; margin: 10px 0 6px; }
.empty-card p { margin: 0 auto 14px; max-width: 460px; }
.empty-card svg.i { width: 36px; height: 36px; color: var(--faint); }
.statusline { min-height: 20px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input[type="text"], input[type="email"], input[type="password"] {
  height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); min-width: 0;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inline-form input[type="text"] { width: 240px; max-width: 100%; }
.btn.wide { width: 100%; height: 38px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- login ---------- */
.login-card { padding: 24px; margin-top: 0; }
.login-card h1 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; line-height: 1.25; }
.login-card > p { margin: 0 0 18px; }
.login-card .small { margin: 18px 0 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13.5px; }
.field input { width: 100%; height: 40px; font-size: 16px; }
.hint { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); }
.form-error { margin: 0 0 12px; padding: 9px 12px; border-radius: 7px; background: var(--danger-soft); color: var(--danger); font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
input[aria-invalid="true"] { border-color: var(--danger) !important; }

/* ---------- board (kanban) ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; overscroll-behavior-x: contain; }
.kcol { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; transition: border-color .12s, background .12s; }
.kcol.drop { border-color: var(--accent); background: var(--accent-soft); }
.kcol-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; min-height: 28px; }
.kcol-title { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcol-count { font: 600 12px/1 var(--mono); padding: 3px 7px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.kcol-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.kcol-empty { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 16px 8px; text-align: center; color: var(--faint); font-size: 12.5px; }
.kcard { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; display: flex; flex-direction: column; gap: 3px; cursor: grab; }
.kcard:hover { border-color: var(--line-strong); }
.kcard.dragging { opacity: .45; }
.kcard.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.board-wrap { min-width: 0; }
.kc-title { font-weight: 600; line-height: 1.3; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.kc-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.kc-co { font-size: 13px; font-weight: 550; color: var(--muted); }
.kc-loc { font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; }
.kc-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.kc-badges:empty { display: none; }
.kc-applied { font-size: 12px; color: var(--muted); }
.kc-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.kc-actions select {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px;
}
.kc-actions select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- settings ---------- */
.savestatus { margin: 0; font-size: 13px; color: var(--muted); min-height: 20px; }
.savestatus[data-state="saved"] { color: var(--accent-strong); }
.savestatus[data-state="error"] { color: var(--danger); font-weight: 600; }
.set-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.set-tools .search { flex: 1 1 240px; max-width: none; }
.set-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: clip; }
.set-row { border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row[hidden] { display: none; }
.set-row label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.set-row label:hover { background: var(--hover); }
.set-name { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-jobs { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
input.switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .12s; border: 0; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .12s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(16px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-row:has(input.switch:not(:checked)) .set-name { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- trends ---------- */
.an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.an-filters .search { flex: 0 1 220px; min-width: 150px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: start; }
.stat.wide { grid-column: span 2; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chart-card { transition: opacity .15s; }
.chart-card.is-loading { opacity: .55; }
.chart-head { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: flex-start; }
.chart-head p { margin: 0; }
.hint-line { font-size: 12.5px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.lg { display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 100%; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12.5px; }
.lg:hover { border-color: var(--line-strong); background: var(--hover); }
.lg[aria-pressed="true"] { border-color: var(--text); background: var(--hover); font-weight: 600; }
.lg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.lg-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw.s0 { background: var(--series-0); } .sw.s1 { background: var(--series-1); } .sw.s2 { background: var(--series-2); } .sw.s3 { background: var(--series-3); }
.sw.s4 { background: var(--series-4); } .sw.s5 { background: var(--series-5); } .sw.s6 { background: var(--series-6); } .sw.s7 { background: var(--series-7); }
.sw.sOther { background: var(--series-other); }
.chartwrap { position: relative; }
.chart-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
svg.chart { display: block; max-width: none; touch-action: pan-x pan-y; }
svg.chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
svg.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
svg.chart .baseline { stroke: var(--chart-base); stroke-width: 1; }
svg.chart .ax { font: 11px var(--font); fill: var(--muted); }
svg.chart .peak { font: 600 11.5px var(--font); fill: var(--text); }
svg.chart .activeband { fill: var(--hover); opacity: .8; }
svg.chart .hit { fill: transparent; }
svg.chart .bar-g { transition: opacity .1s; }
svg.chart.has-active .bar-g:not(.is-active) { opacity: .55; }
svg .s0 { fill: var(--series-0); } svg .s1 { fill: var(--series-1); } svg .s2 { fill: var(--series-2); } svg .s3 { fill: var(--series-3); }
svg .s4 { fill: var(--series-4); } svg .s5 { fill: var(--series-5); } svg .s6 { fill: var(--series-6); } svg .s7 { fill: var(--series-7); }
svg .sOther { fill: var(--series-other); }
.chart-empty { text-align: center; padding: 48px 12px; color: var(--muted); }
.chart-empty svg.i { width: 34px; height: 34px; color: var(--faint); }
.chart-empty p { margin: 8px 0 0; }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; min-width: 150px; max-width: 260px; font-size: 12.5px; }
.tip-date { color: var(--muted); font-size: 12px; }
.tip-total { margin: 2px 0 6px; font-size: 13px; }
.tip-total strong { font-size: 17px; }
.tip-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tip-rows li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tip-rows strong { font-variant-numeric: tabular-nums; }
.tip-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tk { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.tk.s0 { background: var(--series-0); } .tk.s1 { background: var(--series-1); } .tk.s2 { background: var(--series-2); } .tk.s3 { background: var(--series-3); }
.tk.s4 { background: var(--series-4); } .tk.s5 { background: var(--series-5); } .tk.s6 { background: var(--series-6); } .tk.s7 { background: var(--series-7); }
.tk.sOther { background: var(--series-other); }
.rank { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.rk { display: grid; grid-template-columns: 22px minmax(90px, 200px) 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; min-height: 34px; }
.rk:hover { background: var(--hover); }
.rk[aria-pressed="true"] { background: var(--accent-soft); }
.rk-n { color: var(--faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.rk-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-v { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
svg.share { width: 100%; height: 8px; display: block; }
svg.share .track { fill: var(--hover); }
.table-card > summary { cursor: pointer; font-weight: 650; font-size: 15px; }
.table-scroll { overflow: auto; max-height: 420px; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; }
table.dt { border-collapse: collapse; width: 100%; font-size: 13px; }
table.dt th, table.dt td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.dt thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; color: var(--muted); font-size: 12px; }
table.dt .num { text-align: right; font-variant-numeric: tabular-nums; }
.caveats { margin-top: 14px; font-size: 13px; color: var(--muted); }
.caveats ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .page { padding-top: 14px; }
  .page.narrow { padding-top: 16px; }
  .board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .kc-actions select { height: 36px; font-size: 15px; }
  .kc-actions .iconbtn { width: 36px; height: 36px; }
  .an-filters .seg { order: 0; }
  .an-filters .search { flex: 1 1 100%; max-width: none; }
  .stat .v { font-size: 20px; }
  .stat.wide { grid-column: auto; }
  .rk { grid-template-columns: 20px minmax(70px, 1fr) auto; }
  .rk svg.share { display: none; }
  .tip { max-width: 220px; }
  .set-row label { min-height: 48px; }
  .inline-form { width: 100%; }
  .inline-form input[type="text"] { flex: 1; width: auto; }
}
@media (forced-colors: active) {
  input.switch:checked { background: Highlight; }
  svg .s0, svg .s1, svg .s2, svg .s3, svg .s4, svg .s5, svg .s6, svg .s7, svg .sOther { stroke: CanvasText; stroke-width: 1; }
}

/* ---------- location picker + filter notes ---------- */
.loc-pop { width: 330px; }
.loc-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.loc-region { font-weight: 650; margin-top: 4px; }
.loc-country { padding-left: 26px !important; }
.loc-foot { margin: 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.loc-msg { margin: 6px; }
.loc-note { padding: 0 var(--row-pad-x) 8px; font-size: 12.5px; color: var(--muted); }
.page .loc-note { padding: 0 0 10px; margin: -4px 0 0; }
.hidden-line { margin: 0 0 10px; font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: 7px; padding: 7px 12px; }
.hidden-line .linkbtn { color: var(--accent-strong); }
.filters, .an-filters { position: relative; }
@media (max-width: 760px) {
  .filters .popover, .an-filters .popover { position: static; }
  .filters .pop, .an-filters .pop { left: var(--row-pad-x); right: var(--row-pad-x); top: auto; width: auto; max-width: none; margin-top: 4px; }
  .an-filters .pop { left: 0; right: 0; }
}

body[class^="page-"] .brand span.name { display: inline; }

/* ======================================================================================
   Full-width layouts, master-detail (list + job details), AI badges and Jev filters
   ====================================================================================== */
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.set-row { border-right: 1px solid var(--line); }

/* ---------- master-detail ---------- */
.split { display: block; }
.list-wrap { container-type: inline-size; container-name: list; }
html.detail-open .split .list-wrap { min-width: 0; }
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.detail[hidden] { display: none; }
@media (min-width: 1100px) {
  html.detail-open .split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 780px); gap: 16px; align-items: start; padding: 0 var(--row-pad-x); }
  html.detail-open .split > .list-wrap, html.detail-open .split > .board-wrap { margin: 0; min-width: 0; }
  .detail { position: sticky; top: calc(var(--chrome-h, 130px) + 8px); max-height: calc(100vh - var(--chrome-h, 130px) - 20px); }
}
@media (max-width: 1099px) {
  .detail { position: fixed; inset: 0; z-index: 45; border-radius: 0; border: 0; }
  html.sheet-open { overflow: hidden; }
}
.d-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.d-toprow { display: flex; align-items: flex-start; gap: 10px; }
.d-title { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.d-title:focus-visible { outline-offset: 3px; }
.d-close { flex: none; }
.d-company { margin: 2px 0 8px; color: var(--muted); font-weight: 600; }
.d-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.d-badges:empty { display: none; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.d-actions .btn { height: 34px; padding: 0 14px; }
.d-scroll { overflow: auto; padding: 4px 16px 24px; flex: 1; overscroll-behavior: contain; }
.d-sec { margin-top: 16px; }
.d-sec > h3, .d-collapse > summary h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.d-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.d-collapse > summary::-webkit-details-marker { display: none; }
.d-collapse > summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; transition: transform .1s; }
.d-collapse[open] > summary::before { transform: rotate(90deg); }
.d-collapse > summary h3 { margin: 0; }
.d-collapse > *:not(summary) { margin-top: 8px; }
.d-facts { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13.5px; }
.d-facts dt { color: var(--muted); }
.d-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.d-loclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.chip-s { font-size: 11.5px; line-height: 1; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.chip-s.remote { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip-s.closed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.chip-s.salary { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; background: var(--hover); }
.chip-s.tech { color: var(--text); background: var(--hover); }
.chip-s.flag { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.chip-s.unclear { border-style: dashed; color: var(--warn); }
.dtag { font: 700 10px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); vertical-align: middle; }
.dtag.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.d-big { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.d-tiers { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.d-spans { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.d-spans summary { cursor: pointer; }
.d-spans ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.d-state { padding: 12px 14px; border-radius: 8px; background: var(--info-soft); border: 1px solid var(--line); }
.d-state[data-kind="bad"] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.d-state[data-kind="pending"] { background: var(--warn-soft); }
.d-state p { margin: 4px 0 0; font-size: 13.5px; }
.d-table { margin: 0; max-height: none; }
table.jev-table th[scope="row"] { font-weight: 550; color: var(--muted); white-space: normal; min-width: 130px; }
table.jev-table td { white-space: normal; }
table.jev-table td.num { white-space: nowrap; }
table.jev-table tr.guarded th[scope="row"] { box-shadow: inset 3px 0 0 var(--warn); }
.d-sec h4 { margin: 14px 0 6px; font-size: 13px; }
.d-guards { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.d-guards code { font-family: var(--mono); font-size: 12px; background: var(--hover); padding: 1px 4px; border-radius: 3px; }
.d-meta { margin-top: 12px; font-size: 12.5px; }
.d-desc { max-width: 78ch; font-size: 14px; line-height: 1.6; }
.d-desc p { margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.d-loading { margin: 14px 0 0; }
.d-skel { display: grid; gap: 10px; margin-top: 12px; }
.d-skel span { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--line) 0, var(--hover) 50%, var(--line) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }

/* ---------- list rows: selection, badges, and a narrow-list layout that follows the LIST width, not the window ---------- */
.job { cursor: pointer; }
.job.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.job.selected:hover { background: var(--accent-soft); }
.aibadge { font: 700 10px/1 var(--font); letter-spacing: .06em; padding: 3px 5px; border-radius: 4px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); flex: none; cursor: help; }
.tcell .chip-s.salary { flex: none; }
@container list (max-width: 780px) {
  .job { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co age" "title title" "loc act"; row-gap: 3px; padding: 10px var(--row-pad-x) 8px; }
  .co { font-size: 13px; color: var(--muted); }
  .age { justify-self: end; }
  .title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; font-size: 15px; line-height: 1.3; }
  .tcell { align-items: flex-start; flex-wrap: wrap; row-gap: 4px; }
  .loc { font-size: 13px; align-self: center; }
  .act .btn { height: 34px; padding: 0 14px; }
}
@container list (min-width: 781px) and (max-width: 1150px) {
  .job { grid-template-columns: 58px minmax(96px, 130px) minmax(0, 1fr) minmax(0, 150px) auto; column-gap: 10px; }
}

/* ---------- Jev filters popover ---------- */
.aif-pop { width: min(600px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow: auto; gap: 10px; }
.aif-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.aif-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.aif-group legend { padding: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.aif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; }
.aif-grid label, .aif-inline label { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.aif-grid label:hover, .aif-inline label:hover { background: var(--hover); }
.aif-pop input[type="checkbox"], .aif-pop input[type="radio"] { accent-color: var(--accent); margin: 0; }
.aif-inline { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.aif-pop input[type="number"], .aif-pop input[type="text"] { height: 30px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; background: var(--surface); width: 110px; }
.aif-pop input[type="text"] { width: 100%; max-width: 320px; }
.aif-pop footer { position: sticky; bottom: 0; background: var(--raised); }
.chip .cnt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 700 11px/1 var(--font); }
.popover.active > summary .cnt { margin-left: 2px; }
@media (max-width: 760px) {
  .d-facts { grid-template-columns: 1fr; gap: 1px 0; }
  .d-facts dt { margin-top: 8px; font-size: 12px; }
  .d-scroll { padding: 4px 14px 32px; }
  .d-head { padding: 12px 14px 10px; }
  .d-actions .btn { height: 40px; flex: 1; }
  .filters .aif-pop, .an-filters .aif-pop { left: 8px; right: 8px; width: auto; }
}

/* ======================================================================================
   Radar: compact chrome. Scan progress lives in the chip; status text lives in the filter row; the list and the pane start right below it.
   ====================================================================================== */
.health { position: relative; overflow: hidden; }
.scanbar { position: absolute; left: 10px; right: 10px; bottom: 2px; width: auto; height: 3px; border: 0; border-radius: 2px; background: var(--line); appearance: none; -webkit-appearance: none; accent-color: var(--accent); }
.scanbar[hidden] { display: none; }
.scanbar::-webkit-progress-bar { background: var(--line); border-radius: 2px; }
.scanbar::-webkit-progress-value { background: var(--accent); border-radius: 2px; transition: width .4s; }
.scanbar::-moz-progress-bar { background: var(--accent); border-radius: 2px; }
.fstatus { margin-left: auto; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; font-size: 13px; }
.newinline { margin: 0; font-size: 13.5px; font-weight: 650; display: inline-flex; align-items: baseline; gap: 5px; letter-spacing: 0; white-space: nowrap; }
.newinline .count { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; }
.newinline .count[data-zero="true"] { color: var(--muted); }
.fstatus .since { color: var(--muted); white-space: nowrap; }
.fstatus .resultline { padding: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; cursor: help; }
.fstatus .linkbtn { padding: 2px 4px; }
main { padding-top: 0; }
.split { padding-top: 10px; }
@media (min-width: 1100px) {
  html.detail-open .split { padding-top: 10px; }
  .detail { top: calc(var(--chrome-h, 110px) + 10px); height: calc(100vh - var(--chrome-h, 110px) - 20px); max-height: none; }
}
@media (min-width: 1100px) { .list-wrap { margin-top: 0; } }
@media (max-width: 760px) {
  .fstatus { margin-left: 0; width: 100%; justify-content: space-between; }
  .fstatus .since { display: none; }
  .newinline { font-size: 13px; }
}

/* ---------- row chips: seniority, years, degree, visa ---------- */
:root { --visa: #4a3aa7; --visa-soft: rgba(74, 58, 167, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --visa: #9d93f0; --visa-soft: rgba(157, 147, 240, .12); } }
:root[data-theme="dark"] { --visa: #9d93f0; --visa-soft: rgba(157, 147, 240, .12); }
.tcell { flex-wrap: nowrap; overflow: hidden; }
.tcell > .title { flex: 0 1 auto; min-width: 22ch; }
.tcell > .chip-s, .tcell > .aibadge, .tcell > .badge { flex: none; }
.chip-s.sen { color: var(--text); font-weight: 600; }
.chip-s.sen.inferred { border-style: dashed; color: var(--muted); font-weight: 550; }
.chip-s.yrs, .chip-s.deg { color: var(--muted); }
.chip-s.visa { display: inline-flex; align-items: center; gap: 4px; color: var(--visa); border-color: var(--visa); background: var(--visa-soft); font-weight: 650; }
.chip-s.visa svg.i { width: 12px; height: 12px; stroke-width: 2.2; }
.chip-s.visa.cond { border-style: dashed; font-weight: 550; }
.job[data-visa] { outline: 2px solid var(--visa); outline-offset: -2px; }
.job[data-visa="conditional"] { outline: 2px dashed color-mix(in srgb, var(--visa) 70%, transparent); }
.job[data-visa]:last-child { outline-offset: -2px; }
.job.selected[data-visa] { box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.job:focus-visible[data-visa], .job.kb-focus[data-visa] { box-shadow: inset 0 0 0 5px var(--accent); }
@container list (max-width: 1300px) { .tcell > .chip-s.deg { display: none; } }
@container list (max-width: 1150px) { .tcell > .chip-s.yrs { display: none; } }
@container list (max-width: 900px) { .chip-s.visa .vt { display: none; } .chip-s.visa { padding: 4px 5px; } }
@container list (max-width: 780px) {
  /* phone layout: chips may wrap under the title again, everything visible */
  .tcell { flex-wrap: wrap; overflow: visible; }
  .tcell > .chip-s.deg, .tcell > .chip-s.yrs { display: inline-block; }
  .chip-s.visa .vt { display: inline; } .chip-s.visa { padding: 4px 8px; }
  .tcell > .title { flex: 1 1 100%; }
}

.pop { max-width: calc(100vw - 16px); }
.aif-pop { width: min(600px, calc(100vw - 16px)); }

/* quick filters sit with Remote; on phones they just wrap with the rest of the filter row */
#quick-exp.select { min-width: 0; }
#quick-visa[aria-pressed="true"] { color: var(--visa); border-color: var(--visa); background: var(--visa-soft); }
@media (max-width: 760px) { #quick-exp.select { max-width: 100%; } }
/* active selects: keep the arrow (the shared "active" shorthand reset its size and made the whole control a solid block) */
.select, .select.active { padding-right: 28px; }
.select.active { background-position: calc(100% - 13px) 14px, calc(100% - 9px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }

/* ======================================================================================
   One header on every page, compact page heads, aligned filter rows, equal stat tiles
   ====================================================================================== */
.chrome .top { height: 52px; gap: 10px; }
.chrome .top .health { flex: none; width: 218px; justify-content: flex-start; }
.chrome .top .health .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
.top .profile { min-width: 32px; }
@media (max-width: 1180px) { .chrome .top .health { width: 190px; } }
@media (max-width: 900px) { .chrome .top .health { width: 160px; } }
@media (max-width: 860px) { .chrome .top .health { width: auto; max-width: 150px; } }
.page { padding-top: 10px; }
.page-head { margin-bottom: 8px; align-items: center; }
.page-head > div { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.page-head h1 { font-size: 18px; }
.page-head p { margin: 0; font-size: 13px; }
.an-filters, .set-tools { gap: 8px; margin-bottom: 10px; align-items: center; }
.an-filters > *, .an-filters .search, .an-filters .popover > summary, .an-filters .seg, .an-filters .select, .an-filters .chip, .set-tools .btn, .set-tools .search input { height: 32px; box-sizing: border-box; }
.an-filters .search input { height: 32px; }
.an-filters .seg { align-items: center; }
.an-filters .seg button { height: 26px; }
.stat-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 10px; }
.stat { display: flex; flex-direction: column; justify-content: center; min-height: 88px; padding: 10px 14px; }
.stat .v { font-size: 22px; }
.stat .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-card { margin-top: 10px; }
.board { min-height: calc(100vh - 210px); align-items: stretch; }
.board .kcol { display: flex; flex-direction: column; }
.board .kcol-list { flex: 1; }
.card { margin-top: 10px; }
.empty-card { padding: 18px 16px; margin-bottom: 10px; }
.empty-card svg.i { width: 28px; height: 28px; }
.inline-form input[type="text"], .inline-form .btn { height: 32px; }
@media (max-width: 860px) {
  .chrome .top { height: auto; flex-wrap: wrap; row-gap: 2px; padding-top: 8px; padding-bottom: 4px; gap: 8px; }
  .chrome .top .health { width: auto; flex: 0 1 auto; min-width: 0; max-width: 170px; }
  .top .spacer { flex: 1; }
}
@media (max-width: 860px) {
  body[class^="page-"] .brand span.name, .brand span.name { display: none; }
  .chrome .top .health { max-width: 150px; }
}
@media (max-width: 860px) {
  .chrome .top { gap: 6px; }
  .chrome .top .health { max-width: 128px; padding: 0 8px; }
  .top .profile { margin-left: 0; }
}

/* ======================================================================================
   LeetCode prep: pane section, difficulty chips, Prep page
   ====================================================================================== */
:root { --d-easy: #06592f; --d-easy-bg: #e2f4ea; --d-med: #7a4e00; --d-med-bg: #fbf0d9; --d-hard: #a3200f; --d-hard-bg: #fdecea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --d-easy: #6ff0a6; --d-easy-bg: rgba(61,220,132,.14); --d-med: #f5c451; --d-med-bg: rgba(245,196,81,.14); --d-hard: #ff8f86; --d-hard-bg: rgba(255,123,114,.15); } }
:root[data-theme="dark"] { --d-easy: #6ff0a6; --d-easy-bg: rgba(61,220,132,.14); --d-med: #f5c451; --d-med-bg: rgba(245,196,81,.14); --d-hard: #ff8f86; --d-hard-bg: rgba(255,123,114,.15); }
.diff { display: inline-block; font: 650 11.5px/1 var(--font); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.diff-easy { color: var(--d-easy); background: var(--d-easy-bg); }
.diff-medium { color: var(--d-med); background: var(--d-med-bg); }
.diff-hard { color: var(--d-hard); background: var(--d-hard-bg); }
.diff-x { color: var(--muted); background: var(--hover); }
.chip-s.premium { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.pq-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; }
.pq { display: grid; gap: 4px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.pq-title { font-weight: 600; overflow-wrap: anywhere; }
.pq-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-prep p { margin: 6px 0; }
.spin-s { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
.prep-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--surface); }
.prep-status:empty { display: none; }
.prep-status .dot { animation: none; box-shadow: none; }
.prep-status .dot[data-level="ok"] { background: var(--accent); } .prep-status .dot[data-level="warn"] { background: var(--warn); } .prep-status .dot[data-level="bad"] { background: var(--danger); }
.prep-count { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.pop label.is-off { opacity: .55; cursor: not-allowed; }
.prep-results { margin-top: 4px; }
.prep-table { max-height: none; overflow: auto; }
.prep-table .pq-t a { font-weight: 600; text-decoration: none; }
.prep-table .pq-t a:hover { text-decoration: underline; }
.prep-table td { white-space: normal; vertical-align: middle; }
.prep-setup { margin-top: 12px; max-width: 80ch; }
.prep-setup ol { padding-left: 20px; display: grid; gap: 4px; }
.prep-setup code { font-family: var(--mono); font-size: 12px; background: var(--hover); padding: 1px 5px; border-radius: 3px; }
.prep-state { max-width: 80ch; }
.pop-col { white-space: nowrap; width: 140px; }
.pq-meta .popu, .pop-col .popu { display: inline-flex; align-items: center; gap: 6px; }
svg.popbar { width: 56px; height: 6px; display: block; }
svg.popbar .track { fill: var(--hover); } svg.popbar .fill { fill: var(--accent); }
.popn { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) {
  .prep-table table, .prep-table tbody { display: block; }
  .prep-table thead { display: none; }
  .prep-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .prep-table td { display: block; padding: 0; border: 0; }
  .prep-table td.pq-t { flex: 1 1 100%; }
  .prep-table .pop-col { width: auto; }
}