styles.css

:root {
  color-scheme: light;
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f0f0f0;
  --surface-subtle: #fafafa;
  --line: #d9d9d9;
  --line-strong: #bfbfbf;
  --text: rgba(0, 0, 0, 0.88);
  --text-muted: rgba(0, 0, 0, 0.65);
  --text-subtle: rgba(0, 0, 0, 0.45);
  --accent: #1677ff;
  --accent-strong: #0958d9;
  --accent-soft: #e6f4ff;
  --accent-text: #0958d9;
  --accent-contrast: #ffffff;
  --focus: rgba(22, 119, 255, 0.18);
  --danger: #ff4d4f;
  --danger-soft: #fff2f0;
  --canvas: #ffffff;
  --canvas-border: #d9d9d9;
  --timeline-axis-bg: #fafafa;
  --timeline-bg: #ffffff;
  --timeline-grid-major: #d9d9d9;
  --timeline-grid-minor: #e8e8e8;
  --timeline-grid-day: #f0f0f0;
  --timeline-rule: #e5e5e5;
  --timeline-time-band: rgba(22, 119, 255, 0.035);
  --timeline-axis-line: rgba(0, 0, 0, 0.68);
  --timeline-cursor-guide: #fa8c16;
  --timeline-label: rgba(0, 0, 0, 0.65);
  --timeline-label-strong: rgba(0, 0, 0, 0.88);
  --selection: rgba(0, 0, 0, 0.88);
  --selection-handle: #ffffff;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 8px;
  --font-sans:
    "Vazirmatn", "Noto Sans Arabic", "Noto Sans", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --line-tight: 1.2;
  --line-ui: 1.3;
  --line-normal: 1.5;
  --timeline-font-2xs: 0.625rem;
  --timeline-font-xs: 0.75rem;
  --timeline-font-sm: 0.8125rem;
  --timeline-stage-extra-height: 0px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--line-normal);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414;
  --surface: #1f1f1f;
  --surface-raised: #1f1f1f;
  --surface-muted: #262626;
  --surface-subtle: #141414;
  --line: #424242;
  --line-strong: #595959;
  --text: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-subtle: rgba(255, 255, 255, 0.45);
  --accent: #1677ff;
  --accent-strong: #4096ff;
  --accent-soft: rgba(22, 119, 255, 0.18);
  --accent-text: #69b1ff;
  --accent-contrast: #ffffff;
  --focus: rgba(22, 119, 255, 0.3);
  --danger: #ff7875;
  --danger-soft: rgba(255, 77, 79, 0.16);
  --canvas: #141414;
  --canvas-border: #424242;
  --timeline-axis-bg: #1f1f1f;
  --timeline-bg: #141414;
  --timeline-grid-major: #424242;
  --timeline-grid-minor: #303030;
  --timeline-grid-day: #262626;
  --timeline-rule: #303030;
  --timeline-time-band: rgba(64, 150, 255, 0.06);
  --timeline-axis-line: rgba(255, 255, 255, 0.74);
  --timeline-cursor-guide: #ff7a45;
  --timeline-label: rgba(255, 255, 255, 0.65);
  --timeline-label-strong: rgba(255, 255, 255, 0.88);
  --selection: #f8fafc;
  --selection-handle: #1f1f1f;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141414;
    --surface: #1f1f1f;
    --surface-raised: #1f1f1f;
    --surface-muted: #262626;
    --surface-subtle: #141414;
    --line: #424242;
    --line-strong: #595959;
    --text: rgba(255, 255, 255, 0.88);
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-subtle: rgba(255, 255, 255, 0.45);
    --accent: #1677ff;
    --accent-strong: #4096ff;
    --accent-soft: rgba(22, 119, 255, 0.18);
    --accent-text: #69b1ff;
    --accent-contrast: #ffffff;
    --focus: rgba(22, 119, 255, 0.3);
    --danger: #ff7875;
    --danger-soft: rgba(255, 77, 79, 0.16);
    --canvas: #141414;
    --canvas-border: #424242;
    --timeline-axis-bg: #1f1f1f;
    --timeline-bg: #141414;
    --timeline-grid-major: #424242;
    --timeline-grid-minor: #303030;
    --timeline-grid-day: #262626;
    --timeline-rule: #303030;
    --timeline-time-band: rgba(64, 150, 255, 0.06);
    --timeline-axis-line: rgba(255, 255, 255, 0.74);
    --timeline-cursor-guide: #ff7a45;
    --timeline-label: rgba(255, 255, 255, 0.65);
    --timeline-label-strong: rgba(255, 255, 255, 0.88);
    --selection: #f8fafc;
    --selection-handle: #1f1f1f;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

