/* Learnie · Tengerpart
   One design system for every screen: tokens → base → controls → surfaces → screens → responsive.
   Theme declarations (the three :root blocks) are the only place with colour literals; components use semantic roles.
   Control boundaries and focus keep ≥3:1 contrast; separators may be subtler. */
:root{
  color-scheme:light dark;
  /* colour roles */
  --color-ground:#F5F8F5;
  --color-surface:#fff;
  --color-surface-raised:#EAF2EB;
  --color-ink:#12342F;
  --color-muted:#52675E;
  --color-line:#B7C8BD;
  --color-line-strong:#7F9488;
  --color-soft:#EAF2EB;
  --color-accent:#0F766E;
  --color-accent-secondary:#14B8A6;
  --color-gold:#FFB43C;
  --color-primary:var(--color-accent);
  --color-primary-hover:#0B5F59;
  --color-on-primary:#fff;
  --color-good:#0B6E56;
  --color-good-surface:#E0F3EC;
  --color-on-good:#fff;
  --color-error:#A82A35;
  --color-error-hover:#8A1F29;
  --color-error-surface:#FCEAEC;
  --color-on-error:#fff;
  --color-focus:#0A64C8;
  --color-control:#718278;
  --color-edge:var(--color-control);
  --color-track:#C5D3CA;
  /* elevation */
  --shadow-1:0 1px 2px rgb(18 52 47 / .07);
  --shadow-2:0 10px 28px rgb(18 52 47 / .16),0 2px 6px rgb(18 52 47 / .10);
  /* type scale */
  --text-meta:.8125rem;
  --text-small:.875rem;
  --text-body:1rem;
  --text-lead:1.125rem;
  --text-section:1.25rem;
  --text-title:clamp(1.5rem,3vw,1.875rem);
  --text-question:clamp(1.4rem,3vw,1.75rem);
  --weight-strong:600;
  --weight-bold:700;
  --font-body:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  /* spacing scale (4px base) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-panel:1.5rem;
  --space-gap:1.5rem;
  /* shape and size */
  --radius-panel:.75rem;
  --radius-control:.5rem;
  --radius-round:999px;
  --size-touch:2.75rem;
  --size-reading:56.25rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-ground:#142320;
    --color-surface:#1D302B;
    --color-surface-raised:#1D302B;
    --color-ink:#EDF8F3;
    --color-muted:#BACBC2;
    --color-line:#48584F;
    --color-line-strong:#6B8379;
    --color-soft:#243C35;
    --color-accent:#65D5BF;
    --color-accent-secondary:#65D5BF;
    --color-gold:#F3BE60;
    --color-primary-hover:#85E5D0;
    --color-on-primary:#142320;
    --color-good:#65D5BF;
    --color-good-surface:#1D4038;
    --color-on-good:#142320;
    --color-error:#FF9A9F;
    --color-error-hover:#FFB6BA;
    --color-error-surface:#4A252A;
    --color-on-error:#142320;
    --color-focus:#9DE8D8;
    --color-control:#8DA69A;
    --color-track:#48584F;
    --shadow-1:0 1px 2px rgb(0 0 0 / .30);
    --shadow-2:0 12px 30px rgb(0 0 0 / .50),0 2px 6px rgb(0 0 0 / .35);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-ground:#142320;
  --color-surface:#1D302B;
  --color-surface-raised:#1D302B;
  --color-ink:#EDF8F3;
  --color-muted:#BACBC2;
  --color-line:#48584F;
  --color-line-strong:#6B8379;
  --color-soft:#243C35;
  --color-accent:#65D5BF;
  --color-accent-secondary:#65D5BF;
  --color-gold:#F3BE60;
  --color-primary-hover:#85E5D0;
  --color-on-primary:#142320;
  --color-good:#65D5BF;
  --color-good-surface:#1D4038;
  --color-on-good:#142320;
  --color-error:#FF9A9F;
  --color-error-hover:#FFB6BA;
  --color-error-surface:#4A252A;
  --color-on-error:#142320;
  --color-focus:#9DE8D8;
  --color-control:#8DA69A;
  --color-track:#48584F;
  --shadow-1:0 1px 2px rgb(0 0 0 / .30);
  --shadow-2:0 12px 30px rgb(0 0 0 / .50),0 2px 6px rgb(0 0 0 / .35);
}
:root[data-theme="light"]{ color-scheme:light; }

