/* Appearance is local to the reader, not part of campaign/cloud data. */
:root[data-appearance] {
  --lt-reading-bg: #152325;
  --lt-reading-text: #dcd8ca;
  --lt-reading-soft: #b8bfb6;
  --lt-reading-line: rgba(220, 216, 202, 0.18);
}

:root[data-appearance="day"] {
  --lt-sea-1000: #e2dcce;
  --lt-sea-950: #eee9dd;
  --lt-sea-900: #e7e1d3;
  --lt-sea-850: #f5f0e5;
  --lt-sea-800: #e9e2d4;
  --lt-sea-750: #ddd5c4;
  --lt-text: #253330;
  --lt-text-soft: #42534d;
  --lt-text-muted: #59665e;
  --lt-brass: #876024;
  --lt-brass-bright: #79511b;
  --lt-teal: #32675e;
  --lt-teal-deep: #28564e;
  --lt-danger: #a03e33;
  --lt-success: #32654c;
  --lt-divider: rgba(37, 51, 48, 0.18);
  --lt-divider-strong: rgba(37, 51, 48, 0.32);
  --lt-glass: rgba(238, 233, 221, 0.94);
  --lt-reading-bg: #f4edda;
  --lt-reading-text: #283730;
  --lt-reading-soft: #4b5b52;
  --lt-reading-line: rgba(40, 55, 48, 0.2);
}

body[data-longtide-app] :is(.topbar, .masthead) { background: var(--lt-glass); }
body[data-longtide-app] .topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 0.5rem;
}
body[data-longtide-app] .appearance-select {
  width: 5.25rem;
  min-width: 5.25rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--lt-divider);
  border-radius: var(--lt-radius-xs);
  background: var(--lt-sea-850);
  color: var(--lt-text-soft);
  font: 500 0.875rem/1.4 var(--lt-font-sans);
  cursor: pointer;
}
body[data-longtide-app] .appearance-select:hover { border-color: var(--lt-brass); }

/* Expanded reports need a reading surface, not the literal paper/ink palette. */
body[data-longtide-app="hub"] .report-item[open] {
  --paper: var(--lt-reading-bg);
  --paper-ink: var(--lt-reading-text);
  background: var(--lt-reading-bg);
  color: var(--lt-reading-text);
}
body[data-longtide-app="hub"] .report-item[open] :is(h3, h4, p, .tool-button, .danger-button) {
  color: var(--lt-reading-text);
}
body[data-longtide-app="hub"] .report-item[open] :is(summary, .report-section, .report-item__actions, .tool-button, .danger-button, .draft-badge, .lifecycle-badge) {
  border-color: var(--lt-reading-line);
}
body[data-longtide-app="hub"] .report-item[open] :is(.report-item__meta, .report-item__main > p),
body[data-longtide-app="hub"] .report-item[open] summary::after { color: var(--lt-reading-soft); }
body[data-longtide-app="hub"] .report-item[open] .tag { background: color-mix(in srgb, var(--lt-teal) 12%, transparent); color: var(--lt-teal); }
body[data-longtide-app="hub"] .report-item[open] summary:hover,
body[data-longtide-app="hub"] .report-item[open] .tool-button:hover { background: color-mix(in srgb, var(--lt-reading-text) 5%, transparent); }

/* Legacy atlas variables describe text as "paper"; keep literal image colors out. */
html[data-appearance] body[data-longtide-app="atlas"] {
  --ink-950: var(--lt-sea-950);
  --ink-900: var(--lt-sea-900);
  --ink-850: var(--lt-sea-850);
  --ink-800: var(--lt-sea-800);
  --ink-700: var(--lt-sea-750);
  --paper-50: var(--lt-text);
  --paper-100: var(--lt-text-soft);
  --paper-200: var(--lt-text-muted);
  --muted: var(--lt-text-muted);
  --muted-strong: var(--lt-text-soft);
  --sea-300: var(--lt-teal);
  --sea-500: var(--lt-teal-deep);
  --copper-300: var(--lt-brass-bright);
  --copper-500: var(--lt-brass);
  --scarlet: var(--lt-danger);
  --border: var(--lt-divider);
  --border-strong: var(--lt-divider-strong);
  --surface: var(--lt-glass);
  --surface-solid: var(--lt-sea-850);
  --surface-raised: var(--lt-sea-800);
  --text: var(--lt-text);
  --text-soft: var(--lt-text-soft);
  --ink: var(--lt-text);
  --line: var(--lt-divider);
}
html[data-appearance] .section--atlas { --atlas-paper: var(--lt-text); }
html[data-appearance] .rail { background: var(--lt-glass); }
html[data-appearance] .section--currents { background: var(--lt-sea-900); color: var(--lt-text); }
html[data-appearance] .faction-focus { background: var(--lt-sea-850); border-color: var(--lt-divider); }
html[data-appearance] :is(.section-heading--light > p, .faction-focus__en, .faction-focus dd, .faction-tabs button) { color: var(--lt-text-soft); }
html[data-appearance] :is(.section-heading--light .kicker, .faction-focus__code, .faction-focus dt) { color: var(--lt-brass); }
html[data-appearance] :is(.faction-focus dl div, .faction-tabs, .faction-tabs button) { border-color: var(--lt-divider); }
html[data-appearance] .faction-tabs button.is-active { color: var(--lt-text); }
html[data-appearance] .faction-node circle { fill: var(--lt-sea-800); stroke: var(--lt-divider-strong); }
html[data-appearance] .faction-node text { fill: var(--lt-text); }
html[data-appearance] .faction-node:is(:hover, :focus-visible, .is-active) circle { fill: var(--lt-sea-850); stroke: var(--lt-brass); }
html[data-appearance] :is(.current-diagram__orbit, .current-diagram__flow) { stroke: var(--lt-divider-strong); }

