:root {
  --bg: #fafaf8;
  --surface: #ffffff;
  --text: #1d1f23;
  --muted: #5f6570;
  --border: #e3e3df;
  --accent: #2f5fd0;
  --accent-soft: #e8eefb;
  --star: #c99200;
  --code-bg: #f6f8fa;
  --danger: #c01c28;
  --radius: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1b1e23;
    --text: #e6e7ea;
    --muted: #9aa0aa;
    --border: #2c3038;
    --accent: #8fb0ff;
    --accent-soft: #1f2a44;
    --star: #e3b341;
    --code-bg: #0d1117;
    --danger: #ff7b72;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.1rem;
  margin: 40px 0 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p { margin: 0 0 12px; max-width: 68ch; }

a { color: var(--accent); }

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Question tiles */
.q-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.q-tile {
  display: flex;
  min-width: 0;
}

.q-link,
.q-planned {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.q-link {
  position: relative;
  flex: 1;
  color: var(--text);
  text-decoration: none;
}

.q-difficulty {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  gap: 1px;
  color: var(--star);
  pointer-events: none;
}

.q-difficulty svg {
  width: 13px;
  height: 13px;
}

.q-link:hover { background: var(--accent-soft); }

.q-link:focus-visible {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.q-link .q-title {
  font-weight: 600;
  padding-right: 2.75rem;
}

.q-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--muted);
}

.q-planned { color: var(--muted); opacity: 0.6; }
.q-planned .q-title { font-style: italic; }

@media (max-width: 720px) {
  .q-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .q-list { grid-template-columns: minmax(0, 1fr); }
}

/* Question page */
.q-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  margin: 0 0 32px;
}

.q-nav:last-child { margin: 40px 0 0; }

.q-nav a { text-decoration: none; }
.q-nav a:hover { text-decoration: underline; }
.q-nav .disabled { color: var(--muted); opacity: 0.5; }

.task {
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.page-wide { max-width: 1200px; }

/* IDE, colors close to VS Code Light+ / Dark+ */
:root {
  --ide-border: #e0e0e0;
  --ide-side: #f3f3f3;
  --ide-side-text: #3b3b3b;
  --ide-side-title: #6f6f6f;
  --ide-hover: #e8e8e8;
  --ide-selected: #e4e6f1;
  --ide-focus: #0090f1;
  --ide-folder: #c09553;
  --ide-tabs: #ececec;
  --ide-tab: #ececec;
  --ide-tab-text: #6f6f6f;
  --ide-tab-active: #ffffff;
  --ide-tab-active-text: #333333;
  --ide-tab-accent: #0090f1;
  --ide-editor: #ffffff;
  --ide-gutter: #237893;
  --ide-crumbs: #616161;
  --ide-code-text: #1f2328;
  --k-class: #0070c1;
  --k-interface: #2e8b57;
  --k-abstract: #8e44ad;
  --k-enum: #c76a00;
  --k-trait: #00838f;
  --k-php: #6a72a8;
  --k-config: #a08200;
  --k-file: #8a8a8a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ide-border: #2b2b2b;
    --ide-side: #252526;
    --ide-side-text: #cccccc;
    --ide-side-title: #bbbbbb;
    --ide-hover: #2a2d2e;
    --ide-selected: #37373d;
    --ide-focus: #007fd4;
    --ide-folder: #dcb67a;
    --ide-tabs: #252526;
    --ide-tab: #2d2d2d;
    --ide-tab-text: #969696;
    --ide-tab-active: #1e1e1e;
    --ide-tab-active-text: #ffffff;
    --ide-tab-accent: #3794ff;
    --ide-editor: #1e1e1e;
    --ide-gutter: #858585;
    --ide-crumbs: #a9a9a9;
    --ide-code-text: #d4d4d4;
    --k-class: #4fa6ff;
    --k-interface: #4ec98b;
    --k-abstract: #c586c0;
    --k-enum: #e3a547;
    --k-trait: #4dd0e1;
    --k-php: #8f97d6;
    --k-config: #d7ba5d;
    --k-file: #9a9a9a;
  }
}

.ide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  height: clamp(440px, 74vh, 820px);
  border: 1px solid var(--ide-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ide-editor);
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}

.ide.explorer-collapsed { grid-template-columns: 34px minmax(0, 1fr); }

