/* Nexpiria Web — mirrors iOS DesignSystem.swift exactly */

:root {
  /* DesignSystem.Colors */
  --blue: #00a3ff;           /* brandBlue 0,0.64,1 */
  --purple: #9e4fde;         /* brandPurple 0.62,0.31,0.87 */
  --navy: #0a0d1a;           /* brandNavy */
  --calm: var(--blue);
  --urgent: #e64747;         /* 0.90,0.28,0.28 */
  --warning: #eb941f;        /* 0.92,0.58,0.12 */
  --success: #2ead73;        /* 0.18,0.68,0.45 */

  /* The brand hues above are bright enough to be decorative only — as text or
     under white text they sit around 2.4-3.9:1. Two derived families keep the
     identity while clearing WCAG AA (4.5:1):
       *-ink    accent used AS text; redefined per theme, and dark enough to
                also work on its own 16-22% tint (badges, soft buttons)
       *-solid  accent used as a FILL under white text; identical in both
                themes, since white has to stay readable either way
     Values computed against the real composited backgrounds, not guessed. */
  --blue-ink: #0070af;
  --purple-ink: #9e4fde;
  --urgent-ink: #c21a1a;
  --warning-ink: #975c0d;
  --success-ink: #20774f;

  --blue-solid: #007cc2;
  --urgent-solid: #e22c2c;

  --bg: #f2f2f7;             /* systemGroupedBackground (light) */
  --surface: #ffffff;        /* secondarySystemGroupedBackground */
  --fill: rgba(120, 120, 128, 0.12); /* tertiarySystemFill-ish */
  --text: #000000;
  /* 0.6 flattened to #8a8a8e — only 3.4:1, and this carries most of the 12px
     metadata in the app. 0.75 clears AA on both the white and grouped grounds. */
  --text-secondary: rgba(60, 60, 67, 0.75);
  --text-tertiary: rgba(60, 60, 67, 0.3);
  --line: rgba(60, 60, 67, 0.12);
  --shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* cardShadow radius 8 y 3 */

  /* DesignSystem.Spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* DesignSystem.Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --brand: linear-gradient(135deg, var(--blue), var(--purple));
  --brand-h: linear-gradient(90deg, var(--blue), var(--purple));
  /* Same gradient, dark enough for the white text painted on top of it. */
  --brand-ink: linear-gradient(135deg, #007cc2, #8a3fc8);
  --brand-ink-h: linear-gradient(90deg, #007cc2, #8a3fc8);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tab-h: 49px;

  /* DesignSystem.Animation */
  --anim-spring: 380ms cubic-bezier(0.34, 1.2, 0.64, 1);
  --anim-gentle: 280ms ease-in-out;
  --anim-quick: 180ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --fill: rgba(120, 120, 128, 0.24);
    --text: #ffffff;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --line: rgba(84, 84, 88, 0.65);
    --shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    /* On a dark ground the ink has to go lighter, not darker. */
    --blue-ink: #00a3ff;
    --purple-ink: #aa64e2;
    --urgent-ink: #eb6a6a;
    --warning-ink: #eb941f;
    --success-ink: #2fb176;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7; --surface: #ffffff; --fill: rgba(120,120,128,0.12);
  --text: #000; --text-secondary: rgba(60,60,67,0.75); --text-tertiary: rgba(60,60,67,0.3);
  --line: rgba(60,60,67,0.12);
  --blue-ink: #0070af; --purple-ink: #9e4fde; --urgent-ink: #c21a1a;
  --warning-ink: #975c0d; --success-ink: #20774f;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000; --surface: #1c1c1e; --fill: rgba(120,120,128,0.24);
  --text: #fff; --text-secondary: rgba(235,235,245,0.6); --text-tertiary: rgba(235,235,245,0.3);
  --line: rgba(84,84,88,0.65);
  --blue-ink: #00a3ff; --purple-ink: #aa64e2; --urgent-ink: #eb6a6a;
  --warning-ink: #eb941f; --success-ink: #2fb176;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-spring: 1ms linear;
    --anim-gentle: 1ms linear;
    --anim-quick: 1ms linear;
  }
}

* { box-sizing: border-box; }
html {
  height: 100%;
  height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--blue-ink); }

#app {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

html.sheet-open,
body.sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.sheet-open #app > .screen {
  pointer-events: none;
  user-select: none;
}
body.sheet-open #app > .overlay,
body.sheet-open .overlay {
  pointer-events: auto;
  user-select: auto;
}

/* Background like HomeView.backgroundGradient */
.screen {
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 110px);
  background:
    linear-gradient(
      180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--blue) 5%, var(--bg)) 40%,
      var(--bg) 100%
    );
  overflow-x: hidden;
}
.screen:not(:has(.tabbar)) {
  padding-bottom: calc(var(--safe-b) + 40px);
}

/* Inline nav title like iOS .principal */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  min-height: calc(44px + var(--safe-t));
  padding: max(var(--s-xs), var(--safe-t)) var(--s-md) var(--s-xs);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.topbar h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-lockup {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1;
  min-width: 0;
}
.brand-lockup img { display: none; } /* iOS uses text title, not logo in nav */
.brand-lockup h1 { flex: 1; min-width: 0; }
.topbar .actions { display: flex; gap: 2px; min-width: 44px; flex-shrink: 0; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--blue-ink);
  font-size: 17px;
  transition: transform var(--anim-quick), opacity var(--anim-quick);
}
.icon-btn:active { transform: scale(0.92); opacity: 0.7; }

