/* ─── Lomio palette (mirrors `Tone` in ContentView.swift) ─── */
:root {
  --night: #0d101a;      /* base background */
  --slate: #1a1f2d;      /* cards */
  --slate-high: #262c3d; /* raised cards / fields */
  --chalk: #f2f1ea;      /* primary text */
  --ash: #989eaf;        /* secondary text */
  --ash-60: rgba(152, 158, 175, 0.6);
  --ember: #ff9945;      /* primary accent (amber) */
  --ember-15: rgba(255, 153, 69, 0.15);
  --moss: #78d194;       /* on-track green */
  --moss-15: rgba(120, 209, 148, 0.15);
  --coral: #fa6b6b;      /* overdue red */
  --coral-15: rgba(250, 107, 107, 0.15);
  --sky: #6eb0fa;        /* informational blue */
  --sky-15: rgba(110, 176, 250, 0.15);

  --font: -apple-system, "SF Pro Rounded", ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--night); color: var(--chalk); }
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  position: fixed; inset: 0; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button { font-family: inherit; border: 0; background: none; padding: 0; margin: 0; color: inherit; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input, textarea { font-family: inherit; border: 0; outline: 0; background: none; color: var(--chalk); }
input::placeholder, textarea::placeholder { color: var(--ash-60); }
svg.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.ic.fill { fill: currentColor; stroke: none; }

.app { position: absolute; inset: 0; overflow: hidden; }
.screen {
  position: absolute; inset: 0; background: var(--night);
  display: flex; flex-direction: column;
  animation: slideIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.screen.leaving { animation: slideOut 0.22s ease-in forwards; pointer-events: none; }
.screen.root { animation: none; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }

.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.pad { padding: 0 20px 110px; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 22px); }
.row { display: flex; align-items: center; }
.spacer { flex: 1; }

/* ─── Typography helpers ─── */
.eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: var(--ember); text-transform: uppercase; }
.heading { padding-top: calc(18px + var(--safe-top)); display: flex; flex-direction: column; gap: 4px; }
.heading .title { font-size: 30px; font-weight: 900; color: var(--chalk); line-height: 1.1; }
.section-label { font-size: 12px; font-weight: 700; color: var(--ash); }
.mono { font-family: var(--mono); }
.muted { color: var(--ash); }

