/* ==========================================================================
   Interview Platform — visionOS-inspired design system
   One stylesheet, no build step, no framework, no webfont request.

   The look borrows visionOS's three ideas: layered translucent materials,
   generous continuous curvature, and depth conveyed by soft light rather than
   hard borders. Where the aesthetic fights legibility, legibility wins —
   glass is used for chrome, never behind body text.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* Ground — a faint mesh so translucent surfaces have something to refract */
  --bg:            #eef1f6;
  --bg-mesh-a:     rgba(120, 150, 255, 0.20);
  --bg-mesh-b:     rgba(255, 160, 210, 0.14);
  --bg-mesh-c:     rgba(120, 235, 220, 0.14);

  /* Materials, thin → thick (visionOS's vibrancy ladder) */
  --mat-ultrathin: rgba(255, 255, 255, 0.48);
  --mat-thin:      rgba(255, 255, 255, 0.62);
  --mat-regular:   rgba(255, 255, 255, 0.78);
  --mat-thick:     rgba(255, 255, 255, 0.92);
  --mat-solid:     #ffffff;

  --hairline:      rgba(15, 23, 42, 0.08);
  --hairline-firm: rgba(15, 23, 42, 0.14);
  --specular:      rgba(255, 255, 255, 0.85);   /* top-edge light catch */

  /* Ink */
  --text:    #0d1220;
  --text-2:  #4a5568;
  --text-3:  #8290a4;

  /* Accent */
  --accent:      #3b63f6;
  --accent-2:    #6b46f5;
  --accent-fg:   #ffffff;
  --accent-soft: rgba(59, 99, 246, 0.12);
  --accent-ring: rgba(59, 99, 246, 0.38);

  /* Semantic */
  --green: #067a52;  --green-soft: rgba(6, 122, 82, 0.12);
  --lime:  #5a7c12;  --lime-soft:  rgba(90, 124, 18, 0.12);
  --amber: #9a6207;  --amber-soft: rgba(154, 98, 7, 0.13);
  --red:   #c02a22;  --red-soft:   rgba(192, 42, 34, 0.11);
  --muted: #77859b;  --muted-soft: rgba(119, 133, 155, 0.12);

  /* Curvature — large and continuous, the visionOS signature */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 980px;

  /* Elevation: ambient + directional + a light catch along the top edge */
  --e1: 0 1px 2px rgba(13, 18, 32, .05), 0 4px 12px -4px rgba(13, 18, 32, .07),
        inset 0 1px 0 var(--specular);
  --e2: 0 2px 6px rgba(13, 18, 32, .06), 0 12px 32px -8px rgba(13, 18, 32, .12),
        inset 0 1px 0 var(--specular);
  --e3: 0 8px 20px rgba(13, 18, 32, .10), 0 28px 64px -12px rgba(13, 18, 32, .20),
        inset 0 1px 0 var(--specular);

  --blur: saturate(180%) blur(24px);

  --ease: cubic-bezier(.32, .72, 0, 1);      /* Apple's spring-ish curve */
  --fast: 140ms var(--ease);
  --slow: 320ms var(--ease);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans Arabic", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        #070a12;
    --bg-mesh-a: rgba(90, 120, 255, 0.22);
    --bg-mesh-b: rgba(200, 90, 200, 0.16);
    --bg-mesh-c: rgba(40, 200, 190, 0.13);

    --mat-ultrathin: rgba(255, 255, 255, 0.05);
    --mat-thin:      rgba(255, 255, 255, 0.07);
    --mat-regular:   rgba(255, 255, 255, 0.09);
    --mat-thick:     rgba(28, 33, 46, 0.88);
    --mat-solid:     #151a26;

    --hairline:      rgba(255, 255, 255, 0.10);
    --hairline-firm: rgba(255, 255, 255, 0.18);
    --specular:      rgba(255, 255, 255, 0.10);

    --text:   #f1f4fa;
    --text-2: #a7b2c6;
    --text-3: #74809a;

    --accent:      #7d9bff;
    --accent-2:    #a08cff;
    --accent-fg:   #0a0f1e;
    --accent-soft: rgba(125, 155, 255, 0.16);
    --accent-ring: rgba(125, 155, 255, 0.45);

    --green: #4fd39a;  --green-soft: rgba(79, 211, 154, 0.14);
    --lime:  #b3d26a;  --lime-soft:  rgba(179, 210, 106, 0.14);
    --amber: #f0b968;  --amber-soft: rgba(240, 185, 104, 0.14);
    --red:   #ff8b82;  --red-soft:   rgba(255, 139, 130, 0.14);
    --muted: #8b97ad;  --muted-soft: rgba(139, 151, 173, 0.14);

    --e1: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 var(--specular);
    --e2: 0 4px 12px rgba(0,0,0,.55), 0 16px 40px -10px rgba(0,0,0,.7), inset 0 1px 0 var(--specular);
    --e3: 0 10px 28px rgba(0,0,0,.6), 0 34px 76px -14px rgba(0,0,0,.8), inset 0 1px 0 var(--specular);
  }
}

