/* Jarvis web shell — base design system. Area stylesheets (tutor.css,
   practice.css, chat.css) add to this; they do not redefine it. Everything is
   classes: the CSP forbids inline style attributes, so dynamic values (a
   mastery bar's width) go through element.style in code, never markup. */

:root {
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-sunken: #eceef2;
  --fg: #16191d;
  --fg-muted: #5b6470;
  --line: #d9dde3;
  --accent: #1f6feb;
  --accent-fg: #ffffff;
  --ok: #1a7f37;
  --warn: #9a6700;
  --bad: #c92a2a;
  --radius: 14px;
  --radius-sm: 9px;
  --tab-h: 62px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101418;
    --bg-elev: #181d23;
    --bg-sunken: #0b0e12;
    --fg: #e8ebef;
    --fg-muted: #98a2ad;
    --line: #2a313a;
    --accent: #5aa9ff;
    --accent-fg: #0b1220;
    --ok: #3fb950;
    --warn: #d29922;
    --bad: #ff6b6b;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 16px/1.45 var(--font); -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
a { color: var(--accent); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; }

.app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.brand-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 0.9rem; }
.topbar-status { font-size: 0.85rem; color: var(--fg-muted); }
.topbar-status.bad { color: var(--bad); }

.view {
  flex: 1; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 16px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px);
  outline: none;
}

/* Tab bar */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--fg-muted); font-size: 0.72rem; font-weight: 600; cursor: pointer; padding: 0;
}
.tab .tab-icon { font-size: 1.25rem; line-height: 1; }
.tab.active { color: var(--accent); }

/* Surfaces */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.section-title h2, .section-title h3 { flex: 1; }
.muted { color: var(--fg-muted); }
.small { font-size: 0.86rem; }
.tiny { font-size: 0.76rem; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prewrap { white-space: pre-wrap; word-break: break-word; }
.hidden { display: none !important; }

/* Lists */
.list { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; color: inherit; }
.list-item:first-child { border-top: 0; }
.list-item.clickable { cursor: pointer; }
.list-item.clickable:hover { background: var(--bg-sunken); }
.list-item .chev { color: var(--fg-muted); }
.list-title { font-weight: 600; }
.list-sub { color: var(--fg-muted); font-size: 0.86rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--bg-sunken); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.ok { color: var(--ok); }
.btn.block { width: 100%; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 0.86rem; }
.btn.ghost { border-color: transparent; background: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row.stretch > .btn { flex: 1; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 0.86rem; color: var(--fg-muted); font-weight: 600; }
.input, .textarea, select.input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-sunken); min-height: 42px; }
.input:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.textarea { min-height: 96px; resize: vertical; }
.help { font-size: 0.82rem; color: var(--fg-muted); }

/* Badges, pills, bars */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: var(--bg-sunken); color: var(--fg-muted); white-space: nowrap; }
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.badge.accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.bar { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.bar > .bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 240ms ease; }
.bar > .bar-fill.ok { background: var(--ok); }
.bar > .bar-fill.warn { background: var(--warn); }
.bar > .bar-fill.bad { background: var(--bad); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-sunken); border-radius: var(--radius-sm); min-width: 84px; }
.stat .stat-n { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.stat .stat-l { font-size: 0.74rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }

/* States */
.empty { padding: 28px 16px; text-align: center; color: var(--fg-muted); }
.error-box { border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, var(--bg-elev)); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.error-box .error-title { color: var(--bad); font-weight: 700; }
.notice { border-radius: var(--radius); padding: 10px 14px; background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); padding: 18px 0; justify-content: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .bar > .bar-fill { transition: none; } }

/* Toasts */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 20; padding: 0 12px; }
.toast { pointer-events: auto; max-width: 560px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--fg); color: var(--bg); font-size: 0.92rem; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.toast.error { background: var(--bad); color: #fff; }
.toast.success { background: var(--ok); color: #fff; }

/* Page header with back button */
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.page-head h2 { flex: 1; }
.back { border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 6px 4px; font-size: 1rem; }

.noscript { padding: 24px; text-align: center; }
.kbd { font-family: var(--mono); font-size: 0.85em; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-sunken); }

/* Wide screens: one sidebar (brand above the tabs) and the view beside it.
   Placed LAST so it wins over the base rules above at equal specificity (a
   first version sat before .tabs and lost). */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100%; }
  .topbar {
    position: static; grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: flex-start;
    padding: 22px 18px 6px; border-bottom: 0; border-right: 1px solid var(--line);
    background: var(--bg-elev); backdrop-filter: none;
  }
  .tabs {
    position: static; grid-column: 1; grid-row: 2;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    height: auto; padding: 8px 10px; border-top: 0; border-right: 1px solid var(--line);
    background: var(--bg-elev); backdrop-filter: none;
  }
  .tabs .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.95rem; }
  .tabs .tab.active { background: var(--bg-sunken); }
  .view { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: 920px; padding: 28px 32px 40px; }
  .topbar-status { margin-top: 6px; }
  .toasts { bottom: 24px; }
}

/* Rendered Markdown (web/src/markdown.ts): the subset Claude uses in cards,
   summaries, lessons and feedback. Inline code reads as code, lists as
   lists, fenced blocks as blocks — instead of literal backticks and dashes. */
.md > * + * { margin-top: 8px; }
.md .md-p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.md .md-code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; white-space: pre-wrap; }
.md .md-pre { margin: 0; font-size: 0.9em; line-height: 1.45; }
.md .md-pre code { font-family: var(--mono); background: none; border: 0; padding: 0; }
.md .md-list { margin: 0; padding-left: 1.3em; }
.md .md-list li + li { margin-top: 4px; }
.md .md-list code { font-size: 0.9em; }