/* Dashboard styling.
   Colour, type, radii and the liquid-glass card recipe are lifted from
   aviralsingh.in (src/styles/{tokens,app}.css) so the two sites read as one
   system: violet #8b63ff accent, deep-navy or lavender ground, glass panels
   with a refractive rim, a 40px technical grid and film grain over the canvas.
   Toned down where a data-dense list needs it — the rows carry less blur than
   the portfolio's bento cards so long titles stay crisp.
   Fonts are self-hosted latin subsets copied from that repo; the CSP is
   font-src 'self', so nothing loads from a CDN. */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/geist-mono-5.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/geist-mono-11.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #0a0a0b;
  --panel: #121116;
  --panel2: #17161d;
  --card: rgba(24, 22, 32, .58);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .05);
  --tx: #ecebf0;
  --tx-strong: #ffffff;
  --mut: #9491a1;
  --shadow: 0 20px 40px rgba(0, 0, 0, .6);
  --grid: rgba(139, 99, 255, .11);

  --acc: #8b63ff;
  --acc-ink: #b9a3ff;
  --on-acc: #0b0812;
  --warn: #ff8095;
  --green: #7fc39a;

  --glass-edge: rgba(255, 255, 255, .20);
  --glass-rim-hi: rgba(255, 255, 255, .55);
  --glass-rim-lo: rgba(139, 99, 255, .30);
  --glass-blur: 22px;
  --glass-sat: 200%;
  --glass-fill: rgba(255, 255, 255, .045);

  --a1: #8b63ff; --a2: #3b5bfd; --a3: #17143a;

  --radius: 22px;
  --radius-sm: 14px;
  --mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9fd;
  --panel: #ffffff;
  --panel2: #f6f2ff;
  --card: rgba(241, 232, 255, .65);
  --line: rgba(43, 15, 94, .11);
  --line2: rgba(43, 15, 94, .06);
  --tx: #16121f;
  --tx-strong: #000000;
  --mut: #5f5872;
  --shadow: 0 20px 40px rgba(43, 15, 94, .07), 0 1px 3px rgba(43, 15, 94, .05);
  --grid: rgba(139, 99, 255, .15);
  --acc: #8b63ff;
  --acc-ink: #5b34c9;
  --on-acc: #0b0812;
  --warn: #b3261e;
  --green: #2f6b4d;
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-rim-hi: rgba(255, 255, 255, 1);
  --glass-rim-lo: rgba(139, 99, 255, .34);
  --glass-fill: rgba(255, 255, 255, .26);
  --a1: #8b63ff; --a2: #8fa4ff; --a3: #e2dbf9;
}

* { box-sizing: border-box; }

/* Several elements below set display:flex/grid, which would otherwise beat the
   `hidden` attribute's UA default. Keep hidden meaning hidden. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px clamp(16px, 4vw, 48px) 48px;
  background:
    radial-gradient(58vw 46vw at 12% -6%, color-mix(in srgb, var(--a1) 34%, transparent), transparent 62%),
    radial-gradient(48vw 40vw at 92% 4%, color-mix(in srgb, var(--a2) 26%, transparent), transparent 60%),
    radial-gradient(70vw 50vw at 60% 105%, color-mix(in srgb, var(--a3) 55%, transparent), transparent 66%),
    var(--bg);
  background-attachment: fixed;
  color: var(--tx);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* The technical lattice and the film grain from aviralsingh.in, as body
   pseudo-elements so no extra markup is needed. Both sit behind the content. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  /* Fade the grid out down the page so the list area stays quiet. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px;
}
html[data-theme="light"] body::after { mix-blend-mode: multiply; opacity: .055; }

/* --- Liquid glass ---------------------------------------------------------
   The portfolio's card recipe: a translucent fill that refracts what is behind
   it, a lit top lip and shaded base for thickness, and a 1px gradient rim
   masked to the border box — the rim is what reads as glass rather than a
   tinted div. Blur is lower here than on the portfolio's bento cards because
   this page stacks dozens of them behind text that has to stay sharp. */