.content {
  padding: var(--s-sm) var(--s-md) var(--s-lg);
  max-width: 720px;
  margin: 0 auto;
}

/* Home header — greeting + status (not navy marketing card) */
.home-header {
  padding: var(--s-sm) 0 var(--s-xs);
}
.home-header .greeting {
  margin: 0;
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.15;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-header .status {
  margin: var(--s-xs) 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-header .status.ok { color: var(--success-ink); }
.home-header .status.warn { color: var(--warning-ink); }
.home-header .status.bad { color: var(--urgent-ink); }

/* Home list layouts — list (default), grid, Smart Bubbles */
.home-lists-body { position: relative; }
.home-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-sm);
  margin-bottom: var(--s-sm);
}
.home-card-grid .card {
  margin-bottom: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 12px;
  align-content: start;
  min-height: 100%;
}
.home-card-grid .card .accent {
  top: 8px;
  bottom: 8px;
}
.home-card-grid .cat-dot {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 16px;
}
.home-card-grid .card-title {
  font-size: 15px;
  margin-bottom: 2px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.home-card-grid .card-meta {
  font-size: 11px;
}
.home-card-grid .card-action { display: none; }
.home-card-grid .card-side {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
}
.home-card-grid .card-side .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smart 3D Life Bubbles — spatial temporal canvas (pseudo-3D CSS) */
.smart-bubble-scene {
  --sb-ink: #e8eef8;
  --sb-muted: rgba(232, 238, 248, 0.62);
  --sb-deep: #070b14;
  position: relative;
  margin: 2px 0 var(--s-md);
  border-radius: calc(var(--r-lg) + 4px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #8aa4c8 22%, transparent);
  background:
    radial-gradient(ellipse 80% 60% at 50% 42%, rgba(60, 100, 170, 0.22), transparent 62%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(90, 70, 140, 0.14), transparent 55%),
    linear-gradient(165deg, #10182a 0%, var(--sb-deep) 55%, #0a101c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(8, 12, 24, 0.28);
}
.smart-bubble-canvas {
  position: relative;
  width: 100%;
  min-height: min(58dvh, 480px);
  height: min(58dvh, 480px);
  max-height: 560px;
  perspective: 900px;
  transform-style: preserve-3d;
  touch-action: manipulation;
}
.smart-now {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  pointer-events: none;
}
.smart-now-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 8px rgba(90, 140, 220, 0.06),
    inset 0 0 20px rgba(120, 170, 255, 0.12);
  animation: smart-now-pulse 7s ease-in-out infinite;
}
.smart-now-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #7eb0ff 45%, #3a6fd0 100%);
  box-shadow: 0 0 18px rgba(110, 160, 255, 0.45);
}
.smart-now-label {
  position: absolute;
  top: calc(100% + 6px);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-muted);
}
.smart-bubble {
  --bsize: 96px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bsize);
  height: var(--bsize);
  margin: 0;
  padding: 12px 10px 10px;
  border: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--sb-ink);
  text-align: center;
  cursor: pointer;
  z-index: var(--bz, 10);
  opacity: var(--bop, 1);
  transform:
    translate3d(calc(var(--bx) - var(--bsize) / 2), calc(var(--by) - var(--bsize) / 2), calc(var(--bdepth) * 28px))
    scale(var(--bscale, 1));
  transform-origin: center center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.28), transparent 36%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--bcolor) 35%, transparent), transparent 50%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(12, 18, 32, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(0, 0, 0, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: smart-bubble-drift 8s ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
  will-change: transform;
}
.smart-bubble-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bcolor) 28%, transparent), transparent 68%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.smart-bubble-glass {
  position: absolute;
  inset: 10% 18% auto;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.smart-bubble-ico,
.smart-bubble-title,
.smart-bubble-days,
.smart-bubble-extra {
  position: relative;
  z-index: 2;
}
.smart-bubble-ico { font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.smart-bubble-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 86%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
.smart-bubble-days {
  font-size: 10px;
  font-weight: 650;
  color: var(--sb-muted);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-bubble-extra {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(232, 238, 248, 0.72);
  line-height: 1.2;
  max-width: 92%;
}
.smart-bubble-extra span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-bubble:hover,
.smart-bubble:focus-visible {
  outline: none;
  z-index: 60;
  opacity: 1;
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 28px color-mix(in srgb, var(--bcolor) 28%, transparent);
  transform:
    translate3d(calc(var(--bx) - var(--bsize) / 2), calc(var(--by) - var(--bsize) / 2), calc(var(--bdepth) * 40px))
    scale(calc(var(--bscale, 1) * 1.08));
}
.smart-bubble:hover .smart-bubble-extra,
.smart-bubble:focus-visible .smart-bubble-extra { display: flex; }
.smart-bubble:hover .smart-bubble-days,
.smart-bubble:focus-visible .smart-bubble-days { color: #fff; }
.smart-bubble:active {
  transform:
    translate3d(calc(var(--bx) - var(--bsize) / 2), calc(var(--by) - var(--bsize) / 2), calc(var(--bdepth) * 20px))
    scale(calc(var(--bscale, 1) * 0.96));
}
.smart-bubble.done {
  filter: saturate(0.65) brightness(0.9);
  opacity: calc(var(--bop, 1) * 0.75);
}
.smart-bubble.expired .smart-bubble-days,
.smart-bubble.urgent .smart-bubble-days,
.smart-bubble.today .smart-bubble-days { color: #ffb4b0; }
.smart-bubble.soon .smart-bubble-days { color: #ffd39a; }

@keyframes smart-bubble-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes smart-now-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .smart-bubble,
  .smart-now-ring { animation: none !important; }
}
@media (min-width: 860px) {
  .smart-bubble-canvas {
    min-height: 520px;
    height: 520px;
  }
  .smart-bubble { --bsize: 108px; }
  .smart-bubble-ico { font-size: 22px; }
  .smart-bubble-title { font-size: 12px; }
}
@media (max-width: 420px) {
  .smart-bubble-canvas {
    min-height: min(52dvh, 400px);
    height: min(52dvh, 400px);
  }
  .smart-bubble { --bsize: 84px; padding: 10px 8px; }
  .smart-bubble-ico { font-size: 17px; }
  .smart-bubble-title { font-size: 10px; }
  .smart-now { width: 60px; height: 60px; }
}

/* Focus view */
.focus-summary {
  margin: 2px 0 var(--s-md);
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--fill) 70%, var(--surface));
  border: 1px solid var(--line);
}
.focus-summary-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.focus-summary-count {
  margin: 4px 0 2px;
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}
.focus-summary-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 550;
}
.focus-clear { margin-bottom: var(--s-sm); }
.section-title.focus-section.act > span:first-child::before,
.section-title.focus-section.prepare > span:first-child::before,
.section-title.focus-section.watch > span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  margin-right: 8px;
  vertical-align: 0.05em;
}
.section-title.focus-section.act > span:first-child::before { background: var(--urgent); }
.section-title.focus-section.prepare > span:first-child::before { background: var(--warning); }
.section-title.focus-section.watch > span:first-child::before { background: var(--blue-solid, var(--blue)); }

/* Timeline view — vertical distance-from-now, not a calendar */
.home-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 4px 0 var(--s-md);
}
.timeline-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.timeline-now-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--blue-solid, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-solid, var(--blue)) 18%, transparent);
  flex: 0 0 auto;
}
.timeline-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  min-width: 0;
}
.timeline-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
}
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--blue-solid, var(--blue));
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-solid, var(--blue)) 35%, transparent);
  z-index: 1;
  flex: 0 0 auto;
}
.timeline-dot.expired,
.timeline-dot.urgent,
.timeline-dot.today { background: var(--urgent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--urgent) 40%, transparent); }
.timeline-dot.soon { background: var(--warning); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent); }
.timeline-dot.month { background: var(--blue-solid, var(--blue)); }
.timeline-dot.far,
.timeline-dot.ok { background: color-mix(in srgb, var(--text-secondary) 55%, var(--surface)); box-shadow: none; }
.timeline-line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 16px;
  margin-top: 4px;
  background: color-mix(in srgb, var(--line) 90%, var(--text-secondary));
  border-radius: 99px;
}
.timeline-row:last-child .timeline-line { display: none; }
.timeline-main {
  min-width: 0;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-meta { display: flex; align-items: center; gap: 8px; }
.timeline-days {
  font-size: 11px !important;
  min-height: 22px;
  padding: 2px 8px !important;
}
.home-timeline .card { margin-bottom: 0; }

/* Score card — household health (Family) and Nexpiria score (Stats) */
.hero-card {
  background: var(--brand-ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-md);
  margin-bottom: var(--s-sm);
  overflow: hidden;
}
.hero-card .eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-card h2 {
  margin: var(--s-xs) 0 0;
  font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
}
.hero-card p {
  margin: var(--s-xs) 0 0;
  font-size: 13px; opacity: 0.9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Search — NexpiriaSearchBar */
.search {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px var(--s-md);
  margin-bottom: var(--s-sm);
  transition: box-shadow var(--anim-gentle), border-color var(--anim-quick);
}
.search.is-focused {
  position: sticky;
  top: 52px;
  z-index: 28;
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow: var(--shadow);
}
.search input {
  border: 0; outline: 0; width: 100%; background: transparent;
  font-size: 17px;
}
.search .search-ico { color: var(--text-secondary); font-size: 15px; }

/* Home controls — premium filter stack under search */
.home-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--s-md);
}
.chips {
  display: flex;
  gap: var(--s-xs);
  overflow-x: auto;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  margin-bottom: 0;
  margin-left: -2px;
  margin-right: -2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--s-md);
}
.screen:has(.fab-wrap) .filter-rail.chips,
.screen:has(.fab-wrap) .seg-control.chips {
  padding-right: 124px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  min-height: 36px;
  max-width: min(70vw, 220px);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--anim-spring), color var(--anim-spring), border-color var(--anim-spring), transform var(--anim-quick), box-shadow var(--anim-gentle);
}
.chip.fill {
  background: var(--fill);
  border-color: transparent;
}
.chip.active {
  background: var(--blue-solid);
  color: #fff;
  border-color: transparent;
}
.chip:active { transform: scale(0.96); }

