/* Slice S4 — emergency sheet (.em-*) and the doctor's "Mi día" (.dd-*). Tokens only (see tokens.css). */

/* ================================================================ emergency sheet */
.em-step { display: grid; gap: var(--s-5); min-width: 0; }
.em-hero { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.em-hero-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--danger-tint);
  color: var(--danger-ink);
  box-shadow: 0 0 0 6px rgba(255, 57, 86, .07);
}
.em-hero-text { display: grid; gap: 4px; min-width: 0; }
.em-h { font-size: var(--fs-lg); letter-spacing: var(--track-tight); line-height: 1.2; }
.em-block { display: grid; gap: var(--s-3); min-width: 0; }
.em-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; font-weight: 600; }
.em-label-hint { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.em-section-head h4 { font-size: var(--fs-md); }

/* doctor picker */
.em-docs { display: flex; gap: 8px; overflow-x: auto; padding: 3px; margin: -3px; scrollbar-width: none; }
.em-docs::-webkit-scrollbar { display: none; }
.em-doc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.em-doc:hover { border-color: var(--purple); }
.em-doc[aria-checked="true"] { border-color: var(--purple); background: var(--purple-light); box-shadow: 0 0 0 3px rgba(37, 0, 142, .10); }
.em-doc-name { white-space: nowrap; }
@media (min-width: 720px) {
  .em-docs { flex-wrap: wrap; overflow: visible; }
}

/* how long */
.em-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.em-opt {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.em-opt:hover { border-color: var(--lavender); box-shadow: var(--shadow-1); }
.em-opt:active { transform: scale(.98); }
.em-opt[aria-checked="true"] { border-color: var(--purple); background: var(--purple-light); box-shadow: 0 0 0 3px rgba(37, 0, 142, .10); }
.em-opt-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--purple-tint);
  color: var(--purple);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.em-opt[aria-checked="true"] .em-opt-icon { background: var(--purple); color: var(--cream-light); }
.em-opt-text { display: grid; gap: 2px; min-width: 0; }
.em-opt-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.em-opt-sub { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.em-opt-check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--cream-light);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.em-opt[aria-checked="true"] .em-opt-check { opacity: 1; transform: none; }
.em-custom { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2); }
.em-custom-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.em-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.em-reason[aria-checked="true"] { background: var(--purple); border-color: var(--purple); color: var(--cream-light); }
.em-reason[aria-checked="true"] svg { color: var(--lavender); }
.em-error { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--danger-ink); }

/* preview */
.em-planning { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.em-planning svg { color: var(--purple); animation: em-breathe 1.4s ease-in-out infinite; }
.em-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: var(--touch);
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  text-align: left;
}
.em-range:hover { border-color: var(--lavender); }
.em-range svg { color: var(--danger-ink); }
.em-range-text { font-weight: 600; }
.em-range-reason { color: var(--ink-2); }
.em-range-edit { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--purple); }
.em-plan-head { display: grid; gap: 2px; }
.em-count { font-size: clamp(26px, 6vw, var(--fs-2xl)); letter-spacing: var(--track-display); line-height: 1.08; }
.em-plan-sub { font-size: 15px; color: var(--ink-2); }
.em-money {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success-ink);
  font-size: 14px;
  font-weight: 600;
}
.em-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.em-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.em-row-body { flex: 1; display: grid; gap: 4px; min-width: 0; }
.em-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.em-row-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.em-row-visit { font-size: 13px; color: var(--ink-2); }
.em-move { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.em-old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(22, 0, 85, .3); }
.em-arrow { display: grid; color: var(--ink-3); }
.em-new { font-weight: 600; color: var(--purple); }
.em-other { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.em-row-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.em-row.is-unresolved { border-color: rgba(255, 57, 86, .28); background: var(--danger-tint); }
.em-row.is-unresolved .em-row-note { color: var(--danger-ink); }
.em-row > .badge, .em-row > .btn { flex: none; align-self: center; }
.em-none { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; }
.em-none-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--success-tint); color: var(--success-ink); }
.em-none-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.em-go { min-width: 220px; }
.em-state { display: flex; }
@media (max-width: 719px) {
  .em-sheet .sheet-footer .btn-ghost { flex: 0 0 auto; }
  .em-sheet .sheet-footer .btn:not(.btn-ghost) { flex: 1 1 auto; min-width: 0; }
}

/* done + live tracker */
.em-done { display: grid; justify-items: center; gap: 8px; padding: 6px 0 2px; text-align: center; }
.em-done-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 0 0 10px var(--success-tint);
  animation: em-pop .55s var(--ease-out) both;
}
.em-done-title { max-width: 24ch; font-size: var(--fs-xl); }
.em-progress { display: grid; gap: 8px; }
.em-progress-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.em-progress-label { margin-right: auto; font-size: 14px; font-weight: 600; }
.em-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: em-pulse 1.8s ease-out infinite; }
.em-bar { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--sand); }
.em-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width var(--dur-3) var(--ease); }
.em-track .em-row { align-items: center; }
.em-track .em-row.is-confirmed { border-color: rgba(0, 189, 129, .35); }
.em-track .em-row.is-cancelled { opacity: .75; }

