/* Base styles for the app shell, screens and item renderers. Values come from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--patina-font-body);
  font-size: var(--patina-size-body);
  line-height: var(--patina-line-height);
  color: var(--patina-color-text);
  background: var(--patina-color-bg);
}

h1, h2, h3, h4 { line-height: var(--patina-line-height-tight); margin: var(--patina-space-4) 0 var(--patina-space-2); }
h2 { font-size: var(--patina-size-h2); }
h3 { font-size: var(--patina-size-h3); }
h4 { font-size: var(--patina-size-h4); }
p, ul, ol { margin: var(--patina-space-2) 0; }
a { color: var(--patina-color-link); }
strong { font-weight: var(--patina-weight-strong); }
img { max-width: var(--patina-full); height: auto; }

:focus-visible {
  outline: var(--patina-focus-width) solid var(--patina-color-focus);
  outline-offset: var(--patina-focus-offset);
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.patina-visually-hidden {
  position: absolute;
  width: var(--patina-border-width);
  height: var(--patina-border-width);
  overflow: hidden;
  clip-path: var(--patina-clip-hidden);
  white-space: nowrap;
}

.patina-skip { position: absolute; left: var(--patina-space-2); top: var(--patina-space-2); padding: var(--patina-space-2); background: var(--patina-color-surface); }
.patina-skip:not(:focus) { clip-path: var(--patina-clip-hidden); }

.patina-header,
.patina-notices,
.patina-main {
  max-width: var(--patina-content-width);
  margin: 0 auto;
  padding: var(--patina-space-3);
}

.patina-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--patina-space-3);
  border-bottom: var(--patina-border-width) solid var(--patina-color-border);
}
.patina-title { margin: 0; font-size: var(--patina-size-title); }
.patina-nav { display: flex; gap: var(--patina-space-3); margin: 0; padding: 0; list-style: none; }
.patina-nav a[aria-current="page"] { font-weight: var(--patina-weight-strong); text-decoration-thickness: var(--patina-focus-width); }
.patina-main:focus { outline: none; }
.patina-main > div > h2:first-child { margin-top: 0; }
.patina-notices:empty { display: none; }

.patina-notice {
  padding: var(--patina-space-2) var(--patina-space-3);
  border: var(--patina-border-width) solid var(--patina-color-warning-border);
  border-left-width: var(--patina-accent-width);
  border-radius: var(--patina-radius);
  background: var(--patina-color-warning-bg);
}
.patina-notice + .patina-notice { margin-top: var(--patina-space-2); }

.patina-meta, .patina-note { color: var(--patina-color-muted); font-size: var(--patina-size-small); }

/* Buttons and button-like links */
.patina-button {
  display: inline-block;
  padding: var(--patina-space-2) var(--patina-space-3);
  border: var(--patina-border-width) solid var(--patina-color-button-bg);
  border-radius: var(--patina-radius);
  background: var(--patina-color-button-bg);
  color: var(--patina-color-button-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.patina-button-secondary { background: var(--patina-color-button-secondary-bg); color: var(--patina-color-button-secondary-text); }
.patina-button-danger { background: var(--patina-color-danger-bg); border-color: var(--patina-color-danger-bg); color: var(--patina-color-danger-text); }
.patina-button-small { padding: var(--patina-space-1) var(--patina-space-2); font-size: var(--patina-size-small); }
.patina-button:disabled { background: var(--patina-color-disabled); border-color: var(--patina-color-border); color: var(--patina-color-muted); cursor: default; }
.patina-actions { display: flex; flex-wrap: wrap; gap: var(--patina-space-2); margin: var(--patina-space-3) 0; }

/* Module picker and progress */
.patina-cards, .patina-kc-list, .patina-unavailable { padding: 0; list-style: none; }
.patina-card {
  margin: var(--patina-space-3) 0;
  padding: var(--patina-space-3);
  border: var(--patina-border-width) solid var(--patina-color-border);
  border-radius: var(--patina-radius);
  background: var(--patina-color-surface);
}
.patina-card h3 { margin-top: 0; }
.patina-flag {
  margin-left: var(--patina-space-2);
  padding: 0 var(--patina-space-2);
  border: var(--patina-border-width) solid var(--patina-color-border-strong);
  border-radius: var(--patina-radius);
  background: var(--patina-color-flag-bg);
  font-size: var(--patina-size-small);
  font-weight: normal;
}
.patina-kc-list li { padding: var(--patina-space-1) 0; }

/* Items */
.patina-item {
  padding: var(--patina-space-3);
  border: var(--patina-border-width) solid var(--patina-color-border);
  border-radius: var(--patina-radius);
  background: var(--patina-color-surface);
}
.patina-item-heading, .patina-item > h3 { margin-top: 0; }
.patina-field { display: flex; flex-direction: column; gap: var(--patina-space-1); margin: var(--patina-space-3) 0; }
.patina-input, .patina-textarea {
  max-width: var(--patina-full);
  padding: var(--patina-space-2);
  border: var(--patina-border-width) solid var(--patina-color-border-strong);
  border-radius: var(--patina-radius);
  font: inherit;
}
.patina-input { width: var(--patina-input-width); }
.patina-textarea { width: var(--patina-full); }
.patina-options { margin: var(--patina-space-3) 0; padding: var(--patina-space-2) var(--patina-space-3); border: var(--patina-border-width) solid var(--patina-color-border); border-radius: var(--patina-radius); }
.patina-option { display: flex; align-items: baseline; gap: var(--patina-space-2); padding: var(--patina-space-1) 0; }
.patina-help { margin: var(--patina-space-3) 0; }
.patina-hints li, .patina-solution { margin: var(--patina-space-2) 0; }
.patina-solution { padding: var(--patina-space-2) var(--patina-space-3); border-left: var(--patina-accent-width) solid var(--patina-color-border-strong); }
.patina-feedback:not(:empty) {
  margin: var(--patina-space-3) 0;
  padding: var(--patina-space-2) var(--patina-space-3);
  border: var(--patina-border-width) solid var(--patina-color-border-strong);
  border-left-width: var(--patina-accent-width);
  border-radius: var(--patina-radius);
}
.patina-feedback[data-result="correct"] { background: var(--patina-color-correct-bg); border-color: var(--patina-color-correct-border); }
.patina-feedback[data-result="incorrect"] { background: var(--patina-color-incorrect-bg); border-color: var(--patina-color-incorrect-border); }
.patina-outcome { font-weight: var(--patina-weight-strong); }

code, .patina-answer-text { font-family: var(--patina-font-mono); font-size: var(--patina-size-code); }
.patina-code {
  margin: var(--patina-space-2) 0;
  padding: var(--patina-space-2) var(--patina-space-3);
  border-radius: var(--patina-radius);
  background: var(--patina-color-code-bg);
  white-space: pre-wrap;
}
.patina-steps > li { margin: var(--patina-space-3) 0; }
.patina-subgoal { margin-bottom: 0; }
.patina-lesson, .patina-procedure { margin: var(--patina-space-2) 0 var(--patina-space-3); }
.patina-lesson summary { cursor: pointer; }
.patina-rubric { padding: 0; list-style: none; }
.patina-rubric li { display: flex; align-items: baseline; gap: var(--patina-space-2); }

/* Parsons problems */
.patina-label { font-weight: var(--patina-weight-strong); }
.patina-parsons-list { margin: var(--patina-space-2) 0; padding-left: var(--patina-space-4); }
.patina-parsons-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--patina-space-2);
  margin: var(--patina-space-1) 0;
  padding: var(--patina-space-1) var(--patina-space-2);
  border: var(--patina-border-width) solid var(--patina-color-border);
  border-radius: var(--patina-radius);
  background: var(--patina-color-code-bg);
}
.patina-parsons-line { white-space: pre; }
.patina-parsons-controls { display: flex; flex-wrap: wrap; gap: var(--patina-space-1); }
.patina-parsons-program li[data-indent="1"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 1); }
.patina-parsons-program li[data-indent="2"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 2); }
.patina-parsons-program li[data-indent="3"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 3); }
.patina-parsons-program li[data-indent="4"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 4); }
.patina-parsons-program li[data-indent="5"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 5); }
.patina-parsons-program li[data-indent="6"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 6); }
.patina-parsons-program li[data-indent="7"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 7); }
.patina-parsons-program li[data-indent="8"] .patina-parsons-line { margin-left: calc(var(--patina-indent-step) * 8); }