/* Scope segmented control */
.seg-control {
  display: flex;
  gap: 2px;
  padding: 4px;
  margin: 0;
  background: color-mix(in srgb, var(--fill) 88%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  max-width: none;
}
.seg-item .seg-ico {
  display: grid;
  place-items: center;
  opacity: 0.85;
}
.seg-item .seg-label { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.seg-item.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.seg-item.active .seg-ico { color: var(--blue-ink); opacity: 1; }

/* Time / status filter rail */
.filter-rail {
  gap: 8px;
  padding-top: 2px;
}
.filter-pill {
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.filter-pill:hover { background: color-mix(in srgb, var(--fill) 70%, transparent); }
.filter-pill.active {
  background: color-mix(in srgb, var(--blue-solid) 12%, var(--surface));
  color: var(--blue-ink);
  border-color: color-mix(in srgb, var(--blue-solid) 28%, transparent);
  box-shadow: none;
}

/* Sort / category / view toolbar */
.home-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.toolbar-actions {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  margin: 0;
  padding: 0;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tool-btn.chip.fill {
  background: var(--surface);
  border-color: var(--line);
}
.tool-btn .tool-ico,
.tool-select .tool-ico {
  color: var(--blue-ink);
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}
.tool-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  min-width: 0;
  max-width: min(46vw, 180px);
  padding: 0 28px 0 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
}
.tool-select::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.tool-select select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  min-width: 0;
  max-width: 100%;
  padding: 8px 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}
.tool-select:focus-within {
  border-color: color-mix(in srgb, var(--blue-solid, var(--blue)) 45%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-solid, var(--blue)) 16%, transparent);
}
.view-seg {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  margin: 0;
  max-width: min(100%, 200px);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--fill) 88%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 12px;
}
.view-seg::-webkit-scrollbar { display: none; }
.view-btn {
  width: 32px;
  min-width: 32px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text-secondary);
  max-width: none;
}
.view-btn.active {
  background: var(--surface);
  color: var(--blue-ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

html[data-theme="dark"] .seg-item.active {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .seg-item.active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
  }
}

.section-title {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-sm);
  margin: var(--s-md) 0 var(--s-sm);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-secondary);
  min-width: 0;
}
.section-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-title > span:first-child { flex: 1 1 auto; }
.section-title > span:last-child { flex: 0 0 auto; }

/* DeadlineCard */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-md);
  margin-bottom: var(--s-sm);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-md);
  align-items: start;
  text-align: left;
  width: 100%;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--anim-quick), opacity var(--anim-gentle), border-color var(--anim-quick);
  animation: card-in var(--anim-gentle) both;
}
.card:active { transform: scale(0.985); }
.card.done { opacity: 0.72; }
.card .accent {
  position: absolute; left: 2px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 2px;
}
.card .accent.bad { background: var(--urgent); }
.card .accent.warn { background: var(--warning); }
.card .accent.soon { background: var(--blue); }
.card .accent.ok { background: var(--success); opacity: 0.5; }

/* Truncation — long text stays inside the frame with … */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.truncate-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

.cat-dot {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; font-size: 20px;
  flex-shrink: 0;
}
.card > div:not(.card-side):not(.ant-ico):not(.cat-dot) {
  min-width: 0;
  overflow: hidden;
}
.ant-body { min-width: 0; overflow: hidden; }
.card-title {
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
  margin: 0 0 6px; line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
/* The two .card-meta links are standalone rows, not inline prose, so give them
   a real tap target rather than a 14px-tall line of text. */
.card-meta a {
  display: inline-block;
  max-width: 100%;
  padding: 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta {
  margin: 0 0 4px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  min-width: 0;
  max-width: 100%;
}
/* The class covers both compact card metadata and prose (settings hints, form
   errors, anticipation messages). Only the list cards want a single clipped
   line; everywhere else a cut-off sentence is just unreadable. Anticipation
   cards are .card too, but their body is prose. */
.card:not(.ant-card) .card-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-action {
  margin: 4px 0 0; font-size: 12px; font-weight: 500;
  color: var(--blue-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.card-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-xs);
  /* .card is a `auto 1fr auto` grid, so flex-shrink does nothing here. A
     percentage max-width against that indefinite track, combined with
     min-width:0, collapsed this column to a few pixels and ellipsised every
     badge down to one letter. Urgency labels are short and bounded, so sizing
     the track to the content is safe — the 1fr title column absorbs the rest. */
  min-width: max-content;
}
.card-side .badge {
  max-width: 100%;
}

.badge {
  font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.urgent { background: color-mix(in srgb, var(--urgent) 18%, transparent); color: var(--urgent-ink); }
.badge.today { background: color-mix(in srgb, var(--urgent) 22%, transparent); color: var(--urgent-ink); }
.badge.soon { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning-ink); }
.badge.month { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue-ink); }
.badge.ok { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success-ink); }
.badge.far { background: var(--fill); color: var(--text-secondary); }
.badge.expired { background: color-mix(in srgb, var(--urgent) 18%, transparent); color: var(--urgent-ink); }

.empty {
  text-align: center; padding: var(--s-xl) var(--s-md); color: var(--text-secondary);
  border-radius: var(--r-lg);
}
.empty.success-tint {
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.empty strong { display: block; color: var(--text); font-size: 20px; font-weight: 700; margin-bottom: 6px; }

/* Anticipation engine V1 */
.anticipate-section { margin-bottom: var(--s-sm); }
.anticipate-section .section-title { margin-top: var(--s-xs); }
.empty.ant-empty.compact {
  padding: var(--s-sm) var(--s-md);
  text-align: left;
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}
.empty.ant-empty.compact strong { font-size: 15px; margin-bottom: 2px; }
.empty.ant-empty.compact { font-size: 13px; }
.ant-list { display: grid; gap: 0; }
.card.ant-card {
  grid-template-columns: auto 1fr;
  cursor: pointer;
}
.ant-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--fill); font-size: 18px; flex-shrink: 0;
}
.ant-body { min-width: 0; }
.ant-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-xs);
  margin-top: var(--s-sm);
}
.detail-block .detail-actions,
.detail-block > .btn {
  margin-top: var(--s-sm);
}
.detail-block > .btn + .btn {
  margin-top: var(--s-xs);
}
.ant-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-sm); margin: 4px 0 var(--s-md);
}
.btn-row {
  display: flex;
  gap: var(--s-sm);
  margin-top: var(--s-md);
  align-items: stretch;
}
.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  border-radius: var(--r-md);
  padding: 14px var(--s-md);
  min-height: 50px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  background: var(--fill);
  color: var(--text);
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform var(--anim-quick), opacity var(--anim-quick), background var(--anim-quick), border-color var(--anim-quick);
  -webkit-user-select: none;
  user-select: none;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); opacity: 0.88; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* Secondary / outline — bordered surface button */
.btn.secondary,
.btn.outline {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn.ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--line);
}
.btn.primary {
  background: var(--blue-solid);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 28%, transparent);
}
.btn.danger {
  background: color-mix(in srgb, var(--urgent) 12%, var(--surface));
  color: var(--urgent-ink);
  border: 1px solid color-mix(in srgb, var(--urgent) 28%, transparent);
  box-shadow: none;
}
.btn.danger.solid,
.btn.danger.primary {
  background: var(--urgent-solid);
  color: #fff;
  border-color: transparent;
}
/* Third tier: actions that only navigate or export, so they must not compete
   with the ones that change data. Keeps the full tap target, drops the
   surface and border that made all six actions look equally important. */
.btn.quiet {
  background: transparent;
  color: var(--blue-ink);
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 500;
}
.btn.quiet:active { background: var(--fill); }
.btn.block {
  width: 100%;
  flex: none;
  margin-top: var(--s-sm);
}
.btn.sm {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--r-sm);
  display: inline-flex;
}

.detail-actions {
  display: grid;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}
.detail-actions .btn { flex: none; width: 100%; }
/* Sets the destructive action apart from the stack above it. */
.detail-actions .btn.danger { margin-top: var(--s-xs); }
.empty-actions {
  display: grid;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}
.empty-actions .btn { width: 100%; }

/* FAB cluster — FloatingScanButton + FloatingAddButton */
.fab-wrap {
  position: fixed;
  right: var(--s-lg);
  bottom: calc(var(--tab-h) + var(--safe-b) + var(--s-lg));
  z-index: 70;
  display: flex; flex-direction: row; align-items: center; gap: var(--s-sm);
}
.fab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: transparent;
}
.fab-menu {
  position: absolute;
  right: 0;
  bottom: 70px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  animation: sheet-up var(--anim-spring) both;
  z-index: 71;
}
.fab-menu button {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.fab-menu button:last-child { border-bottom: 0; }
.fab-menu button:active { background: var(--fill); }

.fab {
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--brand-ink); color: #fff;
  font-size: 28px; font-weight: 700;
  box-shadow: 0 6px 12px color-mix(in srgb, var(--purple) 35%, transparent);
  display: grid; place-items: center;
  transition: transform var(--anim-spring);
}
.fab.scan {
  width: 54px; height: 54px; font-size: 20px;
  background: var(--brand-ink-h);
  box-shadow: 0 5px 10px color-mix(in srgb, var(--purple) 30%, transparent);
}
.fab.scan svg { display: block; }
.fab:active { transform: scale(0.92); }

/* Tab bar — iOS style */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 4px 8px var(--safe-b);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-top: 0.5px solid var(--line);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--text-secondary); font-size: 10px; font-weight: 500;
  min-height: 44px;
  transition: color var(--anim-quick);
}
.tab .ico {
  display: grid; place-items: center;
  width: 28px; height: 24px; line-height: 1;
}
.tab .ico svg { display: block; }
.tab .tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.tab.active { color: var(--blue-ink); }

/* Onboarding — light grouped (iOS), not dark navy */
.full {
  min-height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  padding: var(--s-sm) var(--s-lg) calc(var(--s-lg) + var(--safe-b));
}
.full .brand {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text);
}
.full .brand img {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
}
.full .slides {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s-md);
}
.full h2 {
  font-size: clamp(28px, 7vw, 34px); letter-spacing: -0.5px; margin: 0; line-height: 1.15;
  font-weight: 700;
}
.full p { margin: 0; color: var(--text-secondary); font-size: 17px; max-width: 34ch; line-height: 1.5; }
.dots { display: flex; gap: var(--s-xs); margin: var(--s-lg) 0; justify-content: center; }
.dot { width: 8px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text-secondary) 40%, transparent); transition: width var(--anim-gentle), background var(--anim-gentle); }
.dot.on { width: 22px; background: var(--blue); }

/* Bottom sheets — iOS presentation (above tabbar/FAB) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  padding-top: max(var(--safe-t), 12px);
  animation: fade var(--anim-quick) ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: min(92dvh, calc(100% - 8px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 0;
  margin: 0;
  animation: sheet-up var(--anim-spring) both;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
  padding-bottom: max(var(--safe-b), 12px);
}
.sheet-handle {
  width: 36px;
  height: 5px;
  border-radius: 99px;
  background: var(--fill);
  margin: 10px auto 6px;
  flex-shrink: 0;
}
.sheet > h2 {
  margin: 0 var(--s-md) var(--s-sm);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  flex-shrink: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.sheet-detail {
  max-height: min(94dvh, calc(100% - 4px));
}
.sheet-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s-xs);
  margin: 0;
  padding: 0 var(--s-sm) var(--s-xs);
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--line);
}
.sheet-top h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* A single clipped line cut a 70-character deadline title down to a third of
     itself, and this header is the only place the full title is shown. Three
     lines fit the 70-character cap even at 360px, and still bound the header. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  word-break: break-word;
}
.detail-block .card-title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.field input#f-title,
.field input#sub-name,
.field input#war-product,
.stack-form input#sub-name,
.stack-form input#war-product {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--s-sm) var(--s-md) var(--s-md);
}
/* Non-detail sheets: content after handle scrolls as a block */
.sheet > .cal-jump,
.sheet > .field,
.sheet > .stack-form,
.sheet > .detail-block,
.sheet > .btn-row,
.sheet > .detail-actions {
  padding-left: var(--s-md);
  padding-right: var(--s-md);
}
.sheet > .cal-jump,
.sheet-body.cal-jump {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--s-md);
}
.sheet-picker {
  max-height: min(70dvh, 520px);
}
.sheet .btn-row {
  margin-top: var(--s-md);
  margin-bottom: var(--s-xs);
}
.detail-hero {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}
.detail-hero > div { min-width: 0; flex: 1; overflow: hidden; }
.detail-hero .card-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* These are stacked "label: value" lines and prose paragraphs, not a compact
   card, so wrapping is always better than cutting the sentence off. */
