:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #243348;
  background: #f6f8fb;
  font-size: 13px;
  --border: #dde4ed;
  --accent: #2563eb;
}
#preview-panel,
#preview-scroll {
  min-height: 0;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
button,
.button,
select {
  font: inherit;
  border: 1px solid var(--border);
  background: white;
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button:hover,
.button:hover {
  background: #edf3ff;
  border-color: #9ab5e9;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.primary:hover {
  background: #1d4ed8;
  color: white;
}
button[aria-pressed="true"] {
  background: #dce9ff;
  color: #174fc7;
  border-color: #8cacdf;
}
input,
select {
  font: inherit;
}
header {
  height: 60px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: white;
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  font-size: 17px;
  gap: 10px;
  white-space: nowrap;
}
.badge {
  background: #f1f4f8;
  color: #718098;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
}
#filename {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #67778d;
  margin-left: 20px;
}
#welcome {
  flex: 1;
  overflow: auto;
  padding: 48px 24px;
}
.drop-card {
  max-width: 720px;
  margin: auto;
  border: 1px dashed #b4c5dd;
  background: white;
  border-radius: 6px;
  padding: 32px 24px;
  text-align: center;
}
.drop-card.drag {
  border: 2px solid var(--accent);
  background: #edf4ff;
}
h1 {
  font-size: 21px;
  margin: 12px 0;
}
p {
  line-height: 1.9;
}
.drop-card > p {
  color: #77859a;
}
.drop-card .button {
  margin: 20px 8px 8px 0;
}
.hint {
  font-size: 11px;
}
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 34%) minmax(340px, 1fr) 265px;
}
[hidden] {
  display: none !important;
}
aside {
  min-width: 0;
  background: white;
  overflow: auto;
}
#tree-panel {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: auto;
}
#detail-panel {
  border-left: 1px solid var(--border);
}
.panel-heading {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.panel-heading span {
  color: #8290a2;
  font-size: 11px;
}
.tree-tools {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tree-tools > input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.tree-tools label {
  color: #738096;
  font-size: 11px;
}
#tree {
  overflow: auto;
  flex: 1;
  padding: 8px 0 20px;
}
.command {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  border-left: 3px solid transparent;
}
.command:hover {
  background: #f0f5fc;
}
.command.selected {
  background: #e7f0ff;
  border-left-color: var(--accent);
}
.command .index {
  color: #9aa7b9;
  min-width: 25px;
  font-size: 10px;
}
.command .dot {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #d6dee8;
}
.command.paint .dot {
  background: #4099ba;
}
.command .op {
  overflow: hidden;
  text-overflow: ellipsis;
}
.command .ref {
  margin-left: auto;
  color: #97a4b5;
  font-size: 9px;
}
.command.focus {
  outline: 1px solid #91b6ef;
  outline-offset: -1px;
}
details.command-group > summary {
  list-style: none;
}
details.command-group > summary:before {
  content: "▸";
  font-family: sans-serif;
  color: #8b99ad;
}
details.command-group[open] > summary:before {
  content: "▾";
}
#preview-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #e9edf3;
}
.preview-toolbar {
  height: 54px;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fafbfd;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.preview-toolbar > div {
  display: flex;
  gap: 5px;
}
.preview-toolbar button,
.preview-toolbar select {
  font-size: 11px;
  padding: 5px 8px;
}
#preview-scroll {
  overflow: auto;
  flex: 1;
  padding: 28px;
  position: relative;
}
#paper {
  position: relative;
  width: max-content;
  margin: 0 auto;
  box-shadow: 0 4px 22px #20344f20;
  background: white;
}
canvas {
  display: block;
}
#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
#overlay rect {
  stroke: #2374e8;
  stroke-width: 1.5;
  fill: #438ffc25;
  vector-effect: non-scaling-stroke;
}
#paper.picking {
  cursor: crosshair;
}
#render-summary {
  padding: 9px 14px;
  background: #f7f9fc;
  color: #738096;
  font-size: 10px;
  border-top: 1px solid var(--border);
}
#detail {
  padding: 18px;
  overflow-wrap: anywhere;
}
.muted {
  color: #8a98aa;
  font-size: 12px;
}
.detail-title {
  font-family: ui-monospace, monospace;
  font-size: 20px;
  margin: 0 0 16px;
}
.field {
  margin: 0 0 16px;
}
.field label {
  display: block;
  color: #8a98aa;
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.field pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.pill {
  display: inline-block;
  background: #e9f4f3;
  color: #38817a;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 10px;
}
#notes {
  margin: 4px 16px 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 11px;
  color: #7a879a;
}
#notes summary {
  cursor: pointer;
}
#notes li {
  margin: 10px 0;
  line-height: 1.7;
}
#notes ul {
  padding-left: 16px;
}
#verification {
  line-height: 1.8;
  padding-top: 10px;
}
footer {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border-top: 1px solid var(--border);
  background: white;
  font-size: 10px;
  color: #7b8ba0;
  flex-shrink: 0;
}
body.busy {
  cursor: progress;
}
body.busy #demo,
body.busy [data-sample],
body.busy .button {
  pointer-events: none;
  opacity: 0.5;
}
.error {
  color: #bd394b !important;
}
@media (max-width: 1000px) {
  main {
    grid-template-columns: 310px minmax(300px, 1fr);
  }
  #detail-panel {
    display: none;
  }
  .badge {
    display: none;
  }
  .brand {
    font-size: 14px;
  }
  header {
    padding: 0 12px;
  }
  #filename {
    margin-left: 0;
  }
}
@media (max-width: 650px) {
  .features {
    display: none;
  }
  header .brand small {
    display: none;
  }
  header {
    gap: 6px;
  }
  .drop-card {
    padding: 30px 15px;
  }
  h1 {
    font-size: 24px;
  }
  main {
    grid-template-columns: 260px 340px;
    overflow: auto;
  }
}

