/* ==================================================
   1. TOKENS / FONTS / ROOT
   ================================================== */

@font-face { font-family: 'android'; src: url('/assets/font/android.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'avenir';  src: url('/assets/font/avenir.woff2')  format('woff2'); font-display: swap; }
@font-face { font-family: 'dots';    src: url('/assets/font/dots.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'bank';    src: url('/assets/font/bank.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'vdj';     src: url('/assets/font/vdj.woff2')     format('woff2'); font-display: swap; }
@font-face { font-family: 'visitor'; src: url('/assets/font/visitor.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'oak';     src: url('/assets/font/oak.woff2')     format('woff2'); font-display: swap; }
@font-face { font-family: 'jbm';     src: url('/assets/font/jbm.woff2')     format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'jbm';     src: url('/assets/font/jbmbold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'jbm';     src: url('/assets/font/jbmthin.woff2') format('woff2'); font-weight: 100; font-display: swap; }

:root {
  /* ─── Accent ─────────────────────────────────── */
  --accent:               #b8a45a;   /* gold — titres, hover links */
  --accent-scroll:        rgba(184, 164, 90, 0.8);
  --accent-scroll-hover:  rgba(184, 164, 90, 0.86);

  /* ─── Échelle de gris (9 stops) ──────────────── */
  --gray-050: #050505;   /* fond le plus profond          */
  --gray-111: #111111;   /* fond de base                  */
  --gray-1a1: #1a1a1a;   /* fond surélevé (header, panels)*/
  --gray-242: #242424;   /* bordure douce                 */
  --gray-404: #404040;   /* bordure medium                */
  --gray-666: #666666;   /* texte désactivé / meta        */
  --gray-999: #999999;   /* texte dim                     */
  --gray-c4c: #c4c4c4;   /* texte principal               */
  --gray-e8e: #e8e8e8;   /* texte highlight / blanc cassé */

  /* ─── Surfaces avec opacité ──────────────────── */
  --surface-deep:    #050505;              /* panneaux noirs opaques      */
  --surface-base:    rgba(17,17,17,0.95);  /* overlays principaux         */
  --surface-panel:   rgba(28,28,28,0.95);  /* header, nav, footer         */
  --surface-strip:   rgba(40,40,40,0.97);  /* supporting strip            */
  --surface-tinted:  rgba(12, 12, 12, 0.8);  /* side panels semi-transparent*/
  --surface-handle-width: 16px;

  /* ─── Couleurs sémantiques ───────────────────── */
  --color-link:    #2aa1ae;   /* boutons / liens interactifs  */
  --color-danger:  #b7450c;   /* hover close, états d'alerte  */
  --color-focus-ring: #76f2f2; /* anneau focus carte spatiale */

  /* ─── Tokens texte / icône / bordure ─────────── */
  --color-text-hi:    var(--gray-e8e);
  --color-text-main:  var(--gray-c4c);
  --color-text-dim:   var(--gray-999);
  --color-text-muted: var(--gray-666);
  --color-icon-main:  var(--gray-c4c);
  --color-border-mid: var(--gray-404);
  --color-border-soft: var(--gray-242);

  /* ─── Typographie ────────────────────────────── */
  --font-meta: bank, monospace;

  /* ─── Scrollbar ──────────────────────────────── */
  --scrollbar-thumb:       var(--accent-scroll);
  --scrollbar-thumb-hover: var(--accent-scroll-hover);
  --scrollbar-track:       rgba(16, 16, 16, 0.92);
  --scrollbar-size:        5px;
  --scrollbar-radius:      999px;

  /* ─── Relations — edge ───────────────────────── */
  --relation-connection-color:            #1e5fa0;
  --relation-proximity-color:             #4d7a68;
  --relation-tension-color:               #9e2831;
  --relation-neutral-color:               var(--gray-666);
  --relation-ghost-fill:                  var(--gray-c4c);
  --relation-ghost-opacity:               0.6;
  --relation-cluster-point-fill:          #acabab;
  --relation-cluster-point-opacity:       0.62;
  --relation-cluster-point-stroke:        rgba(255, 255, 255, 0.42);
  --relation-cluster-point-stroke-width:  0.75;
  --relation-edge-stroke-width:           1;
  --relation-edge-stroke-opacity:         0.7;
  --relation-edge-muted-opacity:          0.6;
  --relation-edge-cluster-stroke-width:   1.08;
  --relation-edge-cluster-stroke-opacity: 0.78;
  --relation-edge-focus-stroke-width:     1.22;
  --relation-edge-focus-stroke-opacity:   0.96;
  --relation-edge-dim-stroke-opacity:     0.6;
  --relation-edge-highlight-stroke-width:   1;
  --relation-edge-highlight-stroke-opacity: 1;

  /* ─── Relations — node ───────────────────────── */
  --relation-node-fill:                   var(--gray-c4c);
  --relation-node-opacity:                0.72;
  --relation-node-stroke:                 #000;
  --relation-node-stroke-width:           0.75;
  --relation-node-relations-opacity:      0.9;
  --relation-node-relations-stroke:       rgba(255, 255, 255, 0.78);
  --relation-node-hub-opacity:            0.96;
  --relation-node-hub-stroke:             rgba(255, 255, 255, 0.9);
  --relation-node-hub-stroke-width:       0.6;
  --relation-node-isolated-fill:          var(--gray-999);
  --relation-node-isolated-opacity:       0.6;
  --relation-node-isolated-stroke:        rgba(255, 255, 255, 0.25);
  --relation-node-source-fill:            var(--gray-e8e);
  --relation-node-source-opacity:         1;
  --relation-node-source-stroke:          #000;
  --relation-node-source-stroke-width:    0.85;
  --relation-node-focused-source-fill:    var(--color-focus-ring);
  --relation-node-focused-source-opacity: 1;
  --relation-node-focused-source-stroke:  #000;
  --relation-node-focused-source-stroke-width: 0.6;
  --relation-node-focus-neighbor-opacity: 0.8;
  --relation-node-focus-neighbor-stroke:  #000;
  --relation-node-focus-dim-opacity:      0.45;
  --relation-node-highlight-fill:         #fff;
  --relation-node-highlight-opacity:      1;
  --relation-node-highlight-stroke:       #000;
  --relation-node-highlight-stroke-width: 0.9;

  /* ─── Icônes ─────────────────────────────────── */
  --icon-base:    var(--color-icon-main);
  --icon-focus:   var(--color-icon-main);
  --icon-context: var(--color-icon-main);

  /* ─── Alias legacy (rétrocompatibilité) ─────── */
  --accent-muted: var(--accent);
}

/* ==================================================
   2. GLOBAL RESET / SCROLLBARS
   ================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  vertical-align: baseline;
}

html {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: contain;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}

button { cursor: pointer; }

body {
  font-family: oak, sans-serif;
  background: var(--gray-1a1);
  overflow: hidden;
}

/* Scrollbars — one shared mechanism (.scroll-region class, applied in JS wherever a
   panel scrolls) instead of styling each container ad hoc. Thumb/track are transparent
   by default and only reveal on hover/focus (mouse) or while actively scrolling
   (.is-scrolling, toggled by the delegated listener in main.js) — never a permanently
   visible bar. Add the class to any new scrollable container to pick this up for free. */
.scroll-region {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 200ms ease;
}

.scroll-region:hover,
.scroll-region:focus-within,
.scroll-region.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.scroll-region::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.scroll-region::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-region::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--scrollbar-radius);
  transition: background 200ms ease;
}

.scroll-region:hover::-webkit-scrollbar-thumb,
.scroll-region:focus-within::-webkit-scrollbar-thumb,
.scroll-region.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.scroll-region::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* User-select */
html,
body,
.app-container,
#grid-space,
#drift-space,
#navigation-layer,
#viewer-layer {
  user-select: none;
  -webkit-user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

/* ==================================================
   3. APP SHELL
   ================================================== */

.app-container {
  --structural-space-transition-duration: 260ms;
  --structural-space-transition-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 50px 20px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "stage"
    "footer"
    "annex";
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app-container > * { min-height: 0; min-width: 0; }

.navigation-layer { display: contents; }

#loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--gray-e8e);
  z-index: 2000;
}

.loading-hidden { display: none; }

/* ==================================================
   4. STRUCTURAL SPACES
   ================================================== */

.structural-spaces {
  grid-area: stage;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}

.grid-space,
.drift-space {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  will-change: transform;
  transition:
    transform var(--structural-space-transition-duration) var(--structural-space-transition-easing),
    opacity   var(--structural-space-transition-duration) var(--structural-space-transition-easing);
}

.app-container.is-space-transition-disabled .grid-space,
.app-container.is-space-transition-disabled .drift-space { transition: none; }

.grid-space  { z-index: 1; transform: translateX(0); }
.drift-space { z-index: 2; transform: translateX(-100%); pointer-events: none; }

.app-container.space-grid-active  .grid-space  { transform: translateX(0);     pointer-events: auto; }
.app-container.space-grid-active  .drift-space { transform: translateX(-100%); pointer-events: none; }
.app-container.space-drift-active .grid-space  { transform: translateX(100%);  pointer-events: none; }
.app-container.space-drift-active .drift-space { transform: translateX(0);     pointer-events: auto; }

/* ==================================================
   5. HEADER SURFACE
   ================================================== */

.orbit {
  grid-area: header;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 10px;
  padding: 0 10px;
  background: var(--surface-panel);
  border-bottom: 1px solid var(--color-border-soft);
  overflow-x: auto;
  scroll-behavior: smooth;
  z-index: 2100;
}

.orbit::-webkit-scrollbar { display: none; }

.orbit-breadcrumb {
  position: absolute;
  inset: 0 auto 0 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reserves room for the right-side cluster (zoom control + stats + space switch),
     not just the logo anymore — the logo moved in here as the breadcrumb's own first
     item. Adjust this alongside .orbit-zoom-control/.orbit-space-switch if their width
     changes enough to cause overlap with a long cluster title. */
  max-width: calc(100% - 300px);
  min-width: 0;
  overflow: hidden;
  color: var(--color-icon-main);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: auto;
}

.breadcrumb-item,
.breadcrumb-separator {
  flex: 0 0 auto;
  color: var(--color-icon-main);
  transition: opacity 180ms ease, transform 180ms ease;
}

.breadcrumb-label {
  min-width: 0;
  max-width: min(42vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.4;
}

.breadcrumb-separator { opacity: 0.35; }

button.breadcrumb-item {
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.breadcrumb-item.is-clickable         { opacity: 0.5; }
.breadcrumb-item.is-clickable:hover   { opacity: 0.8; }
.breadcrumb-item.is-active            { opacity: 0.8; }

/* Logo carries the home/reset-drift action now (see updateLogoState in
   header-controller.js) — dim by default, full opacity + pointer only when there's
   somewhere to go back to (not already at the global root). */
.orbit-logo                           { opacity: 0.5; transition: opacity 180ms ease; }
.orbit-logo.is-clickable              { opacity: 1; cursor: pointer; }
.orbit-logo.is-clickable:hover        { opacity: 0.8; }

.orbit-breadcrumb .nav-icon {
  width: 18px;
  height: 18px;
  fill: var(--color-icon-main);
  pointer-events: none;
}

/* The logo is a real click target, unlike the other breadcrumb icons — override the
   generic non-interactive sizing/pointer-events above. */
.orbit-breadcrumb .nav-icon.orbit-logo {
  width: 22px;
  height: 22px;
  pointer-events: auto;
}

.orbit-breadcrumb .nav-icon,
.orbit-breadcrumb .nav-icon *,
.orbit-breadcrumb .nav-icon .default,
.orbit-breadcrumb .nav-icon .focus,
.orbit-breadcrumb .nav-icon .focus-a,
.orbit-breadcrumb .nav-icon .focus-b { fill: var(--color-icon-main); pointer-events: none; }

.orbit-space-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1px solid rgba(184, 164, 90, 0.28);
  background: rgba(0, 0, 0, 0.3);
}

.orbit-space-switch-item {
  height: 20px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  background: transparent;
  border: 0;
  font: inherit;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: default;
  transition: color 180ms ease, background 180ms ease;
}

/* Straight edge where GRID and DRIFT meet — only the outer corners of the pill round. */
.orbit-space-switch-item:first-of-type { border-radius: 3px 0 0 3px; }
.orbit-space-switch-item:last-of-type  { border-radius: 0 3px 3px 0; }

.orbit-space-switch-item.is-clickable          { color: var(--color-text-dim); cursor: pointer; }
.orbit-space-switch-item.is-clickable:hover    { color: var(--color-text-hi); background: rgba(255, 255, 255, 0.05); }
.orbit-space-switch-item.is-active             { color: var(--accent); background: rgba(184, 164, 90, 0.14); }

/* Pill segments carry the active/inactive contrast now — the "|" divider from the
   plain-text version would double up on that, so it's kept in the DOM (harmless
   fallback if the pill styling doesn't load) but not shown. */
.orbit-space-switch-separator {
  display: none;
}

.orbit-zoom-control {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1px solid rgba(184, 164, 90, 0.28);
  background: rgba(0, 0, 0, 0.3);
}

.orbit-zoom-control.hidden { display: none; }

.orbit-zoom-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border: 0;
  font-family: var(--font-meta);
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease;
}

/* Same treatment as GRID | DRIFT: straight edge between − and +, outer corners only. */
.orbit-zoom-btn:first-of-type { border-radius: 3px 0 0 3px; }
.orbit-zoom-btn:last-of-type  { border-radius: 0 3px 3px 0; }

.orbit-zoom-btn:hover:not(:disabled) { background: rgba(184, 164, 90, 0.14); }
.orbit-zoom-btn:disabled { opacity: 0.3; cursor: default; }

.orbit-zoom-stats {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.orbit-zoom-stats.hidden { display: none; }

/* ==================================================
   6. NAVIGATION SURFACE
   ================================================== */

.navigation-surface {
  position: absolute;
  right: 10px;
  bottom: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 40px;
  padding: 3px;
  background: var(--surface-panel);
  border: 1px solid var(--gray-666);
  border-radius: 4px;
  z-index: 2200;
}

/* Space toggle now lives in the header (see .orbit-space-switch) — this floating
   surface only ever holds back/info, so hide it entirely when both are hidden instead
   of showing an empty bordered box. */
.navigation-surface:not(:has(.navigation-icon-slot:not(.hidden))) {
  display: none;
}

.navigation-icon-slot {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-back-slot { order: 1; }
.navigation-info-slot { order: 2; }

.navigation-icon-slot.hidden { display: none; }

.orbit-breadcrumb .nav-icon,
.navigation-surface .nav-icon:not(.is-disabled) { color: var(--color-icon-main); }

.orbit-breadcrumb .nav-icon :is(path, rect, circle, polygon),
.navigation-surface .nav-icon :is(path, rect, circle, polygon) {
  fill: currentColor;
  transition: opacity 180ms ease, fill 180ms ease, transform 180ms ease;
}

.orbit-breadcrumb .nav-icon :is(line, polyline),
.orbit-breadcrumb .nav-icon [stroke],
.navigation-surface .nav-icon :is(line, polyline),
.navigation-surface .nav-icon [stroke] {
  stroke: currentColor;
  transition: opacity 180ms ease, stroke 180ms ease, transform 180ms ease;
}

.navigation-surface .nav-icon:not(.is-disabled) { opacity: 1; cursor: pointer; }
.navigation-surface .nav-icon .default           { opacity: 0.5; }
.navigation-surface .nav-icon .focus,
.navigation-surface .nav-icon .focus-a,
.navigation-surface .nav-icon .focus-b           { opacity: 0.8; }

.navigation-surface .nav-icon:hover .default,
.navigation-surface .nav-icon.is-active .default { opacity: 0.8; }

.navigation-surface .nav-icon:hover .focus,
.navigation-surface .nav-icon:hover .focus-a,
.navigation-surface .nav-icon:hover .focus-b,
.navigation-surface .nav-icon.is-active .focus,
.navigation-surface .nav-icon.is-active .focus-a,
.navigation-surface .nav-icon.is-active .focus-b { opacity: 0.5; }

/* ==================================================
   7. FOOTER SURFACE
   ================================================== */

.meta,
.footer-main {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background: var(--surface-base);
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.9rem;
  z-index: 2000;
}

.meta button,
.footer-main button {
  background: none;
  border: none;
  color: var(--color-link);
  font-size: 1.1rem;
  cursor: pointer;
}

.footer-annex {
  grid-area: annex;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 20px;
  min-width: 0;
  padding: 0 16px;
  background: var(--surface-base);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  z-index: 2000;
}

.footer-annex-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 8px;
  border-radius: 3px;
  border: 1px solid rgba(184, 164, 90, 0.28);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-dim);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease;
}

.footer-annex-link:hover { color: var(--color-text-hi); background: rgba(255, 255, 255, 0.05); }
.footer-annex-link.is-active { color: var(--accent); background: rgba(184, 164, 90, 0.14); }

.footer-annex-spacer { flex: 1 1 auto; min-width: 12px; }

.footer-annex-meta {
  flex: 0 0 auto;
  color: var(--gray-666);
  white-space: nowrap;
}

.app-footer-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  color: var(--color-text-main);
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-footer-left,
.app-footer-center,
.app-footer-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.app-footer-left   { justify-content: flex-start; }
.app-footer-center { justify-content: center; min-width: 150px; }
.app-footer-right  { justify-content: flex-end; }

.footer-title {
  min-width: 0;
  max-width: 36vw;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  font-family: oak, sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.footer-concept-id,
.footer-meta,
.footer-date,
.footer-count,
.footer-counter {
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.footer-meta,
.footer-date,
.footer-count  { color: var(--gray-999); }

.footer-axes {
  max-width: 26vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-counter {
  min-width: 58px;
  text-align: center;
  color: var(--color-text-main);
}

.app-footer-viewer .app-footer-center        { gap: 12px; }
.app-footer-viewer .app-footer-right         { gap: 8px; }
.app-footer-orphan-viewer .app-footer-center { min-width: 70px; }

.footer-nav-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: var(--icon-base);
}

.footer-nav-icon:hover {
  --icon-base:    var(--color-icon-main);
  --icon-focus:   var(--color-icon-main);
  --icon-context: var(--color-icon-main);
  cursor: pointer;
}

/* ==================================================
   8. GRID SURFACE
   ================================================== */

.gallery-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

#gallery-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-container {
  position: absolute;
  inset: 0;
  background: var(--gray-c4c);
  overflow: hidden;
}

.gallery-container svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--accent);
}

#gallery-container svg g.cell,
#gallery-container svg g.cell :is(rect, image, text, g) { cursor: pointer; }

/* ==================================================
   9. SERIES GRID / SUPPORTING SURFACE
   ================================================== */

.series-grid-layout {
  display: grid;
  grid-template-columns: clamp(350px, 30vw, 500px) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.series-grid-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--surface-tinted);
  border-right: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.series-grid-side.has-relations { grid-template-columns: 84px minmax(0, 1fr); }

.series-grid-relations {
  width: 84px;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--surface-deep);
  border-right: 1px solid var(--color-border-soft);
  overflow-x: hidden;
  overflow-y: auto;
}

.series-grid-relations[hidden] { display: none; }

.series-grid-context,
.series-grid-main { min-width: 0; min-height: 0; overflow: hidden; }

.series-grid-main { position: relative; }
.series-grid-main > svg { display: block; }

.series-grid-context-panel { height: 100%; padding: 20px; background: transparent; }

.supporting-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  height: 84px;
  background: var(--surface-deep);
  border-top: 1px solid var(--color-border-soft);
  color: var(--gray-999);
}

.supporting-strip-track {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.supporting-strip-item {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  outline: 0;
  background: var(--gray-111);
  cursor: pointer;
  overflow: hidden;
}

.supporting-strip-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 140ms ease;
}

.supporting-strip-item:hover .supporting-strip-thumb { opacity: 1; }

.supporting-strip-thumb-fallback {
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--gray-c4c);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.supporting-strip-thumb.media-text-compact-thumb {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  opacity: 0.7;
  padding: 7px;
}

/* Desktop drift context: supporting strip as grid instead of horizontal scroll */
.app-container:not(.is-touch-layout) .relation-panel-context-column .supporting-strip-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  align-content: start;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  max-height: none;
}

.app-container:not(.is-touch-layout) .relation-panel-context-column .supporting-strip-item {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* ==================================================
   10. VIEWER SURFACE
   ================================================== */

#gallery-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.viewer-svg { display: block; width: 100%; height: 100%; }
.viewer-svg .zoomed-image { touch-action: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zoomed-text { overflow: visible; }

.text-fragment-viewer-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  max-height: none;
  background: var(--surface-base);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-main);
  font-family: oak, sans-serif;
  overflow: hidden;
}

.text-fragment-viewer-nav {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 44px;
  height: 100%;
  padding: 18px 0 20px;
  background: var(--surface-deep);
  border-right: 1px solid var(--color-border-soft);
}

.text-fragment-viewer-content {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 34px 44px 42px;
  overflow-x: hidden;
  overflow-y: auto;
}

.text-fragment-viewer-header {
  display: grid;
  gap: 8px;
  max-width: 860px;
  margin: 0 auto;
}

.text-fragment-viewer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-fragment-viewer-separator {
  width: 100%;
  max-width: 860px;
  height: 1px;
  margin: 18px auto 20px;
  background: var(--color-border-soft);
}

.text-fragment-viewer-title {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.text-fragment-viewer-concept-id,
.text-fragment-viewer-badge {
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  text-transform: uppercase;
}

.text-fragment-viewer-badge::before {
  content: '/';
  margin-right: 10px;
  color: var(--gray-404);
}

.text-fragment-viewer-body {
  max-width: 860px;
  margin: 0 auto;
  color: var(--color-text-main);
  font-family: oak, monospace;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
  text-align: left;
}

@media (min-width: 1180px) and (min-height: 680px) {
  .text-fragment-viewer-header,
  .text-fragment-viewer-separator,
  .text-fragment-viewer-body { max-width: 980px; }
  .text-fragment-viewer-body { column-gap: 44px; }
}

.viewer-relation-surface-host {
  position: relative;
  width: 100px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  background: rgba(5, 5, 5, 0.86);
  border-right: 5px solid var(--color-border-soft);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.viewer-relation-surface-host[hidden] { display: none; }

.item-detail-overlay {
  position: fixed;
  top: 40px;
  right: 0;
  width: 25vw;
  height: 100%;
  padding: 26px 28px;
  background: var(--surface-base);
  border-left: 1px solid var(--color-border-soft);
  overflow-y: auto;
  transform: translateX(60vw);
  transition: transform 0.5s ease-out;
  z-index: 1000;
}

.item-detail-content {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  color: var(--color-text-main);
  font-family: oak, sans-serif;
}

.item-detail-close {
  position: absolute;
  top: 10px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.item-detail-close__icon.nav-icon { width: 18px; height: 18px; opacity: 0.7; }

.item-detail-close:hover .item-detail-close__icon,
.item-detail-close:focus-visible .item-detail-close__icon { opacity: 1; fill: var(--color-danger); }

.item-detail-close:focus-visible {
  outline: 1px solid var(--color-icon-main);
  outline-offset: 1px;
}

/* ==================================================
   11. CONTEXT LAYERS
   ================================================== */

.context-layers {
  grid-area: stage;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  z-index: 30;
}

.viewer-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  z-index: 1000;
}

.viewer-layer[data-layer-state="open"] { pointer-events: auto; }

.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;
  z-index: 1400;
}

.about-overlay__content { width: 100%; height: 100%; min-width: 0; min-height: 0; }

.about-page__section > summary { cursor: pointer; list-style: none; }
.about-page__section > summary::-webkit-details-marker { display: none; }

.about-page__pdf-link {
  display: inline-block;
  max-width: 860px;
  margin: 0 auto;
  color: var(--color-text-main);
  font-family: var(--font-meta);
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
}

.about-page__pdf-link:hover,
.about-page__pdf-link:focus-visible { color: var(--accent); }

/* ==================================================
   12. CONTEXT PANEL SURFACE
   ================================================== */

.context-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: var(--surface-base);
  color: var(--color-text-main);
  font-family: var(--font-meta);
  overflow: hidden;
}

.context-panel__body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
}

