:root {
  /*
   * The features read these (with light fallbacks); the shell defines them once, here, for each mode. Light is the
   * default, and the `dark` class on <html> (the Appearance setting, `hooks/theme.tsx`) switches to dark. The light
   * values follow Chakra's light tokens, as `styles/system.ts` keeps them.
   */
  color-scheme: light;
  --nx-text: #18181b;
  --nx-muted: #52525b;
  --nx-border: #e4e4e7;
  --nx-panel: #ffffff;
  --nx-subtle: #fafafa;
  --nx-accent: #2563eb;
  --nx-accent-soft: rgba(37, 99, 235, 0.1);
  --nx-on-accent: #ffffff;
  --nx-ok-bg: rgba(22, 163, 74, 0.12);
  --nx-ok-fg: #15803d;
  --nx-warn-bg: rgba(202, 138, 4, 0.14);
  --nx-warn-fg: #a16207;
  --nx-bad-bg: rgba(220, 38, 38, 0.12);
  --nx-bad-fg: #b91c1c;
  --nx-info-bg: rgba(37, 99, 235, 0.1);
  --nx-info-fg: #1d4ed8;
  --nx-neutral-bg: rgba(82, 82, 91, 0.1);
  --nx-neutral-fg: #3f3f46;
  --nx-shadow: rgba(0, 0, 0, 0.18);
  --nx-backdrop: rgba(9, 9, 11, 0.4);
  --nx-bar-h: 52px;
}

:root.dark {
  color-scheme: dark;
  --nx-text: #e6edf3;
  --nx-muted: #8b98a5;
  --nx-border: #2d3640;
  --nx-panel: #161b22;
  --nx-subtle: #0d1117;
  --nx-accent: #6ea8fe;
  --nx-accent-soft: rgba(110, 168, 254, 0.16);
  --nx-on-accent: #0b1220;
  --nx-ok-bg: rgba(63, 185, 118, 0.16);
  --nx-ok-fg: #5fd39a;
  --nx-warn-bg: rgba(224, 160, 48, 0.18);
  --nx-warn-fg: #f0b95a;
  --nx-bad-bg: rgba(240, 98, 98, 0.18);
  --nx-bad-fg: #ff8b8b;
  --nx-info-bg: rgba(110, 168, 254, 0.16);
  --nx-info-fg: #8db8ff;
  --nx-neutral-bg: rgba(139, 152, 165, 0.18);
  --nx-neutral-fg: #b4bfca;
  --nx-shadow: rgba(0, 0, 0, 0.5);
  --nx-backdrop: rgba(1, 4, 9, 0.7);
}

body {
  margin: 0;
  background: var(--nx-subtle);
  color: var(--nx-text);
}

.shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* The scene height the features fill: the page less the bar and the filter bar (`--nx-filter-h`, which `components/Filters.tsx` publishes while the bar is on the page); the whole screen when full. */
.main {
  --nx-scene-h: calc(100dvh - var(--nx-bar-h) - var(--nx-filter-h, 0px));
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--nx-subtle);
}

/* The region takes focus only from the shell, after a navigation (`App.tsx`), never from the keyboard (tabIndex -1), so it has no ring: one around the whole page says nothing. */
.main:focus {
  outline: none;
}

.main:fullscreen {
  --nx-scene-h: 100dvh;
}

.fullscreen-exit {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 40;
}

/*
 * A feature's modal (a process's dialog) is drawn by the scene-flow outlet as a native
 * <dialog>. Give it the host's colors, and turn the Close button the outlet appends
 * into a quiet corner ×.
 */
dialog {
  /* Chakra's reset zeroes margins, which is what centres a modal dialog; put it back. */
  margin: auto;
  /* While "Up next" shows (UpNext.tsx), it sets --nx-up-next-h: room for the note under the centred dialog, and the same above. */
  max-height: calc(100dvh - 32px - 2 * var(--nx-up-next-h, 0px));
  overflow: auto;
  background: var(--nx-panel);
  color: var(--nx-text);
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  padding: 0;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 50px var(--nx-shadow);
}

dialog::backdrop {
  background: var(--nx-backdrop);
}

dialog > button[aria-label='Close scene'] {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nx-muted);
  cursor: pointer;
}

dialog > button[aria-label='Close scene']::before {
  content: '×';
  font-size: 22px;
  line-height: 28px;
}

dialog > button[aria-label='Close scene']:hover {
  background: var(--nx-subtle);
  color: var(--nx-text);
}

/*
 * "Up next" (UpNext.tsx): the steps waiting for the open modal, shown above its backdrop as a
 * popover. It sets its own left, top and width from the dialog's box.
 */
.up-next {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 14px;
  overflow: visible;
  background: var(--nx-panel);
  color: var(--nx-text);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px var(--nx-shadow);
  font-size: 13px;
}

.up-next-label {
  font-size: 12px;
  color: var(--nx-muted);
}

.up-next ul {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}