#root {
  min-height: 100vh;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, var(--surface-subtle) 0, var(--bg) 280px);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-ui);
}

.app-footer-brand {
  color: var(--text);
  font-weight: 800;
}

.app-footer-divider {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-subtle);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 47%, color-mix(in srgb, #ffffff 70%, transparent) 50%, transparent 53%),
    linear-gradient(180deg, var(--accent), #2563eb);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 50%, transparent),
    0 8px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}

h1,
h2,
p {
  margin: 0;
}

.brand h1 {
  font-size: var(--font-size-md);
  line-height: var(--line-tight);
}

.brand p,
.timeline-context p {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-ui);
}

.form-actions,
.panel-heading,
.timeline-context {
  display: flex;
  align-items: center;
}

.timeline-context {
  min-width: 0;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}

.timeline-context h2 {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-size-md);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-context p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-context .file-state {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 0;
  white-space: nowrap;
}

.file-state span {
  min-width: 0;
}

.dirty-indicator {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--danger);
  font-weight: 700;
}

.dirty-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.dirty-indicator[hidden] {
  display: none;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  overflow: visible;
}

.toolbar-action-groups {
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.toolbar-group:last-child {
  padding-right: 0;
  border-right: 0;
}

.toolbar-view-group {
  justify-self: end;
  min-width: max-content;
  padding-left: 8px;
  padding-right: 0;
  border-right: 0;
  border-left: 1px solid var(--line);
}

.toolbar-group-title {
  flex: 0 0 auto;
  color: var(--text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.toolbar-group-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.toolbar-check,
.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.toolbar-check input,
.check-row input {
  width: auto;
  min-width: 0;
  min-height: auto;
  margin: 0;
}

.calendar-display-field {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0 0 11px;
  border: 0;
}

.calendar-display-field legend {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-ui);
  margin-bottom: 2px;
  padding: 0;
}

.calendar-display-field .field-label {
  margin-bottom: 0;
}

.calendar-support-warning {
  min-width: 0;
  margin: 0;
  padding: 7px 9px;
  border-inline-start: 3px solid #fa8c16;
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-normal);
  white-space: normal;
}

.separator {
  width: 1px;
  height: 24px;
  background: var(--line);
  margin: 0 2px;
}

.toolbar-button,
.primary-button,
.secondary-button,
.quiet-button,
.icon-button,
.theme-toggle-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  min-height: 34px;
  border-radius: 7px;
  padding: 0 9px;
  font-weight: 600;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
  transform 140ms ease;
}

.toolbar-button.ant-btn,
.primary-button.ant-btn,
.secondary-button.ant-btn,
.quiet-button.ant-btn,
.icon-button.ant-btn,
.theme-toggle-button.ant-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  font-family: var(--font-sans);
}

.toolbar-button:hover,
.secondary-button:hover,
.quiet-button:hover,
.icon-button:hover,
.theme-toggle-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-muted);
}

.toolbar-button:active,
.primary-button:active,
.secondary-button:active,
.quiet-button:active,
.icon-button:active,
.theme-toggle-button:active {
  transform: translateY(1px);
}

.toolbar-button {
  --toolbar-accent: var(--accent);
  --toolbar-accent-2: var(--accent-strong);
  display: inline-grid;
  gap: 7px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  width: 34px;
  padding: 0;
  min-width: 0;
}

.toolbar-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.toolbar-button .ant-btn-icon,
.icon-button .ant-btn-icon,
.theme-toggle-button .ant-btn-icon,
.fit-button .ant-btn-icon,
.color-picker-trigger .ant-btn-icon {
  display: inline-grid;
  line-height: 0;
  place-items: center;
}

.toolbar-icon {
  display: grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--toolbar-accent);
  line-height: 0;
}

.toolbar-button:hover .toolbar-icon {
  color: var(--toolbar-accent-2);
}

.toolbar-icon svg,
.lock-toggle-button svg,
.fit-button svg,
.zoom-icon-button svg,
.context-menu svg {
  display: block;
  flex: 0 0 auto;
  stroke-width: 2.25;
}

.toolbar-button[data-tone="event"] {
  --toolbar-accent: #f97316;
  --toolbar-accent-2: #ef4444;
}

.toolbar-button[data-tone="period"] {
  --toolbar-accent: #1677ff;
  --toolbar-accent-2: #4096ff;
}

