/* ════════════════════════════════════════════════════════════════
   NORA's tokens on Ionic Core (ADR-0024) and the kit's rules.
   Each colour we use is set with all six variables Ionic lists
   (ionicframework.com/docs/theming/colors: „all of the listed variations
   for that color should be set“); surfaces and the font through the
   application variables (/theming/themes, /theming/advanced).
   Light on :root, dark on html.dark, like app.css. Ionic's own dark
   palette is not loaded.
   ════════════════════════════════════════════════════════════════ */
:root{
  --ion-font-family:var(--ui);
  --ion-background-color:#F4F2EC; --ion-background-color-rgb:244,242,236;
  --ion-text-color:#1A1917; --ion-text-color-rgb:26,25,23;
  --ion-border-color:var(--line); --ion-item-border-color:var(--line);
  --ion-item-background:var(--raised); --ion-item-color:var(--text);
  --ion-toolbar-background:var(--bg); --ion-toolbar-border-color:transparent; --ion-toolbar-color:var(--text);
  --ion-overlay-background-color:var(--raised);
  --ion-backdrop-color:#1A1917; --ion-backdrop-opacity:.4;
  --ion-placeholder-color:var(--muted);
  /* primary = sage, the one main action */
  --ion-color-primary:#587263; --ion-color-primary-rgb:88,114,99;
  --ion-color-primary-contrast:#FBFAF7; --ion-color-primary-contrast-rgb:251,250,247;
  --ion-color-primary-shade:#4D6457; --ion-color-primary-tint:#698073;
  --ion-color-danger:#A23B3B; --ion-color-danger-rgb:162,59,59;
  --ion-color-danger-contrast:#FBFAF7; --ion-color-danger-contrast-rgb:251,250,247;
  --ion-color-danger-shade:#8F3434; --ion-color-danger-tint:#AB4F4F;
  /* medium = --field, the outline of a secondary button */
  --ion-color-medium:#8A857B; --ion-color-medium-rgb:138,133,123;
  --ion-color-medium-contrast:#1A1917; --ion-color-medium-contrast-rgb:26,25,23;
  --ion-color-medium-shade:#79756C; --ion-color-medium-tint:#969188;
  /* light = the quiet fill (iOS „Gray“): --line under --text */
  --ion-color-light:#E4E0D7; --ion-color-light-rgb:228,224,215;
  --ion-color-light-contrast:#1A1917; --ion-color-light-contrast-rgb:26,25,23;
  --ion-color-light-shade:#D9D4C9; --ion-color-light-tint:#E7E3DB;
}
html.dark{
  --ion-background-color:#121110; --ion-background-color-rgb:18,17,16;
  --ion-text-color:#ECE8DF; --ion-text-color-rgb:236,232,223;
  --ion-backdrop-color:#000; --ion-backdrop-opacity:.6;
  --ion-color-primary:#88AB98; --ion-color-primary-rgb:136,171,152;
  --ion-color-primary-contrast:#121110; --ion-color-primary-contrast-rgb:18,17,16;
  --ion-color-primary-shade:#789686; --ion-color-primary-tint:#94B3A2;
  --ion-color-danger:#D98A8A; --ion-color-danger-rgb:217,138,138;
  --ion-color-danger-contrast:#121110; --ion-color-danger-contrast-rgb:18,17,16;
  --ion-color-danger-shade:#BF7979; --ion-color-danger-tint:#DD9696;
  --ion-color-medium:#77726A; --ion-color-medium-rgb:119,114,106;
  --ion-color-medium-contrast:#ECE8DF; --ion-color-medium-contrast-rgb:236,232,223;
  --ion-color-medium-shade:#69645D; --ion-color-medium-tint:#858079;
  --ion-color-light:#2B2925; --ion-color-light-rgb:43,41,37;
  --ion-color-light-contrast:#ECE8DF; --ion-color-light-contrast-rgb:236,232,223;
  --ion-color-light-shade:#26241F; --ion-color-light-tint:#403E3B;
}

/* the container that holds the views: Ionic hides it from screen readers behind an overlay */
#ion-view-container-root{height:100%}

