/* Cartesian School — interactive practice page (first-party Pyodide runner).
   Reuses design tokens from theory.css — see that file's :root block. */

/* theory.css disables JetBrains Mono's operator ligatures (!=, ==, <=, >=,
   ->) for `code, pre, .mono`, but the live CodeMirror editor and the
   notebook's own output/input panes below are plain <div>s with their own
   classes, so that rule never reaches them. This is the highest-stakes
   spot for the ligature confusion of all: a learner typing != into the
   editor would watch it visually collapse into ≠ as they type, which is
   exactly the "where is that symbol on my keyboard?" trap a beginner
   course must not set. Same reset, scoped to every JetBrains-Mono surface
   defined further down this file. */
.cm-editor, .cm-content,
.nb-exec-count, .nb-output-stdout, .nb-output-result, .nb-output-stderr,
.nb-error-message, .nb-input-field, .nb-cell-markdown code,
.practice-version-label, .practice-fs-notice code {
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}

.practice-header {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  padding: var(--spacing-lg) var(--spacing-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 12px 24px -12px rgba(0,0,0,.4);
}
.practice-header .brand { display: flex; align-items: center; gap: 10px; }
.practice-header .brand img { height: 32px; width: 32px; display: block; }
.practice-header .brand-word {
  font-weight: 700; font-size: 20px; line-height: 1; display: inline-flex; align-items: baseline;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.practice-header .brand-word .school { font-size: inherit; font-weight: inherit; color: var(--blue-300); }
.practice-titles { text-align: right; }
.practice-chapter { font-size: 12px; color: var(--blue-300); text-transform: uppercase; letter-spacing: .04em; }
.practice-lesson { font-weight: 600; font-size: 15px; }

.practice-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-canvas);
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--spacing-md) var(--spacing-2xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.practice-toolbar button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-canvas);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.practice-toolbar button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.practice-toolbar button:disabled { opacity: .5; cursor: not-allowed; }
.practice-toolbar .btn-primary { background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #fff; }
.practice-toolbar .btn-finish { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.practice-version-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--color-text-muted); margin-left: auto; }
.practice-status { font-size: 13px; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-bg-surface); }
.practice-status-loading { background: var(--color-callout-info-bg); }
.practice-status-ready { background: #dcfce7; }
.practice-status-error { background: var(--color-callout-security-bg); color: var(--red-500); }

.practice-body {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--spacing-2xl);
}

.practice-fs-notice {
  background: var(--color-callout-info-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  font-size: 14px;
  line-height: 1.5;
}
.practice-fs-notice code { font-family: 'JetBrains Mono', monospace; font-size: .9em; }

.nb-cell { margin-bottom: var(--spacing-lg); }
.nb-cell-markdown h1, .nb-cell-markdown h2, .nb-cell-markdown h3 { margin: var(--spacing-md) 0 var(--spacing-sm); }
.nb-cell-markdown p { margin-bottom: var(--spacing-sm); line-height: 1.6; }
.nb-cell-markdown code { background: var(--color-bg-surface); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: .9em; }

.nb-cell-code {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.nb-cell-code.nb-cell-ok { border-color: var(--green-500); }
.nb-cell-code.nb-cell-error { border-color: var(--red-500); }

.nb-code-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 10px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
}
.nb-run-cell {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-canvas);
  cursor: pointer;
}
.nb-run-cell:disabled { opacity: .5; cursor: wait; }
.nb-exec-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--color-text-muted); }

.nb-editor-mount .cm-editor { font-family: 'JetBrains Mono', monospace; }
.nb-editor-mount .cm-scroller { padding: 8px 4px; }

.nb-cell-output { padding: 0 10px; }
.nb-cell-output:empty { padding: 0; }
.nb-output-stdout, .nb-output-result {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  padding: 8px 4px;
  margin: 0;
}
.nb-output-result { color: var(--color-text-muted); }
.nb-output-display-html {
  padding: 8px 4px;
  margin: 4px 0;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
}
.nb-output-stderr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  color: var(--amber-500);
  padding: 8px 4px;
  margin: 0;
}
.nb-output-error {
  background: var(--color-callout-security-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 8px 0;
}
.nb-error-title { font-weight: 700; color: var(--red-500); margin-bottom: 4px; }
.nb-error-message { font-family: 'JetBrains Mono', monospace; font-size: 13px; white-space: pre-wrap; margin: 0; }

.nb-input-echo { color: var(--color-text-muted); }
.nb-input-prompt {
  display: flex;
  gap: var(--spacing-sm);
  padding: 4px 4px 10px;
}
.nb-input-field {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-canvas);
}
.nb-input-submit {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.practice-result-panel:empty { display: none; }
.practice-result {
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}
.practice-result-pass { background: #dcfce7; border: 1px solid var(--green-500); }
.practice-result-fail { background: var(--color-callout-security-bg); border: 1px solid var(--red-500); }
.practice-result-headline { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.practice-result-score { font-weight: 600; margin-bottom: var(--spacing-sm); }
.practice-result-checks { list-style: none; }
.practice-result-checks li { padding: 3px 0; font-size: 14px; }
.check-pass { color: #15803d; }
.check-fail { color: var(--red-500); }

.practice-download {
  display: block;
  text-align: center;
  margin-top: var(--spacing-2xl);
  font-size: 13px;
  color: var(--color-text-muted);
}

.practice-unsupported {
  max-width: 640px;
  margin: var(--spacing-3xl) auto;
  text-align: center;
  padding: var(--spacing-2xl);
}
.practice-unsupported h2, .practice-unsupported h1 { margin-bottom: var(--spacing-md); }
.practice-unsupported p { margin-bottom: var(--spacing-lg); line-height: 1.6; text-align: left; }
.practice-unsupported .actions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--spacing-xl); }

.local-required-badge {
  display: inline-block;
  background: var(--color-callout-warning-bg);
  color: var(--amber-500);
  border: 1px solid var(--amber-500);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}
.practice-unsupported .practice-chapter { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

.btn-primary, .btn-secondary {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.btn-primary { background: var(--color-brand-blue); border: 1px solid var(--color-brand-blue); color: #fff; }
.btn-secondary { background: var(--color-bg-canvas); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }

.local-instructions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  text-align: left;
}
.instruction-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.instruction-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.instruction-card h3 { font-size: 14px; margin-bottom: var(--spacing-sm); }
.instruction-card p { font-size: 13px; margin-bottom: 0; }

.local-setup-contract {
  margin: 0 0 var(--spacing-xl);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  text-align: left;
}
.local-setup-contract h2 { font-size: 18px; }
.local-setup-contract pre {
  max-width: 100%;
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-md);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: #111827;
  color: #f8fafc;
  text-align: left;
}
.local-setup-contract code { font-family: var(--font-mono); font-size: 12px; }
.local-setup-contract p:last-child { margin-bottom: 0; }

.local-complete-block { text-align: center; margin-bottom: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-default); }
.local-complete-status { margin-top: var(--spacing-sm); font-size: 14px; }

.practice-route-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: 14px;
}
.practice-return, .practice-next { display: block; }

@media (max-width: 700px) {
  .local-instructions { grid-template-columns: 1fr; }
  .practice-route-links { flex-direction: column; }
}

@media (max-width: 700px) {
  .practice-header { flex-direction: column; align-items: flex-start; }
  .practice-titles { text-align: left; }
  .practice-toolbar { position: static; }
  .practice-version-label { margin-left: 0; }
  .practice-toolbar button { min-height: 44px; padding: 10px 16px; }
  .nb-run-cell { min-height: 44px; padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-toolbar button, .instruction-card { transition: none; }
}