/* Black with maroon: near-black surfaces, maroon for accents, stage edge and progress. */
:root {
  --on-accent: #fff4f0;
  --brand: #c44a5e;
  --bg: #08080a;
  --panel: #111013;
  --panel-2: #1b171a;
  --line: #2c2327;
  --fg: #f2ebe7;
  --muted: #9e9196;
  --accent: #8e2333;
  --danger: #ff6b6b;
  --select: #e8b44c;
  --select-fill: rgba(232, 180, 76, 0.13);
  --stage-floor: #120c0e;
  --stage-edge: #8e2333;
  --grid-minor: rgba(255, 255, 255, 0.045);
  --grid-major: rgba(255, 255, 255, 0.13);
  --grid-center: rgba(196, 74, 94, 0.75);
  --wave: #3f2a30;
  --wave-played: #c44a5e;
  --marker: #e3a565;
  --playhead: #ff4d6d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(1200px 380px at 50% -8%, rgba(142, 35, 51, 0.28), transparent 70%) no-repeat, var(--bg); color: var(--fg); font: 13px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; }
#app { height: 100%; }
a { color: var(--accent); }
button, .btn, input, select, textarea { font: inherit; color: inherit; }
button, .btn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--muted); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.danger { color: var(--danger); }
button.icon { padding: 0 6px; border-color: transparent; background: none; font-size: 15px; }
button.link { border: none; background: none; padding: 0; color: var(--accent); text-decoration: underline; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type=color] { padding: 0; width: 26px; height: 22px; border: none; background: none; cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); }
kbd { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 11px; }

/* ---- home */
.home { max-width: 920px; margin: 0 auto; padding: 32px 16px; }
.home h1 { margin: 0 0 4px; color: var(--brand); font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.01em; }
.home header p { color: var(--muted); margin: 0 0 20px; }
.create { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.create input[name=name] { flex: 1; min-width: 200px; padding: 7px 10px; }
.create input[name=dancers] { width: 5em; }
.projects { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.projects li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.projects li.empty { padding: 20px; color: var(--muted); }
.card { display: flex; flex-direction: column; gap: 3px; padding: 14px; color: inherit; text-decoration: none; }
.card strong { font-size: 15px; }
.card span, .card small { color: var(--muted); }
.card-actions { display: flex; gap: 6px; padding: 0 14px 12px; }
.error { color: var(--danger); }
.home-user { float: right; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }

/* ---- sign-in */
.login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: radial-gradient(900px 500px at 50% 0%, rgba(142, 35, 51, 0.35), transparent 70%), var(--bg); }
.login-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; box-shadow: 0 16px 50px rgba(142, 35, 51, 0.28); }
.login-card h1 { margin: 0; color: var(--brand); font-family: Georgia, 'Times New Roman', serif; }
.login-card > p { margin: 0 0 6px; color: var(--muted); }
.login-card label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.login-card input { padding: 9px 10px; font-size: 15px; color: var(--fg); }
.login-card button { justify-content: center; padding: 9px; font-size: 14px; }
.login-card small { color: var(--muted); text-align: center; }
.login-error { margin: 0; min-height: 1em; color: var(--danger); font-size: 12px; }

