/*
 * /dev row colour-pair laboratory.
 *
 * Every rendered content row inherits exactly one foreground/background channel
 * pair. Normal cells use --row-fg on --row-bg; inverse cells swap those same
 * channels. The vertical scroll rail is the sole explicit exception: it keeps
 * its own white/black control pair beside content rows. Public routes do not opt
 * into this stylesheet's scoped behaviour.
 */

.dev-page {
  --row-fg: var(--white);
  --row-bg: var(--black);
  background: var(--black);
  color: var(--white);
}

.dev-page[data-row-pair="white-black"],
.dev-page [data-row-pair="white-black"] {
  --row-fg: var(--white);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="yellow-black"],
.dev-page [data-row-pair="yellow-black"] {
  --row-fg: var(--yellow);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="cyan-black"],
.dev-page [data-row-pair="cyan-black"] {
  --row-fg: var(--cyan);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="magenta-black"],
.dev-page [data-row-pair="magenta-black"] {
  --row-fg: var(--magenta);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="green-black"],
.dev-page [data-row-pair="green-black"] {
  --row-fg: var(--green);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="red-black"],
.dev-page [data-row-pair="red-black"] {
  --row-fg: var(--red);
  --row-bg: var(--black);
}

.dev-page[data-row-pair="blue-black"],
.dev-page [data-row-pair="blue-black"] {
  --row-fg: var(--blue);
  --row-bg: var(--black);
}

/*
 * Base component styles are intentionally allowed to be colourful elsewhere.
 * Inside /dev they are reduced to the row pair before any inverse-video state
 * is applied. Transparent descendants expose only the row background.
 */
.dev-page,
.dev-page :where(*) {
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
}

.dev-page * {
  color: var(--row-fg) !important;
  background-color: transparent !important;
  border-color: var(--row-fg) !important;
}

.dev-page *::before,
.dev-page *::after {
  color: var(--row-fg) !important;
  background-color: transparent !important;
  border-color: var(--row-fg) !important;
}

.dev-page [data-row-inverse],
.dev-page [data-row-inverse] * {
  color: var(--row-bg) !important;
}

.dev-page [data-row-inverse] {
  background-color: var(--row-fg) !important;
}

.dev-page [data-row-inverse] * {
  background-color: transparent !important;
}

.dev-page [data-row-inverse]::before,
.dev-page [data-row-inverse]::after,
.dev-page [data-row-inverse] *::before,
.dev-page [data-row-inverse] *::after {
  color: var(--row-bg) !important;
}

.dev-page > #page-title,
.dev-page .ui-component-catalog > h2 {
  --row-fg: var(--yellow);
  --row-bg: var(--black);
}

.dev-page .ui-component-id {
  --row-fg: var(--cyan);
  --row-bg: var(--black);
}

.dev-page .ui-component-use {
  --row-fg: var(--white);
  --row-bg: var(--black);
}

/*
 * The document itself owns one blank cell of layout padding on each side. In the
 * /dev laboratory every row-bearing box expands through those two gutter cells,
 * so pointer inversion sees that row's pair from the left edge to the right edge.
 * The separate one-cell scroll rail remains outside this treatment.
 */
.terminal:has(.dev-page) {
  container-name: dev-terminal;
  container-type: inline-size;
}

.terminal:has(.dev-page) .document > :is(.command-echo, .location-line, .primary-menu),
.terminal:has(.dev-page) .dev-page > #page-title,
.terminal:has(.dev-page) .dev-page [data-row-pair]:not(tr),
.terminal:has(.dev-page) .transient-output,
.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) {
  box-sizing: border-box;
  width: calc(100% + var(--cell-w) + var(--cell-w));
  margin-left: calc(0px - var(--cell-w));
  margin-right: calc(0px - var(--cell-w));
  border-left: var(--cell-w) solid var(--row-bg) !important;
  border-right: var(--cell-w) solid var(--row-bg) !important;
}

.terminal:has(.dev-page) .dev-page [data-row-pair][data-row-inverse]:not(tr) {
  border-left-color: var(--row-fg) !important;
  border-right-color: var(--row-fg) !important;
}

/* Table rows use the same gutter cells without adding synthetic table columns. */
.terminal:has(.dev-page) .dev-page .tui-table {
  width: calc(100% + var(--cell-w) + var(--cell-w));
  margin-left: calc(0px - var(--cell-w));
  margin-right: calc(0px - var(--cell-w));
}

.terminal:has(.dev-page) .dev-page .tui-table :is(th, td):first-child {
  padding-left: var(--cell-w);
}

.terminal:has(.dev-page) .dev-page .tui-table :is(th, td):last-child {
  padding-right: calc(2ch + var(--cell-w));
}

.dev-page #page-title:focus,
.dev-page a:hover,
.dev-page a:focus-visible,
.dev-page button:hover,
.dev-page button:focus-visible {
  background-color: var(--row-fg) !important;
  color: var(--row-bg) !important;
}

