/* Intrval · the app shell and the few controls the design didn't draw, in the same style.
   components.css is the design system's stylesheet, unchanged. */

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
#root { position: fixed; inset: 0; }
#root > .ls-app { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
button, input, textarea, select { font-family: inherit; }
[hidden] { display: none !important; }

/* The design's static screens clip; the real app scrolls its middle part. */
.ls-app-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ls-col--fill { flex: 1 0 auto; min-height: min-content; }
.ls-col--fill > * { flex-shrink: 0; }
.ls-app-body > .ls-col--fill { padding-bottom: var(--space-4); }
.ls-app--pad .ls-pane { overflow-y: auto; padding-bottom: var(--space-6); }
.ls-boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }

/* Session bar: undo in the middle, a quiet "more" button next to the counter. */
.ls-sbar-center { display: flex; justify-content: center; }
.ls-sbar-right { justify-self: end; display: flex; align-items: center; gap: var(--space-1); margin-right: -10px; }
.ls-more { appearance: none; border: 0; background: none; color: var(--ink-muted); width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border-radius: var(--radius-full); cursor: pointer; padding: 0; }
.ls-more:active { background: var(--surface-muted); }

/* A lecture row whose number and title open the lecture. */
.ls-lrow-open { appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: var(--tap-min); border-radius: var(--radius-md); }
.ls-lrow-open:active { background: var(--surface-muted); }

/* Text area and select, drawn like TextField. */
.ls-field-box--area { align-items: stretch; padding: var(--space-3) var(--space-4); }
.ls-field-area { resize: vertical; min-height: 96px; line-height: 24px; }
.ls-field-area.ls-mono { font-size: 14px; line-height: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ls-field-box--select { position: relative; padding: 0; }
.ls-field-select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px; padding: 0 44px 0 var(--space-4); border-radius: var(--radius-md); cursor: pointer; }
.ls-select-chev { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--ink-muted); pointer-events: none; }
.ls-field-input[type="date"] { min-height: 52px; }
.ls-form { display: flex; flex-direction: column; gap: var(--space-5); }
.ls-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ls-field-error { font-size: 13px; line-height: 18px; color: var(--missed); }

/* One choice out of several. */
.ls-choice { min-height: var(--row-min); }
.ls-choice-mark { color: var(--accent); flex: none; }
.ls-choice--on .ls-row-title { font-weight: 600; }
.ls-tickrow { min-height: var(--row-min); }

/* A calm note: the leech banner, "answer changed", a flag. */
.ls-note { display: flex; gap: var(--space-3); align-items: flex-start; box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 21px; color: var(--ink); }
.ls-note > .ls-icon { color: var(--ink-muted); margin-top: 1px; }
.ls-note-text { flex: 1; min-width: 0; }
.ls-note-title { font-weight: 600; margin-bottom: 2px; }
.ls-note-action { margin-top: var(--space-2); margin-left: calc(var(--space-3) * -1); }
.ls-notes { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

/* Small accent text buttons: "I guessed", "Undo", "Flag it". 48px tall for thumbs. */
.ls-link { appearance: none; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--accent); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); cursor: pointer; }
.ls-link:active { background: var(--surface-muted); }
.ls-link:disabled { opacity: .45; cursor: default; }
.ls-link:focus-visible, .ls-more:focus-visible, .ls-lrow-open:focus-visible, .ls-choice:focus-visible, .ls-field-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ls-after { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap-min); margin: 0 calc(var(--space-3) * -1); }
.ls-after .ls-result { padding: 0 var(--space-3); }
.ls-after-tags { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); }

/* Sheets: scroll when long; centred and narrower on iPad. */
.ls-sheet-body { overflow-y: auto; }
.ls-sheet { animation: ls-sheet-in .2s ease-out; }
.ls-sheet-scrim { animation: ls-fade-in .2s ease-out; }
@keyframes ls-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ls-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ls-sheet { animation: ls-fade-in .2s ease-out; } }
@media (min-width: 900px) {
  .ls-sheet { left: 50%; right: auto; width: min(560px, calc(100% - 96px)); transform: translateX(-50%); bottom: var(--space-8); border-radius: var(--radius-lg); max-height: 76%; }
  @keyframes ls-sheet-in { from { opacity: 0; } to { opacity: 1; } }
}
.ls-sheet-stack { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-2); }

/* Import preview: long lists stay readable. */
.ls-drop input[type="file"] { display: none; }
.ls-mini-list .ls-row { min-height: var(--row-min); }
.ls-status-line { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ls-status-line--missed { color: var(--missed); }
.ls-answer-changed { color: var(--ink-muted); }
.ls-center-caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; margin: var(--space-2) 0 0; }
.ls-options-static { margin-bottom: var(--space-2); }
.ls-facts .ls-imp-row:first-child { border-top: 0; padding-top: 0; }
.ls-facts .ls-imp-row:last-child { padding-bottom: 0; }
.ls-facts dd { text-align: right; }
.ls-after-links { display: flex; align-items: center; margin-left: auto; }