/* Modals, sheet panels, time picker, decline reasons, detail sheet, overflow menu. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgb(10 22 40 / 28%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdrop-in 180ms ease-out;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sheet {
  width: min(720px, 100%);
  max-height: min(92vh, 820px);
  overflow: auto;
  padding: var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  background: var(--canvas);
  box-shadow: var(--shadow-pop);
  display: grid;
  gap: var(--s-4);
  animation: sheet-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sheet.size-sm { width: min(520px, 100%); }
.sheet.size-md { width: min(640px, 100%); }
.sheet.size-lg { width: min(900px, 100%); }
.sheet.size-xl { width: min(1040px, 100%); }

.sheet.is-full {
  width: min(1040px, 100%);
  height: min(92vh, 940px);
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sheet-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
}

.sheet-head .head-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.sheet-head .head-text { display: grid; gap: var(--s-1); min-width: 0; }

.sheet-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.6px;
  color: var(--text-primary);
}

.sheet-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.sheet-actions.single {
  grid-template-columns: 1fr;
}

.sheet-actions .btn { width: 100%; }

/* ---------- Time-picker sheet ---------- */
.time-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.time-preview .label {
  display: grid;
  gap: var(--s-1);
}

.time-preview .label .lead {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.26px;
  text-transform: uppercase;
}

.time-preview .label .copy {
  color: var(--text-secondary);
  font-size: 14px;
}

.time-preview .value {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.9px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}

.time-option {
  height: 48px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.07px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.time-option:hover {
  background: var(--surface-2);
  border-color: var(--text-tertiary);
}

.time-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on-bg);
}

@media (max-width: 720px) {
  .time-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Wait-nudge sheet ---------- */
.wait-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.wait-option {
  min-width: 92px;
  height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.wait-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on-bg);
}

/* ---------- Decline-reason sheet ---------- */
.reason-list {
  display: grid;
  gap: var(--s-2);
}

.reason-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: inherit;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease;
}

.reason-card:hover {
  background: var(--surface-2);
  border-color: var(--text-tertiary);
}

.reason-card.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.reason-card .reason-text { display: grid; gap: var(--s-1); min-width: 0; }
.reason-card .reason-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.192px;
  color: var(--text-primary);
}
.reason-card .reason-blurb {
  font-size: 13px;
  color: var(--text-secondary);
}

.reason-card .reason-arrow { color: var(--text-tertiary); }
.reason-card.selected .reason-arrow { color: var(--accent); }

.note-field {
  width: 100%;
  min-height: 96px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.note-field:focus-visible {
  border-color: var(--accent);
}

/* ---------- Overflow menu ---------- */
.overflow-menu {
  width: min(380px, 100%);
  padding: var(--s-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--canvas);
  box-shadow: var(--shadow-pop);
  animation: sheet-in 200ms ease-out;
}

.overflow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-3) var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.overflow-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.07px;
}

.overflow-row:hover {
  background: var(--surface-2);
}

.overflow-row.is-warning { color: var(--warning); }
.overflow-row.is-danger { color: var(--danger); }

/* ---------- Detail sheet ---------- */
.detail-scroll {
  overflow: auto;
  padding: var(--s-7) var(--s-6) var(--s-7);
  display: grid;
  gap: var(--s-5);
  background: var(--surface-1);
}

.detail-head {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.detail-head .meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--s-2);
}

.detail-head .meta-id {
  font-size: 10.5px;
  letter-spacing: 0.4px;
}

.detail-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.95px;
  color: var(--text-primary);
}

.detail-identity {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: var(--s-1);
}

.detail-address {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: 2px;
}

/* Grouped cards inside detail sheet — clean canvas, generous padding. */
.detail-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--canvas);
}

.detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
}

.detail-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Subsections inside a card */
.subsection {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--canvas);
}

.subsection-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.05px;
  color: var(--text-primary);
}

.subsection-body {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.detail-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6) max(var(--s-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--canvas);
}

.detail-foot .btn-secondary { flex: 0 0 auto; }
.detail-foot .btn-primary { flex: 1; }

/* Pill rows + meta tiles inside detail */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.metric-tile {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--surface-1);
}

.metric-tile .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.metric-tile .value {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: -0.12px;
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .metric-row { grid-template-columns: 1fr 1fr; }
}

.list-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.list-row + .list-row {
  border-top: 1px solid var(--border-subtle);
}

.list-row .marker {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: currentColor;
}

.list-row .text { display: grid; gap: 2px; }

.list-row .text .lbl {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.07px;
  color: var(--text-primary);
}

.list-row .text .sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.list-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ---------- Detail side panel (slides in from right) ----------
   Backdrop is a subtle dim. Panel is a fixed-width column glued to the
   right edge of the viewport. Modals (time picker etc.) layer above via
   the existing modal-root with higher z-index. */
.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(10 22 40 / 18%);
  animation: panel-backdrop-in 200ms ease-out;
}

@keyframes panel-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 92vw);
  z-index: 41;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--canvas);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -16px 0 48px rgb(16 24 40 / 12%);
  animation: panel-slide-in 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes panel-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.panel-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 1;
  transition: background 140ms ease, color 140ms ease;
}

.panel-close:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Detail-sheet content blocks — minimal, neutral. */
.complaint-headline {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: -0.6px;
  color: var(--text-primary);
}

.complaint-meta {
  display: flex;
  gap: var(--s-7);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.complaint-meta > span {
  display: grid;
  gap: 2px;
}

.complaint-meta .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.complaint-meta .v {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.07px;
  color: var(--text-primary);
}

.data-block {
  display: grid;
  gap: var(--s-2);
}

.data-block + .data-block {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

.data-block-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.symptom-list {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.symptom-list li::marker {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.patient-note {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.data-list {
  display: grid;
  gap: var(--s-2);
}

.data-list li {
  display: grid;
  gap: 2px;
}

.data-list-lbl {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.07px;
  color: var(--text-primary);
}

.data-list-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.list-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5);
  margin: 0;
}

.dl-grid > div {
  display: grid;
  gap: 2px;
}

.dl-grid dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.dl-grid dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.07px;
  color: var(--text-primary);
}

.timeline-list {
  display: grid;
  gap: var(--s-1);
  font-size: 13px;
}

.timeline-list li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.timeline-list li:last-child { border-bottom: 0; }

.timeline-when {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
}

.timeline-what {
  color: var(--text-primary);
  font-weight: 500;
}

.timeline-who {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Safety boxes (red flags / context) */
.safe-box {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.safe-box .head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.safe-box .head .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.26px;
  text-transform: uppercase;
}

/* Timeline */
.timeline {
  display: grid;
  gap: var(--s-3);
  position: relative;
}

.timeline-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  position: relative;
}

.timeline-row .node {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--canvas);
  position: relative;
  z-index: 1;
}

.timeline-row.is-current .node {
  background: var(--accent);
}

.timeline-row::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: -16px;
  width: 2px;
  background: var(--border-default);
}

.timeline-row:last-child::before { display: none; }

.timeline-row .text { display: grid; gap: 2px; }
.timeline-row .text .lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.timeline-row .text .sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.timeline-row .when {
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}