:root {
  --color-bg: #1b1b1f;
  --color-panel0: #202027;
  --color-panel: #25252b;
  --color-panel2: #2e2e36;
  --color-fg: #e7e7ea;
  --color-muted: #9a9aa5;
  --color-accent: #ef7559;
  --color-accent2: #ef7559;
  --color-info: #5aa9e6;
  --color-ok: #5ec27e;
  --color-err: #e0685f;
  --color-warn: oklch(87.9% 0.169 91.605);
  --color-border: #3a3a44;
  --color-border-strong: #40404b;
  --color-border-input: #4d4d59;
  --color-control-border: #6b6b78;
  --color-fg-soft: #c7c7cf;
  --color-fg-max: #ffffff;
  --color-panel-hi: #2a2a31;
  --color-panel-lo: #232329;
  --color-panel-glow: #27272f;
  --color-popover: #23232a;
  --color-scrim: rgba(0, 0, 0, .6);
  --color-row-alt: rgba(255, 255, 255, .04);
  --color-surface-tint: rgba(255, 255, 255, .02);
  --color-token-literal: #c084f5;
  --color-method-read: oklch(84.5% 0.143 164.978);
  --color-method-write: oklch(83.7% 0.128 66.29);
  --color-method-replace: oklch(82.8% 0.111 230.318);
  --color-method-remove: oklch(80.8% 0.114 19.571);
  --color-diff-add-bg: rgba(94, 194, 126, .09);
  --color-diff-del-bg: rgba(224, 104, 95, .09);
  --color-err-soft: #d88;
  --color-separator: #5c5c66;
  --color-scroll-track: #232329;
  --color-scroll-thumb: #6b6b78;
  --color-scroll-thumb-hover: #82828f;
  --color-ultra-from: #f5a709;
  --color-ultra-to: #900fb1;
  --color-rarity-1: #6ab6ff;
  --color-rarity-2: #c03fe2;
  --color-rarity-3: #eeab42;
  --rarity-fg-0: var(--color-fg);
  --rarity-fg-1: var(--color-rarity-1);
  --rarity-fg-2: var(--color-rarity-2);
  --rarity-fg-3: var(--color-rarity-3);
  --color-heat-low: var(--color-panel2);
  --color-heat-high: var(--color-accent);
  --font-mono: "Cascadia Code", "Fira Code", Consolas, monospace;
  --font-sans: var(--font-mono);
  --default-font-family: var(--font-mono);
  --radius-pill: 999px;
  --motion-fast: 120ms;
  --motion-base: 150ms;
  --motion-morph: 220ms;
  --motion-pulse: 2s;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-pulse: cubic-bezier(.4, 0, .6, 1);
  --scrollbar-size: 0.875rem;
  --nav-h: 0rem;
  --gutter-w: 4px;
  --code-row-h: 20px;
  --code-gutter-w: 3.25rem;
  --code-bg: var(--color-bg);
  --code-fg: var(--color-fg);
  --code-gutter-fg: var(--color-muted);
  --code-mark-bg: var(--color-accent);
  --code-mark-fg: var(--color-bg);
  --code-diff-add-bg: var(--color-diff-add-bg);
  --code-diff-rem-bg: var(--color-diff-del-bg);
  --code-diff-chg-bg: color-mix(in oklab, var(--color-accent) 9%, transparent);
  --code-ink-add-bg: color-mix(in oklab, var(--color-ok) 30%, transparent);
  --code-ink-rem-bg: color-mix(in oklab, var(--color-err) 30%, transparent);
  --code-hunk-fg: var(--color-accent);
  --code-tok-plain: var(--color-fg);
  --code-tok-key: var(--color-accent);
  --code-tok-string: var(--color-ok);
  --code-tok-number: var(--color-accent);
  --code-tok-bool: var(--color-token-literal);
  --code-tok-null: var(--color-muted);
  --code-tok-keyword: var(--color-info);
  --code-tok-type: var(--color-fg);
  --code-tok-ident: var(--color-fg);
  --code-tok-comment: var(--color-muted);
  --code-tok-punct: var(--color-muted);
  --code-tok-op: var(--color-muted);
  --code-tok-tag: var(--color-accent);
  --code-tok-attr: var(--color-ok);
  --code-tok-meta: var(--color-muted);
  --code-tok-offset: var(--color-muted);
  --code-tok-byte: var(--color-fg);
  --code-tok-ascii: var(--color-ok);
  --code-tok-invalid: var(--color-err);
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--color-border); }
[hidden] { display: none !important; }
.segmented-opt.active .wb-seg-count { color: inherit; }
hr { border: 0; border-top: 1px solid var(--color-border); }
a { color: var(--color-accent); }
button, input, select, textarea, optgroup, option { font: inherit; letter-spacing: inherit; }
html { font-size: clamp(1rem, 0.875rem + 0.15625vw, 1.125rem); color-scheme: dark; scrollbar-gutter: stable; }
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  background-image: radial-gradient(1100px 520px at 50% -260px, var(--color-panel-glow) 0%, transparent 72%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track { background-color: var(--color-scroll-track); }
::-webkit-scrollbar-corner { background-color: var(--color-scroll-track); }
::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
  min-height: 2.5rem;
  min-width: 2.5rem;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-scroll-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--color-accent); }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track); }
}

