@layer layout {
 /* UI-110 (Paket AL): the Wissensgedächtnis page. Wide screens: the list and the chosen term as a card beside it; phones:
    the cards, a switch shows the list. Due terms carry the attention tone (UI-121).
    Paket AM (V1 B, Daniel 19.10.2026): in the look of the window of Mein Bereich. The head is the stage of Mein Bereich
    (central .r4x-stage) with the title and the figures in the display serif and gold; each term is the focus of the
    window, the list holds its choices (central .memory-window in components.css). */
 .km-page { max-width:calc(var(--reading-max) + var(--s8) * 4); margin-inline:auto; }
 .km-page > * { min-width:0; }
 .km-hero { display:grid; gap:var(--s4); padding:var(--s5); }
 .km-heading { display:flex; align-items:center; gap:var(--s3); }
 .km-heading > div { min-width:0; }
 .km-heading h1 { margin:0; font-family:var(--font-beginner); font-size:clamp(1.875rem, 1.2rem + 2.6vw, 3.125rem); font-weight:600; line-height:1.05; overflow-wrap:anywhere; }
 .km-heading .eyebrow { margin:0 0 var(--s1); }
 .km-heading .info-popover { margin-inline-start:auto; flex:none; }
 .km-hero__hat { width:1.5rem; height:1.5rem; fill:none; stroke:var(--accent-text); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
 .km-page [data-km-summary],.km-page [data-km-content] { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); }
 .km-page [data-km-summary]:empty,.km-page [data-km-status]:empty { display:none; }
 .km-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); }
 .km-stats .metric { display:flex; flex-direction:column; gap:var(--s1); min-width:0; padding:var(--s3) var(--s4); border-color:var(--gold-border); background:radial-gradient(120% 120% at 0 0, var(--gold-soft), transparent 70%), var(--surface); }
 .km-stats .metric-value { order:-1; color:var(--accent-text); font-family:var(--font-beginner); font-size:2.375rem; font-weight:600; line-height:1; }
 /* The sign and the words of a figure: on narrow columns the words go below the sign instead of breaking inside. */
 .km-stats .metric-label { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1); min-width:0; }
 .km-stats__due[data-due='true'] .metric { border-color:var(--attention-border); background:radial-gradient(120% 120% at 0 0, var(--attention-soft), transparent 70%), var(--surface); }
 .km-stats__due[data-due='true'] .metric-value { color:var(--attention); }
 .km-icon { display:inline-grid; width:1.125rem; height:1.125rem; flex:none; }
 .km-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
 .km-stats .km-icon { color:var(--attention); }
 .km-stats .km-icon--secure,.km-done .km-icon--secure { color:var(--success); }
 .km-usage { display:grid; gap:var(--s2); margin:0; padding:var(--s3) var(--s4); border:1px solid var(--gold-border); border-radius:var(--radius-card); background:var(--surface); }
 .km-usage p { margin:0; color:var(--text-muted); font-size:.875rem; }
 .km-usage--plus { display:flex; align-items:center; gap:var(--s2); color:var(--text); font-size:.9375rem; }
 .km-checking { margin:0; color:var(--text-muted); }
 .km-switch { display:flex; }
 .km-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
 .km-layout[data-km-mode='cards'] > .km-list,.km-layout[data-km-mode='list'] > .km-cards { display:none; }
 .km-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--section-gap); }
 .km-group,.km-cards__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); }
 .km-cards__grid { gap:var(--s4); }
 /* A term: the focus of the window over the whole width of its column. */
 .km-term { width:100%; scroll-margin-top:calc(var(--shell-sticky-height) + var(--s4)); }
 .km-term > * { min-width:0; max-width:100%; }
 .km-term__category { margin:0; color:var(--accent-text); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
 .km-term .memory-window__summary { white-space:pre-line; }
 .km-term .memory-window__rate .r4x-actions .btn { flex:1 1 9rem; justify-content:center; white-space:normal; text-align:center; }
 .km-done { display:flex; align-items:center; gap:var(--s2); margin:0; color:var(--text-muted); font-size:.875rem; }
 .km-term__actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2); width:100%; padding-top:var(--s3); border-top:1px solid var(--border-soft); }
 .km-term__actions .btn-danger-text,.km-row .btn-danger-text { gap:var(--s1); }
 /* The list: the choices of the window, each with its own remove button. */
 .km-list { display:grid; gap:var(--s3); align-content:start; }
 .km-list ul { display:grid; gap:var(--s2); margin:0; padding:0; list-style:none; }
 .km-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s1); padding:var(--s1); }
 .km-row:has(.km-row__select:is(:hover, :focus-visible)) { border-color:var(--gold-border); }
 .km-row__select { display:grid; gap:var(--s1); min-width:0; padding:var(--s2) var(--s3); border:0; border-radius:var(--radius-control); background:none; color:inherit; font:inherit; text-align:start; cursor:pointer; }
 .km-row__select strong { overflow-wrap:anywhere; }
 .km-row__due { color:var(--attention); font-weight:600; }
 @media (max-width:47.99rem) {
  .km-hero { padding:var(--s4); }
  .km-stats { gap:var(--s2); }
  .km-stats .metric { padding:var(--s3) var(--s2); }
  .km-stats .metric-value { font-size:1.875rem; }
 }
 @media (min-width:48rem) {
  .km-switch { display:none; }
  .km-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); align-items:start; }
  .km-layout[data-km-mode] > .km-list,.km-layout[data-km-mode] > .km-cards { display:grid; }
  .km-cards { position:sticky; top:calc(var(--shell-sticky-height) + var(--s4)); }
  .km-group:not(:has([data-selected])),.km-group > .memory-window__heading,.km-cards .km-term:not([data-selected]) { display:none; }
 }
}