/* Hosts that cannot blur get solid surfaces instead of milky unreadable ones */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --mat-ultrathin: rgba(255,255,255,.92); --mat-thin: rgba(255,255,255,.95);
    --mat-regular: #fff; --mat-thick: #fff;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --mat-ultrathin: #171d2b; --mat-thin: #1a2130;
      --mat-regular: #1c2333; --mat-thick: #1c2333;
    }
  }
}

/* -------------------------------------------------------------------- base */

* { box-sizing: border-box; min-width: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(60rem 40rem at 12% -8%,  var(--bg-mesh-a), transparent 60%),
    radial-gradient(50rem 38rem at 92% 4%,   var(--bg-mesh-b), transparent 62%),
    radial-gradient(46rem 36rem at 68% 96%,  var(--bg-mesh-c), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; transition: opacity var(--fast); }
a:hover { opacity: .78; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 640;
  letter-spacing: -0.028em;
}
h1 { font-size: 27px; letter-spacing: -0.034em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p  { margin: 0 0 1em; }
small { font-size: 12.5px; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
code { background: var(--muted-soft); padding: 1px 5px; border-radius: var(--r-xs); }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2.5px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ------------------------------------------------------------------ layout */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px; flex: 0 0 244px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 20px 14px;
  overflow-y: auto;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--hairline);
}

.brand {
  display: block; padding: 6px 12px 22px;
  font-size: 15.5px; font-weight: 680; letter-spacing: -0.03em;
  color: var(--text);
}
.brand:hover { opacity: 1; }
.brand span {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 480; letter-spacing: 0;
  color: var(--text-3);
}

.nav-group { margin-bottom: 20px; }
.nav-group.spacer { margin-top: auto; }
.nav-label {
  padding: 0 12px 7px;
  font-size: 10.5px; font-weight: 640;
  text-transform: uppercase; letter-spacing: .075em;
  color: var(--text-3);
}
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 2px; padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 520;
  color: var(--text-2);
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.nav a:hover {
  background: var(--mat-regular);
  color: var(--text);
  opacity: 1;
  transform: translateX(2px);
}
.nav a.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  font-weight: 600;
  box-shadow: var(--e1);
}
.nav a .pill {
  min-width: 21px; padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--muted-soft); color: var(--text-2);
  font-size: 11px; font-weight: 640; text-align: center;
}
.nav a.on .pill { background: rgba(255,255,255,.26); color: var(--accent-fg); }

.main { flex: 1; min-width: 0; max-width: 100%; padding: 26px 32px 72px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.page-head .sub { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }

.bare { max-width: 452px; margin: 9vh auto; padding: 0 20px; }
.bare-wide { max-width: 760px; }

/* ------------------------------------------------------------------- cards */

.card {
  margin-bottom: 18px;
  border-radius: var(--r-lg);
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  box-shadow: var(--e1);
  transition: box-shadow var(--slow), transform var(--slow);
}
.card:hover { box-shadow: var(--e2); }

.card > .card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--hairline);
}
.card > .card-head h2,
.card > .card-head h3 { margin: 0; font-size: 15px; }
.card > .card-body { padding: 20px; }
.card > .card-body.tight { padding: 0; }

.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.sidebar-right { grid-template-columns: minmax(0, 1fr) 356px; align-items: start; }

@media (max-width: 1180px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.sidebar-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  /* room for the fixed bottom bar, plus the home-indicator inset on iOS */
  .main { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 23px; }
  .card > .card-head, .card > .card-body { padding-left: 16px; padding-right: 16px; }
  th, td { padding-left: 14px; padding-right: 14px; }
  .page-head { gap: 12px; }
}

/* ------------------------------------------------------------- mobile nav */

.mobile-nav { display: none; }

