/*
 * Bolandila Learning — base styles. Mobile first: everything below is the phone layout, wider screens add to it
 * (min-width queries at 640 / 1024). Colours come from themes.css (generated from palettes.json).
 *
 * Noise glass: .glass = translucent surface + backdrop blur + a tiled SVG noise grain (::before).
 * Use it on containers (cards, bars, dialogs), never on every row of a long list; rows use .tile.
 */

:root {
  --font-body: "Sofia Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "Sofia Sans Semi Condensed", "Sofia Sans", "Segoe UI", system-ui, sans-serif;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(14px, 4vw, 28px);
  --tap: 48px;
  --glass-blur: 12px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -24px rgb(0 0 0 / .5);
  --noise-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .6 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --glass-blur: 18px; } }

[data-theme="light"] { --noise: var(--noise-black); --noise-opacity: .07; --glass-alpha: 84%; --glass-edge: rgb(255 255 255 / .7); }
[data-theme="dark"] { --noise: var(--noise-white); --noise-opacity: .09; --glass-alpha: 80%; --glass-edge: rgb(255 255 255 / .09); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 16px/1.5 var(--font-body);
  overflow-wrap: anywhere;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img, svg, canvas, video { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: .005em; }
h1 { font-size: clamp(26px, 5vw, 38px); }
h2 { font-size: clamp(21px, 3.5vw, 28px); }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
a { color: var(--c-link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
/* A class that sets display must never keep an element with the hidden attribute on screen. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--c-muted); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; }
.hide-sm { display: none !important; }
@media (min-width: 640px) { .hide-sm { display: revert !important; } .only-sm { display: none !important; } }

/* Soft colour behind the glass, so the blur has something to blur. Static: no animation, cheap on phones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--c-bg);
}
@supports (color: color-mix(in srgb, red, blue)) {
  body::before {
    background:
      radial-gradient(60vmax 60vmax at 8% -6%, color-mix(in srgb, var(--c-primary) 24%, transparent), transparent 70%),
      radial-gradient(50vmax 50vmax at 100% 8%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 70%),
      radial-gradient(60vmax 60vmax at 70% 108%, color-mix(in srgb, var(--c-chart-2) 14%, transparent), transparent 70%),
      var(--c-bg);
  }
}

/* ---- Noise glass --------------------------------------------------------------------------------------------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .glass { background: color-mix(in srgb, var(--c-surface) var(--glass-alpha), transparent); }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); }
}
.glass::before, .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--noise);
  background-size: 160px 160px;
  opacity: var(--noise-opacity);
  pointer-events: none;
}
/* A row of a long list: opaque, with the grain but without the (costly) blur. */
.tile { position: relative; isolation: isolate; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--c-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before, .tile::before { display: none; }
}
@media (prefers-contrast: more) {
  .glass { background: var(--c-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--c-text); }
  .glass::before, .tile::before { display: none; }
}

/* ---- Buttons ------------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font: 700 16px/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .btn { box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c-primary) 80%, transparent); }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); box-shadow: none; }
.btn.danger { background: var(--c-danger); color: #fff; box-shadow: none; }
.btn.small { min-height: 40px; padding: 6px 16px; font-size: 14px; }
.btn.big { min-height: 60px; padding: 14px 40px; font-size: 22px; }
.btn.block { display: flex; width: 100%; }
.icon-btn { min-width: var(--tap); padding: 0; }

/* ---- Forms --------------------------------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 16px; }
.field > span, .field > label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font: 400 16px/1.4 var(--font-body); /* 16px: iOS does not zoom into the field */
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { border-color: var(--c-primary); outline: 3px solid var(--c-primary); outline-offset: 0; }
.help { color: var(--c-muted); font-size: 14px; margin-top: 4px; }
.error { color: var(--c-danger); font-weight: 600; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; }
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--c-primary); }
.alert { padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); }
.alert.error { border-color: var(--c-danger); }
.alert.ok { border-color: var(--c-success); }
.fields-2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .fields-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Chips, stats, tables ----------------------------------------------------------------------------------- */
.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font: 700 12px/1.6 var(--font-body); background: var(--c-surface-2); color: var(--c-link); border: 1px solid var(--c-line); white-space: nowrap; }
.chip.run { color: var(--c-success); border-color: var(--c-success); }
.chip.wait { color: var(--c-warning); border-color: var(--c-warning); }
.chip.stop { color: var(--c-muted); }
.chip.hot { color: var(--c-danger); border-color: var(--c-danger); }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.card { padding: 18px; }
.stat b { display: block; font: 800 34px/1.1 var(--font-display); }
.stat span { color: var(--c-muted); font-size: 14px; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--c-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--c-line); }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
/* Phones: every row becomes a small card, the column titles come from data-label. */
@media (max-width: 719px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { margin-bottom: 12px; padding: 6px 14px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 8px 0; text-align: right; }
  .table td::before { content: attr(data-label); color: var(--c-muted); font-size: 13px; font-weight: 700; text-align: left; }
  .table td.actions { justify-content: flex-start; flex-wrap: wrap; }
  .table td.actions::before { display: none; }
}