input[type="search"]::placeholder { color: var(--color-muted); }

.page { width: 100%; max-width: var(--page-w, 100%); padding-inline: 1rem; }
.page-wide { --page-w: 2100px; margin-inline: auto; }
@media (min-width: 40rem) {
  .page { padding-inline: 2rem; }
}

.panel {
  padding: 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0.5rem;
  background-image: linear-gradient(180deg, var(--color-panel-hi) 0%, var(--color-panel-lo) 100%);
  box-shadow: var(--egi-glow, ) 0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.45);
}
.panel h2 {
  margin-top: 0.25rem;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.form-check, .panel-title { font-size: 0.8125rem; }

.panel input[type="checkbox"], .panel input[type="radio"], .data-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  background-color: var(--color-panel2);
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--color-control-border);
}
.data-table input[type="checkbox"] { background-color: var(--color-bg); }
.panel input[type="checkbox"], .data-table input[type="checkbox"] { border-radius: 0.125rem; }
.panel input[type="radio"] { border-radius: 9999px; }
.panel input[type="checkbox"]:hover, .panel input[type="radio"]:hover,
.data-table input[type="checkbox"]:hover { border-color: var(--color-accent); }
.panel input[type="checkbox"]:checked, .panel input[type="radio"]:checked,
.data-table input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.panel input[type="checkbox"]:checked::after, .data-table input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-color: var(--color-fg-max);
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.panel input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--color-fg-max);
  transform: translate(-50%, -50%);
}

.btn-primary {
  gap: 0.5rem;
  padding-inline: 1rem;
  padding-block: 0;
  min-height: 1.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  background-color: var(--color-accent);
  border: 1px solid color-mix(in oklab, var(--color-accent) 65%, black);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 24%, transparent), 0 1px 2px rgb(0 0 0 / 0.3);
  transition: filter var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: var(--egi-glow, ) 0 3px 12px -3px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.28); }

.btn-secondary {
  padding-block: 0;
  min-height: 1.875rem;
  font-size: 0.8125rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-fg) 8%, transparent);
  transition: filter var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); }
.btn-secondary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.22); }
.btn-secondary:disabled { cursor: not-allowed; opacity: 0.4; }

.btn-mini {
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-fg) 7%, transparent);
  transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-mini:hover { border-color: var(--color-accent); }
.btn-mini:active:not(:disabled) { transform: translateY(1px); }
.btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-mini:disabled:hover { border-color: var(--color-border); }