.viewer-context-panel { padding: 0; border: 0; background: transparent; }

.context-panel__cover {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(120px, 20vh, 220px);
  background: var(--surface-deep);
  border-bottom: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.context-panel__cover.context-panel__cover--clickable { cursor: pointer; }

.context-panel__cover-media { display: block; width: 100%; height: 100%; object-fit: cover; }

.context-panel--cover-full-bleed .context-panel__cover {
  width: calc(100% + 40px);
  height: clamp(200px, 34vh, 360px);
  margin: -20px -20px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: var(--surface-deep);
  color: inherit;
  font: inherit;
  cursor: default;
}

.context-panel--cover-full-bleed .context-panel__cover-media { width: 100%; height: 100%; object-fit: cover; }

.context-panel__identity { display: grid; gap: 6px; min-width: 0; }

.context-panel__title {
  margin: 0;
  color: var(--accent);
  font-family: oak, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.context-panel__concept-id {
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.context-panel__identity-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  font-family: var(--font-meta);
  font-size: 10px;
  text-transform: uppercase;
}

.context-panel__identity-meta > * + *::before {
  content: "|";
  margin-right: 6px;
  color: var(--color-border-soft);
}

.context-panel__count { color: var(--gray-404); }

.context-panel__description {
  min-width: 0;
  margin: 0;
  font-family: jbm, monospace;
  font-weight: 100;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  /* The text already contains the artist's line breaks (context-panel.js sets it via
     textContent, nothing is stripped) — `normal` white-space was just collapsing them.
     pre-line keeps single/double line breaks as real breaks while still wrapping long
     lines normally (unlike pre-wrap, it won't preserve runs of spaces/indentation). */
  white-space: pre-line;
}

.context-panel__section {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-soft);
}

.context-panel__section-title {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.context-panel__field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.context-panel__label {
  min-width: 0;
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.context-panel__value {
  min-width: 0;
  color: var(--color-text-main);
  font-family: var(--font-meta);
  font-size: 11px;
  line-height: 1.45;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.context-panel__relations { gap: 12px; }

.context-panel__relation-group { display: grid; gap: 8px; min-width: 0; }

.context-panel__relation-item {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-main);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

button.context-panel__relation-item { cursor: pointer; }
button.context-panel__relation-item:hover { color: var(--accent); }

.context-panel__empty {
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==================================================
   13. RELATION SURFACE
   ================================================== */

.relation-panel-strip {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--surface-deep);
  overflow-x: hidden;
  overflow-y: auto;
}

.relation-panel-strip[hidden] { display: none; }

.relation-surface {
  display: grid;
  align-content: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  --relation-surface-object-fit: contain;
  --relation-surface-opacity: 0.8;
  --relation-surface-hover-opacity: 1;
}

.relation-surface__group {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.relation-surface__group::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 6px;
  min-height: 100%;
  border-radius: 4px;
}

.relation-surface__group[data-relation-type="connection"]::before { background: var(--relation-connection-color); }
.relation-surface__group[data-relation-type="proximity"]::before  { background: var(--relation-proximity-color); }
.relation-surface__group[data-relation-type="tension"]::before    { background: var(--relation-tension-color); }

.relation-surface__items {
  display: grid;
  align-content: start;
  gap: 1px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.relation-surface__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 3px;
  width: 100%;
  min-height: 90px;
  padding: 0;
  border: 0;
  outline: 0;
  background: var(--gray-111);
  color: var(--color-text-main);
  font: inherit;
  cursor: default;
  overflow: hidden;
  opacity: var(--relation-surface-opacity, 0.7);
  transition: opacity 140ms ease;
}

button.relation-surface__item { cursor: pointer; }

.relation-surface__item:hover,
.relation-surface__item:focus-visible { border: 0; outline: 0; opacity: var(--relation-surface-hover-opacity, 1); }

.relation-surface__thumb { display: grid; place-items: center; width: 100%; min-height: 0; overflow: hidden; }

.relation-surface__thumb img,
.relation-surface__thumb video { display: block; width: 100%; height: 100%; object-fit: var(--relation-surface-object-fit, contain); }

.relation-surface--labels-hidden .relation-surface__label,
.relation-surface--labels-hidden .relation-surface__id { display: none; }

.relation-surface__thumb > span:only-child {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--gray-999);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.relation-surface__label,
.relation-surface__id {
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-meta);
  line-height: 1.1;
  text-align: left;
}

.relation-surface__label { color: var(--color-text-main); font-size: 9px; }
.relation-surface__id    { color: var(--color-text-muted); font-size: 8px; padding-bottom: 5px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ==================================================
   15. MEDIA / BADGES / ICONS
   ================================================== */

.media-text-compact-thumb {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-width: 0;
  color: var(--color-icon-main);
  text-align: center;
  overflow: hidden;
}

.media-text-compact-id {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray-c4c);
  font-family: var(--font-meta);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.media-text-dom-icon {
  width: 26px;
  height: 26px;
  color: var(--color-icon-main);
  fill: currentColor;
  opacity: 0.72;
  pointer-events: none;
}

.media-text-dom-icon.nav-icon :is(path, rect, circle, polygon),
.media-text-dom-icon.nav-icon .default,
.media-text-dom-icon.nav-icon .focus,
.media-text-dom-icon.nav-icon .focus-a,
.media-text-dom-icon.nav-icon .focus-b { fill: currentColor; }

.icon { width: 25px; height: 25px; fill: var(--color-text-main); }
.icon:not(.nav-icon):hover { fill: var(--accent); cursor: pointer; }
.clear { fill: none; }
.text-fragment-viewer-nav .icon { width: 18px; height: 18px; fill: var(--color-text-muted); }

.nav-icon {
  width: 30px;
  height: 30px;
  fill: var(--color-icon-main);
  opacity: 0.5;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-icon * { transition: opacity 180ms ease, transform 180ms ease; }

.nav-icon .default,
.nav-icon .focus,
.nav-icon .focus-a,
.nav-icon .focus-b { fill: var(--color-icon-main); transform-box: fill-box; transform-origin: center; }

.nav-icon .focus                                   { opacity: 0; }
.nav-icon .focus-a,
.nav-icon .focus-b                                 { opacity: 0.65; }

.nav-icon:hover,
.nav-icon.is-active                                { fill: var(--color-icon-main); opacity: 1; }
.nav-icon.icon:hover                               { fill: var(--color-icon-main); }
.nav-icon.is-disabled                              { opacity: 0.3; pointer-events: none; transform: none; }

.nav-icon:hover .focus                             { transform: scale(1); }
.nav-icon:hover .focus-a,
.nav-icon:hover .focus-b                           { transform: scale(1); }

#gallery-container .media-type-icon { color: var(--color-icon-main); fill: currentColor; opacity: 0.72; pointer-events: none; }

#gallery-container .media-type-icon :is(path, rect, circle, polygon),
#gallery-container .media-type-icon .default,
#gallery-container .media-type-icon .focus,
#gallery-container .media-type-icon .focus-a,
#gallery-container .media-type-icon .focus-b       { fill: currentColor; }

.cell-video-badge,
.video-thumbnail-badge                             { pointer-events: none; }
.cell-video-badge-bg,
.video-thumbnail-badge-bg                          { fill: #4d1111; fill-opacity: 0.78; stroke: var(--color-text-muted); stroke-opacity: 0.45; stroke-width: 1; }
.cell-video-badge-text,
.video-thumbnail-badge-text                        { fill: var(--color-text-main); font-family: var(--font-meta); font-size: 10px; letter-spacing: 0.08em; pointer-events: none; }

/* ==================================================
   16. BETA TOAST
   ================================================== */

.beta-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-base);
  outline: 1px solid rgba(184, 164, 90, 0.4);
  outline-offset: -1px;
  border-radius: 4px;
  font-family: jbm, monospace;
  font-weight: 300;
  font-size: 13px;
  padding: 14px 16px;
  color: var(--accent);
  max-width: calc(100vw - 32px);
  z-index: 2300;
  animation: beta-toast-pop 400ms ease;
  transition: opacity 400ms ease, transform 400ms ease;
}

.beta-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
}

.beta-toast-line { margin: 0 0 10px; }
.beta-toast-line.is-prompt { color: var(--color-text-dim); }

.beta-toast-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -2px;
  animation: beta-toast-blink 1.06s steps(1) infinite;
}

@keyframes beta-toast-blink { 50% { opacity: 0; } }

.beta-toast-close {
  appearance: none;
  background: transparent;
  color: var(--accent);
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  font: inherit;
  font-family: jbm, monospace;
}

.beta-toast-close:hover { text-shadow: 0 0 8px rgba(184, 164, 90, 0.6); }

@keyframes beta-toast-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==================================================
   17. GRID VIDEO LOOP CELLS
   ================================================== */

.cell-video-loop {
  overflow: hidden;
}

.cell-video-loop-wrap {
  /* Plain HTML box clipping - the mechanism that actually works reliably
     across engines (unlike overflow:hidden or clip-path applied to the
     foreignObject element itself, see utils/video-loop-cell.js). */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cell-video-loop-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}