/* GENERATED from packages/design/sidebar.css by packages/design/scripts/sync.mjs — do not edit here. */
/* Kardio settings sidebar — EKG Studio's left control column, shared with
   EchoSchema so both simulators look and behave the same. Requires
   tokens.css (+ base.css for the control element defaults).

     <div class="kardio-workspace">            two columns: sidebar | stage
       <aside class="controls">                 left, surface, hairline right
         …always-visible head (preset / playback)…
         <button class="controls-toggle" aria-expanded>   only ≤ 900px
         <div class="controls-collapsible">     hidden ≤ 900px while collapsed
           <details class="settings-panel" open>
             <summary>Intervalle</summary>      flat row, +/− sign
             <div class="settings-body">
               <div class="control-group">
                 <label>Herzfrequenz <span class="value">70</span></label>
                 <input type="range">
       <main>…</main>

   ≤ 900px the columns stack (sidebar first, above the stage) and the
   settings collapse behind .controls-toggle; the app toggles `.collapsed`
   on the aside (collapsed by default on phones). */

.kardio-workspace {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  min-height: 0;
}

.controls {
  box-sizing: border-box;
  position: relative;
  top: 0;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: var(--sidebar-pad);
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  overflow: auto;
}

/* Collapse toggle (stacked layout only). */
.controls-toggle { display: none; }

/* Accordion group: a flat row separated by a hairline, +/− on the right. */
.settings-panel { margin: 0; border-top: 1px solid var(--line); background: none; }
.settings-panel > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.settings-panel > summary::-webkit-details-marker { display: none; }
.settings-panel > summary::after { content: '+'; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1; }
.settings-panel[open] > summary::after { content: '−'; }
.settings-panel > summary:hover { color: var(--accent); }
.settings-panel > summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.settings-body { padding: 3px 0 12px; }
.settings-body .control-group:last-child { margin-bottom: 0; }

/* One labelled control. */
.control-group { margin-bottom: 12px; }
/* Label left, current value (.value) right-aligned on the same line. */
.control-group > label,
.control-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.control-group label .value { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.control-group input[type="range"] { width: 100%; accent-color: var(--accent); }
.control-group select { width: 100%; }

@media (min-width: 901px) {
  .controls-toggle { display: none; }
}

/* Stacked: sidebar above the stage, settings behind the toggle. */
@media (max-width: 900px) {
  .kardio-workspace { grid-template-columns: minmax(0, 1fr); }
  .controls {
    min-height: 0;
    padding: 22px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .controls-toggle {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-button);
    font-size: var(--text-body);
    font-weight: 600;
    text-align: center;
  }
  .controls-toggle:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
  .controls.collapsed .controls-collapsible { display: none; }
  /* Roomier touch rhythm, as EKG Studio has always had on tablets/phones. */
  .settings-panel > summary { padding: 17px 0; }
  .settings-body { padding: 3px 0 16px; }
  .control-group { margin-bottom: 17px; }
  .control-group > label, .control-label { margin-bottom: 8px; }
}

/* ── Mobile shell (HEADER.md "Mobile Shell"): opt-in modifiers ──
   .controls.has-sheet           the settings open as a sheet over the stage
                                 (bottom sheet on phones, docked right on
                                 landscape phones) instead of in the flow.
                                 First child of .controls-collapsible:
                                 <div class="sheet-head"><h2 class="sheet-title" tabindex="-1">Einstellungen</h2>
                                   <button type="button" class="sheet-close">Fertig</button></div>
   .kardio-workspace.wide-tablet  701–900 px portrait: the sidebar stays a column.
   Non-modal on purpose (no scrim): the stage stays live and takes taps. The
   app opens/closes it (.collapsed, aria-expanded, html[data-sheet="open"]) and
   marks the sheet box with data-kardio-sheet; while it is open, Tab and
   Shift+Tab stay inside the sheet (shell.js) and the app makes the covered
   tab bar inert, so keyboard focus never lands on a control the sheet hides
   (WCAG 2.4.11). Escape and "Fertig" close it. While the bottom sheet is open
   the page ends --sheet-max-h lower, so every part of the stage can be
   scrolled above it; on open the app scrolls the part that shows the result
   (ECG / rhythm strip, M-Mode trace) just above the sheet
   (kardioShell.revealAboveSheet, shell.js). */
.controls .sheet-head { display: none; }
@media (max-width: 900px), (max-width: 960px) and (max-height: 500px) {
  .controls.has-sheet:not(.collapsed) > .controls-collapsible {
    position: fixed; z-index: var(--z-sheet); left: 0; right: 0; bottom: 0;
    max-height: var(--sheet-max-h); overflow: auto; overscroll-behavior: contain;
    scroll-padding-top: 60px;   /* a focused control scrolls clear of the sticky .sheet-head (52 px + 8) */
    padding: 0 calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
    border-radius: var(--radius-panel) var(--radius-panel) 0 0; box-shadow: var(--shadow-sheet);
  }
  .controls.has-sheet .sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; margin: 0 -16px 8px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .controls.has-sheet .sheet-head .sheet-title { margin: 0; font-size: var(--text-md); font-weight: 600; }
  .controls.has-sheet .sheet-head .sheet-close { min-height: var(--hit-min); }
  .controls.has-sheet > .controls-toggle { display: none; }   /* trigger lives in the stage toolbar */
  /* In-flow head of the stacked sidebar clears the landscape insets. */
  .kardio-shell .controls { padding: 22px calc(22px + env(safe-area-inset-right, 0px)) 22px calc(22px + env(safe-area-inset-left, 0px)); }
}
/* Bottom sheet (phones and tablets in portrait): the fixed sheet covers the
   last --sheet-max-h of the screen (and the tab bar), so the page gets that
   much room at its end while it is open. The docked-right sheet of landscape
   phones covers no stage bottom and adds none. Specificity 0,2,1 beats the
   tab bar offset (tabbar.css html.has-tabbar body, 0,1,2); the sheet covers
   the tab bar, so its height alone is the room needed. */
@media (max-width: 900px) and (min-height: 501px) {
  .kardio-shell[data-sheet="open"] body { padding-bottom: var(--sheet-max-h); }
}
@media (max-width: 960px) and (max-height: 500px) {
  .controls.has-sheet:not(.collapsed) > .controls-collapsible { top: var(--header-total); left: auto; width: min(360px, 45vw); max-height: none; border-top: 0; border-left: 1px solid var(--line); border-radius: var(--radius-panel) 0 0 var(--radius-panel); }
}
/* Desktop column clears a left inset (landscape iPhone in the desktop tier). */
@media (min-width: 961px), (min-width: 901px) and (min-height: 501px) {
  .kardio-shell .controls { padding-left: calc(var(--sidebar-pad) + env(safe-area-inset-left, 0px)); }
}
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px) {
  .kardio-workspace.wide-tablet { grid-template-columns: 260px minmax(0, 1fr); }
  .kardio-workspace.wide-tablet .controls {
    position: sticky; top: var(--header-total);
    max-height: calc(100dvh - var(--header-total) - var(--tabbar-offset)); overflow: auto;
    padding: var(--sidebar-pad); border-right: 1px solid var(--line); border-bottom: 0;
  }
  .kardio-workspace.wide-tablet .controls-toggle { display: none; }
  .kardio-workspace.wide-tablet .controls.collapsed .controls-collapsible { display: block; }
  .kardio-workspace.wide-tablet .sheet-head { display: none; }
}