/* BELEK-WEB-005. Astra handoff, 2026-09-08.
 * NOT_INTEGRATED_NOT_BROWSER_TESTED.
 * Load AFTER css/belek.css and css/catalogue-design.css (004).
 * Latest owner direction: BLACK ENTRY -> WHITE INTERIOR.
 * Entry selectors, photograph, audio, layout and graph geometry are untouched.
 */

html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"]) {
  color-scheme: light;
  --ground: #ffffff;
  --ground-2: #ffffff;
  --ink: #161616;
  --ink-dim: #50504d;
  --ink-faint: #62625e;
  --line: #767676;
  --focus: #161616;
  --node: #ffffff;
  --node-loaded: #161616;
  --font: "Futura PT", Futura, "Century Gothic", "Avenir Next", Avenir,
    "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: var(--font);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
}

/* Opaque white surfaces, including the top bar and footer. */
html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"])
  :is(body, .bar, .main, .map, .map__tools, .map__legend, .graph,
      .node, .list, .foot, .node__figure, .node__figure img, .list .t,
      .gap, .badge) {
  background: var(--ground);
}

html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"]) .bar {
  backdrop-filter: none;
  border-bottom-color: var(--line);
}

html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"])
  :is(.foot, .map__legend, .caption, .related, .node__status) {
  border-color: var(--line);
}

/* The prose, labels and status text all use the local sans-serif stack. */
html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"])
  :is(.prose, .prose h3, .notes, .caption, .node__title, .node__status code,
      .bar, .foot, .list, .graph text, button, input, select, textarea) {
  font-family: var(--font);
}

/* Keep controls white in hover/pressed states, with a visible dark focus. */
html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"])
  :is(.btn, .btn:hover, .btn[aria-pressed="true"], .skip) {
  background: var(--ground);
  color: var(--ink);
}

html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"])
  :is(.btn:hover, .btn[aria-pressed="true"]) {
  border-color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em;
}

html:is([data-belek-view="map"], [data-belek-view="reader"], [data-belek-view="list"]) :focus-visible {
  outline-color: var(--focus);
}

/* White graph/root/hubs. Do not replace inline photograph pattern fills. */
html[data-belek-view="map"] .graph {
  background: var(--ground);
}

html[data-belek-view="map"] .graph .n :is(circle, rect):not(.thumb):not(.ring) {
  fill: var(--node);
  stroke: var(--ink-dim);
}

html[data-belek-view="map"] .graph .n.n--root circle:not(.thumb):not(.ring) {
  fill: var(--ground);
  stroke: var(--ink);
}

html[data-belek-view="map"] .graph .n--root text {
  fill: var(--ink);
  font-weight: 300;
}

html[data-belek-view="map"] .graph .n.n--hub circle:not(.thumb):not(.ring) {
  stroke: var(--ink);
}

html[data-belek-view="map"] .graph .n[data-loaded="LOADED"] circle:not(.thumb),
html[data-belek-view="map"] .graph .n[data-loaded="REGISTER"] circle.ring {
  stroke: var(--ink);
}

html[data-belek-view="map"] .graph .n[data-loaded="NOT_LOADED"] circle:not(.thumb) {
  stroke: var(--ink-faint);
}

html[data-belek-view="map"] .graph .n:is(:hover, :focus, .is-active)
  :is(circle, rect):not(.thumb):not(.ring) {
  fill: var(--ground);
  stroke: var(--focus);
  stroke-width: 2;
}

html[data-belek-view="map"] .graph .n .ring {
  fill: none;
}

html[data-belek-view="map"] .graph text { fill: var(--ink); }
html[data-belek-view="map"] .graph .n .sub,
html[data-belek-view="map"] .graph .n[data-loaded="NOT_LOADED"] text {
  fill: var(--ink-dim);
}

html[data-belek-view="map"] .graph .edge { stroke: var(--line); }
html[data-belek-view="map"] .graph .edge--TITLE_MATCH { stroke: var(--ink-faint); }
html[data-belek-view="map"] .graph .edge--SOURCE_STATED { stroke: var(--ink-dim); }
html[data-belek-view="map"] .graph .edge.is-active { stroke: var(--ink); }