@keyframes em-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes em-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 189, 129, .45); }
  70% { box-shadow: 0 0 0 8px rgba(0, 189, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 189, 129, 0); }
}
@keyframes em-breathe { 50% { opacity: .45; } }

/* ================================================================ Mi día */
.dd { display: grid; gap: var(--s-5); width: 100%; max-width: 1120px; min-width: 0; margin: 0 auto; }
.dd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.dd-head-text { min-width: 0; }
.dd-hello { font-size: clamp(24px, 6.4vw, 34px); letter-spacing: var(--track-display); line-height: 1.1; }
.dd-date { margin-top: 4px; color: var(--ink-2); }
.dd-switch { display: grid; gap: 4px; width: min(100%, 260px); }
.dd-switch-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dd-body { min-width: 0; }
.dd-grid { display: grid; gap: var(--s-5); min-width: 0; }
.dd-col { display: grid; align-content: start; gap: var(--s-4); min-width: 0; }
@media (min-width: 1024px) {
  .dd-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: var(--s-6); }
}
.dd-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }

/* hero */
.dd-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--purple-dark);
  color: var(--on-dark);
  box-shadow: var(--shadow-2);
}
.dd-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad-glow); opacity: .5; }
.dd-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lavender); }
.dd-hero-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
.dd-hero-stat { display: grid; min-width: 0; }
.dd-hero-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--white);
}
.dd-hero-cap { font-size: 13px; color: var(--on-dark-2); }
.dd-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--on-dark-2); }
.dd-hero-leona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: var(--on-dark);
  font-weight: 500;
}
.dd-hero-leona svg { color: var(--lavender); }
.dd-em-banner { box-shadow: var(--shadow-1); }