.toolbar-button[data-tone="note"] {
  --toolbar-accent: #8b5cf6;
  --toolbar-accent-2: #d946ef;
}

.toolbar-button[data-tone="marker"] {
  --toolbar-accent: #14b8a6;
  --toolbar-accent-2: #10b981;
}

.toolbar-button[data-tone="birth"] {
  --toolbar-accent: #f43f5e;
  --toolbar-accent-2: #ec4899;
}

.toolbar-button[data-tone="line"] {
  --toolbar-accent: #64748b;
  --toolbar-accent-2: #334155;
}

.toolbar-button[data-tone="text"] {
  --toolbar-accent: #722ed1;
  --toolbar-accent-2: #9254de;
}

.toolbar-button[data-tone="save"] {
  --toolbar-accent: #22c55e;
  --toolbar-accent-2: #14b8a6;
}

.toolbar-button[data-tone="load"] {
  --toolbar-accent: #0ea5e9;
  --toolbar-accent-2: #1677ff;
}

.toolbar-button[data-tone="svg"] {
  --toolbar-accent: #f59e0b;
  --toolbar-accent-2: #f97316;
}

.toolbar-button[data-tone="png"] {
  --toolbar-accent: #06b6d4;
  --toolbar-accent-2: #1677ff;
}

.toolbar-button[data-tone="pdf"] {
  --toolbar-accent: #dc2626;
  --toolbar-accent-2: #f43f5e;
}

.fit-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.zoom-icon-button {
  color: var(--accent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 13%, var(--surface)) 0%,
      color-mix(in srgb, #14b8a6 16%, var(--surface)) 100%
    );
}

.panel-toggle-button {
  color: #3b82f6;
}

.panel-toggle-button[data-collapsed="true"] {
  color: #14b8a6;
}

.lock-toggle-button {
  --lock-accent: #64748b;
  --lock-accent-2: #334155;
  color: var(--text-muted);
}

.lock-toggle-button .toggle-icon-stack {
  width: 18px;
  height: 18px;
  color: var(--lock-accent);
}

.lock-toggle-button.is-active {
  --lock-accent: #0f766e;
  --lock-accent-2: #14b8a6;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--focus);
}

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.primary-button:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.secondary-button {
  background: var(--surface-subtle);
}

.quiet-button {
  min-height: 30px;
  padding: 0 9px;
  background: transparent;
}

.quiet-button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 20%, var(--line));
}

.icon-button {
  display: inline-grid;
  width: 34px;
  padding: 0;
  place-items: center;
  font-weight: 700;
  line-height: 1;
}

.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 86px;
  min-height: 30px;
  padding: 0 9px;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--text);
}

.theme-toggle-button .anticon {
  color: var(--accent);
}

.range-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.range-control-button.ant-btn {
  gap: 7px;
  min-width: 0;
  min-height: 30px;
  background: var(--surface-subtle);
  color: var(--text);
}

.range-control-button .ant-btn-icon {
  color: var(--accent);
}

.range-control-value {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: var(--line-ui);
  white-space: nowrap;
}

.range-popover-panel {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  display: grid;
  box-sizing: border-box;
  width: 286px;
  max-width: calc(100vw - 16px);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: var(--shadow);
}

.range-popover-panel[hidden] {
  display: none;
}

.range-popover-title {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: var(--line-tight);
  text-transform: uppercase;
}

.range-popover-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-popover-row input[type="range"] {
  flex: 1 1 auto;
  width: 180px;
}

.range-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.workspace {
  --sidebar-width: 320px;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 0;
  height: calc(100vh + var(--timeline-stage-extra-height));
  overflow: visible;
  transition: grid-template-columns 180ms ease;
}

.workspace[data-sidebar-collapsed="true"] {
  --sidebar-width: 58px;
}

.inspector {
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--line);
  background: var(--surface-subtle);
  padding: 14px;
  overflow: auto;
  transition:
    border-color 160ms ease,
    padding 160ms ease;
}