/* ---- Admin shell: off-canvas menu on phones, fixed sidebar from 1024px -------------------------------------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--gutter);
  padding-top: calc(8px + env(safe-area-inset-top));
  border-radius: 0;
  border-width: 0 0 1px;
}
.topbar .brand { font: 800 21px var(--font-display); text-decoration: none; color: var(--c-text); display: flex; align-items: center; gap: 8px; margin-right: auto; }
.brand .logo { height: 26px; width: auto; flex: none; color: var(--c-text); }
.brand span { white-space: nowrap; }
.legal { margin: 0; padding: 4px 0; font-size: 13px; color: var(--c-muted); text-align: center; }
.legal a { color: inherit; }
.legal-bar { padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .shell > .legal-bar { grid-column: 2; } }
.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: min(86vw, 300px);
  padding: calc(16px + env(safe-area-inset-top)) 14px 16px;
  overflow-y: auto;
  transform: translateX(-105%);
  transition: transform .25s var(--ease);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.sidebar[data-open="true"] { transform: none; }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.nav small { display: block; margin: 16px 10px 6px; color: var(--c-muted); font-weight: 700; letter-spacing: .08em; font-size: 11px; text-transform: uppercase; }
.nav a { display: flex; align-items: center; min-height: var(--tap); padding: 8px 14px; border-radius: var(--r-md); color: var(--c-text); text-decoration: none; font-weight: 600; }
.nav a[aria-current="page"] { background: var(--c-surface-2); color: var(--c-link); border: 1px solid var(--c-line); }
.sidebar-foot { margin-top: 24px; }
.page { padding: 20px var(--gutter) calc(48px + env(safe-area-inset-bottom)); max-width: 1240px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 264px 1fr; align-items: start; }
  .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; transform: none; width: auto; border-radius: 0; border-width: 0 1px 0 0; grid-row: 1 / span 2; }
  .shell > .topbar { grid-column: 2; }
  .shell > .page { grid-column: 2; width: 100%; }
  .menu-btn, .scrim { display: none !important; }
}

/* ---- Theme switcher ------------------------------------------------------------------------------------------ */
.seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; }
.seg button { min-width: 44px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--c-text); font: 600 14px var(--font-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }
.dots { display: flex; gap: 8px; flex-wrap: wrap; }
/* Every dot (and every preview below) carries data-theme + data-palette, so it paints itself with its own palette. */
.dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-line); padding: 0; cursor: pointer; background: conic-gradient(from 45deg, var(--c-primary) 0 50%, var(--c-accent) 0 75%, var(--c-link) 0); }
.dot[aria-pressed="true"] { outline: 3px solid var(--c-text); outline-offset: 2px; }

/* Palette cards: the colours of a palette, in the light and in the dark theme, before you choose it. */
.palette-picker { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.palette-picker legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.palette-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.palette-card { position: relative; display: block; cursor: pointer; }
.palette-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.palette-body { display: grid; gap: 8px; align-content: start; height: 100%; padding: 10px; border: 2px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); transition: border-color .15s, box-shadow .15s; }
.palette-card:hover .palette-body { border-color: var(--c-muted); }
.palette-card input:checked + .palette-body { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary); }
.palette-card input:focus-visible + .palette-body { outline: 3px solid var(--c-text); outline-offset: 3px; }
.palette-card-default .palette-body { place-content: center; text-align: center; min-height: 92px; }
.palette-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv { display: grid; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text); }
.pv-btn { display: grid; place-items: center; height: 26px; border-radius: 999px; background: var(--c-primary); color: var(--c-on-primary); font: 700 13px var(--font-body); }
.pv-strip { display: flex; gap: 3px; height: 10px; }
.pv-strip i { flex: 1; border-radius: 3px; }
.pv-strip i:nth-child(1) { background: var(--c-chart-1); }
.pv-strip i:nth-child(2) { background: var(--c-chart-2); }
.pv-strip i:nth-child(3) { background: var(--c-chart-3); }
.pv-strip i:nth-child(4) { background: var(--c-chart-4); }
.pv-strip i:nth-child(5) { background: var(--c-chart-5); }
.pv-strip i:nth-child(6) { background: var(--c-chart-6); }
.popover { position: absolute; right: var(--gutter); top: calc(100% + 8px); z-index: 50; width: min(92vw, 340px); padding: 16px; }
.popover[hidden] { display: none; }

