/* Saxobeat look and feel. Dark only, one theme (blue). Phone first: the base rules are the phone's, wider screens add to them (640 and 900 px).
   Every colour is a token below; the templates use the tokens (var(--accent), var(--muted)...), never a literal colour. */

:root {
  --bg:#0a0c11; --bg-2:#0e1118;
  --panel:#12151d; --panel-2:#171b25; --raised:#1d2230;
  --text:#e8eaf2; --muted:#8b93a7; --faint:#5c6479;
  --line:#232838; --line-2:#2e3448;
  --accent:#8b9bff; --accent-2:#6e7cf2; --on-accent:#0a0c11;
  --accent-grad:linear-gradient(135deg,#9aa8ff 0%,#6e7cf2 55%,#8a6cf0 100%);
  --glow:rgba(110,124,242,.28);
  --good:#4fd1a1; --warn:#f0b35a; --bad:#f2777a;
}
:root { --radius:12px; --radius-sm:8px; --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28); color-scheme:dark; }

* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; color:var(--text); font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"cv11","ss01","tnum"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:radial-gradient(1200px 520px at 80% -10%, var(--glow), transparent 60%), var(--bg); background-attachment:fixed;
}
::selection { background:var(--accent-2); color:var(--on-accent); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }

/* ---- header */
header { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.topnav { max-width:1160px; margin:0 auto; padding:8px 16px; display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.topnav a { padding:7px 12px; color:var(--muted); white-space:nowrap; border-radius:999px; font-weight:500; transition:background .15s,color .15s; }
.topnav a:hover { color:var(--text); background:var(--panel-2); text-decoration:none; }
.topnav a.on { color:var(--text); background:var(--raised); box-shadow:0 0 0 1px var(--line-2) inset; }
.topnav .brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.01em; color:var(--text); margin-right:10px; padding-left:4px; }
.topnav .brand::before { content:""; width:18px; height:18px; border-radius:6px; background:var(--accent-grad); box-shadow:0 0 18px var(--glow); }
.topnav .sp { flex:1; }
details.fold > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; user-select:none; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:"▶"; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border-radius:50%;
  background:var(--raised); border:1px solid var(--line-2); color:var(--accent); font-size:11px; transition:transform .15s, background .15s; }
details.fold > summary:hover::before { background:var(--accent); color:var(--bg); }
details.fold[open] > summary::before { transform:rotate(90deg); }
.funnel { width:100%; border-collapse:collapse; }
.funnel td { padding:7px 8px 7px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.funnel .bar { height:10px; border-radius:999px; background:var(--panel-2); min-width:120px; overflow:hidden; }
.funnel .bar > span { display:block; height:100%; border-radius:999px; background:var(--accent-grad); }
.funnel .num { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.stat { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); }
.stat:last-child { border-bottom:0; }
form.lang { display:inline-flex; margin:0; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
form.lang button { border:0; border-radius:0; background:transparent; color:var(--muted); padding:3px 9px; font-size:11px; font-weight:700; letter-spacing:.04em; cursor:pointer; }
form.lang button.cur { background:var(--raised); color:var(--text); }
form.lang button:hover { color:var(--text); }

main { max-width:1160px; margin:0 auto; padding:16px 16px calc(88px + env(safe-area-inset-bottom)); }
h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:6px 0 16px; }
h2 { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:26px 0 10px; }
h2 .muted { text-transform:none; letter-spacing:0; }
code { background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:1px 5px; font-size:.9em; }

/* ---- surfaces */
.card { background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.card > :last-child { margin-bottom:0; }
table { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); background:var(--bg-2); }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:color-mix(in srgb, var(--raised) 55%, transparent); }
tr.sel { background:color-mix(in srgb, var(--accent) 9%, transparent); box-shadow:inset 3px 0 0 var(--accent); }
.muted { color:var(--muted); } .small { font-size:13px; }

/* ---- chips */
.score { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:30px; font-weight:700; font-size:14px; border-radius:9px; padding:0 8px;
         border:1px solid transparent; font-variant-numeric:tabular-nums; }
