/* Notenschlüssel – layout on top of Basecoat's design tokens.
   The CDN build ships component classes only (no Tailwind utilities),
   so everything positional lives here.
   Sizing is tuned so the longest table (16 rows) fits an iPhone screen
   without scrolling; the max-height queries at the end tighten it further
   on shorter devices. */

:root {
  --header-h: 2.5rem;
  --row-h: 1.875rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-background, #fff);
  color: var(--color-foreground, #0a0a0a);
  /* pinned to system fonts: nothing is fetched, and the app looks the same everywhere */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-sans);
  font-size: var(--text-sm, .875rem);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ---------- header ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in oklab, var(--color-background, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.app-header-inner {
  max-width: 28rem;
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.app-header h1 {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

#theme-toggle {
  height: 2rem;
  width: 2rem;
  flex: none;
}
#theme-toggle .icon { width: 1.05rem; height: 1.05rem; }
.icon-sun { display: none; }
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }

/* ---------- layout ---------- */

main {
  max-width: 28rem;
  margin-inline: auto;
  padding: .625rem max(.75rem, env(safe-area-inset-left))
           calc(.75rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

/* ---------- controls ---------- */

.controls { display: flex; flex-direction: column; gap: .5rem; }

.controls-row { display: flex; align-items: flex-end; gap: .5rem; }

.control { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.control-grow { flex: 1 1 auto; }
/* the step toggle keeps its natural width, the BE field absorbs the rest;
   without this it shrinks below its content and the third button spills out */
.controls-row > .control:not(.control-grow) { flex: none; min-width: auto; }

.control > label,
.control-label {
  font-size: .8125rem;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: var(--color-muted-foreground, #737373);
}

.control .select,
.control .input {
  width: 100%;
  height: 2.5rem;
  /* exactly 16px: below that, iOS Safari zooms the page in on focus */
  font-size: 16px;
}
.control .input { font-variant-numeric: tabular-nums; }

/* segmented 1 / 0,5 / 0,25 – mirrors Basecoat's .tabs styling */
.segmented {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 3px;
  border-radius: var(--radius-lg, .625rem);
  background: var(--color-muted, #f5f5f5);
}

.segmented [role="radio"] {
  flex: 1;
  min-width: 2.5rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md, calc(.625rem - 2px));
  background: transparent;
  color: color-mix(in oklab, var(--color-foreground, #0a0a0a) 60%, transparent);
  font: inherit;
  font-size: .875rem;
  font-weight: var(--font-weight-medium, 500);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.segmented [role="radio"][aria-checked="true"] {
  background: var(--color-background, #fff);
  color: var(--color-foreground, #0a0a0a);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

html.dark .segmented [role="radio"][aria-checked="true"] {
  border-color: var(--color-input, #ffffff26);
  background: color-mix(in oklab, var(--color-input, #ffffff26) 30%, transparent);
  box-shadow: none;
}

.segmented [role="radio"]:focus-visible {
  outline: 2px solid var(--color-ring, #a3a3a3);
  outline-offset: 2px;
}

/* ---------- table ---------- */

.table { font-size: .875rem; }

.table thead th {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 10;
  height: var(--row-h);
  padding-inline: .5rem;
  background: var(--color-background, #fff);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted-foreground, #737373);
}

.table td {
  height: var(--row-h);
  /* Basecoat pads td 8px block-wise, which would win over the row height */
  padding-block: 0;
  padding-inline: .5rem;
}

/* stripes instead of per-row rules: easier to track a row, less visual noise */
.table tbody tr { border-bottom: 0; }
.table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--color-muted, #f5f5f5) 65%, transparent);
}
html.dark .table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--color-muted, #262626) 45%, transparent);
}

.table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.table td.grade { font-weight: var(--font-weight-medium, 500); }
.table td.be { font-weight: 600; }

/* first row below the pass mark */
.table tbody tr.fail-start > td {
  border-top: 2px solid color-mix(in oklab, var(--color-muted-foreground, #737373) 45%, transparent);
}

.table tbody tr.is-fail > td.grade,
.table tbody tr.is-fail > td.pct { color: var(--color-muted-foreground, #737373); }

/* no hover tint on touch devices – it would fight the stripes */
@media (hover: none) {
  .table tr:hover { background: transparent; }
  .table tbody tr:nth-child(even):hover {
    background: color-mix(in oklab, var(--color-muted, #f5f5f5) 65%, transparent);
  }
  html.dark .table tbody tr:nth-child(even):hover {
    background: color-mix(in oklab, var(--color-muted, #262626) 45%, transparent);
  }
}

/* ---------- shorter screens ---------- */

@media (max-height: 740px) {
  :root { --row-h: 1.75rem; }
  .table { font-size: .8125rem; }
}

@media (max-height: 670px) {
  :root { --header-h: 2.25rem; --row-h: 1.625rem; }
  main { gap: .5rem; padding-top: .5rem; }
  .controls { gap: .375rem; }
  .control .select, .control .input, .segmented { height: 2.25rem; }
}