.data-table tbody tr:where(:nth-child(even)) { background-color: var(--color-row-alt); }
.table-scroll { border: 1px solid var(--color-border); border-radius: 0.375rem; background-color: var(--egi-panel-tint, var(--color-panel)); }
.table-scroll .data-table { border: 0; border-radius: 0; }
.table-scroll .data-table td.num, .table-scroll .data-table th.num { text-align: right; font-family: var(--font-mono); }
.table-scroll .data-table td.mono, .table-scroll .data-table .mono { font-family: var(--font-mono); font-size: 0.75rem; }
.table-scroll .data-table td.tools, .table-scroll .data-table th.tools { text-align: right; white-space: nowrap; }
.table-scroll .data-table td.tools .btn-mini + .btn-mini { margin-left: 0.25rem; }
.table-scroll .data-table td.small, .table-scroll .data-table td.muted { font-size: 0.75rem; }
.table-scroll .data-table tbody tr.row-click { cursor: pointer; }
.table-scroll .data-table tbody tr.row-click:hover { background-color: var(--color-panel2); }
.table-scroll .data-table tbody tr.row-open > td, .table-scroll .data-table tbody tr.row-detail > td { background-color: var(--color-panel2); }
.table-scroll .data-table tbody tr.row-detail > td { padding-left: 1.5rem; }
.table-scroll .data-table tbody tr.row-day td {
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.table-scroll .data-table tbody tr.row-edit > td { background-color: var(--color-panel2); padding: 0.75rem; }
.table-scroll .data-table tbody tr.row-hot { background: color-mix(in oklab, var(--color-accent) 10%, transparent); }
.data-table .mono { font-family: var(--font-mono); font-size: 0.75rem; }

.modal-backdrop { align-items: flex-start; background-color: var(--color-scrim); }
.modal-card { margin-block: auto; background-color: var(--egi-panel-tint, var(--color-panel)); }
.modal-card:focus, .modal-card:focus-visible { outline: none; }
.modal-title { margin-right: auto; }
.modal-body { overflow-x: auto; }
@media (min-width: 40rem) {
  .modal-backdrop { padding: 2rem; }
}

.icon-btn {
  width: 2rem;
  height: 1.875rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background-color: var(--color-panel2);
  color: var(--color-fg);
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
}
.icon-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.icon-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.icon-btn.active { border-color: var(--color-accent); color: var(--color-accent); }
.icon-btn-sm { width: 1.625rem; height: 1.5rem; }

.reg-filter-input, .protos-filter {
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.reg-filter-input { width: 100%; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--color-bg); }
.protos-filter { width: 160px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background-color: var(--color-panel2); }
.reg-filter-input::placeholder, .protos-filter::placeholder { color: var(--color-muted); }
.reg-filter-input:focus, .protos-filter:focus { outline: none; border-color: var(--color-accent); }

.code-chip {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.reg-wrap {
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: var(--egi-panel-tint, var(--color-panel));
}

.muted { color: var(--color-muted); }
.err { color: var(--color-err); }
.mono { font-family: var(--font-mono); }
.text-ok { color: var(--color-ok); }
.text-err { color: var(--color-err); }
.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-fg { color: var(--color-fg); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background-color: var(--color-panel2);
  color: var(--color-fg);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.field-input::placeholder { color: var(--color-muted); }
.field-input:focus { outline: none; border-color: var(--color-accent); }
.field-input.env-locked, .field-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: color-mix(in oklab, var(--color-panel0) 20%, transparent);
}

.result-pre {
  min-height: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: pre-wrap;
}
.result-pre:empty { display: none; }

.json, pre.json {
  max-height: 360px;
  margin: 0;
  padding: 0.5rem 0.5rem 1rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  background-color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

.meta-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; }
.meta-dots > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.375rem;
  border-radius: 9999px;
  vertical-align: middle;
  background-color: var(--color-border-strong);
}

.popover-backdrop { position: fixed; inset: 0; z-index: 1040; }

.disclosure { border-top: 1px solid var(--color-border); padding-top: 0.5rem; margin-top: 0.5rem; }
.disclosure:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.disclosure-head { gap: 0.5rem; min-width: 0; }
.disclosure-toggle { gap: 0.375rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.disclosure-toggle:hover { color: var(--color-fg); }
.disclosure-tools { gap: 0.375rem; min-width: 0; }
.disclosure-body { margin-top: 0.375rem; }

.data-copy { display: inline-flex; align-items: center; gap: 0.25rem; padding-inline: 0.625rem; }

.time-ago { cursor: default; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-muted); }

.egi-consent {
  display: contents;
  --suite-consent-bg: var(--color-panel);
  --suite-consent-fg: var(--color-fg-soft);
  --suite-consent-border: 1px solid var(--color-border-strong);
  --suite-consent-radius: 0.5rem;
  --suite-consent-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
  --suite-consent-text-size: 0.8125rem;
  --suite-consent-wrap: nowrap;
  --suite-consent-links-gap: 0.375rem;
}
@media (max-width: 40rem) {
  .egi-consent { --suite-consent-links-display: block; }
}
.tooltip-floating {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-panel2);
  color: var(--color-fg);
  font-size: 0.6875rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.6);
}
.tooltip-floating .tt-title, .tooltip-floating .tt-line, .tooltip-floating .tt-ultra { display: block; }
.tooltip-floating .tt-title { font-size: 0.75rem; font-weight: 600; color: var(--color-accent); }
.tooltip-floating .tt-line { font-size: 0.6875rem; color: var(--color-muted); }
.tooltip-floating .tt-ultra {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(to right, var(--color-ultra-from), var(--color-ultra-to));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.settings-menu { --menu-max-h: calc(100vh - var(--nav-h, 3rem) - 1.5rem); }
.settings-menu .menu {
  width: 240px;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background-color: var(--color-panel0);
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
.settings-menu-lg .menu { width: 280px; }
.settings-menu .settings-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-fg); margin-bottom: 0.25rem; }
.settings-menu .settings-hint { font-size: 0.75rem; line-height: 1.375; margin-bottom: 0.625rem; color: var(--color-muted); opacity: .95; }
.settings-menu .form-check { margin-bottom: 0.25rem; }
.settings-menu .form-select { width: 100%; height: 1.75rem; margin-top: 0.125rem; }
.settings-menu .segmented { display: flex; width: 100%; }
.settings-menu .segmented-opt { flex: 1 1 0; }
.settings-menu .settings-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.625rem; }