/* ───────────── Base ───────────── */
*{
  box-sizing:border-box;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  color:var(--color-ink);
  background-color:var(--color-ground);
  font:var(--text-body)/1.5 var(--font-body);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{
  font:inherit;
}
[hidden]{ display:none !important; }
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
a{
  color:var(--color-accent);
  text-underline-offset:.2em;
}
/* `anywhere` lets controls shrink below their longest word, so 200% text zoom never forces horizontal scrolling. */
button,a,summary,.file-button{
  overflow-wrap:anywhere;
}
.muted{
  color:var(--color-muted);
  font-weight:400;
}
.shell{
  max-width:var(--size-reading);
  margin:0 auto;
  padding:var(--space-6) var(--space-5) var(--space-7);
}
.shell.auth-shell{
  max-width:36rem;
  padding-block:clamp(1.5rem,5vh,3rem) calc(2rem + env(safe-area-inset-bottom));
}
.skip-link{
  position:absolute;
  top:-10rem;
  left:var(--space-4);
  z-index:20;
  padding:.75rem 1rem;
  background:var(--color-surface);
  color:var(--color-ink);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-2);
}
.skip-link:focus{
  position:fixed;
  top:calc(.75rem + env(safe-area-inset-top));
}

/* Headings: one scale. h1 = screen title, h2 = section, h3 = item. */
h1,h2,h3{
  margin:0;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{
  font-size:var(--text-title);
  line-height:1.25;
  font-weight:var(--weight-bold);
  overflow-wrap:break-word;
}
h2{
  font-size:var(--text-section);
  line-height:1.3;
  overflow-wrap:anywhere;
}
h3{
  font-size:var(--text-lead);
  line-height:1.35;
  font-weight:var(--weight-bold);
  overflow-wrap:break-word;
}
.dashboard-title>p,.creation-intro,.auth-heading>p{
  color:var(--color-muted);
  margin:var(--space-2) 0 0;
  max-width:42rem;
}

/* Icons are drawn with CSS shapes and follow currentColor. The server's CSP allows only same-origin images,
   so there are no data: URIs, and decorative icons add no markup weight for assistive technology. */
.icon{
  position:relative;
  display:inline-block;
  flex:none;
  width:1.25em;
  height:1.25em;
  font-size:1em;
}
.icon::before,.icon::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
}
.icon-plus::before{ left:15%; right:15%; top:calc(50% - .08em); height:.16em; background:currentColor; border-radius:.1em; }
.icon-plus::after{ top:15%; bottom:15%; left:calc(50% - .08em); width:.16em; background:currentColor; border-radius:.1em; }
.icon-check::before{ left:32%; top:12%; width:.36em; height:.7em; border:solid currentColor; border-width:0 .16em .16em 0; transform:rotate(45deg); }
.icon-chevron-down::before{ left:calc(50% - .24em); top:calc(50% - .34em); width:.48em; height:.48em; border:solid currentColor; border-width:0 .16em .16em 0; transform:rotate(45deg); }
/* Arrows share one drawing: a shaft plus a head; the other directions rotate or mirror it. */
.icon-arrow-right::before,.icon-arrow-left::before,.icon-download::before,.icon-upload::before{ left:12%; right:12%; top:calc(50% - .08em); height:.16em; background:currentColor; border-radius:.1em; }
.icon-arrow-right::after,.icon-arrow-left::after,.icon-download::after,.icon-upload::after{ right:14%; top:calc(50% - .3em); width:.6em; height:.6em; border:solid currentColor; border-width:.16em .16em 0 0; transform:rotate(45deg); }
.icon-arrow-left{ transform:scaleX(-1); }
.icon-download{ transform:rotate(90deg); }
.icon-upload{ transform:rotate(-90deg); }

/* Focus: one ring for every interactive control. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,
.file-button:has(input:focus-visible){
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}
#screen-title:focus,#feedback:focus,#auth-title:focus,#auth-error:focus,#creation-error:focus,#account-message:focus{
  outline:none;
}
#screen-title:focus-visible,#feedback:focus-visible,#auth-title:focus-visible,#auth-error:focus-visible,#creation-error:focus-visible,#account-message:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:4px;
}
#screen-title:focus-visible{ outline:none; }

/* ───────────── Buttons ─────────────
   Every button shares one geometry (44px, 16px/600, 8px radius). Only emphasis changes:
   filled = the main action, outlined = other actions, ghost = navigation and dismissal, danger = destructive. */