/* ─── Main shell rail ─── */
.rail {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; background: var(--slate);
  border-top: 1px solid var(--slate-high);
  padding-bottom: calc(6px + var(--safe-bottom));
}
.rail button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 10px; color: var(--ash); font-size: 10px; font-weight: 600;
  transition: color 0.2s;
}
.rail button .ic { font-size: 18px; }
.rail button.active { color: var(--chalk); }
.rail button .underline { width: 22px; height: 3px; border-radius: 3px; background: transparent; }
.rail button.active .underline { background: var(--ember); animation: railPop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes railPop { from { transform: scaleX(0.3); } to { transform: scaleX(1); } }

/* ─── Welcome ─── */
.welcome { padding: calc(40px + var(--safe-top)) 26px 40px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ember); color: var(--night); display: grid; place-items: center; font-size: 15px; }
.welcome h1 { font-size: 36px; font-weight: 900; margin: 0; line-height: 1.12; white-space: pre-line; }
.points { display: flex; flex-direction: column; gap: 18px; }
.point { display: flex; gap: 14px; align-items: flex-start; }
.point .badge { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.point .t { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.point .d { font-size: 13px; color: var(--ash); line-height: 1.45; }
.field-title { font-size: 13px; font-weight: 600; color: var(--ash); margin-bottom: 8px; }
.field { width: 100%; background: var(--slate-high); border-radius: 14px; padding: 14px; font-size: 16px; color: var(--chalk); display: block; }
.field.big { font-size: 18px; font-weight: 600; }
.cta {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 17px 22px; border-radius: 16px; background: var(--ember); color: var(--night);
  font-size: 17px; font-weight: 700;
}
.cta:active { filter: brightness(0.92); }
.primary {
  width: 100%; display: block; text-align: center; padding: 17px; border-radius: 16px;
  background: var(--ember); color: var(--night); font-size: 17px; font-weight: 700;
}
.primary:disabled { background: var(--slate); color: var(--ash); }

/* ─── Cards & rows ─── */
.card { background: var(--slate); border-radius: 18px; padding: 16px; }
.pills { display: flex; gap: 10px; }
.pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; background: var(--slate); border-radius: 12px; }
.pill .n { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.pill .w { font-size: 12px; font-weight: 600; color: var(--ash); }

.spotlight { background: var(--slate); border-radius: 20px; overflow: hidden; }
.spotlight .top { display: flex; gap: 14px; align-items: center; padding: 18px; width: 100%; }
.spotlight .top .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.spotlight .name { font-size: 22px; font-weight: 700; }
.spotlight .line { font-size: 13px; color: var(--ash); }
.spotlight .divider { height: 1px; background: var(--slate-high); }
.spotlight .go { width: 100%; display: flex; gap: 8px; align-items: center; padding: 14px 18px; background: var(--ember); color: var(--night); font-size: 13px; font-weight: 700; }
.spotlight .go .ic { font-size: 14px; }

.person-row { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--slate); border-radius: 16px; width: 100%; }
.person-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.person-row .name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-row .sub { font-size: 11px; font-weight: 600; color: var(--ash); display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list { display: flex; flex-direction: column; gap: 10px; }
.press:active { opacity: 0.7; }

.portrait { border-radius: 28%; background: var(--slate-high); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: var(--ember); font-weight: 700; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ring { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .lbl { font-family: var(--mono); font-weight: 700; position: relative; }
.ring .lbl.bang { font-family: var(--font); font-weight: 900; }

.icon-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--ember); color: var(--night); display: grid; place-items: center; font-size: 16px; }
.icon-btn:disabled { opacity: 0.4; }

.search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--slate); border-radius: 14px; color: var(--ash); }
.search input { flex: 1; font-size: 15px; min-width: 0; }
.search .clear { color: var(--ash); font-size: 16px; display: grid; }

.empty { border: 1.5px dashed var(--slate-high); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.empty .ic { font-size: 26px; color: var(--ember); }
.empty .t { font-size: 18px; font-weight: 700; }
.empty .m { font-size: 13px; color: var(--ash); line-height: 1.45; }
.empty .act { margin-top: 4px; padding: 11px 18px; border-radius: 999px; background: var(--ember); color: var(--night); font-size: 14px; font-weight: 700; }

/* ─── Nav bar (pushed screens & sheets) ─── */
.navbar {
  display: flex; align-items: center; gap: 14px; min-height: 44px;
  padding: calc(6px + var(--safe-top)) 16px 6px;
  flex-shrink: 0;
}
.navbar .back { display: flex; align-items: center; gap: 4px; color: var(--ember); font-size: 17px; }
.navbar .back .ic { font-size: 20px; stroke-width: 2.5; }
.navbar .ttl { flex: 1; text-align: center; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.navbar .lead { flex: 1; display: flex; }
.navbar .trail { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.navbar .cancel { color: var(--ash); font-size: 17px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--ember); color: var(--night); font-size: 12px; font-weight: 700; }
.ghost-chip { padding: 8px 12px; border-radius: 999px; background: var(--ember-15); color: var(--ember); font-size: 12px; font-weight: 700; }
.ellipsis { font-size: 22px; color: var(--chalk); display: grid; }

/* ─── Person detail ─── */
.detail-head { display: flex; gap: 16px; align-items: center; padding-top: 8px; }
.detail-head .name { font-size: 26px; font-weight: 900; }
.detail-head .num { font-family: var(--mono); font-size: 13px; color: var(--ash); }
.rhythm-card { display: flex; align-items: center; gap: 16px; background: var(--slate); border-radius: 18px; padding: 16px; }
.rhythm-card .t { font-size: 15px; font-weight: 700; }
.rhythm-card .s { font-size: 13px; color: var(--ash); margin-top: 4px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--ember); font-size: 12px; font-weight: 700; }
.dashed-btn { width: 100%; border: 1.5px dashed var(--slate-high); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dashed-btn .t { font-size: 15px; font-weight: 700; }
.dashed-btn .d { font-size: 13px; color: var(--ash); line-height: 1.45; }
.about { font-size: 14px; line-height: 1.5; }
.history { background: var(--slate); border-radius: 16px; padding: 0 14px; }
.history .h-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-high); }
.history .h-row:last-child { border-bottom: 0; }
.history .k { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
.history .lbl { font-size: 14px; font-weight: 600; flex: 1; }
.history .when { font-size: 11px; color: var(--ash); }

.reh-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--slate); border-radius: 16px; width: 100%; }
.reh-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reh-row .t { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reh-row .p { font-size: 13px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reh-row .meta { font-size: 11px; font-weight: 600; color: var(--ash); display: flex; gap: 6px; white-space: nowrap; overflow: hidden; }

/* ─── Sheets (modals) ─── */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); animation: fade 0.25s; z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: max(24px, var(--safe-top));
  background: var(--night); border-radius: 18px 18px 0 0; z-index: 21;
  display: flex; flex-direction: column; overflow: hidden;
  animation: rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}
