:root {
  color-scheme: light;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  color: #1a2c38;
  background: #eef0ef;
  --accent: #a72c32;
  --border: #d3d9d9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button { font: inherit; }
button:focus-visible, .board-viewport:focus-visible {
  outline: 3px solid #235b87;
  outline-offset: 3px;
}
button { -webkit-tap-highlight-color: transparent; }
.viewer {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: #fafbf9;
  z-index: 2;
}
.identity { flex: 0 0 auto; }
.eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em; color: #53616a; }
h1 { margin: 1px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; }
.shift-navigation, .view-controls, .shift-buttons { display: flex; align-items: center; }
.shift-navigation { gap: 8px; }
.shift-buttons { gap: 4px; }
.toolbar button {
  min-width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #213745;
  cursor: pointer;
  font-weight: 650;
}
.toolbar button:hover { background: #e9edeb; }
.toolbar button:active { background: #dfe5e1; }
.toolbar button:disabled { opacity: .4; cursor: default; background: transparent; }
.shift-buttons button[aria-pressed="true"] { color: #fafbf9; background: var(--accent); }
.shift-buttons button[aria-pressed="true"]:hover { background: #90262c; }
.arrow-button { font-size: 24px !important; line-height: 1; }
.view-controls { gap: 2px; }
.view-controls .fit-button { padding: 0 12px; }
.zoom-button { font-size: 24px !important; font-weight: 400 !important; }
.fullscreen-button { margin-left: 8px; border-left-color: var(--border) !important; border-radius: 0 !important; font-size: 28px !important; }
.board-viewport {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-color: #87969c #e2e7e5;
  scrollbar-width: thin;
}
.board-viewport.can-pan { cursor: grab; }
.board-viewport.dragging { cursor: grabbing; user-select: none; }
.board-stage {
  display: grid;
  place-items: center;
  min-width: 100%;
  min-height: 100%;
}
#board-image { display: block; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; background: #fafbf9; }
.empty-state {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}
.empty-mark { font: 700 clamp(72px, 14vw, 140px)/1 Georgia, "Times New Roman", serif; color: #bcc8cb; }
.empty-state h2 { margin: 24px 0 8px; font-size: clamp(19px, 2vw, 25px); font-weight: 600; }
.empty-state p { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.6; color: #4e6069; }
.statusbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 7px max(16px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #fafbf9;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
}
.connection-status { display: flex; align-items: center; gap: 7px; font-weight: 700; flex-shrink: 0; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #77858b; }
.connection-status[data-state="live"] { color: #205d44; }
.connection-status[data-state="live"] .status-dot { background: #2b7656; }
.connection-status[data-state="stale"], .connection-status[data-state="disconnected"], .connection-status[data-state="error"] { color: #a72c32; }
.connection-status[data-state="stale"] .status-dot, .connection-status[data-state="disconnected"] .status-dot, .connection-status[data-state="error"] .status-dot { background: #a72c32; }
.connection-status[data-state="updating"] { color: #82531d; }
.connection-status[data-state="updating"] .status-dot { background: #986725; }
.timestamps { display: flex; flex-wrap: wrap; gap: 4px 16px; color: #50606a; }
.timestamps span { white-space: nowrap; }
.zoom-hint { margin-left: auto; color: #607078; }
.noscript { position: fixed; inset: auto 16px 60px; padding: 16px; background: #fafbf9; border: 1px solid #a72c32; z-index: 10; }

@media (max-width: 760px) {
  .toolbar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .identity { flex: 1; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: 22px; }
  .shift-navigation { order: 3; width: 100%; justify-content: center; gap: 16px; }
  .shift-buttons { gap: 8px; }
  .statusbar { flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px max(6px, env(safe-area-inset-bottom)); font-size: 11px; }
  .timestamps { gap: 4px 12px; }
  .zoom-hint { display: none; }
  body[data-dedicated="true"] .toolbar { flex-wrap: nowrap; }
}

@media (max-width: 390px) {
  .toolbar { padding-inline: 6px; }
  .view-controls { gap: 0; }
  .toolbar button { min-width: 40px; }
  .fullscreen-button { margin-left: 0; }
  .statusbar { column-gap: 8px; }
}

@media (min-width: 1800px) {
  .toolbar { padding-block: 14px; }
  .eyebrow { font-size: 12px; }
  .statusbar { font-size: 15px; min-height: 42px; }
}

@media (prefers-reduced-motion: no-preference) {
  .toolbar button { transition: background-color 120ms ease-out; }
}