/* Day mode: replace the remaining hard-coded dark UI surfaces, not the artwork. */
html[data-appearance="day"] :is(.character-panel, .scratchpad, .search-field, .report-item summary:hover,
  .inventory-inspector, .character-create__steps, .character-create__draftbar) { background: var(--lt-sea-850); }
html[data-appearance="day"] :is(.scratchpad textarea, .map-launch > span, .mobile-dock) { background: var(--lt-sea-900); }
html[data-appearance="day"] .resource-row:hover { background: var(--lt-sea-800); }
html[data-appearance="day"] .relation-map .relation-graph__edge:not([data-stance="positive"]):not([data-stance="strained"]):not([data-stance="hostile"]) { stroke: var(--lt-divider-strong); }
html[data-appearance="day"] .relation-graph__edge-label rect { fill: var(--lt-sea-850); stroke: var(--lt-divider); }
html[data-appearance="day"] .relation-graph__node-body { fill: var(--lt-sea-800); stroke: var(--lt-divider-strong); }
html[data-appearance="day"] .relation-graph.is-global .relation-graph__node-body { fill: transparent; stroke: transparent; }
html[data-appearance="day"] .relation-graph .relation-graph__node:is(.is-focus, .is-preview-source, .is-preview-neighbor) .relation-graph__node-body { fill: var(--lt-sea-800); stroke: var(--lt-brass); }
html[data-appearance="day"] :is(.form-error, .report-error, .crew-roster__error) { color: var(--lt-danger); }
html[data-appearance="day"] .condition-chip { color: var(--lt-brass); }
html[data-appearance="day"] :is(.section--people, .people-list, .atlas-dialog, .atlas-visuals,
  .atlas-view-switchbar, .atlas-map-trail, .town-map-inset, .location-scene__bar,
  .scene-cg__status, .map-placement-hint, .gs-head, .gs-status-row, .gs-group__title,
  .viewer__notice, .viewer__loading, .inventory-slot__quantity, .fate-upgrade) { background: var(--lt-sea-850); }
html[data-appearance="day"] body[data-longtide-app] :is(.campaign-editor, .atlas-dialog, .atlas-workbench) :is(input, select, textarea),
html[data-appearance="day"] body[data-longtide-app="character"] :is(.inline-add input, .record-section > textarea, .field input, .field textarea, .field select, .version-picker select) {
  background: var(--lt-sea-900);
  color: var(--lt-text);
}

/* Keep navigation and both controls reachable at narrow widths. */
@media (max-width: 70rem) {
  html[data-appearance] body[data-longtide-app="character"] { --masthead-height: calc(6.5rem + var(--safe-top)); }
  body[data-longtide-app="character"] .masthead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; }
  body[data-longtide-app="character"] .masthead__actions { grid-row: 1; grid-column: 2; }
  body[data-longtide-app="character"] .section-tabs { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; }
  body[data-longtide-app="character"] .section-tabs a { min-height: 2.75rem; }
  body[data-longtide-app="character"] .back-link span:last-child { display: inline; }
}
@media (max-width: 34rem) {
  body[data-longtide-app="hub"] .topbar__actions .gs-trigger { width: 2.75rem; padding: 0; justify-content: center; }
  body[data-longtide-app="hub"] .topbar__actions .gs-trigger :is(span, kbd) { display: none; }
}