.s-hi { color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent); border-color:color-mix(in srgb, var(--good) 34%, transparent); }
.s-mid { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent); border-color:color-mix(in srgb, var(--warn) 32%, transparent); }
.s-lo { color:var(--muted); background:var(--panel-2); border-color:var(--line-2); }
.tag { display:inline-block; font-size:12px; line-height:18px; border:1px solid var(--line-2); border-radius:999px; padding:1px 9px; margin:0 4px 2px 0; color:var(--muted); background:var(--panel-2); }
.ai-badge { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; letter-spacing:.03em; line-height:1; padding:4px 8px; border-radius:999px; color:var(--accent);
            border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); cursor:help; }
kbd { border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:0 6px; font-size:12px; background:var(--panel-2); color:var(--muted); }

/* ---- controls */
button, .btn { font:inherit; font-weight:500; padding:6px 13px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel-2); color:var(--text); cursor:pointer;
               transition:background .15s,border-color .15s,transform .05s; display:inline-block; }
button:hover, .btn:hover { background:var(--raised); border-color:color-mix(in srgb, var(--accent) 40%, var(--line-2)); text-decoration:none; }
button:active, .btn:active { transform:translateY(1px); }
button.primary, .btn.primary { background:var(--accent-grad); border-color:transparent; color:var(--on-accent); font-weight:600; box-shadow:0 4px 16px var(--glow); }
button.primary:hover, .btn.primary:hover { filter:brightness(1.08); border-color:transparent; background:var(--accent-grad); }
button.danger, .btn.danger { color:var(--bad); }
button.danger:hover, .btn.danger:hover { background:color-mix(in srgb, var(--bad) 12%, var(--panel-2)); border-color:color-mix(in srgb, var(--bad) 45%, var(--line-2)); }
button.on { background:color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color:var(--accent); color:var(--accent); font-weight:600; }
button.on.bad { background:color-mix(in srgb, var(--bad) 14%, var(--panel)); border-color:var(--bad); color:var(--bad); }
button:disabled { opacity:.45; cursor:not-allowed; }
.status-applied { border-color:var(--good); color:var(--good); } .status-shortlisted { border-color:var(--accent); color:var(--accent); } .status-dismissed { border-color:var(--bad); color:var(--bad); }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], input[type=email], input[type=file], select, textarea {
  font:inherit; padding:8px 11px; border:1px solid var(--line-2); border-radius:9px; background:var(--bg-2); color:var(--text); width:100%; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
input::placeholder, textarea::placeholder { color:var(--faint); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent-2); width:auto; }
textarea { min-height:90px; font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; line-height:1.5; }
select { color-scheme:dark; }
label { display:block; font-size:12px; font-weight:500; color:var(--muted); margin:12px 0 4px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.msg { padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:10px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--accent); }
.msg.error { border-left-color:var(--bad); } .msg.success { border-left-color:var(--good); } .msg.warning { border-left-color:var(--warn); }
.cols { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:12px; overflow-x:auto; align-items:start; }
.desc { white-space:pre-wrap; word-break:break-word; }
.pcard { transition:transform .12s, border-color .12s; } .pcard:hover { border-color:var(--line-2); transform:translateY(-1px); }

/* ---- dropdowns */
.dd { position:relative; }
.dd > summary { list-style:none; cursor:pointer; padding:7px 12px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel-2); user-select:none; font-weight:500; }
.dd > summary:hover { background:var(--raised); }
.dd > summary::-webkit-details-marker { display:none; }
.dd > summary::after { content:" ▾"; color:var(--muted); }
.dd-panel { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:280px; max-height:340px; overflow:auto; background:var(--raised); border:1px solid var(--line-2);
            border-radius:var(--radius); padding:8px; box-shadow:0 18px 40px rgba(0,0,0,.5); }