.primary,.secondary,.file-button,.bank-action,.text-button,.back-button,.danger-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:var(--size-touch);
  margin:0;
  padding:.5rem var(--space-4);
  border:1px solid transparent;
  border-radius:var(--radius-control);
  font-size:var(--text-body);
  font-weight:var(--weight-strong);
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.primary,.bank-action{
  background:var(--color-primary);
  color:var(--color-on-primary);
}
.primary:hover,.bank-action:hover{
  background:var(--color-primary-hover);
}
.secondary,.file-button{
  background:var(--color-surface);
  color:var(--color-ink);
  border-color:var(--color-control);
}
.secondary:hover,.file-button:hover{
  background:var(--color-soft);
}
.text-button,.back-button{
  background:transparent;
  color:var(--color-ink);
}
.text-button:hover,.back-button:hover{
  background:var(--color-soft);
}
.danger-button{
  background:var(--color-error);
  color:var(--color-on-error);
}
.danger-button:hover{
  background:var(--color-error-hover);
}
.danger-quiet{
  background:var(--color-surface);
  color:var(--color-error);
  border-color:var(--color-error);
}
.danger-quiet:hover{
  background:var(--color-error-surface);
}
.file-button input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
}
/* Disabled keeps the control's shape, drops its emphasis and never looks more prominent than an enabled one. */
button:disabled:not(.answer){
  background:transparent;
  border-color:var(--color-line);
  color:var(--color-muted);
  opacity:.7;
  cursor:not-allowed;
}
.primary:disabled:not(.answer),.primary[aria-disabled="true"],.primary[aria-disabled="true"]:hover{
  background:var(--color-soft);
  border-color:transparent;
  color:var(--color-muted);
  opacity:1;
  cursor:wait;
}
.text-button:disabled:not(.answer),.back-button:disabled:not(.answer){
  border-color:transparent;
}
.file-button:has(input:disabled){
  background:var(--color-soft);
  border-color:transparent;
  color:var(--color-muted);
  cursor:wait;
}
.file-button:has(input:disabled) input{
  cursor:wait;
}
button[aria-disabled="true"]{
  cursor:wait;
}

/* Button rows: one gap, wraps, stacks on narrow screens. */
.library-add-actions,.creation-actions,.option-actions,.result-actions,.status-actions,.settings-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:var(--space-3);
}

/* ───────────── Form controls ───────────── */
label{
  font-weight:var(--weight-strong);
}
.opt{
  color:var(--color-muted);
  font-weight:400;
}
input:not([type="checkbox"]):not([type="file"]),select,textarea{
  display:block;
  width:100%;
  min-width:0;
  min-height:var(--size-touch);
  padding:.5rem .75rem;
  border:1px solid var(--color-control);
  border-radius:var(--radius-control);
  background:var(--color-surface);
  color:var(--color-ink);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.4;
}
input:not([type="checkbox"]):not([type="file"]):hover,select:hover,textarea:hover{
  border-color:var(--color-accent);
}
textarea{
  resize:vertical;
}
select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-ink) 50%),linear-gradient(135deg,var(--color-ink) 50%,transparent 50%);
  background-position:calc(100% - 1.3rem) 50%,calc(100% - .95rem) 50%;
  background-size:.375rem .375rem;
  background-repeat:no-repeat;
  cursor:pointer;
}
input[type="checkbox"]{
  width:1.5rem;
  height:1.5rem;
  flex:none;
  margin:0;
  accent-color:var(--color-accent);
}
.form-field{
  display:grid;
  gap:var(--space-2);
  min-width:0;
}
.form-field select{
  max-width:26rem;
}
.field-help{
  font-size:var(--text-meta);
  color:var(--color-muted);
  margin:0;
}
.form-actions{
  display:grid;
  gap:var(--space-2);
}