.glass {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-edge),
              inset 0 -1px 0 rgba(0, 0, 0, .28),
              var(--shadow);
}
.glass::before {
  content: "";
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--glass-rim-hi) 0%, transparent 34%,
                              transparent 62%, var(--glass-rim-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
  transition: opacity .35s;
}
/* Where the rim cannot be masked, fall back to a plain border rather than
   leaving the panels edgeless. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass { border: 1px solid var(--line); }
  .glass::before { display: none; }
}
/* Nothing to refract without backdrop-filter — use the opaque panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--panel); }
}

h1, h2 { color: var(--tx-strong); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 28px; margin: 2px 0 0; }
h2 { font-size: 16px; margin: 0; line-height: 1.3; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mut);
  margin: 0;
}

a { color: var(--acc); }

/* --- Login ---------------------------------------------------------------- */

.login-wrap { min-height: 80vh; display: grid; place-items: center; }

.login {
  width: min(380px, 92vw);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login h1 { margin-bottom: 16px; }
.login label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mut);
  margin-top: 12px;
}
.login input {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--tx-strong);
  font: inherit;
}
.login input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.login button[type="submit"] { margin-top: 22px; }

.alert {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid var(--warn);
  color: var(--tx-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin: 4px 0 0;
}

/* --- Buttons -------------------------------------------------------------- */

button, .btn {
  font: inherit;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--tx-strong);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
button:hover, .btn:hover { border-color: var(--acc); }
button:active { transform: translateY(1px); }
button.primary { background: var(--acc); color: var(--on-acc); border-color: var(--acc); font-weight: 600; }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: default; }

.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.linkish:hover { color: var(--acc); border: none; }

/* --- Top bar -------------------------------------------------------------- */

.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-right form { margin: 0; }
.who { font-family: var(--mono); font-size: 12px; color: var(--mut); }

/* --- Stats + source health ------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 24px 0 12px;
}
.stat { padding: 16px 18px; border-radius: var(--radius-sm); }
.stat .num { display: block; font-size: 26px; font-weight: 600; color: var(--tx-strong); letter-spacing: -0.03em; }
.stat .num.small { font-size: 14px; font-family: var(--mono); }
.stat .lbl {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mut);
}
.stat:first-child .num { color: var(--acc); }

/* Source health lives in the page footer — reference material, not a control. */
.sources {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line2);
  opacity: .8;
}
.src {
  font-family: var(--mono); font-size: 11px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--mut);
}
.src.bad { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }

/* --- Switch bars (location, status) --------------------------------------- */

.switchbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
}
.switch {
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  color: var(--tx);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.switch em { color: var(--mut); font-style: normal; margin-left: 3px; }
.switch:hover { border-color: var(--acc); }
.switch.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.switch.on em { color: var(--on-acc); opacity: .75; }

/* The source filter deliberately has no card around it. */
.sourcebar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* No horizontal padding: the label and the dropdown sit flush with the outer
     edges of the cards above, so the dropdown reads as hard right. */
  padding: 6px 0 0;
  margin-bottom: 20px;
}
.sourcebar label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mut);
}
.sourcebar .dd { margin-left: auto; }
.sourcebar select {
  margin-left: auto;
  font: inherit; font-size: 12.5px;
  background: var(--panel); color: var(--tx);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.sourcebar select:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* --- Job rows ------------------------------------------------------------- */

.list { display: flex; flex-direction: column; gap: 8px; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  z-index: 1;
  transition: transform .14s var(--ease), box-shadow .35s, opacity .18s ease;
}
/* Lifted while one of its dropdowns is open (see app.js). */
.row.dd-open { z-index: 40; }
/* The fit band reads as a coloured light down the leading edge, drawn inside
   the glass so it does not fight the rim. */
.row::after {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.row.band-apply_now::after { background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.row.band-strong::after { background: var(--green); }
.row.band-maybe::after { background: var(--warn); }
.row:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              inset 0 -1px 0 rgba(0, 0, 0, .28),
              0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent),
              var(--shadow);
}
.row:hover::before { opacity: 1; }
.row.open { box-shadow: inset 0 1px 0 var(--glass-edge),
                        0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent),
                        var(--shadow); }
