:root {
  --ink: #17201e;
  --muted: #697472;
  --paper: #f5f3ed;
  --panel: #fffefa;
  --line: #dcded8;
  --accent: #cf5b36;
  --accent-dark: #a64023;
  --navy: #243b40;
  --label-width: 250px;
  --track-height: 132px;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ef9e43;
  outline-offset: 2px;
}
.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--muted); }

.center-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #fff 0, var(--paper) 45%, #e6ebe6 100%); }
.login-card { width: min(430px, 90vw); padding: 48px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 70px #2d3d3720; }
.login-card h1 { margin: 24px 0 8px; font-family: Georgia, serif; font-size: 44px; }
.login-card p { color: var(--muted); line-height: 1.6; margin-bottom: 32px; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; background: var(--accent); color: white; font-family: Georgia, serif; font-weight: bold; border-radius: 3px; }
.brand-mark.small { width: 31px; height: 31px; font-size: 12px; }

header { height: 64px; padding: 0 28px; display: flex; align-items: center; gap: 12px; background: var(--navy); color: white; }
.brand { display: flex; gap: 10px; align-items: center; margin-right: 18px; }
header select { min-width: 210px; border: 1px solid #ffffff25; background: #ffffff10; color: white; padding: 9px 32px 9px 12px; border-radius: 4px; }
header select option { color: var(--ink); }
.user { color: #d8dfdd; font-size: 13px; }
.presence { padding: 5px 9px; border-radius: 99px; background: #8cd9bb20; color: #a9e7ce; font-size: 12px; }
.presence::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.presence.connecting, .presence.reconnecting { background: #f2c66d20; color: #f0cd82; }
.presence.offline { background: #ed8b7b20; color: #f0a194; }

main { padding: 34px 38px 64px; }
.case-heading { display: flex; align-items: end; gap: 30px; margin-bottom: 28px; }
.case-heading h1 { font-family: Georgia, serif; font-size: clamp(30px, 4vw, 48px); margin: 1px 0 6px; font-weight: 500; }
.eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .15em; }
.toolbar { display: flex; align-items: center; gap: 20px; }
.toolbar label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }

.button { border: 0; padding: 9px 14px; border-radius: 3px; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; font-weight: 700; font-size: 13px; }
.button.primary { color: white; background: var(--accent); }
.button.primary:hover { background: var(--accent-dark); }
.button.subtle { background: #e9ebe6; color: var(--ink); }
header .button.subtle { background: #ffffff12; color: white; }
.button.danger { color: #a52c2c; background: #f7e6e2; }
.icon-button { width: 34px; height: 34px; border: 0; background: transparent; color: inherit; font-size: 20px; border-radius: 50%; }
.icon-button:hover { background: #7772; }

.timeline-controls { min-height: 54px; padding: 8px 10px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); }
.control-group, .go-form { display: flex; align-items: center; gap: 5px; }
.control-button { min-width: 38px; height: 36px; border: 1px solid #cdd2cd; border-radius: 4px; background: white; color: var(--ink); font-weight: 800; }
.control-button:hover { border-color: #9da8a3; background: #f0f2ed; }
.text-control { padding: 0 11px; font-size: 12px; }
.zoom-control label, .go-form label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.zoom-control input { width: 130px; }
.zoom-scale { min-width: 92px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.go-form input { height: 36px; border: 1px solid #cdd2cd; border-radius: 4px; padding: 0 8px; }
.viewport-range { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.interaction-help { padding: 9px 12px; border: 1px solid #d5ddd8; border-bottom: 0; background: #edf5f0; color: #55645f; font-size: 11px; line-height: 1.4; }
.interaction-help strong { color: var(--navy); }

.timeline-shell { position: relative; overflow: hidden; min-height: 360px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 36px #25332d0d; touch-action: none; user-select: none; }
.axis { position: relative; z-index: 4; height: 56px; width: 100%; border-bottom: 1px solid var(--line); background: #faf9f5; overflow: hidden; }
.axis::before { content: ""; position: absolute; left: var(--label-width); height: 100%; border-left: 1px solid var(--line); }
.axis-label { position: absolute; left: 0; top: 0; bottom: 0; width: var(--label-width); z-index: 2; display: grid; align-content: center; padding: 0 18px; background: #f5f4ef; border-right: 1px solid var(--line); }
.axis-label strong { font-size: 12px; }
.axis-label span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.tick { position: absolute; bottom: 0; height: 13px; border-left: 1px solid #8e9994; font-size: 10px; color: #58635f; padding: 0 0 17px 6px; white-space: nowrap; }
.tick.major { height: 19px; border-left-color: #53615c; font-weight: 800; }
.track { position: relative; height: var(--track-height); border-bottom: 1px solid var(--line); min-width: 100%; }
.track-label { position: absolute; left: 0; z-index: 3; width: var(--label-width); height: 100%; padding: 18px; background: #fffefa; border-right: 1px solid var(--line); box-shadow: 8px 0 16px #243b4008; }
.track-label h3 { margin: 0 0 7px; font-size: 14px; }
.track-label p { margin: 0 0 4px; color: var(--muted); font-size: 11px; }
.track-label .absolute-start { color: var(--ink); font-weight: 700; }
.track-actions { position: absolute; left: 18px; bottom: 14px; display: flex; gap: 6px; }
.mini { min-height: 28px; border: 1px solid #cdd2cd; background: white; color: #4f5d58; border-radius: 3px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.mini:hover { color: var(--ink); border-color: #919d98; }
.track-lane { position: absolute; left: var(--label-width); right: 0; top: 0; height: 100%; cursor: grab; overflow: hidden; background-image: linear-gradient(to right, #d9ddd845 1px, transparent 1px); }
.track-lane:active { cursor: grabbing; }
.origin { position: absolute; top: 5px; bottom: 5px; width: 20px; margin-left: -10px; padding: 0; border: 0; border-left: 2px dashed; background: transparent; color: inherit; cursor: ew-resize; opacity: .7; }
.origin::before { content: "↔"; position: absolute; top: 4px; left: -11px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: white; font-size: 11px; font-weight: 900; }
.origin span { position: absolute; top: 30px; left: 7px; padding: 2px 5px; border-radius: 3px; background: white; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.event { position: absolute; top: 68px; height: 42px; min-width: 34px; border: 2px solid #ffffffbb; background: var(--event-color); color: white; border-radius: 5px; box-shadow: 0 4px 12px #17201e28; padding: 0 12px; text-align: left; font-size: 11px; font-weight: 800; cursor: ew-resize; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event:hover, .event:focus-visible { z-index: 2; filter: brightness(1.07); box-shadow: 0 7px 18px #17201e35; }
.event.point { min-width: 34px; width: auto !important; height: 34px; top: 72px; overflow: visible; border-radius: 17px; padding: 0 11px 0 27px; transform: translateX(-17px); }
.event.point::before { content: ""; position: absolute; left: 9px; top: 10px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; }
.event.point span { color: white; font-weight: 800; white-space: nowrap; }
.dragging { z-index: 8 !important; cursor: grabbing !important; filter: brightness(1.05); transition: none !important; }
.drag-readout { position: fixed; z-index: 30; pointer-events: none; padding: 8px 11px; border-radius: 4px; background: var(--navy); color: white; box-shadow: 0 5px 18px #0004; font-size: 11px; font-weight: 700; }
.empty { min-height: 270px; display: grid; place-content: center; justify-items: center; color: var(--muted); }
.empty h2 { color: var(--ink); font-family: Georgia, serif; margin-bottom: 0; }

dialog { width: min(520px, 92vw); border: 1px solid var(--line); padding: 0; background: var(--panel); color: var(--ink); box-shadow: 0 30px 100px #17201e40; }
dialog::backdrop { background: #17201e88; backdrop-filter: blur(2px); }
dialog form, #audit-dialog { padding: 24px; }
.wide-dialog { width: min(980px, 94vw); max-height: 84vh; }
.dialog-heading { display: flex; align-items: start; gap: 20px; margin-bottom: 22px; }
.dialog-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 28px; }
.dialog-heading .icon-button { margin-left: auto; }
.field { display: grid; gap: 6px; margin-bottom: 15px; }
.field label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: white; padding: 10px; border-radius: 3px; }
.field .hint { color: var(--muted); font-size: 10px; line-height: 1.4; }
.field textarea { min-height: 88px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions, .export-actions { display: flex; gap: 8px; align-items: center; }
.dialog-actions { margin-top: 24px; }
.audit-list { overflow: auto; max-height: 62vh; border-top: 1px solid var(--line); }
.audit-row { display: grid; grid-template-columns: 170px 120px 1fr; gap: 18px; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 12px; }
.audit-row time, .audit-row .actor { color: var(--muted); }
.toast { position: fixed; bottom: 25px; right: 25px; padding: 12px 16px; background: var(--navy); color: white; border-radius: 4px; box-shadow: 0 8px 26px #0004; font-size: 12px; z-index: 20; }

@media (max-width: 760px) {
  :root { --label-width: 160px; }
  main { padding: 22px 12px; }
  header { padding: 0 12px; }
  header .brand strong, header .user, #new-project { display: none; }
  header select { min-width: 130px; }
  .case-heading { align-items: start; flex-direction: column; }
  .timeline-controls { align-items: start; flex-wrap: wrap; }
  .viewport-range { width: 100%; margin-left: 0; }
  .interaction-help { display: none; }
  .audit-row { grid-template-columns: 1fr; gap: 3px; }
}