/* ---- editor layout */
.editor {
  display: grid; height: 100%;
  grid-template-columns: 250px 1fr 290px;
  grid-template-rows: auto 1fr 210px;
  grid-template-areas: "top top top" "left stage right" "tl tl tl";
}
.topbar { grid-area: top; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar .back { color: var(--fg); text-decoration: none; font-size: 18px; padding: 0 4px; }
.topbar .title { font-weight: 600; font-size: 14px; border-color: transparent; background: transparent; width: 220px; }
.topbar .title:hover { border-color: var(--line); }
.transport { display: flex; align-items: center; gap: 8px; }
.transport .play { width: 38px; justify-content: center; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.transport .time { font-variant-numeric: tabular-nums; min-width: 128px; }
.audio-name { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
.presence { display: inline-flex; align-items: center; }
.person {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700; border: 2px solid var(--panel); margin-left: -6px; cursor: default;
}
.presence .person:first-child, .formation-list .person { margin-left: 0; }
.formation-list .person { width: 18px; height: 18px; font-size: 8px; margin-left: 4px; border-width: 1px; }
.offline-dot { color: var(--danger); font-size: 10px; margin-right: 6px; }
.activity { color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.activity.show { opacity: 1; }
/* sharing + view-only */
.role-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; vertical-align: middle; margin-left: 4px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.role-badge.owner { color: var(--brand); border-color: var(--accent); }
.ro-banner { position: absolute; top: 8px; right: 12px; background: var(--accent); color: var(--on-accent); padding: 4px 10px; border-radius: 99px; font-size: 12px; }
.editor.readonly .topbar label.btn, .editor.readonly [data-action=undo], .editor.readonly [data-action=redo],
.editor.readonly .timeline-bar [data-action=add-marker], .editor.readonly .timeline-bar [data-action=split],
.editor.readonly [data-action=remove-audio] { display: none; }
dialog.share { width: min(460px, calc(100vw - 32px)); }
dialog.share h3 { margin-top: 0; }
.members { list-style: none; padding: 0; margin: 8px 0; }
.members li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.members li .person { margin-left: 0; }
.members li span:not(.person) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.members em { color: var(--muted); font-style: normal; font-size: 12px; }
.share-add { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.share-add select:first-child { flex: 1; min-width: 160px; }
.status { color: var(--muted); font-size: 12px; min-width: 110px; text-align: right; }
.status[data-state=offline], .status[data-state=error], .status[data-state=signed-out] { color: var(--danger); }

.panel { background: var(--panel); overflow-y: auto; padding: 10px 12px; }
.panel.left { grid-area: left; border-right: 1px solid var(--line); }
.panel.right { grid-area: right; border-left: 1px solid var(--line); }
.panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 14px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.panel h3:first-child { margin-top: 2px; }
.panel h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.panel section + section { border-top: 1px solid var(--line); margin-top: 12px; }
.panel label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.panel label input, .panel label select, .panel label textarea { color: var(--fg); }
.panel label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); }
.panel .tip { color: var(--muted); font-size: 12px; margin: 4px 0 8px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
.panel label > input:not([type=checkbox]):not([type=color]), .panel label > select, .panel label > textarea { width: 100%; }
.row { display: flex; align-items: center; gap: 6px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.nav { display: flex; }

.add-row { display: flex; gap: 6px; margin-bottom: 6px; }
.add-row input { flex: 1; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 6px 0 10px; padding: 8px; background: var(--panel-2); border-radius: 6px; font-size: 12px; }
.keys dt { white-space: nowrap; color: var(--fg); }
.keys dd { margin: 0; color: var(--muted); }
.sel-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--select-fill); border-radius: 6px; padding: 6px; margin-bottom: 6px; }
.dancer-list { list-style: none; padding: 0; margin: 0; }
.dancer-list li { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.dancer-list li:hover { background: var(--panel-2); }
.dancer-list li.selected { background: var(--select-fill); outline: 1px solid var(--select); }
.dancer-list li.empty { color: var(--muted); cursor: default; }
.dancer-list .num { width: 20px; color: var(--muted); font-size: 11px; text-align: right; }
.dancer-list input[type=text] { flex: 1; border-color: transparent; background: transparent; }
.dancer-list input[type=text]:hover { border-color: var(--line); }

.formation-list { list-style: none; padding: 0; margin: 8px 0 0; max-height: 220px; overflow-y: auto; }
.formation-list button { width: 100%; border: none; background: none; justify-content: flex-start; padding: 3px 6px; }
.formation-list button.active { background: var(--panel-2); font-weight: 600; }
.formation-list small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.history { list-style: none; padding: 0; margin: 0; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.history small { display: block; color: var(--muted); }

.stage-wrap { grid-area: stage; position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.stage-wrap canvas { position: absolute; inset: 0; touch-action: none; }
.hint { position: absolute; left: 12px; bottom: 8px; color: var(--muted); font-size: 12px; pointer-events: none; }

.timeline-wrap { grid-area: tl; display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line); min-height: 0; }
.timeline-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.timeline-bar .tip { color: var(--muted); font-size: 12px; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.timeline-bar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.timeline-canvas { position: relative; flex: 1; min-height: 0; }
.timeline-canvas canvas { position: absolute; inset: 0; touch-action: none; }

dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; max-width: 640px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog table { border-collapse: collapse; }
dialog th { text-align: left; padding: 4px 12px 4px 0; white-space: nowrap; vertical-align: top; }
dialog td { padding: 4px 0; color: var(--muted); }

.toasts { position: fixed; right: 16px; bottom: 230px; display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: 360px; }
.toast.error { border-color: var(--danger); }

.keys.touch, .short { display: none; }
@media (hover: none) and (pointer: coarse) {
  .keys.desktop, [data-action=help] { display: none; }
  .keys.touch { display: grid; }
  .hint { display: none; }
}

/* ---- phones and narrow tablets: stage + timeline first, panels scroll below */
@media (max-width: 900px) {
  .editor {
    grid-template-columns: 100%;
    grid-template-rows: auto clamp(260px, 72vw, 58dvh) 196px auto auto;
    grid-template-areas: "top" "stage" "tl" "left" "right";
    height: auto; min-height: 100%;
  }
  .panel { overflow: visible; border-left: none !important; border-right: none !important; border-top: 1px solid var(--line); }
  .topbar { gap: 6px; padding: 6px 8px; position: sticky; top: 0; z-index: 5; }
  .topbar .title { width: auto; flex: 1 1 120px; }
  .transport .time { min-width: 0; font-size: 12px; }
  .audio-name { order: 10; flex: 1 1 auto; max-width: none; font-size: 12px; }
  .topbar .back { order: -2; } .topbar .title { order: -1; }
  .transport { order: 2; flex: 1 1 100%; }
  .topbar .long, .topbar .export { display: none; }
  .status { order: 11; text-align: left; }
  .topbar .short { display: inline; }
  .topbar button, .topbar .btn { padding: 4px 8px; }
  .topbar .spacer { display: none; }
  .status { min-width: 0; font-size: 11px; }
  .timeline-bar .tip { display: none; }
  .timeline-bar button { padding: 6px 12px; }
  .stage-wrap, .timeline-wrap { touch-action: none; }
  input, select, textarea { font-size: 16px; } /* stops iOS zooming into focused fields */
  .home-user { float: none; margin-bottom: 12px; }
  .toasts { left: 16px; right: 16px; bottom: 16px; }
}