@media (max-width: 820px) {
  .mobile-nav {
    display: flex; gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--mat-thick);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 24px -12px rgba(13, 18, 32, .28);
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
    /* 44px tall: Apple's minimum comfortable tap target */
    min-height: 44px; padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--mat-thin);
    border: 1px solid var(--hairline);
    font-size: 13px; font-weight: 570; white-space: nowrap;
    color: var(--text-2);
  }
  .mobile-nav a.on {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent; color: var(--accent-fg); font-weight: 620;
  }
  .mobile-nav .pill {
    padding: 1px 7px; border-radius: var(--r-pill);
    background: var(--muted-soft); color: var(--text-2);
    font-size: 11px; font-weight: 640;
  }
  .mobile-nav a.on .pill { background: rgba(255,255,255,.26); color: var(--accent-fg); }
}

@media print { .mobile-nav { display: none !important; } }

/* ------------------------------------------------------------------- stats */

.stat {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  box-shadow: var(--e1);
  transition: transform var(--slow), box-shadow var(--slow);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.stat .n {
  font-size: 32px; font-weight: 660; line-height: 1.05; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .k { margin-top: 5px; font-size: 12px; color: var(--text-2); }
.stat.warn .n { background: none; -webkit-text-fill-color: var(--amber); color: var(--amber); }
.stat.bad .n  { background: none; -webkit-text-fill-color: var(--red);   color: var(--red); }

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

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  position: sticky; top: 0; z-index: 1;
  padding: 11px 18px;
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 640;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3);
}
td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); vertical-align: middle; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--fast); }
tbody tr:hover { background: var(--accent-soft); }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.row-link { cursor: pointer; }

/* ----------------------------------------------------------- editor grids */

/* Dense forms laid out as a table — the pipeline designer, stage editors.
   Inputs need a usable minimum width; below that the table scrolls inside its
   own wrapper rather than squeezing every field into illegibility. */
.editor-table { min-width: 1040px; }
.editor-table th { padding: 9px 10px; }
.editor-table td { padding: 7px 10px; }
.editor-table input[type=text],
.editor-table input[type=number],
.editor-table select { padding: 7px 9px; font-size: 13px; }
.editor-table .col-name   { min-width: 170px; }
.editor-table .col-kind   { min-width: 160px; }
.editor-table .col-num    { width: 84px; }
.editor-table .col-focus  { min-width: 220px; }
.editor-table tbody tr:hover { background: transparent; }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--muted-soft); color: var(--muted);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.green  { background: var(--green-soft);  color: var(--green); }
.badge.lime   { background: var(--lime-soft);   color: var(--lime); }
.badge.amber  { background: var(--amber-soft);  color: var(--amber); }
.badge.red    { background: var(--red-soft);    color: var(--red); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.score { font-weight: 660; font-size: 14.5px; letter-spacing: -0.02em; }
.score.green { color: var(--green); }
.score.lime  { color: var(--lime); }
.score.amber { color: var(--amber); }
.score.red   { color: var(--red); }
.score.muted { color: var(--text-3); font-weight: 500; }

/* -------------------------------------------------------------------- bars */

.bar {
  min-width: 60px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--muted-soft);
  overflow: hidden;
}
.bar > i {
  display: block; height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--slow);
}
.bar > i.green { background: linear-gradient(90deg, var(--green), #3fbf8d); }
.bar > i.lime  { background: linear-gradient(90deg, var(--lime),  #9ec93f); }
.bar > i.amber { background: linear-gradient(90deg, var(--amber), #e0a34a); }
.bar > i.red   { background: linear-gradient(90deg, var(--red),   #ef6f66); }

.dims { display: grid; gap: 11px; }
.dim {
  display: grid; grid-template-columns: 120px 1fr 44px;
  gap: 12px; align-items: center; font-size: 12.5px;
}
.dim .name { color: var(--text-2); text-transform: capitalize; }
.dim .val  { text-align: right; font-weight: 640; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-firm);
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--e1);
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--e2); opacity: 1; }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--e1); }

.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-fg);
}
.btn.danger { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.btn.danger:hover { background: var(--red-soft); }
.btn.sm { padding: 5px 12px; font-size: 12px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

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

label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
label.inline {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-weight: 500; cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=date], input[type=time], input[type=datetime-local],
input[type=search], input[type=file], select, textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--r-sm);
  background: var(--mat-thick);
  color: var(--text);
  font: inherit; font-size: 13.5px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-ring); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=range] { accent-color: var(--accent); width: 100%; height: 22px; }

.field { margin-bottom: 16px; }
.field .hint { margin-top: 5px; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
fieldset {
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid var(--hairline); border-radius: var(--r-md);
}
legend {
  padding: 0 8px;
  font-size: 11.5px; font-weight: 660;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin: 0; min-width: 160px; }

/* ----------------------------------------------------------------- flashes */

.flash {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px; padding: 13px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--e1);
  font-size: 13.5px;
  animation: rise var(--slow) both;
}
.flash::before {
  content: ""; flex: 0 0 4px; align-self: stretch;
  border-radius: var(--r-pill); background: currentColor;
}
.flash.success { color: var(--green); }
.flash.error   { color: var(--red); }
.flash.info    { color: var(--accent); }
.flash > div:last-child { color: var(--text); }

