/*
 * The app is a reading surface for ~97k words of technical prose with heavy code,
 * tables, and inline literals. Everything here serves legibility over decoration.
 */

:root {
  --ground: #f5f7f9;
  --surface: #ffffff;
  --surface-2: #edf0f4;
  --ink: #141821;
  --ink-2: #4b5466;
  --ink-3: #7a8497;
  --rule: #dce1e9;
  --rule-soft: #e8ecf1;
  --accent: #a8500b;          /* depth track */
  --accent-soft: #f6eadc;
  --interview: #0c6360;       /* interview track */
  --done: #1a7f4b;
  --serif: "Iowan Old Style", Charter, Georgia, ui-serif, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101319; --surface: #171b23; --surface-2: #1e232c;
    --ink: #e7eaf0; --ink-2: #a2acbe; --ink-3: #79839a;
    --rule: #272d38; --rule-soft: #202631;
    --accent: #e5943f; --accent-soft: #2a2015;
    --interview: #4fb4ae; --done: #4cbd80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 0 22px 80px; }
.narrow { max-width: 720px; }

/* --- masthead --- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  margin-bottom: 34px;
}
.masthead .inner {
  max-width: 900px; margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.masthead a { color: var(--ink-2); text-decoration: none; font-family: var(--mono); font-size: 12.5px; }
.masthead a:hover { color: var(--accent); }
.masthead .brand { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.masthead .spacer { margin-left: auto; }

/* --- type --- */
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; text-wrap: balance; }
h2 { font-size: 24px; letter-spacing: -.015em; margin: 38px 0 10px; text-wrap: balance; }
h3 { font-size: 19px; margin: 26px 0 8px; }
p, li { max-width: 68ch; }
a { color: var(--accent); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px;
}
.muted { color: var(--ink-2); }

/* --- prose from the curriculum --- */
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 16px 0; }
.prose th, .prose td { border-bottom: 1px solid var(--rule-soft); padding: 9px 10px; text-align: left; vertical-align: top; }
.prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--rule); }
.prose pre {
  background: var(--surface-2); border: 1px solid var(--rule-soft); border-radius: 3px;
  padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.5;
}
.prose code { font-family: var(--mono); font-size: .87em; background: var(--surface-2); padding: 1px 4px; border-radius: 2px; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 16px 0; padding: 2px 0 2px 16px; color: var(--ink-2); }
.prose img { max-width: 100%; }
.table-scroll { overflow-x: auto; }

/* --- cards & lists --- */
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 18px 20px; margin-bottom: 12px;
}
.card h3 { margin-top: 0; }
.module-list { list-style: none; padding: 0; margin: 0; }
.module-list li { border-bottom: 1px solid var(--rule-soft); padding: 13px 0; display: flex; gap: 16px; align-items: baseline; }
.module-list .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); min-width: 34px; }
.module-list .title { flex: 1; }
.module-list a { text-decoration: none; color: var(--ink); font-weight: 600; }
.module-list a:hover { color: var(--accent); }