.patina-confirm { padding: var(--patina-space-2) var(--patina-space-3); border-left: var(--patina-accent-width) solid var(--patina-color-incorrect-border); }

/* Code items: editor, gaps, output and test results */
.patina-mono, .patina-gap, .patina-editor-lines, .patina-editor-text {
  font-family: var(--patina-font-mono);
  font-size: var(--patina-size-code);
  line-height: var(--patina-line-height);
}
.patina-editor {
  display: flex;
  border: var(--patina-border-width) solid var(--patina-color-border-strong);
  border-radius: var(--patina-radius);
  background: var(--patina-color-surface);
}
.patina-editor-lines {
  margin: 0;
  padding: var(--patina-space-2);
  overflow: hidden;
  border-right: var(--patina-border-width) solid var(--patina-color-border);
  background: var(--patina-color-code-bg);
  color: var(--patina-color-muted);
  text-align: right;
  user-select: none;
}
.patina-editor-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--patina-space-2);
  border: 0;
  resize: vertical;
  white-space: pre;
  tab-size: 4;
}
.patina-gap {
  padding: 0 var(--patina-space-1);
  border: var(--patina-border-width) solid var(--patina-color-border-strong);
  border-radius: var(--patina-radius);
  background: var(--patina-color-surface);
}
.patina-output { margin: var(--patina-space-2) 0; }
.patina-tests { padding: 0; list-style: none; }
.patina-tests li { padding-left: var(--patina-space-2); border-left: var(--patina-accent-width) solid var(--patina-color-correct-border); }
.patina-tests li[data-passed="false"] { border-left-color: var(--patina-color-incorrect-border); }
.patina-feedback[data-result="busy"] { color: var(--patina-color-muted); }

/* Labs */
.patina-lab-steps > li { margin: var(--patina-space-2) 0; padding: var(--patina-space-2) var(--patina-space-3); border-left: var(--patina-accent-width) solid var(--patina-color-border-strong); }
.patina-lab-steps > li[data-state="done"] { border-left-color: var(--patina-color-correct-border); color: var(--patina-color-muted); }