:root {
  --unit: 56px;      /* size of a 1u key */
  --gap: 6px;        /* space between keys */
  --radius: 8px;     /* rounded key corners */
  --bg: #121317;
  --surface: #1d1f24;
  --border: #33363e;
  --board: #1a1c21;
  --key: #3a3e47;
  --key-shadow: #24262c;
  --accent: #4c8dff;
  --pressed: #4c8dff;
  --text: #e4e5ea;
  --muted: #8a8d96;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  /* The space above and below the keyboard grows equally, keeping it centered.
     If the top needs more than half, it just takes what it needs and the
     bottom gets the rest, so there is never extra empty space to scroll. */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.top {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.bottom { flex: 1 1 0; }

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  width: min(1000px, 100%);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 14px;
}
.header-right .user { display: flex; align-items: center; gap: 8px; color: var(--muted); }
#user-name { color: var(--text); font-weight: 600; }

h1 { margin: 0; font-size: 20px; font-weight: 600; }

/* Edit mode switch */
.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--border);
  position: relative;
  transition: background 0.15s;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:has(input:checked) { color: var(--text); }

/* Everything used for editing is hidden until edit mode is on */
body:not(.editing) .edit-only { display: none !important; }
body.editing .view-only { display: none !important; }
body:not(.logged-in) .logged-in-only { display: none !important; }
body.logged-in .logged-out-only { display: none !important; }