.row.busy { opacity: .5; }
.row.leaving { opacity: 0; transform: translateX(12px); }

/* The whole left side is the expand control, so a card opens on click. */
.rowmain {
  display: block;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  min-width: 0;
  cursor: pointer;
}
.rowmain:hover { border: none; }
.rowmain:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.rowtitle {
  display: block;
  font-size: 15px; font-weight: 600; color: var(--tx-strong);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowsub {
  display: block;
  font-family: var(--mono); font-size: 11.5px; color: var(--mut);
  margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rowsub em { font-style: normal; }

.rowright { display: flex; align-items: center; gap: 10px; }
.rowright .score {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  color: var(--tx-strong); min-width: 2.4ch; text-align: right;
}
.band-apply_now .score { color: var(--acc); }
.movelabel {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mut);
}
.status-select {
  font: inherit; font-size: 12.5px;
  background: var(--panel2); color: var(--tx);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
}

.askbox {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.askbox span { font-family: var(--mono); font-size: 11.5px; color: var(--mut); }

.detail {
  grid-column: 1 / -1;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
}
.detail h3 {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mut); margin: 14px 0 4px; font-weight: 500;
}
.detail p { margin: 0; }
.detail .jd { max-height: 260px; overflow-y: auto; white-space: pre-wrap; }
.detail .subscores { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--mut); }
.detail .none { color: var(--mut); font-style: italic; }
.detail-actions { margin-top: 14px !important; font-family: var(--mono); font-size: 12px; }

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 16px;
  margin: 0;
  font-family: var(--mono); font-size: 11.5px;
}
.facts dt { color: var(--mut); }
.facts dd { margin: 0; color: var(--tx); }

.empty { text-align: center; color: var(--mut); padding: 48px 0; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--acc); color: var(--tx-strong);
  border-radius: 999px; padding: 9px 18px;
  font-family: var(--mono); font-size: 12px; z-index: 20;
}

/* Narrow screens: the row stacks, so the actions sit under the title rather than
   squeezing it to nothing. */
@media (max-width: 620px) {
  .row { grid-template-columns: 1fr; row-gap: 12px; }
  .rowright { justify-content: flex-start; }
  .rowright .score { min-width: auto; }
  .sourcebar { padding-left: 0; padding-right: 0; }
  .switchbox { padding: 10px; }
}

/* Touch devices: comfortable tap targets (~44px). */
@media (hover: none) {
  button, .btn, .status-select, .sourcebar select { padding: 12px 16px; }
  .switch { padding: 10px 16px; }
  .rowmain { padding: 4px 0; }
}

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

/* --- Custom dropdown ------------------------------------------------------
   A native <select> popup is drawn by the OS and cannot be styled, so the
   markup keeps a real <select> (for no-JS and form submission) and app.js
   builds this listbox over it. Same glass, same rim, same violet. */

.dd { position: relative; display: inline-block; }
.dd-btn {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--tx);
  background: var(--glass-fill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.dd-btn:hover { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.dd-btn::after {
  content: ""; width: 7px; height: 7px; margin-left: auto;
  border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.dd.open .dd-btn { border-color: var(--acc); color: var(--tx-strong); }
.dd.open .dd-btn::after { transform: translateY(1px) rotate(225deg); border-color: var(--acc); }

.dd-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  min-width: 100%; max-height: 280px; overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
  border-radius: var(--radius-sm);
  background: var(--panel2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: dd-in .16s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .dd-list {
    background: color-mix(in srgb, var(--panel2) 82%, transparent);
    backdrop-filter: blur(18px) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  }
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }

.dd-opt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--tx);
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.dd-opt:hover, .dd-opt.active {
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  color: var(--tx-strong);
}
.dd-opt[aria-selected="true"] { color: var(--acc-ink); }
.dd-opt[aria-selected="true"]::before { content: "→"; }
.dd-opt:not([aria-selected="true"])::before { content: ""; width: 1ch; }

@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } }