/* AI-Doctor PWA — Intake Sheet (REQ-intake-logging)
   Iris spec §3 — all component states implemented.
   Liquid Glass material — extends style.css tokens.
   Revision 2026-04-28 (sheet separation values per §3.2.2.1)
*/

/* ════════════════════════════════════════════════════════════════════
   STATUS PALETTE TOKENS (canonical; brand-system.md)
   Added here so they are available; style.css does not yet define them.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --status-taken:     rgba(72, 199, 116, 0.90);
  --status-missed:    rgba(220, 60, 60, 0.90);
  --status-skipped:   rgba(140, 140, 160, 0.80);
  --status-late:      rgba(255, 170, 50, 0.90);
  --status-pending:   rgba(75, 163, 245, 0.70);
  --status-uncertain: rgba(180, 130, 220, 0.80);

  /* Critical amber — used for critical-time border + pill */
  --critical-amber:   rgba(255, 180, 60, 0.40);
}

/* ════════════════════════════════════════════════════════════════════
   CALENDAR ENTRY CARD — v2 layout upgrades
   (§3.1.1 single-baseline header, §3.1.2 long-name, §3.1.3 badge indent)
   These override/extend the existing .cal-entry rules in style.css.
   ════════════════════════════════════════════════════════════════════ */

/* Make entry a block so .cal-entry-header + .cal-badges stack cleanly */
.cal-entry {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* left-edge: 3px colored border is the single status truth (v2 #8) */
  border-left-width: 3px;
}

/* Status-color left edges using status palette tokens */
.cal-entry--taken      { border-left-color: var(--status-taken); }
.cal-entry--missed     { border-left-color: var(--status-missed); }
.cal-entry--skipped    { border-left-color: var(--status-skipped); }
.cal-entry--taken-late { border-left-color: var(--status-late); }
.cal-entry--pending    { border-left-color: var(--status-pending); }
.cal-entry--uncertain  { border-left-color: var(--status-uncertain); }
.cal-entry--queued     { border-left-color: var(--status-late); }

/* Queued state: pending-in-queue visual */
.cal-entry--queued .cal-badges {
  /* badge content set by JS to show queued copy */
}

/* Hover + active press */
.cal-entry:hover { background: var(--glass-white-mid); }
.cal-entry:active { transform: scale(0.99); }
.cal-entry:focus-visible {
  outline: 2px solid rgba(75, 163, 245, 0.45);
  outline-offset: 2px;
}

/* ── v2 #12: single-baseline header row ──────────────────────────── */

.cal-entry-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.35;
}

/* Time column: 44px min-width, tabular-nums, baseline-aligned */
.cal-entry-header .cal-time-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  min-width: 44px;
}

/* Med-name: flex-grow, wraps on long names (v2 #13) */
.cal-entry-header .cal-med-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.35;
}

/* Dosage: right-anchored, no-wrap */
.cal-entry-header .cal-dosage {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── v2 #13: badge row indent (§3.1.3) ──────────────────────────── */

/* Override style.css .cal-badges to add left-indent */
.cal-entry .cal-badges {
  padding-left: 56px; /* 44 time min-width + 12 gap */
  margin-top: 8px;
}

/* New badge variants for uncertain + queued */
.cal-badge--uncertain {
  background: rgba(180, 130, 220, 0.14);
  border: 1px solid rgba(180, 130, 220, 0.30);
  color: rgba(210, 170, 240, 0.95);
}

.cal-badge--queued {
  background: rgba(255, 170, 50, 0.10);
  border: 1px solid rgba(255, 170, 50, 0.25);
  color: rgba(255, 200, 100, 0.90);
}

/* ── 2-line calendar date label (§3.0 / §14a) ─────────────────── */

/* Override existing .cal-date-label in style.css */
.cal-date-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  min-width: 180px;
  line-height: 1.18;
}

.cal-date-primary {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cal-date-secondary {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   SHEET BACKDROP
   (§3.2.2.1 revised values: 0.55 alpha)
   ════════════════════════════════════════════════════════════════════ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background var(--duration) var(--ease-glass);
  z-index: 300; /* above calendar overlay (z-index 200) */
}

.sheet-backdrop.is-open {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
   INTAKE SHEET
   (§3.2.2.1 revised values: rgba(28,42,70,0.94), border 0.28, shadow 0.55)
   ════════════════════════════════════════════════════════════════════ */

.intake-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  background: rgba(28, 42, 70, 0.94);
  backdrop-filter: blur(var(--blur-heavy));
  -webkit-backdrop-filter: blur(var(--blur-heavy));
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -12px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(100%);
  transition: transform var(--duration) var(--ease-glass);
  z-index: 400; /* above backdrop */
  display: flex;
  flex-direction: column;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  /* Allow scrolling if content overflows 88vh */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.intake-sheet.is-open {
  transform: translateY(0);
}

/* Tablet / desktop: cap width, center */
@media (min-width: 768px) {
  .intake-sheet {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .intake-sheet.is-open {
    transform: translateX(-50%) translateY(0);
  }
}

/* Reduced transparency fallback */
@media (prefers-reduced-transparency: reduce) {
  .intake-sheet {
    background: rgba(22, 34, 58, 0.99);
  }
}

/* ── Drag handle (decorative) ─────────────────────────────────────── */

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  margin: 10px auto 0;
  flex-shrink: 0;
  /* aria-hidden="true" in HTML */
}

/* ════════════════════════════════════════════════════════════════════
   SHEET HEADER (§3.2.3)
   ════════════════════════════════════════════════════════════════════ */

.sheet-header {
  padding: 16px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Context row: time · status-chip */
.sheet-context-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sheet-context-time {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.sheet-context-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  flex-shrink: 0;
}

/* ── Status chip (§3.2.4 / v2 #10) ─────────────────────────────── */

.sheet-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border: 1px solid;
  line-height: 1;
}

.sheet-status-chip--pending    { background: rgba(75,163,245,0.14); border-color: rgba(75,163,245,0.40); color: rgba(140,200,255,1); }
.sheet-status-chip--taken      { background: rgba(72,199,116,0.16); border-color: rgba(72,199,116,0.40); color: rgba(140,235,170,1); }
.sheet-status-chip--missed     { background: rgba(220,60,60,0.16); border-color: rgba(220,60,60,0.40); color: rgba(255,150,150,1); }
.sheet-status-chip--skipped    { background: rgba(140,140,160,0.16); border-color: rgba(140,140,160,0.35); color: rgba(190,190,210,1); }
.sheet-status-chip--taken-late { background: rgba(255,170,50,0.16); border-color: rgba(255,170,50,0.40); color: rgba(255,210,130,1); }
.sheet-status-chip--uncertain  { background: rgba(180,130,220,0.16); border-color: rgba(180,130,220,0.40); color: rgba(220,180,250,1); }

.sheet-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Med name — largest element (24px/650) */
.sheet-med-name {
  font-size: 24px;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-top: 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Dosage row */
.sheet-dosage-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.sheet-dosage {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Critical pill */
.sheet-critical-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: rgba(255, 180, 60, 0.18);
  border: 1px solid rgba(255, 180, 60, 0.40);
  color: rgba(255, 210, 100, 0.98);
  letter-spacing: 0.01em;
}

.sheet-critical-pill[hidden] { display: none; }

/* Immutability label (past-day) — §3.2.10 */
.sheet-immutability {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: rgba(140, 140, 160, 0.10);
  border: 1px solid rgba(140, 140, 160, 0.20);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sheet-immutability[hidden] { display: none; }

.sheet-immutability-icon {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   ACTION LADDER (§3.2.3)
   ════════════════════════════════════════════════════════════════════ */

.sheet-actions {
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Primary action: «Принято» ──────────────────────────────────── */

.action-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(72, 199, 116, 0.48);
  background: rgba(72, 199, 116, 0.18);
  color: rgba(180, 245, 200, 1);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--duration) var(--ease-glass),
    transform 0.15s var(--ease-glass);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
  letter-spacing: -0.01em;
  touch-action: manipulation;
}

.action-primary:hover {
  background: rgba(72, 199, 116, 0.26);
}

/* Tap micro-pulse (§7.3) */
.action-primary:active,
.action-primary.is-confirming {
  transform: scale(0.98);
  background: rgba(72, 199, 116, 0.36);
}

/* In-flight state */
.action-primary.is-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: not-allowed;
}

/* ── Secondary row (§3.2.5) ──────────────────────────────────────── */

.action-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.action-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border-light);
  background: var(--glass-white);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--duration) var(--ease-glass),
    border-color var(--duration) var(--ease-glass),
    box-shadow var(--duration) var(--ease-glass);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
  text-align: center;
  line-height: 1.2;
  touch-action: manipulation;
}

.action-secondary:hover {
  background: var(--glass-white-mid);
  border-color: var(--glass-border);
}

/* Tap micro-pulse (§7.6) */
.action-secondary:active {
  transform: scale(0.96);
}

/* Icon glyph (monochrome unicode, larger) */
.action-secondary-icon {
  font-size: 18px;
  line-height: 1;
}

/* ── v2 #11: active state — 3 reinforcers snap instantly ───────── */

/* Late — orange */
.action-secondary[data-action="late"].is-active {
  background: rgba(255, 170, 50, 0.22);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(255, 170, 50, 0.55);
  font-weight: 650;
  color: rgba(255, 220, 150, 1);
}

/* Missed — red */
.action-secondary[data-action="missed"].is-active {
  background: rgba(220, 60, 60, 0.22);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(220, 60, 60, 0.55);
  font-weight: 650;
  color: rgba(255, 150, 150, 1);
}

/* Skipped — grey */
.action-secondary[data-action="skipped"].is-active {
  background: rgba(140, 140, 160, 0.22);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(140, 140, 160, 0.55);
  font-weight: 650;
  color: rgba(200, 200, 220, 1);
}

/* ── Tertiary: «Не помню» ─────────────────────────────────────── */

.action-tertiary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(180, 130, 220, 0.25);
  background: rgba(180, 130, 220, 0.08);
  color: rgba(210, 170, 240, 0.90);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--duration) var(--ease-glass),
    border-color var(--duration) var(--ease-glass),
    box-shadow var(--duration) var(--ease-glass);
  backdrop-filter: blur(var(--blur-light));
  -webkit-backdrop-filter: blur(var(--blur-light));
  touch-action: manipulation;
  letter-spacing: 0;
}

.action-tertiary:hover {
  background: rgba(180, 130, 220, 0.14);
}

.action-tertiary:active {
  transform: scale(0.96);
}

/* Active state — purple */
.action-tertiary.is-active {
  background: rgba(180, 130, 220, 0.22);
  border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(180, 130, 220, 0.55);
  font-weight: 650;
  color: rgba(225, 195, 250, 1);
}

/* ── Loading spinner (§3.2.8) ──────────────────────────────────── */

.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: sheetSpinner 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes sheetSpinner {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   REFINEMENT ZONE — taken-late time picker (§3.2.7)
   ════════════════════════════════════════════════════════════════════ */

.sheet-refinement {
  padding: 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.sheet-refinement[hidden] { display: none; }

.sheet-refinement-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.sheet-refinement-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Native time input — styled to match Liquid Glass surface */
.sheet-time-input {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-light);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duration) var(--ease-glass);
}

.sheet-time-input:focus {
  border-color: rgba(75, 163, 245, 0.50);
  box-shadow: 0 0 0 2px rgba(75, 163, 245, 0.15);
}

/* «Сейчас» quick-fill chip */
.sheet-time-now-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-white);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration) var(--ease-glass);
  white-space: nowrap;
  touch-action: manipulation;
  flex-shrink: 0;
}

.sheet-time-now-chip:hover {
  background: var(--glass-white-mid);
}

.sheet-time-now-chip:active {
  transform: scale(0.96);
}

/* ════════════════════════════════════════════════════════════════════
   SAFETY STRIP — uncertain selection (§3.2.6)
   ════════════════════════════════════════════════════════════════════ */

.sheet-safety-strip {
  margin: 14px 20px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(180, 130, 220, 0.10);
  border: 1px solid rgba(180, 130, 220, 0.25);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(220, 185, 250, 0.92);
  flex-shrink: 0;
  animation: safetyAppear 0.28s var(--ease-glass);
}

.sheet-safety-strip[hidden] { display: none; }

.sheet-safety-strong {
  font-weight: 650;
  display: block;
  margin-bottom: 2px;
}