.muted { color: var(--muted); }
.up { color: #5fd38d; }
.down { color: #ff7b7b; }

/* Shared form controls */
button {
  font: inherit;
  font-size: 14px;
  padding: 5px 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
button:hover:not(:disabled) { background: #282b32; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: #3a7bf0; }
button.link {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link:hover:not(:disabled) { background: none; color: #7aaaff; }
select, input[type="text"], input[type="password"] {
  font: inherit;
  font-size: 14px;
  padding: 4px 6px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
select { max-width: 280px; }
kbd {
  font: 11px ui-monospace, Consolas, monospace;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  margin-left: 4px;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.controls .line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.controls input[type="number"],
.controls input[type="text"] {
  padding: 4px 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.controls input[type="number"] { width: 70px; }
.controls input[type="text"] { width: 120px; }
.controls input:disabled { opacity: 0.45; }

.controls button {
  padding: 5px 12px;
  font-size: 14px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.controls button:hover:not(:disabled) { background: #282b32; }
.controls button:disabled { opacity: 0.45; cursor: default; }

.sep { width: 1px; height: 20px; background: var(--border); }

.status { color: var(--muted); min-height: 1.2em; }
.status.listening { color: var(--accent); }

.board-wrap {
  flex: none;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.board {
  display: inline-flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--board-pad, 16px);
  background: var(--board);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.row {
  display: flex;
  gap: var(--gap);
  min-height: var(--unit);
  align-items: center;
}

.key {
  /* width = units * 1u + the gaps a wider key "swallows" */
  width: calc(var(--w) * var(--unit) + (var(--w) - 1) * var(--gap));
  height: var(--unit);
  flex: none;
  background: var(--key);
  border-radius: var(--radius);
  box-shadow: inset 0 -4px 0 var(--key-shadow);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 4px;
  font-size: max(9px, calc(var(--unit) * 0.23));
  line-height: 1.15;
  text-align: center;
  white-space: pre-line;   /* "\n" in a display label makes a two-line legend */
  overflow: hidden;
  user-select: none;
  transition: background 0.08s, box-shadow 0.08s, transform 0.08s, outline-color 0.1s;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
body.editing .key { cursor: pointer; }
body.editing .key:hover { filter: brightness(1.12); }
.key.selected { outline-color: var(--accent); }
.key.listening { animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { outline-color: transparent; } }

/* Lit up while the matching physical key is held down */
.key.pressed {
  background: var(--pressed);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3), 0 0 14px rgba(76, 141, 255, 0.55);
  transform: translateY(2px);
}

/* Small width badge, edit mode only */
.key::after {
  content: attr(data-w) "u";
  position: absolute;
  right: 5px;
  bottom: 6px;
  font-size: max(7px, calc(var(--unit) * 0.16));
  color: var(--muted);
  opacity: 0;
}
body.editing .key:hover::after,
body.editing .key.selected::after,
body.editing .board.show-widths .key::after { opacity: 1; }

/* Keys without a code get a dashed hint in edit mode */
body.editing .key.no-code { box-shadow: inset 0 -4px 0 var(--key-shadow), inset 0 0 0 1px #5a5e68; }

/* Per-row buttons, sitting just right of the last key:
   + / − key in the first column, insert row below / remove row in the second */
.row-btns {
  display: grid;
  grid-template-columns: 22px 22px;
  gap: 4px;
  margin-left: 4px;
}
.row-btn.danger:hover:not(:disabled) { background: #8b2f36; }

.add-row {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.add-row:hover { color: var(--text); border-color: var(--muted); }
.row-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: #2c2f36;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}
.row-btn:hover:not(:disabled) { background: #3d414a; }
.row-btn:disabled { opacity: 0.35; cursor: default; }

.hint { margin: 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; }

/* ---------- Keys: practice hints and mistakes ---------- */
.key.hint {
  outline-color: #f5c542;
  background: #4a4535;
}
.key.wrong { animation: wrong 0.35s ease-out; }
@keyframes wrong {
  0% { background: #c2414b; }
  100% { background: var(--key); }
}

/* Edit mode: the key code in the corner, so you can see what each key sends */
.key::before {
  content: attr(data-code);
  position: absolute;
  top: 3px;
  left: 5px;
  right: 5px;
  font-size: max(6px, calc(var(--unit) * 0.14));
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
body.editing .key::before { display: block; }

/* ---------- Practice ---------- */
.practice {
  width: min(1000px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mode-tab {
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.mode-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mode-tab.active:hover:not(:disabled) { background: var(--accent); }
.mode-tab small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }

.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  font-size: 14px;
  min-height: 30px;
}
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.opts[hidden] { display: none; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hint-toggle { color: var(--muted); }

.activity-bar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  min-height: 20px;
}

.text-box {
  position: relative; /* character offsets are measured from here */
  height: calc(3 * 1.6em + 28px);
  overflow: hidden;
  padding: 14px 18px;
  background: var(--tb-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: clamp(16px, 4.2vw, 22px);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
  color: var(--tb-fg);
}
.text-box.mode-story { font-size: clamp(15px, 3.6vw, 19px); height: calc(4 * 1.6em + 28px); overflow-wrap: normal; }
.text-box.mode-code { font-size: clamp(12px, 2.6vw, 15px); line-height: 1.5; height: calc(10 * 1.5em + 28px); }
.text-box.message { color: var(--tb-dim); font-family: inherit; font-size: 15px; }
.text-box .more { color: var(--tb-dim); font-size: 12px; font-family: system-ui, sans-serif; }

.text-box span.prev { color: var(--tb-dim); opacity: 0.6; }
.text-box:not(.mode-code) span.done { color: var(--tb-done); }
.text-box span.done.missed { color: var(--tb-wrong); text-decoration: underline wavy; text-underline-offset: 3px; }
.text-box span.nl { color: var(--tb-dim); font-size: 0.8em; }
.text-box span.cur {
  color: var(--tb-fg);
  background: var(--tb-cursor);
  box-shadow: inset 0 -2px 0 var(--tb-caret);
  border-radius: 3px;
}
.text-box span.cur.wrong { background: color-mix(in srgb, var(--tb-wrong) 35%, transparent); box-shadow: inset 0 -2px 0 var(--tb-wrong); }

/* Code: syntax colors; typed code keeps its color but fades */
.text-box .t-comment { color: var(--tk-comment); font-style: italic; }
.text-box .t-string { color: var(--tk-string); }
.text-box .t-number { color: var(--tk-number); }
.text-box .t-keyword { color: var(--tk-keyword); }
.text-box .t-type { color: var(--tk-type); }
.text-box .t-function { color: var(--tk-function); }
.text-box .t-property { color: var(--tk-property); }
.text-box .t-constant { color: var(--tk-constant); }
.text-box .t-operator { color: var(--tk-operator); }
.text-box .t-punct { color: var(--tk-punct); }
.text-box.mode-code span.done { opacity: 0.38; }
.text-box.mode-code span.done.missed { color: var(--tb-wrong); opacity: 0.8; }
.text-box.mode-code span.prev { opacity: 0.25; }

/* ---------- Practice themes ----------
   --tb-*: the text box (background, text, typed, dimmed, cursor, mistakes)
   --tk-*: syntax colors for code */
.text-wrap, .text-wrap[data-theme="midnight"] {
  --tb-bg: #1d1f24; --tb-fg: #e4e5ea; --tb-done: #6f9e7b; --tb-dim: #5d616b;
  --tb-cursor: rgba(76, 141, 255, 0.28); --tb-caret: #4c8dff; --tb-wrong: #ff6b6b;
  --tk-comment: #676e95; --tk-string: #c3e88d; --tk-number: #f78c6c; --tk-keyword: #c792ea;
  --tk-type: #ffcb6b; --tk-function: #82aaff; --tk-property: #89ddff; --tk-constant: #f78c6c;
  --tk-operator: #89ddff; --tk-punct: #a0a6b3;
}
.text-wrap[data-theme="one-dark"] {
  --tb-bg: #282c34; --tb-fg: #abb2bf; --tb-done: #7a9f6a; --tb-dim: #5c6370;
  --tb-cursor: rgba(97, 175, 239, 0.28); --tb-caret: #61afef; --tb-wrong: #e06c75;
  --tk-comment: #5c6370; --tk-string: #98c379; --tk-number: #d19a66; --tk-keyword: #c678dd;
  --tk-type: #e5c07b; --tk-function: #61afef; --tk-property: #e06c75; --tk-constant: #d19a66;
  --tk-operator: #56b6c2; --tk-punct: #abb2bf;
}
.text-wrap[data-theme="dracula"] {
  --tb-bg: #282a36; --tb-fg: #f8f8f2; --tb-done: #6fbf8a; --tb-dim: #6272a4;
  --tb-cursor: rgba(189, 147, 249, 0.3); --tb-caret: #bd93f9; --tb-wrong: #ff5555;
  --tk-comment: #6272a4; --tk-string: #f1fa8c; --tk-number: #bd93f9; --tk-keyword: #ff79c6;
  --tk-type: #8be9fd; --tk-function: #50fa7b; --tk-property: #ffb86c; --tk-constant: #bd93f9;
  --tk-operator: #ff79c6; --tk-punct: #f8f8f2;
}
.text-wrap[data-theme="monokai"] {
  --tb-bg: #272822; --tb-fg: #f8f8f2; --tb-done: #8fb35a; --tb-dim: #75715e;
  --tb-cursor: rgba(166, 226, 46, 0.22); --tb-caret: #a6e22e; --tb-wrong: #f92672;
  --tk-comment: #75715e; --tk-string: #e6db74; --tk-number: #ae81ff; --tk-keyword: #f92672;
  --tk-type: #66d9ef; --tk-function: #a6e22e; --tk-property: #fd971f; --tk-constant: #ae81ff;
  --tk-operator: #f92672; --tk-punct: #f8f8f2;
}
.text-wrap[data-theme="nord"] {
  --tb-bg: #2e3440; --tb-fg: #d8dee9; --tb-done: #a3be8c; --tb-dim: #616e88;
  --tb-cursor: rgba(136, 192, 208, 0.28); --tb-caret: #88c0d0; --tb-wrong: #bf616a;
  --tk-comment: #616e88; --tk-string: #a3be8c; --tk-number: #b48ead; --tk-keyword: #81a1c1;
  --tk-type: #8fbcbb; --tk-function: #88c0d0; --tk-property: #d8dee9; --tk-constant: #d08770;
  --tk-operator: #81a1c1; --tk-punct: #eceff4;
}
.text-wrap[data-theme="solarized-dark"] {
  --tb-bg: #002b36; --tb-fg: #93a1a1; --tb-done: #859900; --tb-dim: #586e75;
  --tb-cursor: rgba(38, 139, 210, 0.35); --tb-caret: #268bd2; --tb-wrong: #dc322f;
  --tk-comment: #586e75; --tk-string: #2aa198; --tk-number: #d33682; --tk-keyword: #859900;
  --tk-type: #b58900; --tk-function: #268bd2; --tk-property: #839496; --tk-constant: #cb4b16;
  --tk-operator: #859900; --tk-punct: #93a1a1;
}
.text-wrap[data-theme="github-light"] {
  --tb-bg: #ffffff; --tb-fg: #24292f; --tb-done: #1a7f37; --tb-dim: #8c959f;
  --tb-cursor: rgba(9, 105, 218, 0.18); --tb-caret: #0969da; --tb-wrong: #cf222e;
  --tk-comment: #6e7781; --tk-string: #0a3069; --tk-number: #0550ae; --tk-keyword: #cf222e;
  --tk-type: #953800; --tk-function: #8250df; --tk-property: #0550ae; --tk-constant: #0550ae;
  --tk-operator: #cf222e; --tk-punct: #24292f;
}
.text-wrap[data-theme="solarized-light"] {
  --tb-bg: #fdf6e3; --tb-fg: #586e75; --tb-done: #859900; --tb-dim: #93a1a1;
  --tb-cursor: rgba(38, 139, 210, 0.22); --tb-caret: #268bd2; --tb-wrong: #dc322f;
  --tk-comment: #93a1a1; --tk-string: #2aa198; --tk-number: #d33682; --tk-keyword: #859900;
  --tk-type: #b58900; --tk-function: #268bd2; --tk-property: #657b83; --tk-constant: #cb4b16;
  --tk-operator: #859900; --tk-punct: #586e75;
}

/* Uploads */
button.danger { color: #ff7b7b; }
button.danger:hover:not(:disabled) { color: #ff9b9b; }
#upload-form { display: flex; flex-direction: column; gap: 12px; }
#upload-form p { margin: 0; }
#upload-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#upload-form input[type="text"] { padding: 7px 9px; }
#upload-form input[type="file"] { font-size: 13px; color: var(--muted); }
.upload-list { margin: 0; padding-left: 18px; font-size: 13px; max-height: 180px; overflow: auto; }
.upload-list li { margin: 2px 0; overflow-wrap: anywhere; }
.upload-list:empty { display: none; }

.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 0 4px;
}
.stats[hidden] { display: none; }
.stat, .result-stats > div, .summary > div { display: flex; flex-direction: column; }
.stat b, .result-stats b, .summary b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span, .result-stats span, .summary span { font-size: 12px; color: var(--muted); }
.stat-actions { display: flex; gap: 8px; margin-left: auto; }
.nudge { width: 100%; font-size: 13px; color: var(--muted); }

.result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.result[hidden] { display: none; }
.result-head { display: flex; align-items: baseline; gap: 12px; }
.result-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.compare, .save-status { font-size: 14px; color: var(--muted); }
.save-status.error { color: #ff7b7b; }
.result-actions { display: flex; gap: 8px; }

/* ---------- Dialogs ---------- */
dialog {
  width: min(420px, calc(100% - 32px));
  padding: 22px 24px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
dialog.wide { width: min(980px, calc(100% - 32px)); max-height: calc(100vh - 64px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
dialog p { font-size: 14px; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
#login-form p { margin: 0; }
#login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
#login-form input { padding: 7px 9px; }
.form-error { color: #ff7b7b; min-height: 1.2em; }
.dialog-actions { display: flex; flex-direction: row-reverse; gap: 8px; }
.dialog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }

/* ---------- Progress ---------- */
.empty { text-align: center; color: var(--muted); }
.summary { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 16px; }
.activity { border-top: 1px solid var(--border); }
.activity summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 10px 0;
  cursor: pointer;
  font-size: 14px;
}
.a-title { font-weight: 600; min-width: 200px; }
.a-meta { color: var(--muted); }
.a-meta b { color: var(--text); }
.badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2c3550;
  color: #a9c2ff;
}
.spark { margin-left: auto; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.spark circle { fill: var(--accent); }
.activity table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.activity th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.activity td { padding: 4px 8px; border-bottom: 1px solid #262930; }

/* ---------- Touch typing ---------- */
/* An invisible text field over the practice text: tapping it opens the
   phone's keyboard, and practice.js reads what's typed into it */
.text-wrap { position: relative; }
#type-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  resize: none;
  font-size: 16px; /* 16px+ stops iOS zooming in on focus */
  caret-color: transparent;
  color: transparent;
  background: transparent;
  display: none;
}
.touch #type-input { display: block; }
.touch-only { display: none; }
.touch .touch-only { display: inline; }
.touch .no-touch { display: none; }
.text-wrap.typing .text-box { border-color: var(--accent); }

.table-wrap { overflow-x: auto; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  body { padding: 16px 12px; gap: 16px; }
  .top { gap: 14px; }
  header { gap: 10px; }
  h1 { font-size: 18px; }
  .header-right { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }
  select { max-width: 100%; }
  .mode-tab { padding: 5px 10px; font-size: 13px; }
  .options, .opts { gap: 8px 12px; }
  .text-box { padding: 10px 12px; }
  .stats { gap: 6px 18px; }
  .stat b, .result-stats b, .summary b { font-size: 18px; }
  .stat-actions { margin-left: 0; width: 100%; }
  .stat-actions button, .result-actions button { flex: 1; padding: 8px 12px; }
  .result-actions { flex-wrap: wrap; }
  .controls .line { gap: 8px; }
  .controls input[type="text"] { width: 100px; }
  .sep { display: none; }
  dialog { padding: 18px 16px; }
  dialog.wide { max-height: calc(100dvh - 32px); }
  .a-title { min-width: 0; width: 100%; }
  .spark { margin-left: 0; }
}

/* Bigger tap targets on touch screens */
@media (pointer: coarse) {
  button { min-height: 36px; }
  .row-btn { min-height: 0; }
  button.link { min-height: 0; }
}

/* ---------- Practice: picker, path line, file panel ---------- */
.picker { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 30px; font-size: 14px; }
.story-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.story-picker select { max-width: 340px; }
.mode-summary { color: var(--muted); text-decoration-style: dotted; }
.practice:not([data-mode="letters"]):not([data-mode="words"]) .mode-summary { display: none; }
.practice:not([data-mode="story"]) .story-picker { display: none; }
.practice[data-mode="code"] .picker { display: none; }

.activity-bar { flex-wrap: wrap; align-items: center; }
.activity-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--muted); min-width: 0; }
.activity-path .leaf { color: var(--text); font-weight: 600; }
.activity-path .sep { color: #5d616b; }
#resume-note::before { content: "· "; }
.files-btn { display: none; padding: 3px 10px; font-size: 13px; }

.practice-body { display: block; }
.file-panel { display: none; }
.practice[data-mode="code"] .practice-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 10px;
}
.practice[data-mode="code"] .file-panel {
  display: flex;
  flex-direction: column;
  /* as tall as the text box, never taller: the tree scrolls inside */
  height: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.file-panel-head { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); }
.file-panel-head select { max-width: 100%; font-size: 13px; }
.file-panel-top { display: none; justify-content: space-between; align-items: center; }
#files-close { display: none; }
.file-tree { flex: 1; overflow: auto; padding: 4px 0; }
.file-tree ul { list-style: none; margin: 0; padding: 0; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 10px 3px calc(10px + var(--depth, 0) * 14px);
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: 13px ui-monospace, "Cascadia Code", Consolas, monospace;
  text-align: left;
  min-height: 0;
}
.tree-row:hover:not(:disabled) { background: #262930; }
.tree-row.dir { color: var(--muted); }
.tree-row .caret { width: 10px; font-size: 10px; }
.tree-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row.current { background: rgba(76, 141, 255, 0.18); box-shadow: inset 2px 0 0 var(--accent); }
.tree-row .prog { font-size: 11px; color: var(--muted); }
.tree-row .prog.done { color: #5fd38d; }
.tree-empty { padding: 10px; margin: 0; }
.file-panel-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 12px; }
.file-panel-foot { flex-wrap: nowrap; justify-content: space-between; align-items: center; }
#codebase-progress { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#add-code { white-space: nowrap; }

/* Narrow windows: the file panel becomes a drawer from the left */
@media (max-width: 860px) {
  .practice[data-mode="code"] .practice-body { display: block; }
  .practice[data-mode="code"] .files-btn { display: inline-block; }
  .practice[data-mode="code"] .file-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(320px, 85vw);
    height: auto;
    min-height: 0;
    border-radius: 0 12px 12px 0;
    transform: translateX(-105%);
    transition: transform 0.2s;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .practice.files-open .file-panel { transform: none; }
  #files-close { display: inline; }
  .file-panel-top { display: flex; }
}

/* Backspace mode: a wrong character you've typed */
.text-box span.err { color: var(--tb-wrong); background: color-mix(in srgb, var(--tb-wrong) 25%, transparent); border-radius: 2px; }
.text-box.mode-code span.err { opacity: 1; }
body[data-mistakes="stop"] .mistakes-backspace,
body:not([data-mistakes="stop"]) .mistakes-stop { display: none; }

/* ---------- Settings sidebar ---------- */
.settings {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(360px, 100vw);
  overflow-y: auto;
  padding: 18px 20px 28px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(105%);
  transition: transform 0.2s, visibility 0s 0.2s; /* hide after sliding out */
  visibility: hidden;
}
body.settings-open .settings { transform: none; visibility: visible; transition: transform 0.2s; }
.settings-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.settings-head h2 { margin: 0; font-size: 18px; }
.settings section { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.settings section:last-child { border-bottom: none; }
.settings h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.settings h3 .small { text-transform: none; letter-spacing: 0; }
.settings .field { display: flex; flex-direction: column; gap: 4px; }
.settings .field select { max-width: 100%; }
.settings fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.settings legend { padding: 0; margin-bottom: 6px; }
.settings .check { align-items: flex-start; }
.settings .check input { margin-top: 3px; }
.small { font-size: 12px; }
.settings p { margin: 0; }
.upload-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.uploads-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uploads-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.upload-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upload-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upload-meta { grid-column: 1; font-size: 12px; }
.uploads-list [data-delete] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.policy { font-size: 12px; color: var(--muted); }
#upload-form input[type="url"] { padding: 7px 9px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
#upload-summary:empty { display: none; }