/* cdrill.css — the look of the drill's page.

   The BeeBrand panel's design (panel.beebrand.us): a soft blue-white field,
   frosted-glass cards with large radii, pill controls, navy and bright-blue
   accents, Plus Jakarta Sans. The tokens are the panel's own
   (src/go/beebrand_us/web/static/css/tokens.css is where they were designed);
   the layout — code on the left, panels on the right — is this page's. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bb-white: #ffffff;
  --bb-grey-50: #f5f8fc;
  --bb-grey-100: #ebf0f7;
  --bb-grey-200: #dde4ee;
  --bb-grey-400: #9aa6b8;
  --bb-grey-600: #627089;
  --bb-ink: #17223a;
  --bb-navy: #1c3765;
  --bb-navy-deep: #13284d;
  --bb-blue-bright: #2f7bf6;
  --bb-blue-glow: rgba(47, 123, 246, .28);
  --bb-yellow: #fff4d1;
  --bb-yellow-deep: #8a6400;
  --bb-purple: #ece7fe;
  --bb-purple-deep: #6a4fd6;
  --bb-blue: #e1ebfd;
  --bb-blue-deep: #2a5fc4;
  --bb-sea: #d9f3ee;
  --bb-sea-deep: #147f70;
  --bb-rose: #fde4e4;
  --bb-rose-deep: #c73a3a;
  --bb-glass: rgba(255, 255, 255, .68);
  --bb-glass-strong: rgba(255, 255, 255, .86);
  --bb-glass-edge: rgba(255, 255, 255, .85);
  --bb-blur: blur(18px) saturate(140%);
  --bb-shadow: 0 18px 40px -22px rgba(28, 55, 101, .28), 0 2px 8px -2px rgba(28, 55, 101, .06);
  --bb-bg: #e9eff8;
  --bb-bg-gradient: radial-gradient(1200px 700px at 12% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(900px 600px at 100% 0%, #dbe7fb 0%, rgba(219, 231, 251, 0) 65%),
    linear-gradient(160deg, #f3f6fb 0%, #e4ecf8 55%, #dfe7f4 100%);
  --bb-line: rgba(28, 55, 101, .09);
  --bb-focus: #7fb0ff;
  --bb-font: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --bb-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --bb-radius: 22px;
  --bb-radius-sm: 12px;
  --bb-pill: 999px;
  --bb-ease: 160ms cubic-bezier(.4, 0, .2, 1);
  --topbar-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--bb-font);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--bb-ink);
  background: var(--bb-bg-gradient);
  background-color: var(--bb-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 8px;
  gap: 12px;
}
h1, h2 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
h1 { font-size: 1.05rem; }
h2 { font-size: 1.05rem; margin-bottom: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bb-focus); outline-offset: 2px; }
.muted { color: var(--bb-grey-600); margin: 0 0 12px; }

/* ── The floating pill of a top bar ─────────────────────────────────────── */
.topbar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px 0 18px;
  background: var(--bb-glass-strong);
  -webkit-backdrop-filter: var(--bb-blur);
  backdrop-filter: var(--bb-blur);
  border: 1px solid var(--bb-glass-edge);
  border-radius: var(--bb-pill);
  box-shadow: var(--bb-shadow);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--bb-navy); }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--bb-blue-bright), var(--bb-navy));
  color: var(--bb-white); font-family: var(--bb-mono); font-weight: 700;
  box-shadow: 0 6px 14px -6px var(--bb-blue-glow);
}
.topbar-facts { display: flex; gap: 8px; margin-left: 8px; flex: 1; }
.topbar-actions { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; padding: 5px 13px;
  border-radius: var(--bb-pill); background: var(--bb-grey-100);
  color: var(--bb-grey-600); font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.pill-clock { background: var(--bb-blue); color: var(--bb-blue-deep); font-variant-numeric: tabular-nums; min-width: 64px; justify-content: center; }
.pill-clock.stopped { background: var(--bb-grey-100); color: var(--bb-grey-600); }

/* ── Controls ───────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer;
  padding: 9px 18px; border-radius: var(--bb-pill);
  border: 1px solid var(--bb-grey-200); background: var(--bb-white); color: var(--bb-navy);
  transition: background var(--bb-ease), box-shadow var(--bb-ease), transform var(--bb-ease);
}
.btn:hover { background: var(--bb-grey-50); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--bb-navy); border-color: var(--bb-navy); color: var(--bb-white); box-shadow: 0 10px 20px -12px rgba(28, 55, 101, .6); }
.btn-primary:hover { background: var(--bb-navy-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--bb-grey-600); }
.btn-ghost:hover { background: var(--bb-grey-100); color: var(--bb-ink); }
kbd {
  font-family: var(--bb-mono); font-size: .72rem; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
}
label { display: block; font-weight: 600; font-size: .86rem; color: var(--bb-navy); margin: 12px 0 6px; }
label:first-of-type { margin-top: 0; }
textarea, select {
  width: 100%; font: inherit; color: var(--bb-ink);
  background: var(--bb-white); border: 1px solid var(--bb-grey-200);
  border-radius: var(--bb-radius-sm); padding: 10px 12px;
  transition: border-color var(--bb-ease), box-shadow var(--bb-ease);
}
textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
textarea:focus, select:focus { outline: none; border-color: var(--bb-blue-bright); box-shadow: 0 0 0 4px var(--bb-blue-glow); }
select { width: auto; min-width: 150px; padding: 7px 10px; border-radius: var(--bb-pill); }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ── The two columns ────────────────────────────────────────────────────── */
.split {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 14px;
}
.card {
  background: var(--bb-glass);
  -webkit-backdrop-filter: var(--bb-blur);
  backdrop-filter: var(--bb-blur);
  border: 1px solid var(--bb-glass-edge);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow);
}
.code-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.code-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--bb-line); }
.context { margin: 6px 0 0; color: var(--bb-grey-600); white-space: pre-line; font-size: .9rem; }
.code-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--bb-glass-strong); }
.tok-comment { color: #7a8699; font-style: italic; }
.tok-string { color: var(--bb-sea-deep); }
.tok-number { color: #b0531b; }
.tok-keyword { color: var(--bb-purple-deep); font-weight: 600; }
.tok-declaration { color: var(--bb-blue-deep); font-weight: 600; }

.panels { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 0 4px 12px 0; }
.panel { padding: 18px 20px 20px; flex: none; }
.notice {
  flex: none; padding: 10px 16px; border-radius: var(--bb-radius-sm);
  background: var(--bb-yellow); color: var(--bb-yellow-deep); font-weight: 600; font-size: .9rem;
}

/* ── Grading, self-grade, grade ─────────────────────────────────────────── */
.bar { height: 6px; border-radius: var(--bb-pill); background: var(--bb-grey-100); overflow: hidden; }
.bar span { display: block; height: 100%; width: 35%; border-radius: var(--bb-pill); background: var(--bb-blue-bright); animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

.rows { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.rows .row-label { font-weight: 600; }

.grade-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.grade-head h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--bb-glass-strong); border: 1px solid var(--bb-line); border-radius: var(--bb-radius-sm); padding: 10px 14px; }
.stat-label { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-grey-600); }
.stat-value { font-size: 1.3rem; font-weight: 700; color: var(--bb-navy); font-variant-numeric: tabular-nums; }
.stat-value small { font-size: .8rem; font-weight: 600; color: var(--bb-grey-600); }

.verdict { padding: 12px 0; border-top: 1px solid var(--bb-line); }
.verdict:first-child { border-top: 0; padding-top: 0; }
.verdict-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.verdict p { margin: 6px 0 0; color: var(--bb-grey-600); }
.verdict blockquote {
  margin: 8px 0 0; padding: 6px 12px; border-left: 3px solid var(--bb-blue-bright);
  background: var(--bb-blue); border-radius: 0 8px 8px 0; color: var(--bb-ink);
}
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--bb-pill); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-good { background: var(--bb-sea); color: var(--bb-sea-deep); }
.badge-part { background: var(--bb-yellow); color: var(--bb-yellow-deep); }
.badge-bad { background: var(--bb-rose); color: var(--bb-rose-deep); }
.badge-note { background: var(--bb-purple); color: var(--bb-purple-deep); }