.detail-block p.card-meta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detail-block p:not(.card-meta):not(.card-title) {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.detail-block strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  max-width: 100%;
}
.detail-block img,
.sheet-body img,
.doc-confirm img {
  max-width: 100%;
  height: auto;
  display: block;
}

.field label .req,
label .req,
.req {
  color: var(--urgent-ink);
  font-weight: 700;
  margin-right: 2px;
}
.error-popup {
  z-index: 140;
}
.error-sheet {
  max-width: min(400px, 100%);
  max-height: min(50dvh, 360px);
  margin: auto 12px calc(12px + var(--safe-b));
  border-radius: var(--r-lg);
  padding-bottom: var(--s-sm);
}
.error-sheet h2 {
  margin: 0 var(--s-md) var(--s-sm) !important;
  font-size: 20px !important;
  white-space: normal !important;
}
.error-sheet-msg {
  margin: 0 var(--s-md) var(--s-md);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.error-sheet-list {
  margin: 0 var(--s-md) var(--s-md);
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.error-sheet-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 6px 0;
}
.error-sheet-list li + li { border-top: 1px solid var(--line); }
.error-sheet-list li::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--urgent-solid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
@media (min-width: 860px) {
  .error-sheet { margin: auto; }
}

.field { margin-bottom: var(--s-md); }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: var(--s-xs);
}
.field input, .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  outline: none;
  min-height: 48px;
  font-size: 17px;
  transition: border-color var(--anim-quick), box-shadow var(--anim-quick);
}
.field select,
.stack-form select {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input:not([type]),
.stack-form input[type="text"],
.stack-form input[type="email"],
.stack-form input[type="url"],
.stack-form input:not([type]) {
  text-overflow: ellipsis;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: var(--urgent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--urgent) 22%, transparent);
}
.form-err {
  color: var(--urgent);
  margin: 0 0 var(--s-sm);
  font-weight: 600;
}
.char-hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: right;
}
.char-hint.near-limit { color: var(--warning-ink); }
.char-hint.at-limit { color: var(--urgent-ink); font-weight: 600; }
.doc-confirm .detail-block .check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.doc-confirm .section-title { margin-top: var(--s-md); }
.field textarea { min-height: 120px; resize: vertical; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.check-grid { display: grid; gap: var(--s-xs); }
.check {
  display: flex; align-items: center; gap: var(--s-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 15px;
  min-height: 48px;
  box-shadow: none;
}
/* Inside .field, the generic `label` and `input` rules are more specific than
   .check: they force display:block and stretch the box to 100%, which drops the
   caption onto its own line. Restore the row here. */
.field label.check {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0;
}
.check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--blue-solid);
}
.adv {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  margin-top: var(--s-sm);
  box-shadow: none;
}
.adv summary { cursor: pointer; font-weight: 700; margin-bottom: var(--s-sm); padding: 2px 0; }
.rem-picker {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s-sm);
  overflow: hidden;
}
.rem-picker-btn {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  list-style: none;
  cursor: pointer;
  min-height: 48px;
  padding: 12px 14px;
  user-select: none;
}
.rem-picker-btn::-webkit-details-marker { display: none; }
.rem-picker-label { font-weight: 700; flex: 1; }
.rem-picker-hint { color: var(--muted); font-size: 14px; }
.rem-picker-chevron {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.rem-picker[open] .rem-picker-chevron { transform: rotate(90deg); }
.rem-picker-list {
  padding: 0 var(--s-md) var(--s-md);
  border-top: 1px solid var(--line);
  padding-top: var(--s-sm);
}
.settings-group {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-md);
  border: 1px solid var(--line);
  box-shadow: none;
}
.settings-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-sm); padding: 14px var(--s-md); border-bottom: 0.5px solid var(--line);
  text-align: left; color: inherit; min-height: 48px;
  overflow: hidden;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Let the label use a second line instead of losing words on a narrow phone. */
.settings-row > span:first-child {
  flex: 1 1 auto;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.settings-row > span:last-child {
  /* Trailing values are short ("JSON", "Français", "!"); shrinking them left a
     6px sliver of the glyph. */
  flex: 0 0 auto;
  max-width: 48%;
  color: var(--text-secondary);
  font-size: 15px;
  text-align: right;
}
.settings-row .toggle { flex-shrink: 0; }

.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--s-sm); gap: 8px;
}
.cal-title-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; padding: 8px 10px;
  border-radius: var(--r-sm); font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em; color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  min-height: 44px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-title-btn .chev { color: var(--text-secondary); font-size: 12px; }