/*
 * Clickable single-pair KV keys are the control half of a paired field. When
 * the key itself owns hover/focus, keep its anchor transparent so the key field
 * can return to normal video while the paired value receives inverse video.
 */
.dev-page .tui-kv--single-pair dt:has(a:hover) > a,
.dev-page .tui-kv--single-pair dt:has(a:focus-visible) > a {
  background-color: transparent !important;
  color: var(--row-fg) !important;
}

.dev-page::selection,
.dev-page *::selection {
  background: var(--row-fg);
  color: var(--row-bg);
}

/*
 * Key/value rows share green/black. Keys are inverse cells of that pair. The
 * key field keeps one character of padding on each side, but it is pinned to one
 * physical terminal row even when the value wraps and makes the grid row taller.
 */
.dev-page .tui-kv {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 1ch;
  padding: 0;
}

.dev-page .tui-kv dt {
  align-self: start;
  height: var(--cell-h);
  padding: 0 1ch;
  background-color: var(--row-fg) !important;
  color: var(--row-bg) !important;
  text-align: left;
  white-space: nowrap;
}

.dev-page .tui-kv dd {
  min-width: 0;
  margin: 0;
}

/*
 * Fewer than 48 measured terminal columns means a terminal width below 384px.
 * Keep the shared max-content key column, but place each value on the following
 * row spanning the full record width. Exactly 48 columns remains side-by-side.
 */
@container dev-terminal (max-width: 383px) {
  .dev-page .tui-kv dt {
    grid-column: 1;
  }

  .dev-page .tui-kv dd {
    grid-column: 1 / -1;
  }
}

/* /dev shell rows also receive explicit pairs; the rail remains the exception. */
.terminal:has(.dev-page) .top-line {
  --row-fg: var(--yellow);
  --row-bg: var(--blue);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .command-echo {
  --row-fg: var(--green);
  --row-bg: var(--black);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .location-line {
  --row-fg: var(--cyan);
  --row-bg: var(--black);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .primary-menu {
  --row-fg: var(--cyan);
  --row-bg: var(--black);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .prompt-line {
  --row-fg: var(--yellow);
  --row-bg: var(--blue);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .status-line {
  --row-fg: var(--black);
  --row-bg: var(--white);
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) :is(.top-line, .command-echo, .location-line, .primary-menu, .prompt-line, .status-line) * {
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  color: var(--row-fg) !important;
  background-color: transparent !important;
}

.terminal:has(.dev-page) :is(.top-line, .command-echo, .location-line, .primary-menu, .prompt-line, .status-line) *::before,
.terminal:has(.dev-page) :is(.top-line, .command-echo, .location-line, .primary-menu, .prompt-line, .status-line) *::after {
  color: var(--row-fg) !important;
  background-color: transparent !important;
}

.terminal:has(.dev-page) :is(.top-line, .primary-menu, .status-line) a:hover,
.terminal:has(.dev-page) :is(.top-line, .primary-menu, .status-line) a:focus-visible {
  background-color: var(--row-fg) !important;
  color: var(--row-bg) !important;
}

.terminal:has(.dev-page) .prompt-line .command-cell-cursor {
  background: var(--row-fg) !important;
  color: var(--row-bg) !important;
}

.terminal:has(.dev-page) .prompt-line .command-input::placeholder {
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) :is(.top-line, .command-echo, .location-line, .primary-menu, .prompt-line, .status-line)::selection,
.terminal:has(.dev-page) :is(.top-line, .command-echo, .location-line, .primary-menu, .prompt-line, .status-line) *::selection {
  background: var(--row-fg);
  color: var(--row-bg);
}

/* Transient shell output printed while /dev remains active is also row-paired. */
.terminal:has(.dev-page) .transient-output {
  --row-fg: var(--white);
  --row-bg: var(--black);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) .terminal-echo {
  --row-fg: var(--green);
  --row-bg: var(--black);
}

.terminal:has(.dev-page) .terminal-result {
  --row-fg: var(--white);
  --row-bg: var(--black);
}

.terminal:has(.dev-page) .terminal-entry[data-kind="error"] .terminal-result {
  --row-fg: var(--red);
  --row-bg: var(--black);
}

.terminal:has(.dev-page) .terminal-entry[data-kind="completion"] .terminal-result {
  --row-fg: var(--cyan);
  --row-bg: var(--black);
}

.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) {
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background: var(--row-bg) !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) * {
  --pair-foreground: var(--row-fg);
  --pair-background: var(--row-bg);
  background-color: transparent !important;
  color: var(--row-fg) !important;
}

.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) :is(a, button):hover,
.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) :is(a, button):focus-visible {
  background-color: var(--row-fg) !important;
  color: var(--row-bg) !important;
}

.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result)::selection,
.terminal:has(.dev-page) :is(.terminal-echo, .terminal-result) *::selection {
  background: var(--row-fg);
  color: var(--row-bg);
}