.workspace[data-sidebar-collapsed="true"] .inspector {
  overflow: hidden;
  padding: 10px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-header {
  min-height: 40px;
  margin-bottom: 12px;
}

.sidebar-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sidebar-title-kicker {
  color: var(--text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--line-tight);
  text-transform: uppercase;
}

.sidebar-title strong {
  color: var(--text);
  font-size: var(--font-size-md);
  line-height: var(--line-tight);
}

.sidebar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sidebar-panels {
  min-width: 0;
  max-height: 2400px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 200ms ease,
    opacity 160ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.workspace[data-sidebar-collapsed="true"] .sidebar-title,
.workspace[data-sidebar-collapsed="true"] .sidebar-panels {
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateX(-8px);
}

.workspace[data-sidebar-collapsed="true"] .sidebar-title {
  width: 0;
}

.workspace[data-sidebar-collapsed="true"] .sidebar-header {
  justify-content: center;
}

.workspace[data-sidebar-collapsed="true"] .sidebar-actions {
  flex-direction: column;
}

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel.ant-card {
  color: var(--text);
  background: var(--surface-raised);
  border-color: var(--line);
}

.panel .ant-card-head {
  min-height: 44px;
  padding: 0 14px;
  border-color: var(--line);
}

.panel .ant-card-head-title,
.panel .ant-card-extra {
  padding: 10px 0;
}

.panel .ant-card-body {
  padding: 14px;
}

.panel-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel h2,
.timeline-context h2 {
  font-size: var(--font-size-md);
  line-height: var(--line-tight);
}

label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-ui);
  margin-bottom: 11px;
  min-width: 0;
}

.field-label > span:first-child {
  color: var(--text-muted);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  min-height: 36px;
  padding: 7px 9px;
  outline: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.legacy-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-subtle) 50%),
    linear-gradient(135deg, var(--text-subtle) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
  padding-right: 30px;
}

.legacy-checkbox {
  accent-color: var(--accent);
}

.ant-range-bridge {
  accent-color: var(--accent);
}

.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select-selector {
  font-family: var(--font-sans);
}

.field-caption {
  display: block;
}

.color-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-ui);
  margin-bottom: 11px;
  min-width: 0;
}

.color-picker-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.color-picker {
  position: relative;
  min-width: 0;
}

.color-picker-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.color-picker-trigger:hover:not(:disabled),
.color-picker-trigger:focus-visible {
  border-color: var(--accent);
  background: var(--surface-subtle);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

.color-picker-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.color-picker-preview {
  --selected-color: #2563eb;
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);
  border-radius: 6px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 34%, var(--selected-color)) 0%,
      var(--selected-color) 54%,
      color-mix(in srgb, #000000 15%, var(--selected-color)) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000000 20%, transparent);
}

.color-picker-preview.is-empty {
  background:
    linear-gradient(135deg, transparent 45%, var(--danger) 46%, var(--danger) 54%, transparent 55%),
    linear-gradient(45deg, var(--surface-muted) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-muted) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-muted) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-muted) 75%);
  background-color: var(--surface);
  background-position:
    0 0,
    0 0,
    0 6px,
    6px -6px,
    -6px 0;
  background-size:
    100% 100%,
    12px 12px,
    12px 12px,
    12px 12px,
    12px 12px;
}

.color-picker-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-picker-trigger svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.color-picker-panel {
  --picker-hue-color: #2563eb;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: grid;
  width: min(304px, calc(100vw - 32px));
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, #ffffff 10%, transparent);
}

.color-picker-panel[hidden] {
  display: none;
}

.color-picker-plane {
  position: relative;
  height: 132px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(0deg, #000000, transparent),
    linear-gradient(90deg, #ffffff, transparent),
    var(--picker-hue-color);
  cursor: crosshair;
  touch-action: none;
}

.color-picker-plane:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

.color-picker-plane-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.45),
    0 3px 8px rgb(0 0 0 / 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-picker-range,
.color-picker-hex-row {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.color-picker-range input[type="range"] {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  accent-color: var(--accent);
  background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ef4444);
}

.color-picker-hex-row input {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

.color-picker-panel .color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.color-swatch-button {
  position: relative;
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
  cursor: pointer;
}

.color-swatch-button::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 34%, var(--swatch-color)) 0%,
      var(--swatch-color) 54%,
      color-mix(in srgb, #000000 15%, var(--swatch-color)) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000000 20%, transparent);
}

.color-swatch-button:hover:not(:disabled) {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.color-swatch-button.is-active {
  border-color: var(--text);
  box-shadow:
    0 0 0 2px var(--focus),
    0 6px 14px color-mix(in srgb, var(--text) 15%, transparent);
}

.color-swatch-button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55));
  transform: translate(-50%, -50%) rotate(45deg);
}

.color-swatch-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

textarea {
  min-height: 86px;
  resize: vertical;
}

.note-textarea.ant-input {
  min-height: 138px;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

input[readonly] {
  color: var(--text-muted);
  background: var(--surface-muted);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.timeline-viewport:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
  outline: none;
}

.timeline-viewport:focus {
  outline: none;
}

.timeline-viewport.context-menu-open:focus,
.timeline-viewport.context-menu-open:focus-visible {
  border-color: transparent;
  box-shadow: var(--shadow);
  outline: none;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}

.field-grid > label {
  min-width: 0;
}

.calendar-preview {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-normal);
  margin: -2px 0 11px;
}