.tree-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tree-actions > button, .tree-actions > select { flex-shrink: 0; }
.object-jump-controls { display: inline-flex; align-items: center; gap: 6px; }
.object-jump-row > label { flex-shrink: 0; }
.tree-actions input { min-width: 60px; width: 100px; }
.tree-actions button, .tree-actions select { padding: 4px 8px; font-size: 11px; }
.panel-heading select { min-width: 0; padding: 4px 8px; }
.object-node { font: 12px ui-monospace, SFMono-Regular, monospace; }
.object-label { padding: 5px 8px; white-space: nowrap; cursor: pointer; width: max-content; min-width: 100%; }
.object-label:hover { background: #e7f0ff; }
.object-children, .command-children { padding-left: 16px; border-left: 1px solid #e4e9ef; margin-left: 8px; }
.object-detail { font: 11px ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.stream-tools { display: flex; gap: 4px; padding: 8px 0; align-items: center; }
.stream-tools input { width: 90px; }
.stream-tools button, .stream-tools select { padding: 3px 7px; }
.stream-bytes { font: 11px ui-monospace, monospace; tab-size: 4; white-space: pre; }
.command .op { overflow: visible; text-overflow: clip; }
.command { width: max-content; min-width: 100%; }
#tree-panel { min-width: 340px; }
@media (max-width: 1000px) {
  main { grid-template-columns: 340px minmax(300px,1fr) 250px; overflow: auto; }
  #detail-panel { display: block; }
}

.tree-help { padding: 6px 12px; font-size: 10px; color: #67778d; border-bottom: 1px solid var(--border); }

.object-label.selected { background: #e7f0ff; box-shadow: inset 3px 0 var(--accent); }

.stream-download {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; color: inherit; background: white;
  border: 1px solid var(--border); border-radius: 6px; text-decoration: none;
}
.stream-download:hover { background: #edf3ff; border-color: #9ab5e9; }
.stream-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.object-label:focus-visible, .command:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

#tree-panel > .panel-heading { flex-direction: column; gap: 6px; padding: 10px 12px; }
#tree-panel > .panel-heading > #command-count { align-self: flex-end; }
#mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#mode-tabs [role="tab"] { padding: 7px 4px; font-size: 12px; border-radius: 4px; }
#mode-tabs [aria-selected="true"] { background: #e7f0ff; border-color: #8cacdf; color: #174fc7; font-weight: 600; }
#mode-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#tree-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.font-note { font: 11px system-ui, sans-serif; color: #67778d; max-width: 420px; padding: 4px 8px; }

@keyframes source-reveal { from { background: #ffe3a0; } to { background: #e7f0ff; } }
.command.source-reveal { animation: source-reveal 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .command.source-reveal { animation: none; } }
#preview-scroll { touch-action: pan-x pan-y; }

#theme-controls { position: relative; }
#theme-controls button { padding: 6px 8px; white-space: nowrap; }
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; color: #e0e6ef; background: #151a22; --border: #414c5e; --accent: #80aaff; }
:root[data-theme="dark"] :is(header, aside, footer, button, .button, select, input, .drop-card, .stream-download) { background: #222a36; color: #e0e6ef; }
:root[data-theme="dark"] :is(button:hover, .button:hover, .stream-download:hover, .object-label:hover, .command:hover, .drop-card.drag) { background: #303e54; }
:root[data-theme="dark"] :is(.command.selected, .object-label.selected, button[aria-pressed="true"], #mode-tabs [aria-selected="true"]) { background: #294268; color: #edf4ff; }
:root[data-theme="dark"] .primary { background: #285fc8; color: #fff; }
:root[data-theme="dark"] .primary:hover { background: #326fdc; }
:root[data-theme="dark"] #preview-panel { background: #11151c; }
:root[data-theme="dark"] :is(.preview-toolbar, #render-summary, .badge) { background: #1c2330; }
:root[data-theme="dark"] :is(.muted, .field label, #filename, .tree-help, .font-note, #notes, #render-summary, footer, .badge, .drop-card > p, .tree-tools label, .panel-heading span) { color: #afbdd1; }
:root[data-theme="dark"] :is(.object-children, .command-children) { border-color: var(--border); }
:root[data-theme="dark"] .pill { background: #20443e; color: #a5e3d7; }
:root[data-theme="dark"] .error { color: #ff9ca9 !important; }
:root[data-theme="dark"] .source-reveal { animation-name: source-reveal-dark; }
@keyframes source-reveal-dark { from { background: #66502a; } to { background: #294268; } }

#load-progress { padding: 12px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#progress-label { display: block; margin-bottom: 7px; }
#progress-bar { width: 100%; height: 12px; accent-color: var(--accent); }
#load-progress { position: fixed; left: 24px; right: 24px; bottom: 40px; z-index: 10; background: #f6f8fb; border: 1px solid var(--border); border-radius: 6px; }
:root[data-theme="dark"] #load-progress { background: #222a36; }

#selection-warning { flex-shrink: 0; padding: 8px 12px; color: #9b283c; background: #fff0f2; font-size: 12px; }
:root[data-theme="dark"] #selection-warning { color: #ffbdc7; background: #452532; }

#theme-toggle { gap: 6px; border-radius: 20px; padding: 6px 10px; }
#theme-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; padding: 5px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px #0003; }
#theme-menu button { width: 100%; justify-content: flex-start; border: 0; background: transparent; text-align: left; }
#theme-menu button:hover, #theme-menu button:focus-visible { background: #edf3ff; outline: 2px solid var(--accent); outline-offset: -2px; }
.theme-check { width: 16px; visibility: hidden; }
[aria-checked="true"] > .theme-check { visibility: visible; }
:root[data-theme="dark"] #theme-menu { background: #222a36; }
:root[data-theme="dark"] #theme-menu button:hover, :root[data-theme="dark"] #theme-menu button:focus-visible { background: #303e54; }

.virtual-command-space { position: relative; min-width: 100%; }
.virtual-command-space > .command { position: absolute; left: 0; height: 28px; min-height: 28px; }
.virtual-disclosure { display: inline-block; width: 10px; flex-shrink: 0; }

/* Keep verification results from changing the fit viewport and retriggering rendering. */
#selection-warning[hidden] { display: block !important; visibility: hidden; }
#font-viewer { width: 96vw; height: 92vh; max-width: none; max-height: none; border: 1px solid var(--border); border-radius: 8px; padding: 0; color: inherit; background: #fff; --glyph-fill: #7fa5bf; --glyph-stroke: #162d45; }
#font-viewer::backdrop { background: #0006; }
.font-viewer-bar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.font-viewer-bar select { flex: 1; min-width: 0; }
.font-viewer-main { height: calc(100% - 52px); display: grid; grid-template-columns: minmax(280px,30%) minmax(0,1fr); }
.font-viewer-left, .font-viewer-right { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.font-viewer-left { border-right: 1px solid var(--border); }
.font-viewer-tabs { display: flex; gap: 4px; padding: 8px; }
.font-viewer-left input { margin: 8px; padding: 8px; min-width: 0; }
.font-glyph-list, .font-internals { flex: 1; min-height: 0; overflow: auto; }
.font-glyph-row { position: absolute; left: 0; width: 100%; height: 30px; border: 0; border-radius: 0; justify-content: flex-start; white-space: nowrap; font: 12px monospace; overflow: hidden; text-overflow: ellipsis; }
.font-internals { padding: 8px; }
.font-outline-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; }
.font-outline-controls label { display: flex; align-items: center; gap: 3px; }
.font-outline { flex: 1; min-height: 0; width: 100%; background: #f9fbfd; touch-action: none; cursor: grab; }
.font-glyph-info { margin: 0; padding: 10px; white-space: pre-wrap; font-size: 12px; max-height: 150px; overflow: auto; border-top: 1px solid var(--border); }
.glyph-grid { stroke: #aacbea; }.glyph-axis { stroke: #31877c; }.glyph-advance { stroke: #9c6b42; stroke-dasharray: 5 5; }.glyph-font-box { stroke: #5c4889; }
.glyph-on-point { fill: #e5b944; }.glyph-start-point { fill: #ef751c; }.glyph-control-point { fill: #9aa2ac; }.glyph-handle { stroke: #7c8796; stroke-dasharray: 3 2; }
:root[data-theme="dark"] #font-viewer { background: #202833; --glyph-fill: #5986a5; --glyph-stroke: #e0e6ef; }
:root[data-theme="dark"] .font-outline { background: #151a22; }
:root[data-theme="dark"] .glyph-grid { stroke: #34465b; }

.operator-explanation { margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }

.security-dialog { width: min(580px,90vw); max-height: 85vh; overflow: auto; padding: 24px; border: 1px solid var(--border); border-radius: 8px; color: inherit; background: #fff; }
.security-dialog::backdrop { background: #0006; }
.security-dialog p { line-height: 1.6; font-size: 13px; }
.security-dialog form { display: grid; gap: 12px; }
.security-dialog input { padding: 10px; }
.security-dialog dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.security-dialog dd { margin: 0; overflow-wrap: anywhere; }
.security-dialog dt { font-weight: 600; }
:root[data-theme="dark"] .security-dialog { background: #202833; }

.object-jump-help { margin: 0; font-size: 11px; line-height: 1.5; opacity: .8; }

.operator-operands { margin: 10px 0 0; font-size: 11px; line-height: 1.5; }
.operator-operands dt { font-family: ui-monospace, monospace; margin-top: 8px; overflow-wrap: anywhere; }
.operator-operands dd { margin: 2px 0 0 12px; overflow-wrap: anywhere; }


/* Keep both separators reachable, including when the viewport is narrow. */
#workspace {
  grid-template-columns: var(--tree-width, minmax(340px, 34%)) 6px minmax(300px, 1fr) 6px var(--detail-width, 265px);
  overflow: auto;
}
#tree-panel { min-width: 0; }
.pane-splitter {
  cursor: col-resize;
  touch-action: none;
  background: var(--border);
}
.pane-splitter:hover, .pane-splitter:focus-visible,
.pane-splitter.dragging { background: var(--accent); }
body.resizing-panes, body.resizing-panes * {
  cursor: col-resize !important;
  user-select: none !important;
}

.preview-toolbar { height: auto; min-height: 54px; flex-wrap: wrap; }
.preview-toolbar > div { align-items: center; flex-wrap: wrap; }
#page-number { width: 58px; min-width: 0; font-size: 11px; padding: 5px; }

.drop-card .upload-notice { max-width: 560px; margin: 20px auto 0; font-size: 12px; text-align: left; }

#document-expiry { font-size: 11px; color: var(--muted); }

#box-overlay { position:absolute; inset:0; pointer-events:none; overflow:visible; }
#page-boxes-panel { border-bottom:1px solid var(--border); padding:12px 16px; }
#page-boxes-panel summary { font-weight:600; cursor:pointer; }
.box-toggle { display:flex; align-items:center; gap:5px; margin-top:8px; font-size:12px; }
.box-entry { margin:8px 0; font-size:12px; }
.box-entry strong { border-left:3px solid; padding-left:5px; }
.box-source { font-size:10px; margin-left:6px; opacity:.75; }
.box-dimensions { margin-top:3px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.box-caption { font-size:11px; opacity:.75; margin:8px 0; }

/* Shared service identity; the mark retains contrast in either theme. */
.brand img { flex-shrink: 0; }
.welcome-logo { display: block; margin: 0 auto 18px; }
.upload-heading { font-size: 16px; font-weight: 500; margin: 24px 0 0; }

.self-host-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin: 22px auto; font-size: 13px; color: inherit; }
.self-host-info a { display: inline-flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; padding: 6px; border-radius: 4px; }
.self-host-info a:hover { color: var(--accent); text-decoration: underline; }
.self-host-info a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#zoom-limit { padding: 5px 12px; font-size: 12px; color: inherit; border-bottom: 1px solid var(--border); }
.same-box-details > summary { font-size: 12px; line-height: 1.6; cursor: pointer; }

.sample-documents { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.sample-documents h3 { font-size: 14px; margin: 0 0 12px; }
.sample-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.tree-actions .paint-filter:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tree-actions .paint-filter input { width: auto; min-width: 0; margin: 0; }