@keyframes safetyAppear {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Suppress safety-strip animation on reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sheet-safety-strip {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   INLINE ERROR (§3.2.12)
   ════════════════════════════════════════════════════════════════════ */

.sheet-error-inline {
  margin: 12px 20px 0;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--glass-error);
  border: 1px solid var(--glass-error-border);
  color: var(--glass-error-text);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.sheet-error-inline[hidden] { display: none; }

.sheet-error-text {
  flex: 1;
  min-width: 0;
}

.sheet-error-retry {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  touch-action: manipulation;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sheet-error-retry:active {
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════
   NOTE ZONE (§3.2.15)
   ════════════════════════════════════════════════════════════════════ */

.sheet-note-zone {
  padding: 12px 20px 0;
  flex-shrink: 0;
}

/* Toggle link */
.sheet-note-toggle {
  display: inline-block;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0; /* extend tappable area toward 44px */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.sheet-note-toggle:active {
  opacity: 0.7;
}

.sheet-note-toggle[hidden] { display: none; }

/* Textarea area */
.sheet-note-textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sheet-note-textarea-wrap[hidden] { display: none; }

.sheet-note-textarea {
  width: 100%;
  min-height: 64px;
  max-height: 120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border-light);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  transition: border-color var(--duration) var(--ease-glass);
  -webkit-overflow-scrolling: touch;
}

.sheet-note-textarea:focus {
  border-color: rgba(75, 163, 245, 0.50);
  box-shadow: 0 0 0 2px rgba(75, 163, 245, 0.12);
}

.sheet-note-textarea::placeholder {
  color: var(--text-muted);
}

.sheet-note-counter {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════════
   CONFIRM BAR (§3.2.5 / §3.2.6)
   Visible only for secondary / tertiary selections.
   ════════════════════════════════════════════════════════════════════ */

.sheet-confirm-bar {
  padding: 14px 20px 0;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.sheet-confirm-bar[hidden] { display: none; }

.btn-cancel {
  flex: 1;
  min-height: 48px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-white);
  color: var(--text-secondary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration) var(--ease-glass);
  touch-action: manipulation;
}

.btn-cancel:hover {
  background: var(--glass-white-mid);
}

.btn-cancel:active {
  transform: scale(0.97);
}

.btn-confirm {
  flex: 2;
  min-height: 48px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(75, 163, 245, 0.22);
  color: rgba(160, 210, 255, 1);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background var(--duration) var(--ease-glass),
    transform 0.1s var(--ease-glass);
  touch-action: manipulation;
}

.btn-confirm:hover {
  background: rgba(75, 163, 245, 0.32);
}

.btn-confirm:active {
  transform: scale(0.97);
}

.btn-confirm.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════
   TOAST SYSTEM (§3.2.9 / §7.5)
   Unified variants: --success, --error, --queued, --info, --multiline
   ════════════════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 16px;
  z-index: 500; /* above sheet */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  width: max-content;
  backdrop-filter: blur(var(--blur-mid));
  -webkit-backdrop-filter: blur(var(--blur-mid));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration) var(--ease-glass),
    transform var(--duration) var(--ease-glass);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Multiline modifier: left-aligned banner, not pill */
.toast--multiline {
  white-space: normal;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  align-items: flex-start;
}

/* Success */
.toast--success {
  background: rgba(20, 50, 30, 0.92);
  border: 1px solid rgba(72, 199, 116, 0.40);
  color: rgba(160, 240, 190, 0.98);
}

/* Error */
.toast--error {
  background: rgba(60, 20, 25, 0.92);
  border: 1px solid rgba(220, 60, 60, 0.40);
  color: rgba(255, 160, 160, 0.98);
}

/* Queued */
.toast--queued {
  background: rgba(50, 35, 12, 0.92);
  border: 1px solid rgba(255, 170, 50, 0.40);
  color: rgba(255, 210, 130, 0.98);
}

/* Info (future-day) */
.toast--info {
  background: rgba(35, 45, 65, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--text-primary);
}

/* Toast icon */
.toast-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   320px BREAKPOINT — minimum supported width
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 374px) {
  .sheet-header {
    padding: 12px 14px 0;
  }

  .sheet-actions {
    padding: 14px 14px 0;
  }

  .sheet-refinement {
    padding: 12px 14px 0;
  }

  .sheet-note-zone {
    padding: 10px 14px 0;
  }

  .sheet-confirm-bar {
    padding: 12px 14px 0;
  }

  .sheet-error-inline {
    margin: 10px 14px 0;
  }

  .sheet-safety-strip {
    margin: 12px 14px 0;
  }

  #toast-container {
    left: 12px;
    right: 12px;
  }

  /* Compress secondary row label font slightly */
  .action-secondary {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — §5.6
   Global rule in style.css already sets 0.01ms for all animations.
   Spinner exception: critical loading indicator, keep rotating.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sheet-safety-strip {
    animation: none;
  }

  .intake-sheet {
    transition: none;
  }

  .sheet-backdrop {
    transition: none;
  }

  .toast {
    transition: none;
  }

  /* Spinner continues rotating — AC-7 requires visible in-flight indicator */
  .btn-spinner {
    animation: sheetSpinner 0.7s linear infinite;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BACKDROP-FILTER FALLBACK
   ════════════════════════════════════════════════════════════════════ */

@supports not (backdrop-filter: blur(1px)) {
  .intake-sheet {
    background: rgba(14, 22, 42, 0.99);
  }

  .toast {
    background: rgba(14, 22, 42, 0.99) !important;
  }
}