.dd-item { display:flex; align-items:center; gap:6px; margin:0; padding:6px 8px; border-radius:7px; color:var(--text); font-size:14px; cursor:pointer; }
.dd-item:hover { background:var(--panel-2); text-decoration:none; }
.dd-item input { width:auto; }
.topnav .dd > summary { border:0; background:transparent; color:var(--muted); border-radius:999px; }
.topnav .dd > summary:hover { color:var(--text); background:var(--panel-2); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ---- print: paper is white, whatever the screen theme */
/* ---- the feedback chat: a round button above the phone's bars, a sheet that is a chat. Phone: above the tab bar (58 px, or 76 when a label wraps to two lines), and above whatever else sits on
   it (the job's action bar, the settings' save bar); toasts keep clear of the button's column. From 900 px: the corner. */
.fb-fab { position:fixed; right:14px; bottom:calc(90px + env(safe-area-inset-bottom)); z-index:28; width:52px; height:52px; min-height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center;
          border-radius:50%; border:0; background:var(--accent-grad); color:var(--on-accent); box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 18px var(--glow); cursor:pointer; }
.fb-fab svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.fb-fab:hover { filter:brightness(1.08); }
body:has(.actionbar) .fb-fab { bottom:calc(142px + env(safe-area-inset-bottom)); }
body:has(.savebar) .fb-fab { bottom:calc(148px + env(safe-area-inset-bottom)); }
@media (max-width:899px) { body:has(.fb-fab) .toasts { padding-right:76px; } }
@media (min-width:900px) { .fb-fab, body:has(.actionbar) .fb-fab, body:has(.savebar) .fb-fab { right:24px; bottom:24px; } }
dialog.sheet.fb-sheet { padding-top:0; }
@media (min-width:900px) {   /* a chat window above its button, not a centred dialog */
  dialog.sheet.fb-sheet { inset:auto 24px 88px auto; margin:0; width:400px; max-height:calc(100vh - 120px); border-bottom:1px solid var(--line-2); border-radius:var(--radius); }
  dialog.sheet.fb-sheet .sheet-handle { display:none; }
  dialog.sheet.fb-sheet::backdrop { background:rgba(0,0,0,.25); }
}
.fb-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.fb-head h3 { margin:0; }
.fb-x { width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-size:26px; line-height:1; }
.fb-sheet .chat { max-width:none; margin-bottom:8px; }
.fb-sheet .bubble { max-width:92%; overflow-wrap:anywhere; white-space:pre-wrap; }
.fb-error { border-color:var(--bad); color:var(--bad); }
.fb-paths { display:flex; flex-direction:column; gap:8px; }
.fb-paths form, .fb-reply { margin:0 0 8px; }
.fb-path { width:100%; text-align:left; padding:12px 16px; min-height:48px; border-radius:var(--radius); background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); font-weight:600; }
.fb-path:hover { background:var(--raised); border-color:var(--accent); }
.fb-reply textarea { width:100%; margin-bottom:8px; resize:vertical; }
.fb-reply .row { gap:8px; flex-wrap:wrap; }
.fb-reply .chips { margin:0 0 6px; }
.fb-sheet .chip { min-height:44px; }