/* ───────────── Surfaces ───────────── */
.panel,.bank-library,.library-help,.settings-section{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-1);
}
.notice{
  position:relative;
  margin:0 0 var(--space-4);
  padding:.75rem 1rem .75rem 2.75rem;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-control);
  background:var(--color-surface);
  color:var(--color-ink);
  font-size:var(--text-small);
  overflow-wrap:anywhere;
}
.notice::before,.auth-error::before,.auth-notice::before{
  content:"i";
  position:absolute;
  left:1rem;
  top:.8rem;
  display:grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  border:2px solid currentColor;
  border-radius:var(--radius-round);
  color:var(--color-muted);
  font:var(--weight-bold) .75rem/1 var(--font-body);
}
.notice p{
  margin:.25rem 0;
}
.notice p:first-child{ margin-top:0; }
.notice p:last-child{ margin-bottom:0; }
.notice ul{
  margin:.4rem 0;
  padding-left:1.25rem;
}
.notice-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.notice .secondary,.notice .text-button{
  margin-top:var(--space-2);
}
.notice-actions .secondary,.notice-actions .danger-quiet{
  margin-top:0;
}
.file-error,.auth-error{
  position:relative;
  background:var(--color-error-surface);
  border:1px solid var(--color-error);
  border-radius:var(--radius-control);
  color:var(--color-ink);
}
.file-error::before,.auth-error::before{
  content:"!";
  color:var(--color-error);
}
.import-notice{
  background:var(--color-good-surface);
  border-color:var(--color-good);
}
.import-notice::before{
  content:"\2713";
  color:var(--color-good);
}
.auth-error,.auth-notice{
  position:relative;
  margin:var(--space-5) 0 0;
  padding:.75rem 1rem .75rem 2.75rem;
  font-size:var(--text-small);
}
.auth-notice{
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-control);
  background:var(--color-soft);
}
.auth-error{
  overflow-wrap:anywhere;
}
#creation-error{
  margin:var(--space-4) 0 0;
}

/* ───────────── Top bar and account menu ───────────── */
.topbar{
  position:relative;
  z-index:5;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-line);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  max-width:var(--size-reading);
  margin:auto;
  min-height:3.75rem;
  padding:var(--space-2) var(--space-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.brand-logo{
  display:block;
  flex:none;
  width:8.5rem;
  height:auto;
  max-width:45vw;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
  max-width:100%;
}
/* Navigation buttons are outlined so they read as controls, not as text. */
.topbar .back-button{
  background:var(--color-surface);
  border-color:var(--color-control);
}
.topbar .back-button:hover,.topbar .back-button[aria-expanded="true"]{
  background:var(--color-soft);
}
.account-dropdown{
  position:relative;
}
#account-toggle{
  min-width:var(--size-touch);
}
#account-toggle .icon{
  transition:transform .15s ease;
}
#account-toggle[aria-expanded="true"] .icon{
  transform:rotate(180deg);
}
.dropdown-panel{
  position:absolute;
  z-index:6;
  right:0;
  top:calc(100% + var(--space-2));
  width:min(18rem,calc(100vw - 2rem));
  max-height:calc(100dvh - 6rem);
  overflow:auto;
  padding:var(--space-2);
  display:grid;
  gap:var(--space-1);
  border:1px solid var(--color-control);
  border-radius:var(--radius-panel);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:var(--shadow-2);
}
.dropdown-panel>.text-button{
  width:100%;
  justify-content:flex-start;
  padding-inline:var(--space-3);
}
.dropdown-panel .account-name{
  margin:0;
  padding:var(--space-2) var(--space-3) var(--space-3);
  border-bottom:1px solid var(--color-line);
  color:var(--color-muted);
  font-size:var(--text-small);
  overflow-wrap:anywhere;
}
.dropdown-panel .theme-picker{
  margin:var(--space-1) 0;
  padding:var(--space-3);
  border-block:1px solid var(--color-line);
}
.theme-picker{
  display:grid;
  gap:var(--space-2);
  color:var(--color-muted);
  font-size:var(--text-small);
  min-width:0;
}
.topbar-inner>.theme-picker{
  flex:none;
  max-width:100%;
}
/* On the sign-in screens the chooser has no room for a visible caption; the select carries its own name. */
.topbar-inner>.theme-picker>span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.topbar-inner>.theme-picker select{
  width:auto;
  min-width:11.5rem;
  max-width:100%;
}
.dashboard-link{
  padding-inline:var(--space-3);
}

/* ───────────── Sign-in and status screens ───────────── */
.auth-panel{
  padding:clamp(1.25rem,4vw,2.5rem);
  overflow-wrap:anywhere;
}
.auth-panel h1{
  font-size:var(--text-title);
}
.auth-panel form{
  display:grid;
  gap:var(--space-4);
  margin:var(--space-5) 0 0;
}
.auth-panel form .primary{
  width:100%;
}
#auth-status{
  min-height:1.5em;
}
.auth-footer{
  display:grid;
  gap:var(--space-3);
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--color-line);
}
.auth-footer .text-button{
  width:100%;
  background:var(--color-surface);
  border-color:var(--color-control);
}
.auth-footer .text-button:hover{
  background:var(--color-soft);
}
#auth-help{
  margin:0;
  font-size:var(--text-small);
  color:var(--color-muted);
}
#auth-status,.auth-panel #status-message{
  color:var(--color-muted);
}
.auth-panel #status-message{
  margin:var(--space-3) 0 0;
}
.status-actions{
  margin-top:var(--space-5);
}
.status-actions .primary{
  flex:1 1 12rem;
}
.status-actions .text-button{
  flex:1 1 12rem;
  background:var(--color-surface);
  border-color:var(--color-control);
}
.status-actions .text-button:hover{
  background:var(--color-soft);
}