@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- components */

.empty { padding: 48px 24px; text-align: center; color: var(--text-3); font-size: 13.5px; overflow-wrap: anywhere; }
.empty strong { display: block; margin-bottom: 5px; font-size: 15.5px; font-weight: 620; color: var(--text-2); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13.5px; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--mat-thin);
  color: var(--text-2);
  font-size: 11.5px; font-weight: 520;
}
.chip.miss { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.chip.have { background: var(--green-soft); color: var(--green); border-color: transparent; }

ul.tight { margin: 0; padding-left: 19px; }
ul.tight li { margin-bottom: 6px; }

.q {
  margin-bottom: 14px; padding: 17px 19px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--mat-thin);
  transition: box-shadow var(--slow), transform var(--slow);
}
.q:hover { box-shadow: var(--e1); transform: translateY(-1px); }
.q .q-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.q .q-text { font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -0.014em; }
.q .q-meta { margin-top: 9px; font-size: 12.5px; color: var(--text-2); }
.q .q-meta b { color: var(--text); font-weight: 620; }
.q details { margin-top: 10px; font-size: 12.5px; }
.q summary { cursor: pointer; color: var(--accent); font-weight: 600; }

.evidence {
  margin: 0 0 14px; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--accent-ring); border-radius: 2px;
}
.evidence q { display: block; margin-bottom: 5px; font-style: italic; color: var(--text); }
.evidence .ts { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.timeline li { position: relative; padding: 8px 0 8px 18px; border-left: 2px solid var(--hairline); }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.logbox {
  max-height: 640px; padding: 16px; overflow-x: auto;
  border-radius: var(--r-md);
  background: #080b14; color: #c8d3e8;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
}
.logbox .lv-ERROR { color: #ff8b82; }
.logbox .lv-WARN  { color: #f0b968; }
.logbox .lv-INFO  { color: #4fd39a; }

.tabs {
  display: flex; gap: 4px; margin-bottom: 20px; padding: 4px;
  overflow-x: auto;
  border-radius: var(--r-pill);
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  box-shadow: var(--e1);
}
.tabs a {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 570; white-space: nowrap;
  color: var(--text-2);
  transition: background var(--fast), color var(--fast);
}
.tabs a:hover { background: var(--mat-thick); color: var(--text); opacity: 1; }
.tabs a.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-fg);
  box-shadow: var(--e1);
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- utility */

.truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--text-2); }
.dim-text { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 16px; }

/* --------------------------------------------------- motion & contrast a11y */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .stat:hover, .q:hover, .nav a:hover { transform: none; }
}

/* Translucency is decoration; if the viewer wants contrast, drop it entirely. */
@media (prefers-contrast: more) {
  :root {
    --mat-ultrathin: #fff; --mat-thin: #fff; --mat-regular: #fff; --mat-thick: #fff;
    --hairline: rgba(15,23,42,.30); --hairline-firm: rgba(15,23,42,.55);
    --text-2: #364152; --text-3: #55627a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --mat-ultrathin: #11161f; --mat-thin: #11161f; --mat-regular: #11161f; --mat-thick: #11161f;
      --hairline: rgba(255,255,255,.30); --hairline-firm: rgba(255,255,255,.55);
      --text-2: #ccd5e6; --text-3: #a6b2c8;
    }
  }
  .card, .stat, .btn { box-shadow: none; }
}

/* ------------------------------------------------------------------- print */