.cal-jump { display: grid; gap: var(--s-sm); margin-top: 4px; }
.month-native {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 16px; min-height: 48px;
}
.cal-panel {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-xs); touch-action: pan-y; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-secondary); font-weight: 700; padding: 4px 0; }
.cal-day {
  --day-accent: var(--blue-solid, var(--blue));
  aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 15px; font-weight: 600;
  transition: transform var(--anim-quick), border-color var(--anim-quick), box-shadow var(--anim-quick), background var(--anim-gentle);
}
.cal-day:active { transform: scale(0.94); }
.cal-day.muted { opacity: 0.35; }
.cal-day.has-deadline {
  background: color-mix(in srgb, var(--day-accent) 28%, var(--surface));
  border-color: color-mix(in srgb, var(--day-accent) 42%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--day-accent) 18%, transparent);
}
.cal-day.has-deadline.warn {
  --day-accent: var(--warning);
  background: color-mix(in srgb, var(--warning) 32%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}
.cal-day.has-deadline.bad {
  --day-accent: var(--urgent);
  background: color-mix(in srgb, var(--urgent) 34%, var(--surface));
  border-color: color-mix(in srgb, var(--urgent) 55%, transparent);
  color: color-mix(in srgb, var(--urgent) 55%, var(--text));
}
.cal-day.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 55%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.cal-day.has-deadline.selected {
  border-color: var(--day-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--day-accent) 45%, transparent);
  background: color-mix(in srgb, var(--day-accent) 38%, var(--surface));
}
.cal-day .mark {
  width: 0; height: 0; overflow: hidden;
  position: absolute; pointer-events: none;
}

.year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.year-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-md) var(--s-sm);
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: none;
  min-height: 72px;
}
.year-cell span { color: var(--text-secondary); font-size: 13px; font-weight: 650; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-md);
  box-shadow: none;
}
.stat .n { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.stat .l { color: var(--text-secondary); font-size: 13px; font-weight: 600; }

.settings-hint {
  margin: 0;
  padding: 0 var(--s-md) var(--s-sm);
}
.sub-summary {
  display: grid;
  gap: 4px;
  margin-bottom: var(--s-md);
}
.stack-form .field { margin-bottom: var(--s-md); }
.stack-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--s-xs); color: var(--text-secondary); }
.stack-form input, .stack-form select, .stack-form textarea {
  width: 100%;
  padding: 13px 14px;
  min-height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color var(--anim-quick), box-shadow var(--anim-quick);
}
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.stack-form input.is-invalid, .stack-form select.is-invalid, .stack-form textarea.is-invalid {
  border-color: var(--urgent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--urgent) 22%, transparent);
}
.toggle {
  width: 51px; height: 31px; border-radius: 99px; background: var(--fill);
  position: relative; transition: background var(--anim-gentle);
}
.toggle.on { background: var(--success); }
.toggle i {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left var(--anim-spring);
}
.toggle.on i { left: 22px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 18px);
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.92); color: #fff; padding: 12px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 600; z-index: 120;
  animation: fade var(--anim-quick) ease;
  backdrop-filter: blur(8px);
  pointer-events: none;
  max-width: min(90vw, 360px);
  text-align: center;
  overflow-wrap: anywhere;
}