/* next patient */
.dd-next { position: relative; display: grid; gap: 10px; overflow: hidden; padding-left: 24px; }
.dd-next::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: var(--dd-accent, var(--purple)); }
.dd-next.is-empty { padding: var(--s-2); }
.dd-next.is-empty::before { display: none; }
.dd-next.is-current .dd-eyebrow { color: var(--success-ink); }
.dd-next-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-next-rel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint);
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.dd-next-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dd-next-time {
  flex: none;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.dd-ampm { margin-left: .2em; font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.dd-next-who { flex: 1; display: grid; gap: 2px; min-width: 0; }
.dd-next-name { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.dd-next-visit { font-size: 13.5px; color: var(--ink-2); }
.dd-next-chev { flex: none; color: var(--ink-3); }
.dd-next-reason { font-size: 14px; font-style: italic; color: var(--ink-2); }
.dd-next-after { padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.dd-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* action tiles */
.dd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dd-tile {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  min-height: 124px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.dd-tile:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.dd-tile:active { transform: scale(.97); }
.dd-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; }
.dd-tile-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.dd-tile-sub { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.dd-tile-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}
.dd-tile.is-danger { background: var(--danger-strong); color: var(--white); box-shadow: 0 10px 24px -12px rgba(217, 26, 60, .7); }
.dd-tile.is-danger .dd-tile-icon { background: rgba(255, 255, 255, .18); color: var(--white); }
.dd-tile.is-danger .dd-tile-sub { color: rgba(255, 255, 255, .86); }
.dd-tile.is-danger:focus-visible { outline-color: var(--purple-dark); }
.dd-tile.is-warning { background: var(--warning-tint); }
.dd-tile.is-warning .dd-tile-icon { background: var(--amber); color: var(--purple-dark); }
.dd-tile.is-purple { background: var(--purple-light); }
.dd-tile.is-purple .dd-tile-icon { background: var(--purple); color: var(--cream-light); }
.dd-tile.is-cream { border-color: var(--line); background: var(--surface); }
.dd-tile.is-cream .dd-tile-icon { background: var(--purple-tint); color: var(--purple); }

/* consolidation */
.dd-consol { display: grid; gap: 12px; }
.dd-consol-eyebrow svg { color: var(--violet); }
.dd-consol-q { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--track-tight); line-height: 1.35; }
.dd-consol-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dd-consol-move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .72);
  font-size: 14px;
}
.dd-consol-name { flex: 1 1 140px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dd-consol-times { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dd-consol-times svg { color: var(--ink-3); }
.dd-consol-times strong { color: var(--purple); }
.dd-old { color: var(--ink-3); text-decoration: line-through; }
.dd-consol-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-consol > .badge { justify-self: start; }

/* timeline */
.dd-section { display: grid; gap: 12px; min-width: 0; }
.dd-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dd-section-title { font-size: var(--fs-lg); letter-spacing: var(--track-tight); }
.dd-section-sub { font-size: 13px; color: var(--ink-2); }
.dd-tl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dd-tl-item { position: relative; min-width: 0; }
.dd-tl-btn, .dd-tl-block {
  display: grid;
  grid-template-columns: 62px 12px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: var(--touch);
  padding: 11px 12px 11px 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.dd-tl-btn:hover { border-color: var(--lavender); box-shadow: var(--shadow-2); }
.dd-tl-time { padding-top: 1px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dd-tl-time .dd-ampm { font-size: 11px; }
.dd-tl-dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--dd-accent, var(--purple)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
.dd-tl-card { display: grid; gap: 3px; min-width: 0; }
.dd-tl-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; overflow-wrap: anywhere; }
.dd-tl-visit { font-size: 13px; color: var(--ink-2); }
.dd-tl-card .dd-badges { margin-top: 4px; }
.dd-tl-item.is-past .dd-tl-btn { background: var(--surface-2); box-shadow: none; }
.dd-tl-item.is-past .dd-tl-time, .dd-tl-item.is-past .dd-tl-name { color: var(--ink-2); }
.dd-tl-item.is-current .dd-tl-btn { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(37, 0, 142, .10), var(--shadow-1); }
.dd-tl-block { border-style: dashed; border-color: var(--lavender); background: var(--purple-light); box-shadow: none; }
.dd-tl-block .dd-tl-dot { background: var(--lavender); }
.dd-tl-block.is-emergency { border-color: rgba(255, 57, 86, .35); background: var(--danger-tint); }
.dd-tl-block.is-emergency .dd-tl-dot { background: var(--red); }
.dd-tl-block.is-emergency .dd-tl-name { color: var(--danger-ink); }
.dd-tl-now { display: flex; align-items: center; gap: 10px; margin: 2px 0; padding-left: 6px; font-size: 12px; font-weight: 700; color: var(--danger-ink); }
.dd-tl-now::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: var(--red); opacity: .55; }
.dd-tl-now-label { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--danger-tint); white-space: nowrap; }

/* rules link */
.dd-rules { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.dd-rules:hover { color: var(--ink); }
.dd-rules > svg { flex: none; color: var(--ink-3); }
.dd-rules-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--purple-tint); color: var(--purple); }
.dd-rules-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.dd-rules-title { font-weight: 600; }
.dd-rules-sub { font-size: 13px; color: var(--ink-2); }

/* sheets: running late / block time / requests */
.dd-sheet-body { display: grid; gap: var(--s-4); min-width: 0; }
.dd-sheet-foot { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; width: 100%; }
@media (max-width: 719px) {
  .dd-sheet-foot .btn { flex: 1 1 140px; }
}
.dd-late-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dd-late-opt {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 76px;
  padding: 10px 4px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.dd-late-opt:hover { border-color: var(--purple); }
.dd-late-opt:active { transform: scale(.96); }
.dd-late-opt[aria-checked="true"] { border-color: var(--purple); background: var(--purple); color: var(--cream-light); }
.dd-late-num { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dd-late-unit { font-size: 12px; opacity: .8; }
.dd-preview { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--cream); }
.dd-preview-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dd-preview-label svg { color: var(--whatsapp); }
.dd-bubble {
  justify-self: start;
  max-width: 94%;
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 14px;
  line-height: 1.45;
}
.dd-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dd-block-status:empty { display: none; }
.dd-block-error, .dd-block-free { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.dd-block-error { color: var(--danger-ink); }
.dd-block-free { color: var(--success-ink); }

.dd-reqs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dd-req { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dd-req-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dd-req-who { flex: 1; display: grid; min-width: 0; }
.dd-req-name { font-weight: 600; overflow-wrap: anywhere; }
.dd-req-age { font-size: 12.5px; color: var(--ink-muted); }
.dd-req-what { font-size: 14px; color: var(--ink-2); }
.dd-req-note { padding-left: 10px; border-left: 3px solid var(--lavender); font-size: 14px; font-style: italic; }
.dd-req-pick { display: grid; gap: 8px; }
.dd-req-pick:empty { display: none; }
.dd-req-pick-label { font-size: 13px; font-weight: 600; }
.dd-req-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dd-req-slot {
  display: grid;
  gap: 1px;
  min-height: var(--touch);
  padding: 9px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.dd-req-slot:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-light); }
.dd-req-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-req-slot-day { font-size: 12.5px; color: var(--ink-2); }
.dd-req-slot-out { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--warning-ink); }
.dd-req-actions { display: flex; flex-wrap: wrap; gap: 8px; }