.lane-list {
  display: grid;
  gap: 9px;
}

.lane-editor-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.lane-editor-row.is-dragging {
  opacity: 0.55;
}

.lane-editor-row.is-drop-target {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--focus);
}

.lane-editor-label {
  margin: 0;
}

.lane-drag-handle,
.lane-remove-button {
  border: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--text-muted);
  border-radius: 7px;
  min-height: 34px;
}

.lane-drag-handle {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  gap: 3px;
  justify-content: center;
  align-content: center;
  padding: 0;
  cursor: grab;
}

.lane-drag-handle:active {
  cursor: grabbing;
}

.lane-drag-handle span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.lane-remove-button {
  align-self: end;
  padding: 0 8px;
  color: var(--danger);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.lane-remove-button:hover {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: var(--danger-soft);
}

.lane-remove-button:disabled {
  color: var(--text-subtle);
  opacity: 0.58;
}

.form-actions {
  gap: 8px;
}

.derived-label-options {
  display: grid;
  gap: 8px;
  margin-bottom: 11px;
}

.derived-label-options[hidden] {
  display: none;
}

.form-actions button {
  flex: 1;
}

.timeline-stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px 12px;
  display: grid;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
}

.timeline-canvas-shell {
  position: relative;
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
  min-height: 0;
}

.tool-dock {
  display: grid;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 160ms ease,
    padding 160ms ease;
}

.tool-dock .toolbar {
  overflow: visible;
  opacity: 1;
}

.view-actions {
  align-items: center;
}

.toggle-icon-stack {
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.toggle-icon-state {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.toggle-icon-state[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.timeline-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  height: 100%;
  overflow: auto;
  cursor: grab;
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    linear-gradient(180deg, var(--canvas-border), var(--line-strong)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.timeline-cursor-readout {
  --cursor-x: 0px;
  --cursor-label-x: 0px;
  position: relative;
  z-index: 6;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 58%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--canvas) 86%, var(--surface-raised));
  color: var(--text);
  pointer-events: none;
}

.timeline-cursor-readout::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--cursor-x);
  width: 1px;
  background: var(--timeline-cursor-guide);
  content: "";
  opacity: 0.78;
}

.timeline-cursor-readout[hidden] {
  display: block !important;
  visibility: hidden;
}

.timeline-cursor-card {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  overflow: visible;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
  text-align: center;
  white-space: nowrap;
}

.timeline-cursor-card strong {
  min-width: 0;
  color: var(--timeline-cursor-guide);
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: right;
  white-space: pre;
}

.timeline-cursor-card span {
  min-width: 0;
  overflow: visible;
  color: var(--text);
  font-weight: 600;
  text-overflow: clip;
  white-space: pre;
}

.timeline-cursor-card #cursorAgeLabel {
  text-align: center;
}

.timeline-cursor-card #cursorDateLabel {
  text-align: left;
}

.timeline-cursor-card #cursorAgeLabel {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.timeline-height-grip {
  display: grid;
  height: 18px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--surface-raised), var(--surface-subtle));
  cursor: ns-resize;
  box-shadow: var(--shadow-sm);
  touch-action: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.timeline-height-grip span {
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: var(--text-subtle);
  box-shadow:
    0 -5px 0 color-mix(in srgb, var(--text-subtle) 64%, transparent),
    0 5px 0 color-mix(in srgb, var(--text-subtle) 64%, transparent);
}

.timeline-height-grip:hover,
.timeline-height-grip:focus-visible,
.timeline-height-grip.is-dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.timeline-height-grip:active,
.timeline-height-grip.is-dragging {
  transform: translateY(1px);
}

body.is-timeline-height-dragging,
body.is-timeline-height-dragging * {
  cursor: ns-resize !important;
  user-select: none;
}

.note-inline-editor {
  position: absolute;
  z-index: 4;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 13px 12px 10px;
  border: 2px solid var(--selection);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 98%, transparent);
  color: var(--text);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--text) 18%, transparent);
  font: inherit;
  font-size: var(--timeline-font-sm);
  font-weight: 700;
  line-height: 17px;
  resize: none;
  touch-action: auto;
}

.note-inline-editor[hidden] {
  display: none;
}