/* ───────────── Dashboard (Operate) ───────────── */
.dashboard-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--space-4) var(--space-5);
  margin-bottom:var(--space-5);
}
.dashboard-heading>.library-add-actions{
  grid-column:2;
  grid-row:1/3;
  justify-content:flex-end;
}
.dashboard-title>p{
  margin-top:var(--space-2);
}
.bank-library{
  min-width:0;
  padding:var(--space-panel);
}
.library-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-4);
}
.library-heading h2{
  font-size:var(--text-lead);
}
.library-heading>span,.library-summary{
  color:var(--color-muted);
  font-size:var(--text-small);
}
.library-summary{
  margin:var(--space-1) 0 var(--space-4);
}
.bank-list{
  list-style:none;
  margin:0;
  padding:0;
}
.bank-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 11rem;
  align-items:center;
  gap:var(--space-4) var(--space-5);
  padding:var(--space-5) 0;
  border-top:1px solid var(--color-line);
}
.bank-row:last-child{
  padding-bottom:var(--space-1);
}
.bank-content{
  min-width:0;
  overflow-wrap:anywhere;
}
.bank-meta{
  display:flex;
  align-items:center;
  gap:var(--space-2) var(--space-3);
  flex-wrap:wrap;
  font-size:var(--text-meta);
  color:var(--color-muted);
}
.bank-meta span:first-child{
  padding:.0625rem .5rem;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-round);
  color:var(--color-ink);
  font-weight:var(--weight-strong);
}
.bank-row h3{
  margin:var(--space-2) 0;
}
.bank-description{
  font-size:var(--text-small);
  color:var(--color-muted);
  margin:0 0 var(--space-3);
  white-space:pre-line;
}
.bank-progress{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-1) var(--space-4);
  font-size:var(--text-meta);
  color:var(--color-muted);
  font-variant-numeric:tabular-nums;
  margin-top:var(--space-3);
}
.bank-track,.progress,.result-bar{
  background:var(--color-track);
  border-radius:var(--radius-round);
  overflow:hidden;
}
.bank-track{
  height:.375rem;
  margin-top:var(--space-2);
}
.progress,.result-bar{
  height:.5rem;
}
.bank-track span,.progress span,.result-bar span{
  display:block;
  height:100%;
  background:var(--color-accent);
  border-radius:var(--radius-round);
}
.progress span,.result-bar span{
  transition:width .2s ease;
}
.bank-actions{
  display:grid;
  gap:var(--space-2);
}
.bank-action,.bank-delete{
  width:100%;
}
.bank-action{
  justify-content:space-between;
}
.delete-confirm{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--color-error);
  border-radius:var(--radius-control);
  background:var(--color-error-surface);
}
.delete-confirm p{
  flex-basis:100%;
  margin:0;
  overflow-wrap:anywhere;
}
.empty-state{
  padding:var(--space-5) 0;
}
.empty-state h3{
  font-size:var(--text-body);
}
.empty-state p,.loading-state{
  color:var(--color-muted);
  font-size:var(--text-small);
}
.empty-state p{
  margin:var(--space-1) 0 0;
}