.sheet.closing { animation: drop 0.22s ease-in forwards; }
.sheet-backdrop.closing { animation: unfade 0.22s ease-in forwards; }
.sheet .navbar { padding-top: 10px; }
.sheet .body { flex: 1; overflow-y: auto; padding: 0 20px 30px; -webkit-overflow-scrolling: touch; }
.sheet .foot { padding: 0 20px calc(16px + var(--safe-bottom)); }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes drop { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes unfade { from { opacity: 1; } to { opacity: 0; } }

.portrait-pick { display: flex; align-items: center; gap: 16px; }
.portrait-pick .box { width: 84px; height: 84px; border-radius: 20px; background: var(--slate-high); display: grid; place-items: center; color: var(--ash); font-size: 24px; overflow: hidden; }
.portrait-pick .box img { width: 100%; height: 100%; object-fit: cover; }
.portrait-pick .acts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.portrait-pick .acts .pick { color: var(--ember); font-size: 13px; font-weight: 700; }
.portrait-pick .acts .rm { color: var(--ash); font-size: 13px; font-weight: 600; }

.block { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 8px 12px; border-radius: 999px; background: var(--slate-high); color: var(--chalk); font-size: 12px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.chip.on { background: var(--ember); color: var(--night); }
.chip.person { padding: 6px 12px 6px 6px; font-size: 13px; font-weight: 700; }
.radio-list { background: var(--slate); border-radius: 14px; overflow: hidden; }
.radio { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 15px; }
.radio + .radio { border-top: 1px solid var(--slate-high); margin-left: 14px; padding-left: 0; width: calc(100% - 14px); }
.radio.on { font-weight: 700; }
.radio .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ash); display: grid; place-items: center; flex-shrink: 0; }
.radio.on .dot { border-color: var(--ember); }
.radio.on .dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); }
.textarea { width: 100%; min-height: 110px; background: var(--slate-high); border-radius: 14px; padding: 14px; font-size: 15px; resize: none; line-height: 1.4; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.starter { padding: 11px; border-radius: 12px; background: var(--slate); font-size: 13px; font-weight: 600; text-align: center; }
.starter.on { background: var(--ember); color: var(--night); }
.hint { font-size: 12px; color: var(--ash); }

/* ─── Rehearsal chat ─── */
.chat { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }
.coach { background: var(--slate); border-radius: 14px; padding: 14px; text-align: center; margin-bottom: 6px; }
.coach .t { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.coach .d { font-size: 12px; color: var(--ash); line-height: 1.45; }
.day-sep { text-align: center; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: var(--ash); padding: 8px 0; }
.line { display: flex; align-items: flex-end; gap: 8px; padding-top: 6px; }
.line.stacked { padding-top: 0; }
.line.mine { justify-content: flex-end; padding-left: 56px; }
.line.theirs { justify-content: flex-start; padding-right: 56px; }
.line .avatar-slot { width: 26px; height: 26px; flex-shrink: 0; }
.line .wrap { display: flex; flex-direction: column; gap: 3px; max-width: 100%; }
.line.mine .wrap { align-items: flex-end; }
.line.theirs .wrap { align-items: flex-start; }
.bubble { padding: 10px 14px; font-size: 15px; line-height: 1.35; border-radius: 16px; white-space: pre-wrap; word-break: break-word; }
.line.mine .bubble { background: var(--ember); color: var(--night); border-bottom-right-radius: 4px; }
.line.theirs .bubble { background: var(--slate); color: var(--chalk); border-bottom-left-radius: 4px; }
.line .time { font-size: 9px; font-weight: 600; color: var(--ash); padding: 0 4px; }

.composer { border-top: 1px solid var(--slate-high); padding: 10px 14px calc(10px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--night); flex-shrink: 0; }
.side-switch { display: flex; padding: 3px; background: var(--slate-high); border-radius: 999px; width: 100%; max-width: 240px; }
.side-switch button { flex: 1; padding: 7px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s; }
.side-switch button.on-me { background: var(--ember); color: var(--night); }
.side-switch button.on-them { background: var(--sky); color: var(--night); }
.compose-row { display: flex; align-items: flex-end; gap: 10px; width: 100%; }
.compose-row textarea { flex: 1; min-width: 0; background: var(--slate); border-radius: 18px; padding: 11px 14px; font-size: 15px; line-height: 1.35; max-height: calc(1.35em * 5 + 22px); resize: none; }
.send { width: 42px; height: 42px; border-radius: 14px; background: var(--slate); color: var(--ash); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.send.me { background: var(--ember); color: var(--night); }
.send.them { background: var(--sky); color: var(--night); }

/* ─── Rhythm ─── */
.tiles { display: flex; gap: 10px; }
.tile { flex: 1; background: var(--slate); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tile .v { font-family: var(--mono); font-size: 28px; font-weight: 700; }
.tile .c { font-size: 11px; font-weight: 600; color: var(--ash); white-space: pre-line; line-height: 1.3; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bars .bar .b { width: 100%; border-radius: 3px; background: var(--ember); }
.bars .bar .b.zero { background: var(--slate-high); }
.bars .bar .d { font-size: 8px; font-weight: 600; color: var(--ash); }
.kind-row { display: flex; align-items: center; gap: 12px; }
.kind-row .ic { width: 22px; font-size: 16px; }
.kind-row .lbl { flex: 1; font-size: 14px; font-weight: 600; }
.kind-row .n { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.bond-row { width: 100%; display: flex; align-items: center; gap: 12px; }
.bond-row .lbl { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bond-row .n { font-size: 12px; font-weight: 600; color: var(--ash); }

/* ─── Action sheets, alerts ─── */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.5); animation: fade 0.2s; }
.overlay.center { align-items: center; padding: 20px; }
.overlay.closing { animation: unfade 0.18s ease-in forwards; }
.action-sheet { width: 100%; padding: 0 10px calc(10px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 8px; animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.action-sheet .group { background: var(--slate); border-radius: 16px; overflow: hidden; }
.action-sheet .ttl { padding: 14px; text-align: center; font-size: 13px; color: var(--ash); border-bottom: 1px solid var(--slate-high); }
.action-sheet button { width: 100%; padding: 16px; text-align: center; font-size: 17px; color: var(--sky); display: flex; align-items: center; justify-content: center; gap: 10px; }
.action-sheet .group button + button { border-top: 1px solid var(--slate-high); }
.action-sheet button.destructive { color: var(--coral); }
.action-sheet button.cancel { background: var(--slate); border-radius: 16px; font-weight: 700; color: var(--chalk); }
.alert { background: var(--slate); border-radius: 18px; width: 100%; max-width: 300px; overflow: hidden; animation: pop 0.2s; text-align: center; }
.alert .t { font-size: 17px; font-weight: 700; padding: 20px 20px 6px; }
.alert .m { font-size: 13px; color: var(--ash); padding: 0 20px 18px; line-height: 1.45; }
.alert button { width: 100%; padding: 14px; border-top: 1px solid var(--slate-high); font-size: 17px; font-weight: 600; color: var(--ember); }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.removed { padding: 60px 20px; text-align: center; color: var(--ash); }