/* --- progress --- */
.bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; min-width: 90px; }
.bar span { display: block; height: 100%; background: var(--accent); width: 0; }
/* Bucketed widths, because a style attribute would need style-src 'unsafe-inline'. */
.bar span.w0 { width: 0%; }
.bar span.w5 { width: 5%; }
.bar span.w10 { width: 10%; }
.bar span.w15 { width: 15%; }
.bar span.w20 { width: 20%; }
.bar span.w25 { width: 25%; }
.bar span.w30 { width: 30%; }
.bar span.w35 { width: 35%; }
.bar span.w40 { width: 40%; }
.bar span.w45 { width: 45%; }
.bar span.w50 { width: 50%; }
.bar span.w55 { width: 55%; }
.bar span.w60 { width: 60%; }
.bar span.w65 { width: 65%; }
.bar span.w70 { width: 70%; }
.bar span.w75 { width: 75%; }
.bar span.w80 { width: 80%; }
.bar span.w85 { width: 85%; }
.bar span.w90 { width: 90%; }
.bar span.w95 { width: 95%; }
.bar span.w100 { width: 100%; }
.bar.full span { background: var(--done); }
.count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 22px 0 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stats b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.stats span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* --- labs & criteria --- */
.lab { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 16px 18px 8px; margin-bottom: 14px; }
.lab.core { border-left: 3px solid var(--accent); }
.lab header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lab .lab-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.lab .badge { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 2px; }
.criteria { list-style: none; padding: 0; margin: 10px 0 0; }
.criteria li { border-top: 1px solid var(--rule-soft); }
.criterion { display: flex; gap: 11px; align-items: flex-start; padding: 9px 2px; margin: 0; }
.criterion .box {
  margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; border-radius: 3px;
  border: 1.5px solid var(--rule); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: #fff;
}
.criterion:hover .box { border-color: var(--accent); }
.criterion.done .box { background: var(--done); border-color: var(--done); }
.criterion button:focus-visible .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.criterion.done .criterion-text { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.criterion-text { flex: 1; font-size: 15.5px; }
.criterion-text p { margin: 0; max-width: none; }
.criterion button { all: unset; cursor: pointer; display: flex; gap: 11px; align-items: flex-start; width: 100%; }

/* --- Q&A --- */
.qa details { border-bottom: 1px solid var(--rule-soft); padding: 12px 0; }
.qa summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "▸"; color: var(--ink-3); font-size: 12px; }
.qa details[open] summary::before { content: "▾"; }
.qa .answer { padding: 8px 0 2px 20px; color: var(--ink-2); }
.diff { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; }
.diff.basic  { color: var(--done); background: color-mix(in srgb, var(--done) 12%, transparent); }
.diff.mid    { color: var(--accent); background: var(--accent-soft); }
.diff.senior { color: #b3325a; background: color-mix(in srgb, #b3325a 12%, transparent); }

/* --- forms & buttons --- */
input[type=email], input[type=password], select {
  font: inherit; font-size: 15px; padding: 8px 10px; width: 100%; max-width: 340px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink);
}
label { display: block; font-size: 13px; color: var(--ink-2); margin: 12px 0 4px; }
input[type=submit], button.btn {
  font: inherit; font-size: 15px; padding: 9px 18px; margin-top: 16px; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 3px;
}
.flash { padding: 11px 15px; border-radius: 3px; margin-bottom: 20px; font-size: 15px; }
.flash.notice { background: color-mix(in srgb, var(--done) 12%, transparent); border: 1px solid color-mix(in srgb, var(--done) 30%, transparent); }
.flash.alert  { background: color-mix(in srgb, #b3325a 12%, transparent); border: 1px solid color-mix(in srgb, #b3325a 30%, transparent); }

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

@media (max-width: 640px) {
  body { font-size: 16px; }
  .module-list li { flex-wrap: wrap; gap: 8px; }
}

/* Sign-out sits in the masthead but is a form button, not a link. */
.linkish {
  all: unset; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
}
.linkish:hover { color: var(--accent); }
.masthead form { display: inline; }

/* Honeypot. Positioned off-screen rather than display:none, because some bots
   skip hidden inputs but still fill ones that are technically in the layout. */
.hp {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- drilling --- */
.drill-meta { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.drill-card { padding: 26px 28px; }
.drill-card .question { font-size: 20px; line-height: 1.45; }
.drill-card .question p { margin: 0; }
.reveal-cue {
  cursor: pointer; list-style: none; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 13px; color: var(--accent);
}
.reveal-cue::-webkit-details-marker { display: none; }
details[open] .reveal-cue { color: var(--ink-3); }
.drill-card .answer { margin-top: 16px; }
.rate-prompt { margin-top: 24px; font-size: 15px; }
.ratings { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ratings form { display: inline; }
.ratings .rating {
  font: inherit; font-size: 14px; padding: 9px 20px; cursor: pointer; margin: 0;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.ratings .rating:hover { border-color: var(--accent); }
.ratings .rating-again { border-color: color-mix(in srgb, #b3325a 45%, transparent); color: #b3325a; }
.ratings .rating-easy  { border-color: color-mix(in srgb, var(--done) 45%, transparent); color: var(--done); }
.keys { margin-top: 14px; }
kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-2);
}
.answer-first { margin-top: 18px; font-size: 14px; }
.btn-link { font-family: var(--mono); font-size: 13px; }

/* --- gates --- */
.card.passed { border-left: 3px solid var(--done); }
.card.not-passed { border-left: 3px solid var(--accent); }
.passed-badge { background: color-mix(in srgb, var(--done) 14%, transparent); color: var(--done);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; }
.dimension { border: 1px solid var(--rule); border-radius: 3px; padding: 14px 18px 16px; margin: 0 0 12px; }
.dimension legend { font-weight: 600; font-size: 16px; padding: 0 6px; }
.bar-desc { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.bar-desc p { margin: 0; display: inline; }
.score-row { display: flex; gap: 8px; }
.score-option { display: flex; align-items: center; gap: 5px; margin: 0;
  border: 1px solid var(--rule); border-radius: 3px; padding: 6px 14px; cursor: pointer; }
.score-option:hover { border-color: var(--accent); }
.score-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.score-option span { font-family: var(--mono); font-size: 15px; }
textarea { font: inherit; font-size: 15px; width: 100%; max-width: 640px; padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink); }
.lab header .spacer { margin-left: auto; }

/* --- friction log --- */
.week-row { display: flex; gap: 22px; }
.week-input { max-width: 90px; }
input[type=number], input[type=date], input[type=text] {
  font: inherit; font-size: 15px; padding: 8px 10px; max-width: 340px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.search-form input { max-width: 100%; width: 100%; margin-bottom: 18px; }
.log-entry header { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.log-entry header .spacer { margin-left: auto; }
.log-prompt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 12px 0 2px; }
.log-value { margin: 0; font-size: 15.5px; }
.log-value p { margin: 0 0 6px; }
.badge.no-number { background: color-mix(in srgb, #b3325a 12%, transparent); color: #b3325a; }
.hint { font-size: 14px; margin-top: 14px; }

/* --- shared bits --- */
.checks { margin: 0 0 20px; padding-left: 20px; }
.checks li { font-size: 15px; margin-bottom: 4px; color: var(--ink-2); }
.status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: var(--ink-3);
  background: color-mix(in srgb, var(--ink-3) 10%, transparent); }
.status.passed { color: var(--done); background: color-mix(in srgb, var(--done) 14%, transparent); }
.status.failed { color: var(--accent); background: var(--accent-soft); }

/* --- account settings --- */
.settings-block { border: 1px solid var(--rule); border-radius: 3px; padding: 18px 22px 22px;
  margin: 0 0 24px; background: var(--surface); }
.settings-block h2 { margin: 0 0 8px; font-size: 19px; }
.settings-block .hint { margin: 0 0 14px; }
.settings-block form { margin: 0; }
.settings-block label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--ink-2); }
.settings-block.danger { border-left: 3px solid #b3325a; }
.danger-link, .danger-submit { color: #b3325a; }
input[type=submit].danger-submit { border-color: #b3325a; color: #b3325a; }
.session-list, .export-list { list-style: none; padding: 0; margin: 0 0 14px; }
.session-list li, .export-list li { display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14.5px; }
.session-list .spacer, .export-list .spacer { margin-left: auto; }

/* Present for password managers, absent for everyone else. Not display:none — that
   hides the field from the managers too, which defeats the point of having it. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* button_to renders a <button>, which the input[type=submit] rules above do not reach. */
form button[type=submit] { font: inherit; font-size: 15px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fff; }
form button[type=submit]:hover { filter: brightness(1.08); }
.masthead form button[type=submit], form button[type=submit].linkish {
  background: none; border: none; color: var(--ink-2); padding: 0; font-size: inherit; }