@media print {
  :root { --bg:#fff; --bg-2:#fff; --panel:#fff; --panel-2:#fff; --raised:#fff; --text:#000; --muted:#444; --faint:#666; --line:#ccc; --line-2:#bbb; --glow:transparent; }
  body { background:#fff !important; } header, .noprint, .tabs, .toasts { display:none !important; }
  .card { box-shadow:none; background:#fff; }
}
.heart { color:#e0457b; margin-right:3px; }
button.heart-btn { background:none; border:none; padding:0 6px; font-size:16px; line-height:1; color:var(--muted); cursor:pointer; }
button.heart-btn:hover, button.heart-btn.on { color:#e0457b; }
button.btn.heart-btn { font-size:14px; padding:6px 12px; border:1px solid var(--line-2); background:var(--raised); }
/* The Sankey of "What reached you": ribbons that carry the jobs from one step to the next, label cards on a raised surface. */
.sankey-wrap { overflow-x:auto; padding:2px 0 6px; }
.sankey { display:block; margin:0 auto; font-family:inherit; }
.sankey .flow { fill:none; opacity:.42; transition:opacity .15s; }
.sankey .flow:hover { opacity:.8; }
.sankey .node { stroke:var(--panel); stroke-width:1; }
.sankey .card rect { fill:var(--raised); stroke:var(--line-2); }
.sankey .card text { fill:var(--text); }
.sankey .card .name { font-size:11.5px; fill:var(--muted); }
.sankey .card .num { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.sankey .card .pct { font-size:11.5px; fill:var(--muted); }
.sankey .card .parts { font-size:11.5px; }
.sankey .card .parts .pn { font-weight:700; font-variant-numeric:tabular-nums; }
.sankey .card .parts .pw { fill:var(--muted); }

/* ---- shell: a top bar with the brand and, on a phone, four tabs under the thumb; from 900 px the top bar carries the menu and the tabs go. */
html { -webkit-text-size-adjust:100%; }
body { font-size:16px; }
header { padding-top:env(safe-area-inset-top); }
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; background:color-mix(in srgb, var(--bg) 94%, transparent);
        backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:58px; padding:6px 4px; color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; }
.tabs a:hover { color:var(--text); text-decoration:none; }
.tabs a svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tabs a.on { color:var(--accent); }
.tabs a.on svg { filter:drop-shadow(0 0 8px var(--glow)); }
@media (max-width:899px) {
  .desk-only { display:none !important; }   /* the controls a phone has no use for: export, bookmarklet, bulk dismissal, the menu already in the tab bar */
  input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], input[type=email], select, textarea { font-size:16px; }  /* 16 px stops iOS zooming into a field */
  table { display:block; overflow-x:auto; }   /* a wide table scrolls inside itself: the page never scrolls sideways (the lists become cards in the next phase) */
}
@media not all and (hover:hover) and (pointer:fine) { .kbd-hint { display:none; } }   /* keyboard shortcuts: only where there is a keyboard */
@media (pointer:coarse) {
  button, .btn, select, input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], input[type=email] { min-height:44px; }
  .dd > summary, .dd-item { min-height:44px; display:flex; align-items:center; }
}
@media (min-width:640px) { main { padding-left:20px; padding-right:20px; } .topnav { padding-left:20px; padding-right:20px; } }
@media (min-width:900px) {
  body { font-size:15px; }
  .tabs { display:none; }
  main { padding-top:22px; padding-bottom:60px; }
}

/* ---- components every screen shares: chip, bottom sheet, toast, menu list */
.chip { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; max-width:100%; border-radius:999px; font-size:12px; font-weight:600; line-height:1; white-space:nowrap;
        overflow:hidden; text-overflow:ellipsis; border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted); }
.chip.good { color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent); border-color:color-mix(in srgb, var(--good) 34%, transparent); }
.chip.warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent); border-color:color-mix(in srgb, var(--warn) 32%, transparent); }
.chip.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 13%, transparent); border-color:color-mix(in srgb, var(--bad) 32%, transparent); }
.chip.accent { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }

dialog.sheet { position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:640px; max-height:88vh; overflow:auto; padding:6px 16px calc(18px + env(safe-area-inset-bottom));
               background:var(--raised); color:var(--text); border:1px solid var(--line-2); border-bottom:0; border-radius:18px 18px 0 0; box-shadow:0 -18px 40px rgba(0,0,0,.45); }
dialog.sheet::backdrop { background:rgba(0,0,0,.55); }
dialog.sheet[open] { animation:sheet-in .2s ease-out; }
dialog.sheet .sheet-handle { width:40px; height:4px; border-radius:2px; background:var(--line-2); margin:6px auto 10px; }
dialog.sheet h3 { font-size:17px; margin:0 0 10px; }
@keyframes sheet-in { from { transform:translateY(28px); opacity:0; } to { transform:none; opacity:1; } }
@media (min-width:900px) { dialog.sheet { inset:auto; margin:auto; border-bottom:1px solid var(--line-2); border-radius:var(--radius); } }

.toasts { position:fixed; left:0; right:0; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:50; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 12px; pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:center; gap:14px; max-width:min(94vw, 440px); padding:11px 14px; background:var(--raised); border:1px solid var(--line-2);
         border-radius:12px; box-shadow:var(--shadow); animation:sheet-in .18s ease-out; }
.toast button { padding:4px 8px; border:0; background:transparent; color:var(--accent); font-weight:700; }
@media (min-width:900px) { .toasts { bottom:24px; } }

.menu { margin:0 0 18px; padding:0; list-style:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.menu li + li { border-top:1px solid var(--line); }
.menu a, .menu .menu-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 16px; color:var(--text); text-decoration:none; }
.menu a:hover { background:var(--panel-2); text-decoration:none; }
.menu a::after { content:"\203A"; color:var(--faint); font-size:22px; line-height:1; }
.menu .menu-row form { margin:0; }
.menu button.menu-btn { width:100%; min-height:52px; border:0; border-radius:0; background:transparent; text-align:left; padding:0 16px; font-weight:500; color:var(--bad); }
form.lang button { min-height:36px; padding:3px 12px; }
@media (max-width:640px) { .hide-sm { display:none; } }