/* Explorer */
.explorer {
  display: flex;
  flex-direction: column;
  background: var(--ide-side);
  color: var(--ide-side-text);
  border-right: 1px solid var(--ide-border);
  overflow: auto;
  min-width: 0;
}

.explorer-head {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 8px;
  height: 35px;
  border: 0;
  background: transparent;
  color: var(--ide-side-title);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.explorer-head:focus-visible { outline: 1px solid var(--ide-focus); outline-offset: -1px; }
.explorer-head .chev { transform: rotate(90deg); }
.explorer-head[aria-expanded="false"] .chev { transform: none; }
.ide.explorer-collapsed .explorer-head span,
.ide.explorer-collapsed .tree { display: none; }

.tree,
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree { padding-bottom: 8px; }

.tree [role="treeitem"] { outline: none; }

.tree .row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding-left: calc(8px + var(--depth, 0) * 12px);
  padding-right: 8px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
}

.tree .row:hover { background: var(--ide-hover); }
.tree [aria-selected="true"] > .row { background: var(--ide-selected); }
.tree [role="treeitem"]:focus-visible > .row { border-color: var(--ide-focus); }

.tree .name { overflow: hidden; text-overflow: ellipsis; }
.tree .context .name { opacity: 0.6; }

.chev {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.1s ease;
}

.chev-space { width: 16px; flex: none; }

.folder[aria-expanded="true"] > .row > .chev { transform: rotate(90deg); }
.folder[aria-expanded="false"] > ul { display: none; }

.fi {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ide-folder);
}

.folder[aria-expanded="true"] > .row > .fi-closed,
.folder[aria-expanded="false"] > .row > .fi-open { display: none; }

/* Icons by PHP file kind */
.ficon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--k-file);
}

.ficon.k-class { background: var(--k-class); }
.ficon.k-interface { background: var(--k-interface); }
.ficon.k-abstract { background: var(--k-abstract); }
.ficon.k-enum { background: var(--k-enum); }
.ficon.k-trait { background: var(--k-trait); }
.ficon.k-php { background: var(--k-php); font-size: 6.5px; letter-spacing: -0.02em; }
.ficon.k-config { background: transparent; color: var(--k-config); font-size: 11px; }

@media (prefers-color-scheme: dark) {
  .ficon:not(.k-config) { color: #1e1e1e; }
}

/* Editor */
.editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--ide-editor);
}

.editor-bar {
  display: flex;
  flex: none;
  align-items: stretch;
  background: var(--ide-tabs);
  min-width: 0;
}

.tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 35px;
  background: var(--ide-tabs);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 12px;
  min-height: 35px;
  background: var(--ide-tab);
  color: var(--ide-tab-text);
  border-right: 1px solid var(--ide-border);
  border-top: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}

.tab[aria-selected="true"] {
  background: var(--ide-tab-active);
  color: var(--ide-tab-active-text);
  border-top-color: var(--ide-tab-accent);
}

.tab:focus-visible { box-shadow: inset 0 0 0 1px var(--ide-focus); }

.tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
}

.tab[aria-selected="true"] .tab-close,
.tab:hover .tab-close { visibility: visible; }
.tab-close:hover { background: var(--ide-hover); }

.crumbs {
  display: flex;
  flex: none;
  align-items: center;
  padding: 4px 16px;
  color: var(--ide-crumbs);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

.crumbs .sep { opacity: 0.7; padding: 0 4px; white-space: pre; }

.code-scroll {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  overflow: auto;
  background: var(--ide-editor);
  outline: none;
}

.code-scroll:focus-visible { box-shadow: inset 0 0 0 1px var(--ide-focus); }

.code-scroll pre {
  margin: 0;
  padding: 4px 0 16px;
  font-family: ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  tab-size: 4;
}

.code-scroll .gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  min-width: 52px;
  padding-right: 20px;
  text-align: right;
  color: var(--ide-gutter);
  background: var(--ide-editor);
  user-select: none;
}

.code-scroll .code { flex: 1 0 auto; padding-right: 24px; }

.code code,
.code code.hljs {
  display: block;
  padding: 0;
  background: transparent;
  color: var(--ide-code-text);
  white-space: pre;
  overflow: visible;
  font: inherit;
  line-height: inherit;
}

.gutter,
.code { font-variant-ligatures: none; }

.editor-empty {
  margin: auto;
  padding: 24px;
  color: var(--ide-crumbs);
  text-align: center;
}