.detail-block {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-md);
  margin-bottom: var(--s-sm);
  border: 1px solid var(--line);
  box-shadow: none;
}
.badge-dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--urgent-solid); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
}
.icon-btn { position: relative; }
.form-page,
.form-pad {
  padding-bottom: calc(var(--safe-b) + 48px);
  /* Plain 100% here would override .content's 720px cap and stretch forms
     across a desktop window; min() keeps the narrow-screen guard too. */
  max-width: min(720px, 100%);
}
.doc-confirm {
  max-width: 100%;
  overflow-x: hidden;
}
.doc-confirm .detail-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--bg) 28%);
  padding-top: var(--s-sm);
  padding-bottom: max(var(--safe-b), 8px);
  margin-top: var(--s-md);
  z-index: 2;
}
.contact-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm); }
.contact-row a { font-size: 13px; font-weight: 600; }
.pie-wrap { display: flex; justify-content: center; margin: 8px 0 16px; }
.link-btn {
  display: block; text-align: center; text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-weight: 650;
  min-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sub-list { margin-top: var(--s-xs); }

body.keyboard-open .fab-wrap,
body.keyboard-open .tabbar {
  /* Visual only — never disable clicks (sticky class caused dead buttons) */
  opacity: 0.35;
  transition: opacity var(--anim-gentle), transform var(--anim-gentle);
  pointer-events: auto;
}
body.keyboard-open .screen { padding-bottom: 24px; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0.85; }
  to { transform: none; opacity: 1; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 860px) {
  .tabbar { left: 50%; transform: translateX(-50%); width: min(720px, 100%); border-radius: 18px 18px 0 0; }
  .fab-wrap { right: calc(50% - 360px + 24px); }
  .overlay {
    padding: 24px;
    align-items: center;
  }
  .sheet {
    border-radius: var(--r-lg);
    max-height: min(86dvh, 820px);
    padding-bottom: var(--s-md);
  }
}

/* Tablet / large phone */
@media (max-width: 720px) {
  .content { padding-left: var(--s-md); padding-right: var(--s-md); }
  .btn-row { gap: var(--s-xs); }
  .btn { min-height: 48px; font-size: 16px; padding: 12px 14px; }
}

/* Phone — denser layout closer to iOS */
@media (max-width: 480px) {
  .content { padding-left: 14px; padding-right: 14px; }
  .home-header { padding-top: 4px; }
  .home-header .greeting { font-size: clamp(26px, 7.5vw, 32px); }
  .home-header .status { font-size: 15px; }
  .card {
    gap: 12px;
    padding: 14px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  .cat-dot { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; flex-shrink: 0; }
  .card-title { font-size: 16px; }
  .card-side { max-width: 34%; }
  .badge { font-size: 10px; padding: 4px 7px; }
  .chip { padding: 7px 12px; font-size: 12px; min-height: 34px; }
  .tools-chips .chip { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .seg-item { padding: 8px 10px; min-height: 36px; gap: 5px; }
  .seg-item .seg-label { max-width: 6.5ch; font-size: 11.5px; }
  .home-toolbar { gap: 8px; }
  .tool-btn span:last-child { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; }
  .tool-select { max-width: min(42vw, 160px); padding-right: 26px; }
  .fab-wrap {
    right: max(14px, var(--safe-r));
    bottom: calc(var(--tab-h) + var(--safe-b) + 14px);
  }
  .fab { width: 56px; height: 56px; font-size: 26px; }
  .fab.scan { width: 50px; height: 50px; }
  .search { padding: 11px 14px; }
  .search input,
  .field input,
  .field select,
  .field textarea,
  .stack-form input,
  .stack-form select,
  .stack-form textarea { font-size: 16px; } /* avoid iOS zoom on focus */

  .row-2 { grid-template-columns: 1fr; gap: var(--s-sm); }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s-xs); }
  .year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-xs); }
  .cal-grid { gap: 4px; }
  .cal-day { font-size: 14px; border-radius: 10px; }
  .cal-head { gap: 4px; }
  .cal-title-btn { font-size: 16px; padding: 8px 6px; }

  .sheet-body { padding: var(--s-sm) 14px calc(var(--s-md) + 4px); }
  .sheet > h2,
  .sheet > .cal-jump,
  .sheet > .field,
  .sheet > .btn-row { padding-left: 14px; padding-right: 14px; }
  .sheet-top { padding-left: 8px; padding-right: 8px; }
  .detail-actions { gap: 10px; }
  .btn.block { margin-top: var(--s-sm); }

  .full { padding: var(--s-sm) var(--s-md) calc(var(--s-lg) + var(--safe-b)); }
  .full h2 { font-size: clamp(24px, 7vw, 30px); }
  .full p { font-size: 16px; max-width: none; }
  .btn-row .btn { min-width: 0; }

  .settings-row {
    padding: 13px 14px;
    gap: 10px;
  }
  .contact-row { gap: var(--s-xs); }
  .contact-row a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .ant-actions { gap: 6px; }
  .ant-actions .btn.sm { flex: 1 1 auto; min-width: calc(50% - 6px); }
  .toast {
    left: 16px;
    right: 16px;
    transform: none;
    width: auto;
    max-width: none;
    bottom: calc(var(--tab-h) + var(--safe-b) + 14px);
  }
}

@media (max-width: 380px) {
  .home-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .cat-dot { width: 36px; height: 36px; font-size: 15px; }
  .card-side { max-width: 30%; }
  .card-title { font-size: 15px; }
  .tab .tab-label { font-size: 9px; }
  .stat-grid { grid-template-columns: 1fr; }
  .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { font-size: 15px; min-height: 46px; padding: 11px 12px; }
  .sheet-body { padding-left: 12px; padding-right: 12px; }
  /* Keeps a 70-character title within the header's three lines at this width. */
  .sheet-top h2 { font-size: 15px; }
  .fab-wrap { right: 12px; gap: 8px; }
  .home-header .greeting { font-size: 24px; }
}

/* Landscape phones — keep sheets usable */
@media (max-height: 480px) and (orientation: landscape) {
  .overlay { padding-top: 4px; align-items: stretch; }
  .sheet {
    max-height: 100%;
    border-radius: 12px 12px 0 0;
  }
  .sheet-body { padding-top: 6px; padding-bottom: 8px; }
  .fab-wrap { display: none; }
  .screen { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px); }
}

/* Prefer dynamic viewport units everywhere sheets exist */
@supports not (height: 100dvh) {
  .sheet { max-height: min(92vh, calc(100% - 8px)); }
  .sheet-detail { max-height: min(94vh, calc(100% - 4px)); }
}

/* Legend that explains the required-field asterisk. */
.req-legend {
  margin: 0 0 var(--s-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* In-app confirm / prompt sheets (see js/ui/dialog.js). */
.dialog-popup { z-index: 150; }
.dialog-sheet {
  max-width: min(400px, 100%);
  margin: auto 12px calc(12px + var(--safe-b));
  border-radius: var(--r-lg);
  padding-bottom: var(--s-sm);
}
.dialog-sheet h2 {
  margin: 0 var(--s-md) var(--s-xs) !important;
  font-size: 20px !important;
  white-space: normal !important;
}
.dialog-sheet .req-legend { margin: 0 var(--s-md) var(--s-sm); }
.dialog-msg {
  margin: 0 var(--s-md) var(--s-md);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.dialog-body { padding: 0 var(--s-md); }
.dialog-body .field { margin-bottom: var(--s-xs); }
.dialog-err {
  margin: 0 0 var(--s-sm);
  color: var(--urgent-ink);
  font-size: 13px;
  font-weight: 600;
}
/* Confirm first, then the way out — and never side by side, so a destructive
   action can't be hit while aiming for Cancel. */
.dialog-actions {
  display: grid;
  gap: var(--s-xs);
  padding: var(--s-xs) var(--s-md) var(--s-md);
}
.dialog-actions .btn { width: 100%; }
@media (min-width: 860px) {
  .dialog-sheet { margin: auto; }
}