/* ---- the list of jobs: cards on a phone; from 900 px the same markup is a row (score | details | date | buttons) */
.pagehead { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.pagehead h1 { margin:6px 0 12px; }
.btn.icon-add { width:44px; height:44px; padding:0; border-radius:50%; font-size:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
                background:var(--accent-grad); color:var(--on-accent); border-color:transparent; box-shadow:0 4px 16px var(--glow); }
.cards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.jcard { position:relative; border-radius:var(--radius); }
.jcard::before { content:attr(data-reveal); position:absolute; inset:0; display:none; align-items:center; padding:0 22px; border-radius:var(--radius); font-weight:700; }
.jcard[data-dir="right"]::before { display:flex; justify-content:flex-start; background:color-mix(in srgb, var(--good) 28%, var(--bg)); color:var(--good); }
.jcard[data-dir="left"]::before { display:flex; justify-content:flex-end; background:color-mix(in srgb, var(--bad) 28%, var(--bg)); color:var(--bad); }
.jc-face { position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; padding:9px 14px 10px; min-height:84px; background:linear-gradient(180deg,var(--panel-2),var(--panel));
           border:1px solid var(--line); border-radius:var(--radius); touch-action:pan-y; }
.jcard.settling .jc-face { transition:transform .18s ease; }
.jc-score .score { min-width:44px; height:36px; font-size:16px; }
.jc-body { min-width:0; }
.jc-title { font-weight:700; font-size:16px; line-height:1.25; color:var(--accent); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jc-title::after { content:""; position:absolute; inset:0; }   /* the whole card opens the job */
.jc-title:hover { text-decoration:none; }
.jc-meta { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.jc-chips { display:flex; gap:6px; margin-top:5px; overflow:hidden; }
.jc-chips:empty { display:none; }
.jc-ai, .jc-detail, .jc-date, .jc-actions { display:none; }
.jc-hidden { color:var(--warn); margin-top:4px; }
.jc-detail a, .jc-actions a, .jc-actions button, .jc-actions select { position:relative; z-index:1; }
.jc-next { list-style:none; text-align:center; padding:6px 0 14px; }
.jc-title .heart { margin:0 5px 0 0; }
.sel .jc-face, .jcard.sel > .jc-face { box-shadow:inset 3px 0 0 var(--accent); }
@media (min-width:900px) {
  .cards { gap:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
  .jcard { border-radius:0; border-bottom:1px solid var(--line); }
  .jcard:last-child { border-bottom:0; }
  .jcard:hover .jc-face { background:color-mix(in srgb, var(--raised) 55%, transparent); }
  .jc-face { grid-template-columns:76px 1fr 96px auto; gap:0 14px; padding:11px 14px; min-height:0; background:none; border:0; border-radius:0; }
  .jc-ai, .jc-detail, .jc-date, .jc-actions { display:block; }
  .jc-chips { display:none; }
  .jc-title { font-size:15px; display:inline; -webkit-line-clamp:unset; }
  .jc-meta { display:inline; margin-left:8px; white-space:normal; font-size:13px; }
  .jc-score .score { height:30px; font-size:14px; min-width:42px; }
  .jc-ai { margin-top:4px; }
  .jc-detail { margin-top:2px; }
  .jc-actions { white-space:nowrap; }
}

/* ---- search, filters (a sheet on a phone, inline from 900 px), the filters in use */
.filters { margin-bottom:8px; }
.searchrow { display:flex; gap:8px; margin-bottom:10px; }
.searchrow input { flex:1; min-width:0; }
.filters-open { white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.active-chips { display:flex; gap:6px; overflow-x:auto; padding:8px 0 2px; scrollbar-width:none; }
.active-chips .chip { flex:none; text-decoration:none; }
.hidden-note { margin:6px 0 10px; }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.seg button { border:0; border-radius:0; background:transparent; color:var(--muted); padding:6px 16px; }
.seg button.on { background:var(--raised); color:var(--text); font-weight:700; box-shadow:0 0 0 1px var(--accent) inset; }
.field { margin:14px 0; }
.field > label { margin:0 0 5px; }
.field.checks { display:flex; flex-direction:column; gap:10px; }
label.chk { display:flex; align-items:center; gap:8px; margin:0; color:var(--text); font-size:15px; }
.sheet-actions { position:sticky; bottom:0; display:flex; gap:10px; padding-top:12px; background:var(--raised); }
.sheet-actions .primary { flex:1; }
.reasons { display:flex; flex-wrap:wrap; gap:8px; }
.filters .dd > summary { display:flex; justify-content:space-between; }
.filters .dd-panel { position:static; width:auto; max-height:260px; margin-top:6px; box-shadow:none; }
@media (min-width:900px) {
  .filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 14px; margin-bottom:12px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
  .searchrow { flex:1 1 100%; }
  .searchrow input { flex:1; min-width:200px; }
  .filters-open { display:none; }
  .active-chips { order:5; width:100%; padding:0; }
  dialog.sheet.filters-sheet { display:flex; flex-wrap:wrap; gap:8px; align-items:center; position:static; width:auto; max-width:none; max-height:none; margin:0; padding:0; flex:1 1 100%; overflow:visible;
                               background:none; border:0; border-radius:0; box-shadow:none; animation:none; color:inherit; }
  .filters-sheet .sheet-handle, .filters-sheet h3 { display:none; }
  .filters-sheet .field { margin:0; display:flex; align-items:center; gap:6px; }
  .filters-sheet .field > label { margin:0; }
  .filters-sheet .field.checks { flex-direction:row; gap:12px; }
  .filters-sheet select { width:auto; }
  .filters-sheet .dd-panel { position:absolute; width:280px; box-shadow:0 18px 40px rgba(0,0,0,.5); margin-top:0; }
  .filters-sheet .sheet-actions { position:static; padding:0; background:none; }
  .filters-sheet .sheet-actions .primary { flex:none; }
  .filters-sheet .sheet-actions .btn { display:none; }
}

/* ---- the job page: a hero, a fixed action bar on a phone, sections that fold (all open on a laptop) */
.jobpage { padding-bottom:76px; }
.jobhead { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.jobhead .back { flex:none; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:50%; text-decoration:none; }
.jobhead-co { flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hero h1 { font-size:22px; line-height:1.25; margin:4px 0 6px; }
.hero-meta { font-size:14px; }
.hero-chips { display:flex; gap:8px; align-items:center; margin:10px 0 6px; flex-wrap:wrap; }
.chipbtn { padding:0; border:0; background:none; min-height:0; cursor:pointer; }
.actionbar { position:fixed; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom)); z-index:25; display:flex; gap:8px; align-items:center; padding:10px 16px;
             background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); }
.actionbar .primary { flex:1; text-align:center; }
.actionbar form { margin:0; display:flex; }
.iconbtn { width:46px; padding:0; font-size:22px; line-height:1; text-align:center; }
.sections { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
details.acc { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
details.acc > summary { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; cursor:pointer; list-style:none; }
details.acc > summary::-webkit-details-marker { display:none; }
details.acc > summary::after { content:"\203A"; color:var(--faint); font-size:22px; line-height:1; transition:transform .15s; }
details.acc[open] > summary::after { transform:rotate(90deg); }
.acc-t { font-weight:600; flex:none; }
.acc-s { flex:1; min-width:0; text-align:right; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-body { padding:0 14px 14px; }
.acc-body > .card { margin:0; padding:0; border:0; background:none; box-shadow:none; }
.more-sheet .sheet-close { width:100%; margin-top:6px; }
@media (min-width:900px) {
  .jobpage { padding-bottom:0; }
  .actionbar { display:none; }
  dialog.sheet.more-sheet { display:block; position:static; width:auto; max-width:none; max-height:none; margin:0 0 12px; padding:0; background:none; border:0; border-radius:0; box-shadow:none; animation:none; overflow:visible; color:inherit; }
  .more-sheet .sheet-handle, .more-sheet .sheet-close { display:none; }
  .acc-body > .card > strong:first-child { display:none; }
}

/* ---- the pipeline: a stage bar and one stage at a time on a phone, the whole board (drag and drop) from 900 px */
.stagebar { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; }
.stagebar a { flex:none; display:inline-flex; gap:6px; align-items:center; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; color:var(--muted); background:var(--panel-2); font-weight:600; font-size:14px; text-decoration:none; }
.stagebar a span { color:var(--faint); font-weight:700; }
.stagebar a.on { color:var(--text); background:var(--raised); border-color:var(--accent); }
.stagebar a.on span { color:var(--accent); }
.pcard { position:relative; }
.pcard.saving { outline:2px solid var(--warn); }
.pmore { position:absolute; top:6px; right:6px; width:40px; height:40px; padding:0; font-size:20px; line-height:1; text-align:center; background:none; border:0; color:var(--muted); }
.todo { list-style:none; margin:6px 0 0; padding:0; }
.todo li { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.todo li > .tag { grid-column:1 / -1; justify-self:start; }
.todo-act { white-space:nowrap; }
@media (max-width:899px) {
  .cols { display:block; overflow:visible; }
  #board { height:auto; }
  .col-drop { display:none; }
  .col-drop.active { display:block; }
  .col-drop h2 { display:none; }
  .pcard { padding-right:52px; }
}
@media (min-width:900px) {
  .stagebar, .pmore { display:none; }
  /* The board is as tall as the window and each column scrolls on its own, so every status stays on screen as a drop target. */
  #board { height:calc(100vh - 175px); min-height:360px; align-items:stretch; overflow-y:hidden; }
  .col-drop { display:flex; flex-direction:column; min-height:0; border:2px dashed transparent; border-radius:8px; padding:2px 4px; }
  .col-drop h2 { flex:none; margin:4px 0 6px; padding:2px 2px 6px; border-bottom:1px solid var(--line); }
  .col-drop .stack { flex:1 1 auto; min-height:60px; overflow-y:auto; }
  .col-drop .empty { flex:none; }
  .col-drop.over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
  .pcard { cursor:grab; } .pcard.dragging { opacity:.4; }
}

/* ---- tables that become a list of cards on a phone; the outcome of an interview as a segmented control; the numbers on the tab bar */
@media (max-width:640px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack thead { display:none; }
  table.stack tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  table.stack td { padding:2px 0; border:0; }
  table.stack td:last-child { padding-top:8px; }
}
.seg-radio { position:relative; display:flex; flex-wrap:wrap; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; }
.seg-radio label { display:block; flex:1 1 auto; margin:0; padding:9px 12px; text-align:center; color:var(--muted); font-size:14px; cursor:pointer; border-right:1px solid var(--line); }
.seg-radio label:last-child { border-right:0; }
.seg-radio label:has(input:checked) { background:var(--raised); color:var(--text); font-weight:700; box-shadow:0 0 0 1px var(--accent) inset; }
.seg-radio input { position:absolute; opacity:0; pointer-events:none; }
.tabs a { position:relative; }
.tabs .badge { position:absolute; top:6px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent-2); color:#fff; font-style:normal; font-size:11px; font-weight:700; line-height:18px; text-align:center; }

/* ---- insights: three numbers first, the diagrams only where they fit (bars on a phone), explanations one tap away */
.tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px; }
.tile { display:flex; flex-direction:column; gap:2px; padding:12px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); }
.tile b { font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; }
.tile span { font-size:13px; color:var(--muted); }
.bars { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bar-head { display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.bar-name { min-width:0; }
.bar-num { white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar-track { height:8px; margin-top:4px; background:var(--panel-2); border-radius:999px; overflow:hidden; }
.bar-track span { display:block; height:100%; border-radius:999px; opacity:.85; }
.bar-parts { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; color:var(--muted); }
.bar-parts i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.lvl1 { margin-left:12px; } .lvl2 { margin-left:24px; } .lvl3 { margin-left:36px; }
.info { width:36px; height:36px; padding:0; border-radius:50%; font-size:18px; line-height:1; color:var(--accent); background:var(--panel-2); border:1px solid var(--line-2); flex:none; }
.help { font-size:15px; line-height:1.55; padding:4px 0 12px; }
@media (max-width:639px) { .sankey-wrap { display:none; } }
@media (min-width:640px) { .bars { display:none; } }

/* ---- settings: groups that fold, one save button within reach */
.settings-form { display:flex; flex-direction:column; gap:8px; }
.savebar { position:sticky; bottom:calc(66px + env(safe-area-inset-bottom)); z-index:5; padding:10px 0 4px; background:linear-gradient(transparent, var(--bg) 35%); }
.savebar .primary { width:100%; min-height:48px; }
@media (min-width:900px) { .savebar { bottom:0; } .savebar .primary { width:auto; } }

/* ---- touch: every control is at least 44 px each way (a finger, not a pointer) */
@media (pointer:coarse) {
  .stagebar a, .info, .pmore, button.heart-btn, .chipbtn, button.danger { min-width:44px; min-height:44px; }
  .stagebar a, .chipbtn { display:inline-flex; align-items:center; justify-content:center; }
  details > summary { min-height:44px; display:flex; align-items:center; gap:10px; }
  .info, .pmore { width:44px; height:44px; }
}
@media (pointer:coarse) {
  form.lang button, input[type=file] { min-height:44px; }
  form.lang button { min-width:48px; }
}

/* ---- the operator's console (/ops/): desktop first, its own wider layout and a marked brand */
.opsnav .brand::before { background:var(--warn); box-shadow:0 0 18px color-mix(in srgb, var(--warn) 40%, transparent); }
.opsnav .brand { color:var(--warn); }
main.wide { max-width:1400px; padding-bottom:40px; }
.ops-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.ops-grid .card { margin-bottom:0; }
.ops .big { font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.ops .late { color:var(--bad); }
.ops pre.file { white-space:pre-wrap; max-height:520px; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; font-size:12.5px; }

/* ---- AI work coming or ready (one component, see templates/jobs/_ai_card.html) */
.ai-card { border:1px solid var(--line-2); border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--panel-2); padding:10px 14px; margin:0 0 12px; }
.ai-card .ai-t { font-weight:600; }
.ai-card .ai-s { margin:2px 0; }
.ai-card.ai-ready { border-left-color:var(--good); }
.ai-card.ai-late { border-left-color:var(--warn); }
.ai-card.ai-paused { border-left-color:var(--faint); }

/* ---- the onboarding conversation: bubbles and chips */
.chat { max-width:640px; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.bubble { padding:10px 14px; border-radius:16px; max-width:88%; border:1px solid var(--line); }
.bubble.q { background:var(--panel-2); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble.a { background:var(--raised); align-self:flex-end; border-bottom-right-radius:4px; border-color:var(--line-2); }
.bubble.a a { font-size:12px; margin-left:8px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.chips label.chip { margin:0; }
.chip { display:inline-flex; align-items:center; padding:8px 14px; min-height:40px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel); color:var(--text); cursor:pointer; user-select:none; font-weight:500; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.chip:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.chip.removable { gap:8px; cursor:default; }
.chip.removable button { border:0; background:transparent; color:inherit; padding:0 2px; cursor:pointer; font-size:16px; line-height:1; min-height:0; }
.score.bigscore { height:auto; min-width:84px; padding:10px 16px; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; border-radius:16px; }

/* ---- Prepare with your AI (job page): three buttons and a tutorial on hover or tap */
.byo-info { position:relative; }
.byo-tour { position:absolute; right:0; top:100%; z-index:20; width:min(340px, 86vw); padding:12px 14px; margin-top:6px; background:var(--raised); border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.byo-tour[hidden] { display:none; }
@media (hover:hover) { .byo-info:hover .byo-tour[hidden] { display:flex; } }
.byo-tour b { color:var(--accent); }
dialog.sheet { color:var(--text); }

/* The operator viewing the app as a candidate (jobs/impersonation.py): a band that cannot be missed, at the top of the sticky header. */
.viewing-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:6px 16px; background:var(--warn); color:#1a1205; font-size:13px; }
.viewing-banner form { margin:0; }
.viewing-banner button { background:#1a1205; color:var(--warn); border-color:#1a1205; }
.viewing-banner a { color:#1a1205; text-decoration:underline; }
@media (max-width:600px) { .viewing-banner .vb-note { display:none; } }

/* Standard mode's inbox (inbox_standard.html): a search icon that opens a search row, a heading between the picks and the jobs coming up. */
.icon-search { display:inline-flex; align-items:center; justify-content:center; }
.icon-search.on { color:var(--text); background:var(--raised); }
.cards > .jc-section { list-style:none; margin:14px 0 4px; padding:0 4px; font-weight:600; }
.ai-coming { color:var(--accent); margin-top:4px; }