.recap dt { font-weight: 600; font-size: .86rem; color: var(--bb-navy); margin-top: 10px; }
.recap dt:first-child { margin-top: 0; }
.recap dd { margin: 4px 0 0; white-space: pre-wrap; color: var(--bb-ink); }
.recap dd.empty { color: var(--bb-grey-400); font-style: italic; }

/* ── The key, as text ───────────────────────────────────────────────────── */
.md h3 { font-size: 1rem; font-weight: 700; color: var(--bb-navy); margin: 18px 0 6px; }
.md h3:first-child { margin-top: 0; }
.md h4 { font-size: .92rem; font-weight: 700; margin: 14px 0 4px; }
.md p { margin: 6px 0; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--bb-mono); font-size: .84em; background: var(--bb-grey-100); padding: 1px 5px; border-radius: 5px; }
.md pre {
  font-family: var(--bb-mono); font-size: .82rem; line-height: 1.5; overflow-x: auto;
  background: var(--bb-glass-strong); border: 1px solid var(--bb-line); border-radius: var(--bb-radius-sm);
  padding: 10px 14px; margin: 8px 0;
}
.md pre .add { color: var(--bb-sea-deep); }
.md pre .del { color: var(--bb-rose-deep); }
.md table { border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.md th, .md td { border: 1px solid var(--bb-grey-200); padding: 4px 10px; text-align: left; }

.summary { font-family: var(--bb-mono); font-size: .86rem; line-height: 1.6; margin: 0 0 12px; white-space: pre-wrap; }

.foot { flex: none; text-align: center; font-size: .78rem; color: var(--bb-grey-400); }

/* A sitting that is over has no snippet: the panels take the page. */
.split.over { grid-template-columns: minmax(0, 720px); justify-content: center; }
.split.over .code-card { display: none; }

@media (max-width: 980px) {
  body { height: auto; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .code-card { max-height: 60vh; }
  .panels { overflow: visible; }
}

/* ── The code as rows (not a table: it has no headers and is not data) ──── */
.code { display: table; font-family: var(--bb-mono); font-size: .86rem; line-height: 1.55; width: 100%; }
.code .row { display: table-row; }
.code .ln, .code .src { display: table-cell; }
.code .row:first-child > * { padding-top: 12px; }
.code .row:last-child > * { padding-bottom: 14px; }
.code .row:hover > * { background: rgba(47, 123, 246, .05); }

/* ── The interview ──────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat { display: flex; flex-direction: column; }
.turns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.turn { max-width: 92%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.turn-who { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; opacity: .7; }
.turn-interviewer { align-self: flex-start; background: var(--bb-glass-strong); border: 1px solid var(--bb-line); border-bottom-left-radius: 6px; }
.turn-candidate { align-self: flex-end; background: var(--bb-navy); color: var(--bb-white); border-bottom-right-radius: 6px; }
.turn-thinking { align-self: flex-start; color: var(--bb-grey-600); font-style: italic; background: transparent; padding-left: 4px; }
.hint { margin: 10px 0 0; font-size: .8rem; color: var(--bb-grey-600); }
.kbd-dark { background: var(--bb-grey-100); border-color: var(--bb-grey-200); color: var(--bb-grey-600); }
.advice { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--bb-radius-sm); background: var(--bb-blue); color: var(--bb-ink); }
.advice:empty { display: none; }
#assessment-summary { margin: 0 0 12px; }
.badge-level-strong, .badge-level-solid { background: var(--bb-sea); color: var(--bb-sea-deep); }
.badge-level-mixed { background: var(--bb-yellow); color: var(--bb-yellow-deep); }
.badge-level-weak { background: var(--bb-rose); color: var(--bb-rose-deep); }
.code .ln {
  width: 1%; min-width: 46px; padding: 0 12px 0 16px; text-align: right; user-select: none;
  color: var(--bb-grey-400); border-right: 1px solid var(--bb-line); font-variant-numeric: tabular-nums;
}
.code .src { padding: 0 20px 0 14px; white-space: pre; tab-size: 4; }

/* ── The virtual interview ──────────────────────────────────────────────── */
.btn-accent { background: var(--bb-blue-bright); border-color: var(--bb-blue-bright); color: var(--bb-white); text-decoration: none; box-shadow: 0 10px 20px -12px var(--bb-blue-glow); }
.btn-accent:hover { background: var(--bb-blue-deep); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn-big { font-size: 1rem; padding: 13px 26px; }
.btn[aria-pressed="true"] { background: var(--bb-sea); border-color: var(--bb-sea); color: var(--bb-sea-deep); }
.btn.listening { background: var(--bb-rose); border-color: var(--bb-rose); color: var(--bb-rose-deep); }
.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--bb-grey-600); }
.agenda { list-style: none; margin: 0; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.agenda li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--bb-radius-sm); background: var(--bb-glass); border: 1px solid var(--bb-line); color: var(--bb-grey-600); }
.agenda li.now { background: var(--bb-blue); border-color: transparent; color: var(--bb-navy); font-weight: 600; }
.agenda li.done { opacity: .55; }
.agenda .mins { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-grey-600); margin: 18px 0 8px; }
.plain { margin: 0; padding-left: 20px; }
.plain li { margin: 5px 0; }
.weak { padding: 12px 0; border-top: 1px solid var(--bb-line); }
.weak:first-child { border-top: 0; padding-top: 0; }
.weak dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-grey-600); margin-top: 8px; }
.weak dt:first-child { margin-top: 0; }
.weak dd { margin: 2px 0 0; }
.weak dd.stronger { padding: 8px 12px; border-left: 3px solid var(--bb-sea-deep); background: var(--bb-sea); border-radius: 0 8px 8px 0; }
.past { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.badge-signal-strong_hire, .badge-signal-hire { background: var(--bb-sea); color: var(--bb-sea-deep); }
.badge-signal-lean_hire { background: var(--bb-yellow); color: var(--bb-yellow-deep); }
.badge-signal-lean_no_hire, .badge-signal-no_hire { background: var(--bb-rose); color: var(--bb-rose-deep); }
#debrief-summary { margin: 0 0 4px; }

/* ── The way in ─────────────────────────────────────────────────────────── */
.login-body { justify-content: center; }
.login { width: min(380px, 100%); margin: 0 auto; }
.login .brand { margin-bottom: 18px; }
.login input[type="password"] {
  width: 100%; font: inherit; color: var(--bb-ink); background: var(--bb-white);
  border: 1px solid var(--bb-grey-200); border-radius: var(--bb-radius-sm); padding: 10px 12px;
}
.login input[type="password"]:focus { outline: none; border-color: var(--bb-blue-bright); box-shadow: 0 0 0 4px var(--bb-blue-glow); }
.login .notice { margin-top: 12px; }