.timeline-empty-state {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(390px, calc(100% - 48px));
  gap: 8px;
  justify-items: center;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-raised) 96%, transparent) 0%,
      color-mix(in srgb, var(--surface) 94%, transparent) 100%
    );
  box-shadow:
    var(--shadow),
    0 18px 44px color-mix(in srgb, #000000 9%, transparent);
  color: var(--text);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.timeline-empty-state[hidden] {
  display: none;
}

.timeline-empty-state strong {
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

.timeline-empty-state p {
  max-width: 30ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: var(--line-ui);
}

.empty-state-mark {
  position: relative;
  display: flex;
  align-items: center;
  width: 126px;
  height: 32px;
  margin-bottom: 2px;
}

.empty-state-mark::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 72%, transparent);
  content: "";
}

.empty-state-mark span {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 20px;
  border: 2px solid var(--surface-raised);
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
}

.empty-state-mark span:nth-child(1) {
  background: linear-gradient(180deg, #38bdf8, #2563eb);
}

.empty-state-mark span:nth-child(2) {
  background: linear-gradient(180deg, #34d399, #0f766e);
}

.empty-state-mark span:nth-child(3) {
  margin-right: 0;
  background: linear-gradient(180deg, #fb7185, #e11d48);
}

.line-editor-popover {
  position: fixed;
  z-index: 35;
  width: min(320px, calc(100vw - 16px));
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

.line-editor-popover[hidden] {
  display: none;
}

.line-editor-popover > form > label,
.line-editor-popover .color-picker-field {
  margin-bottom: 10px;
}

.line-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.line-editor-heading strong {
  color: var(--text);
  font-size: var(--font-size-sm);
}

.line-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.line-editor-actions button {
  flex: 1 1 auto;
}

.context-menu {
  position: fixed;
  z-index: 40;
  width: min(278px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

.context-menu[hidden] {
  display: none;
}

.context-menu-submenu {
  position: relative;
}

.context-submenu-panel {
  position: absolute;
  top: -6px;
  left: calc(100% + 6px);
  display: none;
  width: min(220px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
  box-shadow:
    var(--shadow),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

.context-menu.opens-submenu-left .context-submenu-panel {
  right: calc(100% + 6px);
  left: auto;
}

.context-menu-submenu.is-open .context-submenu-panel {
  display: block;
}

.context-menu button {
  --context-accent: var(--accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.context-menu-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.context-menu-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu svg {
  color: var(--context-accent);
}

.context-menu button[data-context-action="copy"],
.context-menu button[data-context-action="duplicate"] {
  --context-accent: #6366f1;
}

.context-menu button[data-context-action="paste"] {
  --context-accent: #0ea5e9;
}

.context-menu button[data-context-action="add-menu"],
.context-menu button[data-context-add] {
  --context-accent: #22c55e;
}

.context-menu button[data-context-action="lock-all"],
.context-menu button[data-context-action="unlock-all"],
.context-menu button[data-context-action="lock-item"],
.context-menu button[data-context-action="unlock-item"] {
  --context-accent: #14b8a6;
}

.context-menu button[data-context-action="zoom-in"],
.context-menu button[data-context-action="zoom-out"],
.context-menu button[data-context-action="fit"] {
  --context-accent: #f59e0b;
}

.context-menu button[data-context-action="delete"] {
  --context-accent: var(--danger);
}

.context-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

.context-menu button:hover:not(:disabled),
.context-menu button:focus-visible {
  background: var(--accent-soft);
  color: var(--text);
  outline: none;
}

.context-menu button.danger {
  color: var(--danger);
}

.context-menu button:disabled {
  color: var(--text-subtle);
  cursor: not-allowed;
  opacity: 0.6;
}

.context-menu kbd {
  min-width: 0;
  color: var(--text-subtle);
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.timeline-info-panel {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  min-height: 48px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: var(--font-size-xs);
  line-height: var(--line-ui);
  padding: 8px 10px;
  transition:
    max-height 180ms ease,
    padding 180ms ease;
}

.timeline-info-panel[data-collapsed="true"] {
  max-height: 48px;
  overflow: hidden;
}

.timeline-info-header,
.timeline-info-title {
  display: flex;
  align-items: center;
}

.timeline-info-header {
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.timeline-info-title {
  gap: 7px;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: var(--line-tight);
  text-transform: uppercase;
}

.timeline-info-title .anticon {
  color: var(--accent);
}

.timeline-info-toggle.ant-btn {
  width: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}

.timeline-info-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: visible;
  transition:
    opacity 140ms ease,
    transform 160ms ease;
}

.timeline-info-panel[data-collapsed="true"] .timeline-info-content {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.timeline-info-block {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px;
}

.timeline-info-kicker {
  color: var(--text-subtle);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timeline-info-block strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-info-block strong {
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.timeline-info-block span:not(.timeline-info-kicker) {
  color: var(--text-muted);
  font-weight: 500;
  line-height: var(--line-ui);
  overflow-wrap: anywhere;
}

.timeline-viewport.is-panning {
  cursor: grabbing;
}

.timeline-viewport.is-reordering-lanes {
  cursor: ns-resize;
}

.timeline-viewport.items-locked .item {
  cursor: inherit;
}

#timelineSvg {
  display: block;
  flex: 0 0 auto;
  margin-block: auto;
  min-width: 100%;
  user-select: none;
  touch-action: none;
  font-family: var(--font-sans);
}

.axis-band {
  fill: var(--timeline-axis-bg);
}

.canvas-bg {
  fill: var(--timeline-bg);
}

.time-band-alternate {
  fill: var(--timeline-time-band);
  pointer-events: none;
}

.grid-major {
  stroke: var(--timeline-grid-major);
  stroke-width: 1;
}

.grid-minor {
  stroke: var(--timeline-grid-minor);
  stroke-width: 1;
}

.grid-day {
  stroke: var(--timeline-grid-day);
  stroke-width: 1;
  fill: none;
}

.lane-rule {
  stroke: var(--timeline-rule);
  stroke-width: 1;
}

.center-axis-line {
  stroke: var(--timeline-axis-line);
  stroke-width: 5;
  stroke-linecap: round;
}

.axis-tick {
  stroke: var(--timeline-axis-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

.axis-tick-day {
  stroke-width: 2;
  opacity: 0.78;
}

.cursor-axis-guide {
  stroke: var(--timeline-cursor-guide);
  stroke-width: 1;
  stroke-linecap: butt;
  opacity: 0.78;
  pointer-events: none;
}

.lane-background {
  opacity: 0.16;
  pointer-events: none;
}

.lane-label,
.axis-label,
.axis-iranian,
.age-label,
.axis-month,
.axis-day {
  fill: var(--timeline-label);
  font-size: var(--timeline-font-xs);
}

.lane-label-control {
  cursor: grab;
}

.lane-label-control:active {
  cursor: grabbing;
}

.lane-label-control:hover .lane-label-hit,
.lane-label-control:focus-visible .lane-label-hit {
  fill: var(--accent-soft);
}

.lane-label-control:focus-visible {
  outline: none;
}

.lane-label-control:focus-visible .lane-label {
  fill: var(--accent-text);
  font-weight: 700;
}

.lane-add-control {
  cursor: pointer;
}

.lane-add-hit {
  fill: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  stroke: var(--timeline-rule);
  stroke-width: 1;
}

.lane-add-icon {
  stroke: var(--timeline-label);
  stroke-width: 2;
  stroke-linecap: round;
}

.lane-add-label {
  fill: var(--timeline-label);
  font-size: var(--timeline-font-xs);
  font-weight: 700;
}

.lane-add-control:hover .lane-add-hit,
.lane-add-control:focus-visible .lane-add-hit {
  fill: var(--accent-soft);
  stroke: var(--accent-text);
}

.lane-add-control:hover .lane-add-icon,
.lane-add-control:focus-visible .lane-add-icon {
  stroke: var(--accent-text);
}

.lane-add-control:hover .lane-add-label,
.lane-add-control:focus-visible .lane-add-label {
  fill: var(--accent-text);
}

.lane-add-control:focus-visible {
  outline: none;
}

.lane-label-grip {
  fill: var(--timeline-label);
  opacity: 0.72;
}

.axis-year {
  fill: var(--timeline-label-strong);
  font-size: var(--timeline-font-sm);
  font-weight: 700;
}

.axis-month-iranian,
.axis-month-compact {
  opacity: 0.82;
}

.title-label {
  font-size: var(--timeline-font-sm);
  font-weight: 700;
  pointer-events: none;
}

.note-label {
  fill: var(--timeline-label-strong);
  font-size: var(--timeline-font-sm);
  font-weight: 600;
  pointer-events: none;
}

.item {
  cursor: grab;
  outline: none;
}

.item:focus,
.item:focus-visible,
#timelineSvg [tabindex]:focus,
#timelineSvg [tabindex]:focus-visible {
  outline: none;
}

.item.locked {
  cursor: default;
  opacity: 0.74;
}

.item:active {
  cursor: grabbing;
}

.item.locked:active {
  cursor: default;
}

.period-body {
  stroke-width: 1;
}

.period-shadow {
  opacity: 0.12;
  pointer-events: none;
}

.period-derived-label {
  font-size: var(--timeline-font-2xs);
  font-weight: 700;
  opacity: 0.86;
  pointer-events: none;
}

.event-stem {
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.82;
}

.event-marker {
  stroke: color-mix(in srgb, var(--timeline-bg) 72%, transparent);
  stroke-width: 1;
}

.event-marker-shadow {
  opacity: 0.2;
  pointer-events: none;
}

.event-marker-edge {
  fill: none;
  stroke-width: 1.5;
}

.event-marker-glint {
  fill: #ffffff;
  opacity: 0.72;
  pointer-events: none;
}

.marker-hit {
  stroke-width: 16;
  pointer-events: stroke;
}

.marker-line {
  stroke-width: 2;
  stroke-linecap: round;
}

.marker-pin {
  stroke: var(--timeline-bg);
  stroke-width: 2;
}

.marker-label-leader {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  opacity: 0.88;
  pointer-events: none;
}

.marker-label-bg {
  stroke: color-mix(in srgb, var(--timeline-bg) 70%, transparent);
  stroke-width: 1;
  cursor: move;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--text) 14%, transparent));
}

.marker-label {
  font-size: var(--timeline-font-xs);
  font-weight: 700;
  dominant-baseline: auto;
  cursor: move;
  pointer-events: auto;
}

.item-marker.selected .marker-label-bg {
  stroke: color-mix(in srgb, var(--selection) 28%, transparent);
  stroke-width: 1;
}

.birth-hit {
  stroke-width: 18;
  pointer-events: stroke;
}

.birth-line-shadow {
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.16;
  pointer-events: none;
}

.birth-line {
  stroke-width: 3.5;
  stroke-linecap: round;
}

.birth-pin {
  stroke: var(--timeline-bg);
  stroke-width: 2;
}

.birth-label-bg {
  filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--text) 16%, transparent));
}

.birth-label-text {
  font-size: var(--timeline-font-xs);
  font-weight: 800;
  pointer-events: none;
}

.note-leader {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  opacity: 0.78;
}

.note-leader.selected {
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--selection) 42%, transparent));
}

.note-leader-layer {
  pointer-events: none;
}

.note-anchor {
  stroke: var(--timeline-bg);
  stroke-width: 2;
}

.note-balloon {
  stroke-width: 1.5;
  filter:
    drop-shadow(0 10px 16px color-mix(in srgb, var(--text) 16%, transparent))
    drop-shadow(0 2px 2px color-mix(in srgb, #ffffff 18%, transparent));
  cursor: move;
}

.note-balloon-text {
  font-size: var(--timeline-font-sm);
  font-weight: 700;
  cursor: text;
  pointer-events: auto;
}

.note-selection-outline,
.marker-label-selection-outline {
  stroke-width: 2.4;
}

.range-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.selection-outline {
  fill: none;
  stroke: var(--selection);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.resize-handle {
  fill: var(--selection-handle);
  stroke: var(--selection);
  stroke-width: 2;
  cursor: ew-resize;
}

.note-resize-handle {
  cursor: nwse-resize;
}

.note-resize-hit,
.marker-label-resize-hit {
  fill: transparent;
  stroke: none;
}

.note-resize-icon {
  fill: none;
  stroke: var(--selection);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  pointer-events: none;
}

.timeline-viewport.items-locked .note-balloon,
.item.locked .note-balloon,
.timeline-viewport.items-locked .note-resize-handle,
.item.locked .note-resize-handle {
  cursor: inherit;
}

.empty-selection {
  opacity: 0.56;
}

@media (max-width: 960px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .workspace[data-sidebar-collapsed="true"] {
    grid-template-columns: 1fr;
  }

  .inspector {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
  }

  .workspace[data-sidebar-collapsed="true"] .sidebar-title {
    display: grid;
  }

  .workspace[data-sidebar-collapsed="true"] .sidebar-actions {
    flex-direction: row;
  }

  .workspace[data-sidebar-collapsed="true"] .sidebar-header {
    justify-content: space-between;
  }

  .timeline-info-content {
    grid-template-columns: 1fr;
  }

  .timeline-info-panel[data-collapsed="true"] {
    max-height: 48px;
  }
}

@media (max-width: 560px) {
  .topbar,
  .timeline-stage,
  .inspector {
    padding: 12px;
  }

  .toolbar-button {
    flex: 1 1 96px;
  }

  .separator {
    display: none;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }
}