/* ───────────── Settings (Configure) ───────────── */
.settings-shell{
  display:grid;
  gap:var(--space-5);
  align-content:start;
}
.settings-shell>.notice{
  margin:0;
}
.settings-section{
  min-width:0;
  padding:var(--space-panel);
  display:grid;
  gap:var(--space-3);
  overflow-wrap:anywhere;
}
.settings-section>*{
  margin:0;
}
.settings-section h2{
  font-size:var(--text-lead);
}
.settings-section p{
  color:var(--color-muted);
  font-size:var(--text-small);
  max-width:42rem;
}
.settings-section .settings-actions{
  margin-top:var(--space-1);
}
.settings-section details{
  border-top:1px solid var(--color-line);
  padding-top:var(--space-2);
}
.settings-section summary{
  display:flex;
  align-items:center;
  min-height:var(--size-touch);
  cursor:pointer;
  color:var(--color-ink);
  font-weight:var(--weight-strong);
}
.settings-section summary::after{
  content:"";
  width:.5rem;
  height:.5rem;
  margin:-.2rem 0 0 var(--space-3);
  border:solid currentColor;
  border-width:0 .16rem .16rem 0;
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.settings-section details[open]>summary::after{
  margin-top:.2rem;
  transform:rotate(-135deg);
}
.settings-section .auth-error{
  color:var(--color-ink);
}
.settings-section details[open]>summary{
  margin-bottom:var(--space-2);
}
.account-password-form{
  display:grid;
  gap:var(--space-4);
  margin:var(--space-2) 0 0;
}
.account-password-form .primary{
  justify-self:start;
}
.migration-consent{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  min-height:var(--size-touch);
  font-weight:400;
  color:var(--color-ink);
}

/* ───────────── Question-set editor (Configure) ───────────── */
.creation-shell h1,.settings-shell h1{
  margin:0;
}
.editor-fields{
  display:grid;
  gap:var(--space-5);
  border:0;
  padding:0;
  margin:var(--space-5) 0;
  min-width:0;
}
.draft-questions{
  display:grid;
  gap:var(--space-5);
}
.question-editor{
  display:grid;
  gap:var(--space-4);
  min-width:0;
  margin:0;
  padding:var(--space-panel);
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-panel);
  background:var(--color-surface);
  box-shadow:var(--shadow-1);
}
.question-editor legend{
  padding:0 var(--space-2);
  font-weight:var(--weight-bold);
  font-size:var(--text-lead);
}
.option-actions{
  margin-top:calc(var(--space-1) * -1);
}
.question-editor [data-remove-question]{
  justify-self:end;
}
.editor-add{
  justify-self:start;
}
#draft-help{
  margin:var(--space-2) 0 0;
}
.creation-actions{
  margin:var(--space-5) 0 0;
}
/* A pinned action bar only where it leaves room for the form: wide and tall enough screens. */
@media(min-width:601px) and (min-height:501px){
  html{
    scroll-padding-bottom:5.5rem;
  }
  .creation-actions{
    position:sticky;
    bottom:0;
    z-index:3;
    margin-inline:calc(var(--space-4) * -1);
    padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background:var(--color-ground);
    border-top:1px solid var(--color-line);
  }
}
#creation-status{
  margin:var(--space-2) 0 0;
  color:var(--color-muted);
  font-size:var(--text-small);
}