/* Go to declaration */
.nav-mode .sym:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.line-flash {
  position: absolute;
  left: 0;
  pointer-events: none;
  background: var(--ide-tab-accent);
  opacity: 0.18;
  animation: line-flash 1.6s ease-out forwards;
}

@keyframes line-flash {
  0%, 40% { opacity: 0.22; }
  100% { opacity: 0; }
}

.nav-back {
  flex: none;
  width: 34px;
  border: 0;
  border-right: 1px solid var(--ide-border);
  background: transparent;
  color: var(--ide-tab-text);
  font-size: 15px;
  cursor: pointer;
}

.nav-back:hover:not(:disabled) { color: var(--ide-tab-active-text); background: var(--ide-hover); }
.nav-back:disabled { opacity: 0.35; cursor: default; }
.nav-back:focus-visible { outline: 1px solid var(--ide-focus); outline-offset: -1px; }

.decl-popup {
  position: absolute;
  z-index: 10;
  min-width: 260px;
  max-width: 320px;
  padding: 4px;
  border: 1px solid var(--ide-border);
  border-radius: 6px;
  background: var(--ide-side);
  color: var(--ide-side-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.decl-popup-title {
  padding: 4px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ide-side-title);
}

.decl-popup-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.decl-popup-item:hover,
.decl-popup-item:focus { background: var(--ide-selected); outline: none; }
.decl-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.decl-file { color: var(--ide-crumbs); white-space: nowrap; }

.hint { color: var(--muted); font-size: 0.95rem; }

/* Candidate workspace */
.explorer-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
}

.explorer-top { display: flex; align-items: center; }
.ide.explorer-collapsed .explorer-actions { display: none; }

.explorer-act,
.row-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ide-side-title);
  cursor: pointer;
}

.explorer-act svg,
.row-act svg { width: 14px; height: 14px; }
.explorer-act:hover,
.row-act:hover { background: var(--ide-hover); color: var(--ide-side-text); }

.row-actions { display: none; margin-left: auto; gap: 1px; }
.tree .row:hover > .row-actions,
.tree [role="treeitem"]:focus > .row > .row-actions { display: inline-flex; }

.tree .user > .row > .name { font-style: italic; color: var(--ide-tab-accent); }
.tree .user > .row > .name::after { content: " \2022"; }
.tab.user .tab-name { font-style: italic; }

.name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--ide-focus);
  background: var(--ide-editor);
  color: var(--ide-side-text);
  font: inherit;
  outline: none;
}

.name-input.invalid { border-color: var(--danger); }

.confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.confirm button {
  padding: 0 6px;
  border: 1px solid var(--ide-border);
  border-radius: 3px;
  background: var(--ide-editor);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.crumb-actions { margin-left: auto; display: inline-flex; }

.edit-wrap {
  position: relative;
  flex: 1 0 auto;
}

.edit-wrap pre.code { min-height: 100%; }

.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4px 24px 16px 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--ide-code-text);
  font-family: ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  font-variant-ligatures: none;
  tab-size: 4;
  white-space: pre;
  overflow: hidden;
  resize: none;
  outline: none;
}

.code-input::selection { background: rgba(0, 120, 215, 0.3); color: transparent; }

/* Mobile: collapsible explorer above the editor */
@media (max-width: 720px) {
  .ide,
  .ide.explorer-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
  }

  .explorer {
    border-right: 0;
    border-bottom: 1px solid var(--ide-border);
    max-height: 40vh;
  }

  .ide.explorer-collapsed .explorer-head span { display: inline; }

  .code-scroll { max-height: 70vh; }
  .code-scroll pre { font-size: 12px; line-height: 18px; }
  .code-scroll .gutter { min-width: 36px; padding-right: 12px; }
  .code-input { font-size: 12px; line-height: 18px; }
}

.unlock-form {
  display: grid;
  gap: 8px;
  max-width: 280px;
}

.unlock-form label { font-size: 0.9rem; }

.unlock-form input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.unlock-form button,
dialog.pin-dialog button[type="submit"] {
  font: inherit;
  font-weight: 600;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

.unlock-form button:hover,
dialog.pin-dialog button[type="submit"]:hover { filter: brightness(1.1); }

.unlock-form input:focus-visible,
.unlock-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.unlock-error,
.pin-error { margin: 0; color: var(--danger); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
  .line-flash { animation-duration: 0.01ms; }
}