/* ── buttons (DESIGN.md › Button) ── */
ion-button.k-btn{--border-radius:10px;--padding-start:18px;--padding-end:18px;--box-shadow:none;
  --background-focused-opacity:0;--background-hover-opacity:.06;--background-activated-opacity:.12;
  height:44px;margin:0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
ion-button.k-btn[expand="block"]{height:52px;font-size:16px}
ion-button.k-secondary{--color:var(--text);--border-color:var(--field);--border-width:1px}
ion-button.k-danger{--border-width:1px}
ion-button.k-quiet{--color:var(--text)}
ion-button .k-ico{display:inline-flex;margin-right:8px}
ion-button .k-ico svg{width:18px;height:18px}
ion-button[aria-busy="true"]{pointer-events:none;cursor:progress}
/* Ionic sets .ion-focused only under ion-app; NORA has none, so the ring goes on the native button */
ion-button::part(native):focus-visible{outline:2px solid var(--sage);outline-offset:2px}
ion-item::part(native):focus-visible{outline:2px solid var(--sage);outline-offset:-2px}
.k-area-act{display:flex}

/* the round ⋯; in a toolbar Ionic's iOS rules would square it, so the radius is forced */
ion-button.k-icon{--padding-start:0;--padding-end:0;width:44px;height:44px;margin:0;--color:var(--text);--ion-toolbar-color:var(--text)}
ion-button.k-more{--background:var(--raised);--background-hover:var(--raised);--border-radius:22px !important}
ion-button.k-more::part(native){box-shadow:inset 0 0 0 1px var(--line);border-radius:22px}
.k-more-dots{font-size:20px;line-height:1}

/* ── view switch (kit segment): the note's „Zusammenfassung · Transkript“ look, .nd-seg in app.css ── */
ion-segment.k-seg{--background:var(--line);padding:2px;border-radius:10px;width:100%}
ion-segment.k-seg ion-segment-button{--color:var(--muted);--color-checked:var(--text);--color-hover:var(--text);
  --indicator-color:var(--raised-2);--indicator-box-shadow:0 1px 2px rgba(40,36,28,.1);--border-radius:8px;
  --padding-top:0;--padding-bottom:0;--margin-top:0;--margin-bottom:0;min-height:36px;margin:0;
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
ion-segment.k-seg ion-segment-button::part(native):focus-visible{outline:2px solid var(--sage);outline-offset:2px}
ion-segment.k-seg ion-label{font-size:14px;font-weight:500;margin:0}

/* ── overlays: NORA's body is no ion-content, so they are pinned to the viewport ── */
ion-modal,ion-alert,ion-action-sheet,ion-popover,ion-toast{position:fixed}
/* Ionic locks the page under an overlay with the class backdrop-no-scroll (overflow hidden). That made
   the mock jump, whose body scrolls; NORA's body never scrolls (the panes .a-main, .b-det, .b-list
   do), so the class changes nothing here and needs no override (measured 03.11. at 375 and 1280). */
/* sage stays the one primary action: entries are --text, the destructive one --danger */
ion-action-sheet.ios{--button-color:var(--text);--button-color-activated:var(--text)}
ion-alert{--background:var(--raised)}
ion-alert .alert-head h2,ion-alert .alert-title{font-family:var(--ui);font-weight:500}
ion-alert .alert-button:not(.alert-button-role-destructive){color:var(--text)}
ion-alert .alert-button.alert-button-role-destructive{color:var(--danger)}
ion-popover{--background:var(--raised);--width:260px}
ion-popover ion-list{margin:0;background:var(--raised)}
ion-item.k-danger{--color:var(--danger)}
.k-info-text{padding:12px 16px 8px;font-size:14px;line-height:20px;color:var(--muted)}
.k-info-text code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
ion-popover.k-info{--width:300px}

/* ── form sheet ── */
ion-modal.k-sheet{--background:var(--raised);--border-radius:16px}
@media (min-width:744px){
  ion-modal.k-sheet{--width:440px;--height:auto;--max-height:90vh}
  /* the body scrolls inside the sheet's own height, so a long list stays in reach (#430) */
  ion-modal.k-sheet .ion-page{position:relative;display:block;contain:content;max-height:90vh}
}
/* `fit`: on a phone the sheet is as tall as what it holds (Ionic docs › Modal › Custom Sheet Height) */
@media (max-width:743px){
  ion-modal.k-sheet--fit{--height:auto}
  ion-modal.k-sheet--fit .ion-page{position:relative;display:block;contain:content;max-height:90vh}
  ion-modal.k-sheet--fit .k-sheet-body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
.k-sheet-body{padding:8px 20px 24px;overflow:auto;justify-content:flex-start}
/* `icon`: the sign beside the title, the lead under the title (mock „Install-Sheet“ A) */
.k-sheet-hd{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;margin:8px 0 16px}
.k-sheet-hd .k-sheet-title{font-size:20px;line-height:26px;margin:0}
.k-sheet-hd .k-sheet-lead{margin:2px 0 0}
.k-sheet-icon{width:56px;height:56px;border-radius:14px;background:var(--bg);display:grid;place-items:center;color:var(--text)}
.k-sheet-icon svg{width:40px;height:16px}
.k-sheet-title{font-family:var(--ui);font-size:17px;line-height:23px;font-weight:500;margin:8px 0 14px}
/* the sentence under the title, as the sheets before the kit had it (#438) */
.k-sheet-lead{font-size:14px;line-height:20px;color:var(--muted);margin:0 0 12px}
.k-field{margin-bottom:14px}
ion-input.k-input{--background:transparent;--color:var(--text);--highlight-color-invalid:var(--danger);--highlight-color-focused:var(--sage);font-size:16px}
ion-input.k-input .label-text-wrapper{font-size:13px;line-height:18px;color:var(--text);font-weight:500;transform:none !important;margin-bottom:6px}
ion-input.k-input .native-wrapper{box-sizing:border-box;max-width:100%;box-shadow:inset 0 0 0 1px var(--field);border-radius:10px;padding:0 12px;min-height:44px;background:var(--bg)}
ion-input.k-input.has-focus .native-wrapper{box-shadow:inset 0 0 0 2px var(--sage)}
ion-input.k-input.ion-invalid.ion-touched .native-wrapper{box-shadow:inset 0 0 0 1.5px var(--danger)}
ion-input.k-input .error-text{color:var(--danger);font-size:14px;line-height:20px}
ion-input.k-input .helper-text{color:var(--muted);font-size:13px;line-height:18px}
ion-input.k-input .input-wrapper{padding:0}
ion-input.k-input .input-bottom{border-top:0;padding:6px 0 0}
.k-sheet-acts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.k-sheet-err{color:var(--danger);font-size:14px;line-height:20px;margin:0}
.k-sheet-err:empty{display:none}
/* rows inside a sheet: the sheet is --raised already, so the rows step up to --raised-2 */
.k-sheet-body .srows{background:var(--raised-2);box-shadow:inset 0 0 0 1px var(--line)}
.k-sheet-body .ki-after{margin:4px 4px 14px}
.k-sheet-body .ev-sheet{max-height:none;overflow:visible}
.k-sheet-back{border:0;background:none;padding:0;margin:0 0 8px;font:inherit;font-size:14px;color:var(--sage);cursor:pointer}
@media (min-width:744px){.k-sheet-acts{flex-direction:row-reverse;justify-content:flex-start}
  .k-sheet-acts ion-button.k-btn[expand="block"]{height:44px;font-size:14px;display:inline-block;width:auto}}

/* ── chip that acts and its × (DESIGN.md › Proposed tag; #442 „Übernehmen“) ── */
ion-chip.k-chip{--background:transparent;--color:var(--text);height:32px;margin:0;padding:0 12px;border-radius:8px;
  border-color:var(--field);font-size:13px;font-weight:500;flex:none;white-space:nowrap}
ion-chip.k-chip:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
ion-chip.k-chip[aria-busy="true"]{pointer-events:none;cursor:progress;color:var(--muted)}
ion-button.k-x{--color:var(--muted);font-size:18px;flex:none}
/* a control that reads as text: a row's title, a time mark, a quiet line with › */
.k-text{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
.k-text:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:4px}