/* ───────────── Quiz (Decide) ───────────── */
.quiz-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:var(--space-6);
  margin-bottom:var(--space-5);
}
.quiz-heading>div{
  min-width:0;
  overflow-wrap:anywhere;
}
.context-label{
  color:var(--color-accent);
  font-size:var(--text-small);
  font-weight:var(--weight-bold);
  margin:0 0 var(--space-1);
}
.quiz-heading h1,.result h1,.error-panel h1{
  max-width:43rem;
  overflow-wrap:anywhere;
}
.description{
  color:var(--color-muted);
  margin:var(--space-2) 0 0;
}
.score-small{
  flex:none;
  text-align:right;
  color:var(--color-muted);
  font-size:var(--text-meta);
}
.score-small>span{
  display:block;
}
.score-small strong{
  display:block;
  color:var(--color-ink);
  font-size:var(--text-section);
  font-variant-numeric:tabular-nums;
}
.score-small strong span{
  font-size:var(--text-body);
  font-weight:400;
  color:var(--color-muted);
}
.score-chip{
  display:none;
}
.progress-heading{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-3);
  font-size:var(--text-small);
  font-weight:var(--weight-bold);
  margin-bottom:var(--space-2);
}
.progress-heading>span:last-child{
  color:var(--color-muted);
  font-weight:400;
}
.question-panel{
  margin-top:var(--space-4);
  padding:var(--space-6);
}
.question-meta{
  display:flex;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
  gap:var(--space-1) var(--space-4);
  color:var(--color-muted);
  font-size:var(--text-meta);
  font-weight:var(--weight-bold);
}
.question-meta span:first-child{
  color:var(--color-accent);
}
.question-panel h2{
  font-size:var(--text-question);
  line-height:1.3;
  margin:var(--space-4) 0 var(--space-2);
  max-width:46rem;
  overflow-wrap:anywhere;
  white-space:pre-line;
}
.instruction{
  color:var(--color-muted);
  margin:0 0 var(--space-4);
  font-size:var(--text-small);
}
.answers{
  display:grid;
  gap:var(--space-3);
}
.answers.binary{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
}
.answer{
  min-height:3.75rem;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--space-1) var(--space-3);
  text-align:left;
  border:2px solid var(--color-control);
  border-radius:var(--radius-control);
  background:var(--color-surface);
  color:var(--color-ink);
  padding:.75rem var(--space-4);
  font-weight:var(--weight-strong);
  line-height:1.35;
  cursor:pointer;
  touch-action:manipulation;
  transition:background-color .12s ease,border-color .12s ease;
}
.answer:not(:disabled):hover,.answer:not(:disabled):active{
  border-color:var(--color-accent);
  background:var(--color-soft);
}
.answer-marker{
  display:grid;
  place-items:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:var(--radius-round);
  border:2px solid var(--color-edge);
  background:var(--color-surface);
  color:var(--color-ink);
  font-weight:var(--weight-bold);
  font-size:var(--text-small);
}
.answer>span:nth-child(2){
  min-width:0;
  overflow-wrap:anywhere;
  white-space:pre-line;
}
.answer:disabled{
  cursor:default;
  color:var(--color-ink);
  opacity:1;
}
.answer.selected{
  border-color:var(--color-accent);
  background:var(--color-soft);
}
.answer.correct{
  border-color:var(--color-good);
  background:var(--color-good-surface);
}
.answer.correct .answer-marker{
  background:var(--color-good);
  border-color:var(--color-good);
  color:var(--color-on-good);
}
.answer.incorrect{
  border-color:var(--color-error);
  background:var(--color-error-surface);
}
.answer.incorrect .answer-marker{
  background:var(--color-error);
  border-color:var(--color-error);
  color:var(--color-on-error);
}
.selected-label{
  grid-column:2;
  color:var(--color-accent);
  font-size:var(--text-meta);
  font-weight:var(--weight-bold);
  white-space:normal;
  overflow-wrap:anywhere;
}
.answer.correct .selected-label{
  color:var(--color-good);
}
.answer.incorrect .selected-label{
  color:var(--color-error);
}
.feedback{
  margin-top:var(--space-5);
  padding:var(--space-panel);
  border-radius:var(--radius-panel);
  border:1px solid var(--color-good);
  background:var(--color-good-surface);
  color:var(--color-ink);
  scroll-margin:1rem 0 6rem;
}
.feedback.bad{
  border-color:var(--color-error);
  background:var(--color-error-surface);
  color:var(--color-ink);
}
.feedback h3{
  margin:0 0 var(--space-2);
}
.feedback p{
  margin:var(--space-2) 0 0;
  overflow-wrap:anywhere;
  white-space:pre-line;
}
.feedback .reference{
  font-size:var(--text-small);
  white-space:normal;
}
.action-bar{
  display:flex;
  justify-content:flex-end;
  margin-top:var(--space-4);
}

/* ───────────── Results ───────────── */
.result,.error-panel{
  max-width:43.75rem;
  margin:var(--space-6) auto 0;
  padding:var(--space-6);
  overflow-wrap:anywhere;
}
.score{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--space-5) 0 var(--space-3);
}
.score strong{
  font-size:3rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.score span{
  color:var(--color-muted);
}
.result>p:not(.context-label):not(.score){
  color:var(--color-muted);
}
.missed{
  margin-top:var(--space-5);
  border-top:1px solid var(--color-line);
}
.missed h2{
  font-size:var(--text-lead);
  margin:var(--space-5) 0 var(--space-3);
}
.missed ol{
  margin:0;
  padding-left:var(--space-5);
}
.missed li{
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-line);
  overflow-wrap:anywhere;
}
.missed p{
  margin:var(--space-1) 0;
  white-space:pre-line;
}
.missed .reference{
  font-size:var(--text-small);
  color:var(--color-muted);
}
.result-actions{
  margin-top:var(--space-5);
}

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

/* ───────────── Responsive ───────────── */
@media(max-width:700px){
  .dashboard-heading{
    grid-template-columns:minmax(0,1fr);
  }
  .dashboard-heading>.library-add-actions{
    grid-column:1;
    grid-row:auto;
    justify-content:stretch;
  }
  .library-add-actions>*,.creation-actions>*,.result-actions>*{
    flex:1 1 12rem;
  }
}