.tok-plain { color: var(--code-tok-plain); }
.tok-key { color: var(--code-tok-key); }
.tok-string { color: var(--code-tok-string); }
.tok-number { color: var(--code-tok-number); }
.tok-bool { color: var(--code-tok-bool); }
.tok-null { color: var(--code-tok-null); font-style: italic; }
.tok-keyword { color: var(--code-tok-keyword); }
.tok-type { color: var(--code-tok-type); }
.tok-ident { color: var(--code-tok-ident); }
.tok-comment { color: var(--code-tok-comment); font-style: italic; }
.tok-punct { color: var(--code-tok-punct); }
.tok-op { color: var(--code-tok-op); }
.tok-tag { color: var(--code-tok-tag); }
.tok-attr { color: var(--code-tok-attr); }
.tok-meta { color: var(--code-tok-meta); }
.tok-offset { color: var(--code-tok-offset); }
.tok-byte { color: var(--code-tok-byte); }
.tok-ascii { color: var(--code-tok-ascii); }
.tok-invalid { color: var(--code-tok-invalid); }

.prose-legal-title { margin: 0 0 0.25rem; font-size: 1.4rem; font-weight: 600; line-height: 1.25; color: var(--color-fg); }
.prose-legal-updated { margin: 0 0 1.5rem; font-size: 0.75rem; color: var(--color-muted); }
.prose-legal-section { margin-bottom: 1.75rem; }

.wb-st-queued { color: var(--color-warn); }
.wb-st-run { color: var(--color-accent); }
.wb-st-done { color: var(--color-ok); }
.wb-st-err { color: var(--color-err); }
.wb-st-offer { color: var(--color-info); }
.wb-st-muted { color: var(--color-muted); }