@media print {
  body { background: #fff; background-image: none; color: #000; font-size: 11pt; }
  .sidebar, .no-print, .btn { display: none !important; }
  .main { padding: 0; }
  .card, .stat, .q {
    background: #fff !important; backdrop-filter: none !important;
    border: 1px solid #d4d4d4; box-shadow: none; break-inside: avoid;
  }
  th { position: static; background: #f4f4f4 !important; backdrop-filter: none !important; }
  a { color: #000; }
}

/* --------------------------------------------------------------- toasts */

/*
   Notifications that interrupt. Only warnings and things needing action get
   here — see Notifications::pending — because a toast for every routine event
   teaches people to dismiss without reading.

   Pinned to the corner rather than pushed into the page flow, so arriving
   does not reflow what someone is reading.
*/
.toasts {
  position: fixed; top: 18px; inset-inline-end: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--mat-thick, var(--mat-regular));
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--e2);
  font-size: 13.5px; line-height: 1.55;
  animation: toast-in var(--slow, .28s) cubic-bezier(.2, .9, .3, 1) both;
}

.toast::before {
  content: ""; flex: 0 0 4px; align-self: stretch;
  border-radius: var(--r-pill); background: currentColor;
}

.toast--warning { color: var(--amber); }
.toast--action  { color: var(--accent); }

.toast-body { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.toast-body strong { display: block; margin-bottom: 2px; font-weight: 620; }
.toast-body p { margin: 0 0 6px; color: var(--text-2); font-size: 12.5px; }
.toast-body a { font-size: 12.5px; font-weight: 600; }

.toast-close {
  flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--text-3);
  padding: 0 2px;
}
.toast-close:hover { color: var(--text); }

.toast.going { animation: toast-out .2s ease-in both; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.going { animation: none; }
}

@media (max-width: 820px) {
  /* Above the bottom bar, not behind it. */
  .toasts { top: auto; bottom: 76px; inset-inline: 12px; width: auto; }
}

@media print { .toasts { display: none; } }

/* ----------------------------------------------------------------- chat */

.chat-turn { margin-bottom: 14px; }
.chat-turn:last-child { margin-bottom: 0; }

.chat-bubble {
  display: inline-block; max-width: 76ch;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.65;
  overflow-wrap: anywhere;
}

.chat-turn--user { text-align: end; }
.chat-turn--user .chat-bubble {
  background: var(--accent); color: #fff;
  border-end-end-radius: 5px;
}

.chat-turn--assistant .chat-bubble {
  background: var(--mat-thin, rgba(127,127,127,.08));
  border: 1px solid var(--hairline);
  border-end-start-radius: 5px;
}

.chat-rows { margin-top: 7px; font-size: 12px; }
.chat-rows summary { cursor: pointer; color: var(--text-3); }
.chat-rows summary:hover { color: var(--accent); }
.chat-rows .table-wrap { margin-top: 8px; border: 1px solid var(--hairline); border-radius: var(--r-md); }

/* A proposed action, waiting on a yes. Deliberately not styled as a success:
   nothing has happened yet. */
.confirm-card {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--amber); border-radius: var(--r-md);
  background: var(--amber-soft);
  font-size: 13.5px;
}
.confirm-card:last-child { margin-bottom: 0; }
.confirm-card strong { color: var(--amber); }

#chat-mic.listening {
  border-color: var(--red); color: var(--red);
  animation: mic-pulse 1.3s ease-in-out infinite;
}
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px var(--red-soft); } }
@media (prefers-reduced-motion: reduce) { #chat-mic.listening { animation: none; } }

.chat-example:hover { background: var(--mat-thin, rgba(127,127,127,.06)); }

/* ------------------------------------------------------- report a problem */

/*
   Present on every page, because the moment somebody hits a problem is the
   only moment they will bother to describe it. Small and out of the way until
   hovered — a permanent bright button beside real work is an irritation.
*/
.report-fab {
  position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 13px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--e1);
  color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: color var(--fast, .15s), box-shadow var(--fast, .15s), transform var(--fast, .15s);
}
.report-fab:hover { color: var(--accent); box-shadow: var(--e2); transform: translateY(-1px); }
.report-fab > span[aria-hidden] {
  display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--amber-soft); color: var(--amber);
  font-size: 11px; font-weight: 800;
}

@media (max-width: 820px) {
  /* Clear of the bottom navigation bar. */
  .report-fab { inset-block-end: 74px; }
  .report-fab-label { display: none; }
  .report-fab { padding: 0 11px; }
}

@media print { .report-fab { display: none; } }

.report-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface, var(--mat-thick, #fff));
  color: var(--text);
  box-shadow: var(--e3, var(--e2));
}
.report-dialog::backdrop { background: rgba(15, 23, 42, .38); backdrop-filter: blur(2px); }

.report-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.report-close {
  border: 0; background: none; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--text-3); padding: 0 2px;
}
.report-close:hover { color: var(--text); }

.report-body { padding: 16px 18px; max-height: min(62vh, 560px); overflow-y: auto; }
.report-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--hairline);
}
.report-foot .dim-text { font-size: 12px; }

.report-previews { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.report-preview {
  position: relative; width: 96px; height: 68px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm, 8px);
  overflow: hidden; background: var(--mat-thin, rgba(127,127,127,.06));
}
.report-preview img,
.report-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.report-preview-drop {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  width: 19px; height: 19px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}