/* Mobile focused practice */
@media(max-width:600px){
  .topbar-inner{
    padding:var(--space-2) var(--space-4);
    gap:var(--space-2);
  }
  .header-actions{
    flex:none;
  }
  .brand-logo{
    width:clamp(6.5rem,30vw,8.5rem);
    max-width:100%;
  }
  .shell{
    padding:var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  .quiz-heading{
    display:block;
    margin:0 0 .75rem;
  }
  .quiz-heading h1{
    font-size:.9375rem;
    line-height:1.4;
    color:var(--color-muted);
  }
  .quiz-heading .description,.quiz-heading .context-label,.score-small{
    display:none;
  }
  .score-chip{
    display:inline;
  }
  .progress-heading{
    font-size:var(--text-body);
  }
  .progress-heading>span:last-child{
    font-size:var(--text-small);
  }
  .question-panel{
    margin-top:.9rem;
    padding:1.25rem 1.1rem;
  }
  .question-panel h2{
    font-size:clamp(1.5rem,6.2vw,1.75rem);
    line-height:1.28;
    margin:.9rem 0 .7rem;
  }
  .instruction{
    font-size:var(--text-body);
    line-height:1.4;
    margin-bottom:1.1rem;
  }
  .answer{
    min-height:4.25rem;
    padding:.85rem;
    gap:var(--space-3);
    font-size:var(--text-lead);
  }
  .answer-marker{
    width:2.4rem;
    height:2.4rem;
  }
  .selected-label{
    font-size:var(--text-small);
  }
  .feedback{
    padding:1.1rem;
    margin-top:1.1rem;
  }
  .feedback h3{
    font-size:var(--text-section);
  }
  .feedback .reference{
    font-size:var(--text-small);
  }
  /* The next step stays reachable, even with long feedback */
  .action-bar{
    position:sticky;
    bottom:0;
    z-index:2;
    margin:.9rem -1rem calc(-1.5rem - env(safe-area-inset-bottom));
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:var(--color-ground);
    border-top:1px solid var(--color-line);
    justify-content:stretch;
  }
  .action-bar .primary,.result .primary{
    width:100%;
  }
  .result,.error-panel{
    margin-top:var(--space-2);
    padding:1.5rem 1.1rem;
  }
  .dashboard-heading{
    margin:var(--space-2) 0 var(--space-5);
  }
  .bank-library,.settings-section{
    padding:1.1rem;
  }
  .bank-row{
    grid-template-columns:minmax(0,1fr);
  }
  .bank-actions{
    display:flex;
    flex-wrap:wrap;
  }
  .bank-actions>*{
    flex:1 1 9rem;
    width:auto;
  }
  .settings-actions>*,.delete-confirm>button,.editor-add,.question-editor [data-remove-question]{
    flex:1 1 12rem;
    justify-self:stretch;
  }
  .question-editor{
    padding:var(--space-4);
  }
  .topbar-inner>.theme-picker select{
    min-width:10.5rem;
  }
}
@media(max-width:479px){
  .dashboard-link-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .dashboard-link{
    min-width:var(--size-touch);
  }
}

/* Fekvő telefon / rövid képernyő: kompakt, de nem vágott tartalom */
@media(max-height:500px) and (orientation:landscape){
  .topbar-inner{
    min-height:var(--size-touch);
    padding-top:var(--space-1);
    padding-bottom:var(--space-1);
  }
  .brand-logo{
    width:8rem;
  }
  .quiz-heading{
    display:block;
    margin:0 0 .5rem;
  }
  .quiz-heading h1{
    font-size:.9375rem;
    line-height:1.4;
    color:var(--color-muted);
  }
  .quiz-heading .description,.quiz-heading .context-label,.score-small{
    display:none;
  }
  .score-chip{
    display:inline;
  }
  .shell{
    padding:.75rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  }
  .question-panel{
    margin-top:.6rem;
    padding:1rem 1.25rem;
  }
  .question-panel h2{
    margin:.5rem 0 .4rem;
    font-size:clamp(1.25rem,3.4vw,1.5rem);
  }
  .instruction{
    margin-bottom:.7rem;
  }
  .answers,.answers.binary{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
    align-items:start;
  }
  .answer{
    min-height:3.25rem;
    padding:.55rem .75rem;
  }
  .feedback{
    margin-top:.8rem;
    padding:.8rem 1rem;
  }
  .action-bar{
    position:static;
    margin:.75rem 0 0;
    padding:0;
    background:none;
    border:0;
    justify-content:flex-end;
  }
  .action-bar .primary{
    width:auto;
  }
  .result,.error-panel{
    margin-top:.5rem;
    padding:1.25rem;
  }
}

@media(min-width:900px){
  .question-panel{
    padding:var(--space-6) 2.75rem 2.5rem;
  }
}