/* ---- Dialog -------------------------------------------------------------------------------------------------- */
dialog.dialog { width: min(94vw, 480px); padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow); }
dialog.dialog::backdrop { background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.dialog h2 { margin-bottom: 8px; }
dialog.dialog .row { margin-top: 18px; justify-content: flex-end; }

/* ---- Login / simple centred pages --------------------------------------------------------------------------- */
.center-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: var(--gutter); }
.center-page > .panel { width: min(100%, 440px); }
.panel { width: min(100%, 440px); padding: clamp(20px, 5vw, 32px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

.narrow { max-width: 520px; }
.section-title { margin: 28px 0 12px; }
.brand-line { margin: 0 0 8px; }
.brand-line .brand { font: 800 21px var(--font-display); display: inline-flex; align-items: center; gap: 10px; }
.brand-line .brand .logo { height: 30px; color: var(--c-text); }

.type-cards .type-card { text-decoration: none; color: inherit; transition: transform .2s var(--ease); display: block; }
.type-cards .type-card:hover { transform: translateY(-2px); }
.type-cards .type-card h2 { margin-bottom: 6px; }
.join-box { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr-img { background: #fff; padding: 8px; border-radius: var(--r-md); width: 168px; height: 168px; }
.join-code { font: 800 36px/1.1 var(--font-display); letter-spacing: .14em; margin: 0 0 6px; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* „Ако-Тогава“: the tree on a canvas (the editor on the form, the picture on the page of the interaction) and the outline for pages without scripts.
   The sizes inside the boxes add up to the BOX numbers of public/js/admin/ifthen-layout.mjs: change one, change the other. */
.it-canvas { position: relative; overflow: auto; max-height: min(78vh, 900px); border: 1px solid var(--c-line); border-radius: var(--r-md); background-color: var(--c-surface-2); background-image: radial-gradient(var(--c-line) 1px, transparent 1px); background-size: 22px 22px; }
.it-stage { position: relative; min-width: 100%; }
.it-links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.it-link { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.it-link-a { stroke: var(--c-chart-1); }
.it-link-b { stroke: var(--c-chart-2); }
.it-arrow-head { fill: none; stroke: context-stroke; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.it-box { position: absolute; box-sizing: border-box; display: grid; grid-auto-rows: min-content; align-content: start; gap: 6px; padding: 10px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }
.it-box-final { border-style: dashed; border-color: var(--c-chart-3); }
.it-box-next { border-style: dashed; background: transparent; box-shadow: none; }
.it-head { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--c-muted); }
.it-head strong { font-weight: 700; }
.it-remove { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--c-muted); font: 400 18px/1 var(--font-body); cursor: pointer; }
.it-remove:hover { background: var(--c-surface-2); color: var(--c-danger); }
.it-box .it-field { min-height: 0; margin: 0; padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.3; }
.it-box textarea.it-field { height: 66px; resize: none; }
.it-box-final textarea.it-field { height: 76px; }
.it-opt { height: 34px; display: flex; align-items: center; gap: 6px; }
.it-opt .it-field { flex: 1 1 auto; min-width: 0; height: 34px; }
.it-box .it-tag { flex: none; min-width: 22px; height: 22px; padding: 0; font-size: 12px; }
.it-opt-b .it-tag { background: var(--c-chart-2); }
.it-pick { display: flex; gap: 6px; height: 34px; }
.it-pick .btn { flex: 1 1 0; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.it-text { font-size: 14px; line-height: 1.3; overflow: auto; overflow-wrap: anywhere; }
.it-box > .it-text { height: 66px; }
.it-box-final > .it-text { height: 76px; }
.it-text-line { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-status { margin: 8px 0 0; text-align: right; }
.it-status.warn { color: var(--c-text); font-weight: 600; }
.it-tag { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--c-chart-1); color: #fff; font: 800 14px var(--font-display); }
.it-tag-final { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-line); font-size: 12px; }
.ifthen-outline ul.it-options { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; display: grid; gap: 12px; border-left: 2px solid var(--c-line); }
.it-next { margin: 6px 0 0 8px; }
.it-q, .it-final { margin: 0; }
/* A training: its interactions in order, each with the tools to move, open or remove it. */
ol.training-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.training-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.training-no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: var(--c-on-primary); font: 800 16px var(--font-display); }
.stack-tight { display: grid; gap: 6px; min-width: 0; }
.training-tools { justify-content: flex-end; }
.training-tools form { margin: 0; }
.training-add { margin-top: 8px; }
@media (max-width: 720px) { .training-item { grid-template-columns: auto 1fr; } .training-tools { grid-column: 1 / -1; justify-content: flex-start; } }
/* Personal QR codes of a named poll: far apart on purpose, so a phone camera sees one code at a time. */
ul.personal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 32px 28px; justify-items: center; }
.personal-card { display: grid; gap: 10px; justify-items: center; text-align: center; }
.personal-card .qr-img { width: min(100%, 200px); height: auto; aspect-ratio: 1; padding: 10px; }
.personal-card strong { overflow-wrap: anywhere; }
.actions-bar { margin-top: 18px; }
.actions-bar form { margin: 0; }