.wb-body.dragging { outline: 2px dashed var(--color-accent); outline-offset: -6px; }
.wb-lead { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; height: 1rem; }
.wb-rail-popout { overflow: visible; }
.wb-rail-popout .wb-sec-head { flex: none; }
.wb-rail-slot { display: flex; flex-direction: column; min-height: 0; }
.wb-rail-slot > .wb-sec, .wb-rail-slot .wb-sec-body { flex: 1 1 auto; min-height: 0; }
.filter-field { min-width: 0; }
.filter-glass { flex: none; }
.wb-rail-filter-bar {
  flex: none;
  gap: 0.4375rem;
  padding-left: 0.625rem;
  margin: -0.5rem -0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-panel2);
}
.wb-rail-filter-bar:focus-within { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.wb-rail-filter {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  margin: 0;
  padding-inline: 0 0.625rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.wb-rail-filter:focus { outline: none; }

.admin-wb-card { --wb-rail-w: 15rem; }
#adminWorkbench h2 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--color-fg); }
#adminWorkbench .mono { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1rem; }
#adminWorkbench select, #adminWorkbench button {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background-color: var(--color-panel2);
  color: var(--color-fg);
  font-size: 0.8125rem;
  cursor: pointer;
}
#adminWorkbench select:hover, #adminWorkbench button:hover { border-color: var(--color-accent); }

.wb-card.calwb-card, .wb-card.admin-wb-card { --wb-card-w: 97vw; --wb-card-max: none; }
.wb-card.nwb-card { min-width: min(92vw, 48rem); max-height: 96vh; }
.wb-card.awb-card, .wb-card.pwb-card, .wb-card.admin-wb-card { max-height: 96vh; }
.nwb-card .wb-body, .awb-card .wb-body, .pwb-card .wb-body, .admin-wb-card .wb-body { min-height: 0; }
.nwb-card .wb-main, .awb-card .wb-main, .pwb-card .wb-main, .admin-wb-card .wb-main { min-height: 0; overflow-y: auto; }
.nwb-card .wb-rail { --wb-rail-w: 16rem; scrollbar-gutter: auto; }
.nwb-card .wb-entry-meta, .admin-wb-card .wb-entry-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dwb-card { --wb-rail-w: 15rem; }
.dwb-card .wb-entry-head { align-items: flex-start; }
.dwb-card .wb-entry-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.dwb-card .wb-main, .awb-card .wb-main, .admin-wb-card .wb-main { display: flex; flex-direction: column; }
.admin-wb-card .wb-rail { overflow-y: auto; }
.awb-card { --wb-rail-w: 13.5rem; }
.wb-card.dtw-card { max-height: 96vh; }
.dtw-card .wb-body, .atb-card .wb-body { min-height: 0; }
.dtw-card .wb-main, .atb-card .wb-main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.dtw-card .wb-rail, .atb-card .wb-rail { --wb-rail-w: 16rem; overflow-y: auto; }
.atb-card .wb-rail { --wb-rail-w: max-content; }
.dtw-card .wb-entry-head { align-items: flex-start; }
.dtw-card .wb-entry-meta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
@media (min-width: 80rem) {
  .dtw-card .wb-rail { --wb-rail-w: 31.5rem; }
}

.account-modal { width: fit-content; min-width: min(28rem, 100%); max-width: 100%; }
@media (min-width: 40rem) {
  .account-modal { max-width: 42rem; }
}

.pwb-card { --wb-drawer-border: var(--color-border-strong); --pwb-col: 16.5rem; --pwb-gap: 0.75rem; --pwb-main-w: 66rem; }
.pwb-card .wb-rail { --pwb-n: 1; --pwb-s: 0; }
.pwb-card:has(.pwb-split-flag:checked) .wb-rail { --pwb-s: 1; }
@media (min-width: 80rem) {
  .pwb-has-sess .wb-rail { --pwb-n: 2; }
}
@media (min-width: 100rem) {
  .pwb-card .wb-rail { --pwb-s: 1; }
  .pwb-card:has(.pwb-split-flag:checked) .wb-rail { --pwb-s: 0; }
}
@media (min-width: 48.01rem) {
  .pwb-card .wb-main { flex: 0 1 auto; width: var(--pwb-main-w); }
  .pwb-card .wb-rail {
    --wb-rail-w: calc((var(--pwb-n) + var(--pwb-s)) * var(--pwb-col) + (var(--pwb-n) + var(--pwb-s) - 1) * var(--pwb-gap) + 1rem + 1px);
    display: grid;
    grid-template-columns: repeat(3, var(--pwb-col));
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--pwb-gap);
    overflow-x: clip;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
  .pwb-card .wb-rail:has(.pwb-rail-sess:not(.pwb-rail-sess-empty)) { grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
  .pwb-card .wb-rail-slot { flex: none; min-height: 0; }
  .pwb-card .pwb-rail-sess { grid-column: 1; grid-row: 1; }
  .pwb-card .pwb-rail-reg { grid-column: 1; grid-row: 2; }
  .pwb-card .pwb-rail-split { grid-column: 2; grid-row: 1 / span 2; opacity: var(--pwb-s); transition: opacity var(--motion-morph, 220ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1)); }
}
@media (min-width: 80rem) {
  .pwb-has-sess .wb-rail, .pwb-has-sess .wb-rail:has(.pwb-rail-sess:not(.pwb-rail-sess-empty)) { grid-template-rows: minmax(0, 1fr); }
  .pwb-has-sess .pwb-rail-sess { grid-column: 1; grid-row: 1; }
  .pwb-has-sess .pwb-rail-reg { grid-column: 2; grid-row: 1; }
  .pwb-has-sess .pwb-rail-split { grid-column: 3; grid-row: 1; }
}
.pwb-split-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-block: -0.25rem;
  padding: 0.125rem 0.125rem 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: color-mix(in oklab, var(--color-accent) calc(var(--pwb-s, 0) * 100%), var(--color-muted));
  cursor: pointer;
  transition: color var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}
.pwb-split-toggle:hover { color: var(--color-fg); }
.pwb-split-toggle:focus-within { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.pwb-split-flag { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pwb-split-chev { rotate: calc(var(--pwb-s, 0) * 180deg); transition: rotate var(--motion-morph, 220ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1)); }
.calwb-card .wb-rail { --wb-rail-w: max-content; overflow-y: auto; }
.calwb-card.calwb-rail-off .wb-rail { display: none; }
@media (max-width: 48rem) {
  .wb-card .wb-body { flex-direction: column; overflow-y: auto; }
  .wb-card .wb-rail {
    --wb-rail-w: 100%;
    flex: none;
    max-height: 45vh;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .wb-card .wb-main { flex: none; overflow: visible; padding: 0.75rem; }
  .pwb-card .wb-rail { max-height: none; overflow: visible; }
  .pwb-split-toggle, .pwb-card .pwb-rail-split { display: none; }
  .wb-card.wb-drawer-on .wb-main { margin-right: 0; padding-right: 0.75rem; }
}