.land {
  position: fixed;
  inset: 0;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  z-index: 90;
  font-size: 14px;
  line-height: 1.6;
}
.land-top {
  position: sticky;
  top: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  z-index: 1;
}
.land-brand {
  align-self: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 19px;
}
.land-brand .b {
  color: var(--accent);
}
.land-mark {
  display: flex;
  align-items: center;
  align-self: center;
  min-width: 0;
}
/* Inside the block the name follows the block's own alignment: centred beside
   the line on a wide screen, flush left above it on a narrow one. */
.land-mark .land-brand {
  align-self: auto;
}
/* The line beside the name: what the engine is. Prose, a step down from the
   text, divided from the mark by a hairline. On a narrow screen it moves under
   the name, smaller, instead of leaving. */
.land-tagline {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  font-family: var(--prose);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: #aab3bf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 860px) {
  .land-top {
    padding: 6px 16px;
  }
  .land-mark {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .land-tagline {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
    max-width: 52vw;
  }
}
.land-spacer {
  flex: 1;
}
.land-tab {
  display: flex;
  align-items: center;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--dim);
  padding: 6px 12px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.land-tab:hover {
  color: var(--text);
}
.land-tab--on {
  color: var(--accent);
  border-bottom-color: var(--accent);
  cursor: default;
}
/* A tab is one word or two, and never two lines: on a phone the line under the
   name gives up width first. */
.land-tab {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .land-tab {
    padding: 0 7px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 440px) {
  .land-tagline {
    max-width: 42vw;
  }
  .land-top {
    gap: 2px;
  }
}
.land-body {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.land-kicker {
  color: var(--dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.land-h1 {
  margin: 0 0 18px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.land-h2 {
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 600;
}
.land-p {
  margin: 0 0 12px;
  max-width: 64ch;
  color: var(--text);
}
.land-hero {
  padding: 44px 0 20px;
}
/* The headline is the last thing before the picture: no paragraph under it. */
.land-hero .land-h1 {
  margin-bottom: 0;
}
.land-hero .land-p {
  font-size: 15px;
}
.land-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.land-btn {
  font: inherit;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0b1a24;
  cursor: pointer;
}
.land-btn:hover {
  filter: brightness(1.08);
}
.land-link {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--dim);
}
.land-link:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}
.land-foot {
  border-top: 1px solid var(--line);
  padding: 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.land-foot .land-p {
  margin: 0;
}

.land-demo {
  padding: 4px 0 64px;
}
.demo-lead {
  font-family: var(--prose);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 60ch;
}
.demo-lead b {
  color: var(--accent);
  font-weight: 600;
}
.demo-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 520px;
}
.demo-app {
  width: 500px;
  flex: none;
  padding: 14px 14px 6px;
  background: #151b27;
  color: #e3e8ef;
  font-family: var(--prose);
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.demo-app [data-s] {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.da-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}
.da-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid #4aa8ff;
  border-radius: 6px;
  font-size: 13px;
}
.da-chip i {
  font-style: normal;
  color: #8a93a3;
}
.da-chip b {
  font-weight: 600;
}
.da-chip em {
  font-style: normal;
  color: #8a93a3;
  font-size: 11px;
}
.da-add {
  padding: 3px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #8a93a3;
}
.da-close {
  margin-left: auto;
  color: #8a93a3;
  padding: 0 6px;
}
.da-tabs {
  display: flex;
  gap: 22px;
  padding: 12px 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.da-tabs span {
  padding-bottom: 8px;
  color: #8a93a3;
}
.da-tabs .on {
  color: #4aa8ff;
  box-shadow: inset 0 -2px 0 #4aa8ff;
}
.da-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}
.da-pg {
  min-width: 22px;
  padding: 3px 6px;
  text-align: center;
  border-radius: 6px;
  font-size: 12.5px;
}
.da-pg.dim {
  color: #8a93a3;
}
.da-pg.cur {
  background: rgba(74, 168, 255, 0.16);
  color: #4aa8ff;
}
.da-btn {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  font-size: 12px;
}
.da-btn.blue {
  border-color: #4aa8ff;
  color: #4aa8ff;
}
.da-total {
  margin-left: 6px;
  padding: 3px 4px;
  border-radius: 6px;
  color: #8a93a3;
  font-size: 12px;
}
.da-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #1b2230;
  border-radius: 8px;
}
.da-jp {
  display: inline-block;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 6px;
  font-size: 17px;
}
.da-w {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  line-height: 1.25;
}
.da-w small {
  font-size: 10px;
  color: #8a93a3;
}
.da-tr {
  margin-top: 4px;
  padding: 1px 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #8a93a3;
  font-size: 12px;
}
.da-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: #8a93a3;
}
.da-sp,
.da-ep {
  padding: 1px 4px;
  border-radius: 5px;
}
.da-sp {
  color: #e3e8ef;
}
.da-listen {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid #4aa8ff;
  border-radius: 6px;
  color: #4aa8ff;
}
.demo-code {
  position: absolute;
  right: 0;
  top: 64px;
  width: 530px;
  overflow: hidden;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.dc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
}
.dc-dots {
  display: inline-flex;
  gap: 5px;
}
.dc-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.dc-tag {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.dc-pre {
  margin: 0;
  padding: 10px 0;
  font-size: 12.5px;
  line-height: 1.62;
  overflow: hidden;
}
.demo-code .dl {
  display: block;
  padding: 0 14px;
  white-space: pre;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.dc-count {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.dc-count .dc-pre {
  padding-top: 2px;
}
.dc-note {
  padding: 0 14px;
  color: var(--dim);
  font-size: 12px;
  font-style: italic;
}
.dc-out {
  margin-left: 16px;
  color: #e2c275;
  font-weight: 600;
}
.demo-caps {
  position: relative;
  height: 1.7em;
  margin-top: 20px;
}
.demo-cap {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--prose);
  font-size: 15px;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.demo-stage[data-step="6"] .demo-code [data-s="6"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="6"] .demo-app [data-s="6"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="6"] .demo-cap[data-s="6"] {
  opacity: 1;
  transform: none;
}
.demo-stage[data-step="5"] .demo-code [data-s="5"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="5"] .demo-app [data-s="5"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="5"] .demo-cap[data-s="5"] {
  opacity: 1;
  transform: none;
}
.demo-stage[data-step="4"] .demo-code [data-s="4"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="4"] .demo-app [data-s="4"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="4"] .demo-cap[data-s="4"] {
  opacity: 1;
  transform: none;
}
.demo-stage[data-step="3"] .demo-code [data-s="3"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="3"] .demo-app [data-s="3"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="3"] .demo-cap[data-s="3"] {
  opacity: 1;
  transform: none;
}
.demo-stage[data-step="2"] .demo-code [data-s="2"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="2"] .demo-app [data-s="2"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="2"] .demo-cap[data-s="2"] {
  opacity: 1;
  transform: none;
}
.demo-stage[data-step="1"] .demo-code [data-s="1"] {
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.demo-stage[data-step="1"] .demo-app [data-s="1"] {
  background-color: rgba(226, 194, 117, 0.1);
  box-shadow: 0 0 0 2px #e2c275, 0 0 18px rgba(226, 194, 117, 0.3);
}
.demo-caps[data-step="1"] .demo-cap[data-s="1"] {
  opacity: 1;
  transform: none;
}
@media (max-width: 960px) {
  .demo-stage {
    flex-direction: column;
    min-height: 0;
  }
  .demo-app {
    width: 100%;
  }
  .demo-code {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
  .dc-pre {
    overflow-x: auto;
  }
  .demo-caps {
    height: auto;
    min-height: 3.2em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-code .dl,
  .demo-app [data-s],
  .demo-cap {
    transition: none;
  }
}

.land-compare {
  padding: 36px 0 64px;
  border-top: 1px solid var(--line);
}
.cmp-h2 {
  margin: 6px 0 10px;
}
.cmp-lead {
  margin: 0 0 22px;
  max-width: 72ch;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.cmp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cmp-step {
  padding: 3px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-family: var(--prose);
  font-size: 12.5px;
  color: var(--dim);
  cursor: default;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.cmp-stage {
  width: min(1200px, calc(100vw - 48px));
  margin-left: calc(50% - min(600px, 50vw - 24px));
}
.cmp-wins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.cmp-win {
  min-width: 0;
  overflow: hidden;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.cmp-pre {
  margin: 0;
  padding: 10px 0;
  font-size: 11.5px;
  line-height: 1.62;
  overflow-x: auto;
}
.cmp-win .cl {
  display: block;
  padding: 0 12px;
  white-space: pre;
  opacity: 0.42;
  transition: opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.cmp-tail {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.cmp-tail .cmp-pre {
  padding-top: 2px;
}
.cmp-caps {
  position: relative;
  margin-top: 14px;
  min-height: 3.6em;
}
.cmp-cap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-family: var(--prose);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cmp-cap b {
  margin-right: 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #e2c275;
  font-weight: 600;
}
.cmp-stage[data-step="5"] .cmp-win .cl[data-s="5"] {
  opacity: 1;
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.cmp-stage[data-step="5"] .cmp-step[data-s="5"] {
  color: var(--text);
  border-color: #e2c275;
  background-color: rgba(226, 194, 117, 0.1);
}
.cmp-stage[data-step="5"] .cmp-cap[data-s="5"] {
  opacity: 1;
  transform: none;
}
.cmp-stage[data-step="4"] .cmp-win .cl[data-s="4"] {
  opacity: 1;
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.cmp-stage[data-step="4"] .cmp-step[data-s="4"] {
  color: var(--text);
  border-color: #e2c275;
  background-color: rgba(226, 194, 117, 0.1);
}
.cmp-stage[data-step="4"] .cmp-cap[data-s="4"] {
  opacity: 1;
  transform: none;
}
.cmp-stage[data-step="3"] .cmp-win .cl[data-s="3"] {
  opacity: 1;
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.cmp-stage[data-step="3"] .cmp-step[data-s="3"] {
  color: var(--text);
  border-color: #e2c275;
  background-color: rgba(226, 194, 117, 0.1);
}
.cmp-stage[data-step="3"] .cmp-cap[data-s="3"] {
  opacity: 1;
  transform: none;
}
.cmp-stage[data-step="2"] .cmp-win .cl[data-s="2"] {
  opacity: 1;
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.cmp-stage[data-step="2"] .cmp-step[data-s="2"] {
  color: var(--text);
  border-color: #e2c275;
  background-color: rgba(226, 194, 117, 0.1);
}
.cmp-stage[data-step="2"] .cmp-cap[data-s="2"] {
  opacity: 1;
  transform: none;
}
.cmp-stage[data-step="1"] .cmp-win .cl[data-s="1"] {
  opacity: 1;
  background-color: rgba(226, 194, 117, 0.13);
  box-shadow: inset 3px 0 0 #e2c275;
}
.cmp-stage[data-step="1"] .cmp-step[data-s="1"] {
  color: var(--text);
  border-color: #e2c275;
  background-color: rgba(226, 194, 117, 0.1);
}
.cmp-stage[data-step="1"] .cmp-cap[data-s="1"] {
  opacity: 1;
  transform: none;
}
@media (max-width: 960px) {
  .cmp-stage {
    width: auto;
    margin-left: 0;
  }
  .cmp-wins,
  .cmp-cap {
    grid-template-columns: 1fr;
  }
  .cmp-caps {
    min-height: 6.4em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-win .cl,
  .cmp-step,
  .cmp-cap {
    transition: none;
  }
}

.land-arch {
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
}
.ar-h2 {
  margin: 6px 0 10px;
}
.ar-lead {
  margin: 0 0 26px;
  max-width: 72ch;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.ar-stage {
  width: min(1200px, calc(100vw - 48px));
  margin-left: calc(50% - min(600px, 50vw - 24px));
  display: grid;
  grid-template-columns: 140px 92px 236px 36px 196px 112px minmax(0, 1fr);
  grid-template-rows: 34px auto 60px auto 14px;
  align-items: center;
}
.ar-box {
  grid-row: 1 / 6;
  align-self: center;
  padding: 14px 14px 12px;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.ar-app {
  grid-column: 1;
  grid-row: 2;
}
.ar-adm {
  grid-column: 1;
  grid-row: 4;
  border-color: rgba(195, 166, 224, 0.35);
}
.ar-svc,
.ar-eng {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ar-svc {
  grid-column: 3;
}
.ar-eng {
  grid-column: 5;
  text-align: center;
  justify-content: center;
  border-color: rgba(124, 196, 221, 0.35);
}
.ar-t {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.ar-s {
  margin-top: 6px;
  font-family: var(--prose);
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
}
.ar-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-family: var(--prose);
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
}
.ar-list li {
  position: relative;
  padding-left: 12px;
  margin-top: 3px;
}
.ar-list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--graphite);
}
.ar-win {
  height: 44px;
  margin-bottom: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  display: flex;
  gap: 3px;
  padding: 5px 6px;
  align-items: flex-start;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px);
}
.ar-win i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.ar-win.adm {
  border-color: rgba(195, 166, 224, 0.4);
}
.ar-plane {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10px;
}
.ar-plane.adm {
  margin-top: 10px;
  border-top: 1px dashed rgba(195, 166, 224, 0.4);
}
.ar-plane-h {
  font-size: 11px;
  color: var(--dim);
}
.ar-plane-h b {
  color: #7cc4dd;
  font-weight: 600;
}
.ar-plane.adm .ar-plane-h b {
  color: #c3a6e0;
}
.ar-rpcs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ar-rpcs span {
  padding: 1px 6px;
  border: 1px solid rgba(124, 196, 221, 0.35);
  border-radius: 4px;
  font-size: 10.5px;
  color: #7cc4dd;
}
.ar-rpcs.adm span {
  border-color: rgba(195, 166, 224, 0.35);
  color: #c3a6e0;
}
.ar-turbine {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
}
.ar-casing {
  fill: #0e1a24;
  stroke: rgba(124, 196, 221, 0.55);
  stroke-width: 2;
}
.ar-inner {
  fill: #08121a;
  stroke: rgba(124, 196, 221, 0.25);
  stroke-width: 1;
}
.ar-bolts circle {
  fill: rgba(124, 196, 221, 0.55);
}
.ar-blades path {
  fill: url(#arBlade);
  stroke: #0b1118;
  stroke-width: 0.6;
  opacity: 0.92;
}
.ar-hub {
  fill: #14202c;
  stroke: rgba(124, 196, 221, 0.7);
  stroke-width: 1.5;
}
.ar-cap {
  fill: #e2c275;
}
.ar-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  text-align: center;
}
.ar-c1a {
  grid-column: 2;
  grid-row: 2;
}
.ar-c1b {
  grid-column: 2;
  grid-row: 4;
}
.ar-c2 {
  grid-column: 4;
  grid-row: 1 / 6;
}
.ar-c3a {
  grid-column: 6;
  grid-row: 2;
}
.ar-c3b {
  grid-column: 6;
  grid-row: 4;
}
.ar-c3m {
  display: none;
}
.ar-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: #e2c275;
  letter-spacing: 0.04em;
}
.ar-sub {
  font-family: var(--prose);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--hint);
}
.ar-line {
  position: relative;
  height: 2px;
  background: rgba(124, 196, 221, 0.45);
  border-radius: 1px;
}
.ar-line::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -4px;
  border-left: 7px solid rgba(124, 196, 221, 0.8);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.ar-line.two::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -4px;
  border-right: 7px solid rgba(124, 196, 221, 0.8);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.adm .ar-lbl {
  color: #c3a6e0;
}
.adm .ar-line {
  background: rgba(195, 166, 224, 0.5);
}
.adm .ar-line::after {
  border-left-color: rgba(195, 166, 224, 0.85);
}
.adm .ar-line.two::before {
  border-right-color: rgba(195, 166, 224, 0.85);
}
.ar-frame {
  grid-column: 7;
  grid-row: 1 / 6;
  align-self: stretch;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}
.ar-sto-t {
  grid-column: 7;
  grid-row: 1;
  align-self: end;
  padding: 0 16px 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.ar-seg {
  grid-column: 7;
  margin: 0 14px;
  padding: 10px 12px 12px;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
}
.ar-act {
  grid-row: 2;
  border-color: rgba(226, 194, 117, 0.55);
  box-shadow: 0 0 0 1px rgba(226, 194, 117, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ar-sealed {
  grid-row: 4;
  position: relative;
  box-shadow: 5px 5px 0 -1px #0d151d, 5px 5px 0 0 rgba(255, 255, 255, 0.09), 10px 10px 0 -1px #0c131a, 10px 10px 0 0 rgba(255, 255, 255, 0.06);
  margin-right: 24px;
}
.ar-seg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 12.5px;
}
.ar-seg-h b {
  color: var(--text);
  font-weight: 600;
}
.ar-seg-h code {
  font-size: 11px;
  color: var(--hint);
}
.ar-badge {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  color: #e2c275;
  background: rgba(226, 194, 117, 0.1);
  border: 1px solid rgba(226, 194, 117, 0.45);
}
.ar-file {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 11px;
  color: var(--dim);
}
.ar-file b,
.ar-chips b,
.ar-cols-t b {
  color: var(--text);
  font-weight: 600;
}
.ar-rows {
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 6px);
}
.ar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.ar-chips span {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--hint);
}
.ar-act-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
}
.ar-ram {
  padding: 6px 8px 7px;
  border-radius: 6px;
  text-align: center;
  background: rgba(226, 194, 117, 0.06);
  border: 1px solid rgba(226, 194, 117, 0.3);
}
.ar-ram-h {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e2c275;
}
.ar-btree {
  display: block;
  width: 96px;
  height: 50px;
  margin: 5px auto 4px;
}
.ar-btree rect {
  fill: rgba(226, 194, 117, 0.14);
  stroke: rgba(226, 194, 117, 0.8);
  stroke-width: 1;
}
.ar-bt-sep {
  stroke: rgba(226, 194, 117, 0.8);
  stroke-width: 1;
}
.ar-bt-edge {
  stroke: rgba(226, 194, 117, 0.55);
  stroke-width: 1;
  fill: none;
}
.ar-ram-s {
  font-size: 10.5px;
  color: var(--dim);
}
.ar-seal {
  grid-column: 7;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 40px;
  font-family: var(--prose);
  font-size: 12px;
  color: var(--dim);
}
.ar-seal b {
  color: var(--text);
  font-family: var(--prose);
}
.ar-arrow-d {
  position: relative;
  flex: none;
  width: 2px;
  height: 34px;
  background: rgba(226, 194, 117, 0.55);
}
.ar-arrow-d::after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: -3px;
  border-top: 7px solid rgba(226, 194, 117, 0.85);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.ar-cols {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.ar-cols-l {
  display: flex;
  gap: 4px;
  flex: none;
}
.ar-cols-l i {
  width: 9px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(124, 196, 221, 0.5), rgba(124, 196, 221, 0.18));
}
.ar-cols-t {
  font-size: 11px;
  line-height: 1.4;
  color: var(--dim);
}
@media (max-width: 1040px) {
  .ar-stage {
    width: auto;
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .ar-svc,
  .ar-c2,
  .ar-eng,
  .ar-c3m,
  .ar-frame,
  .ar-sto-t,
  .ar-seg,
  .ar-seal {
    grid-column: 1 / 3;
  }
  .ar-app {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }
  .ar-adm {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }
  .ar-c1a {
    grid-column: 1;
    grid-row: 2;
  }
  .ar-c1b {
    grid-column: 2;
    grid-row: 2;
  }
  .ar-svc {
    grid-row: 3;
  }
  .ar-c2 {
    grid-row: 4;
  }
  .ar-eng {
    grid-row: 5;
  }
  .ar-c3a,
  .ar-c3b {
    display: none;
  }
  .ar-c3m {
    display: flex;
    grid-row: 6;
  }
  .ar-sto-t {
    grid-row: 7;
    padding-top: 12px;
  }
  .ar-act {
    grid-row: 8;
  }
  .ar-seal {
    grid-row: 9;
    padding: 10px 16px 10px 40px;
  }
  .ar-sealed {
    grid-row: 10;
    margin-bottom: 26px;
  }
  .ar-frame {
    grid-row: 7 / 11;
  }
  .ar-svc,
  .ar-eng {
    max-width: 440px;
    width: 100%;
    justify-self: center;
  }
  .ar-link {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 64px;
  }
  .ar-c1a,
  .ar-c1b {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 0;
  }
  .ar-line {
    width: 2px;
    height: 40px;
    order: 0;
  }
  .ar-lbl {
    order: -1;
  }
  .ar-line::after,
  .adm .ar-line::after {
    right: auto;
    left: -4px;
    top: auto;
    bottom: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(124, 196, 221, 0.8);
    border-bottom: 0;
  }
  .ar-line.two::before,
  .adm .ar-line.two::before {
    left: -4px;
    top: -3px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 7px solid rgba(124, 196, 221, 0.8);
    border-top: 0;
  }
  .adm .ar-line::after {
    border-top-color: rgba(195, 166, 224, 0.85);
  }
  .adm .ar-line.two::before {
    border-bottom-color: rgba(195, 166, 224, 0.85);
  }
  .ar-sub {
    text-align: left;
    max-width: 16em;
  }
  .ar-act-body {
    grid-template-columns: 1fr;
  }
}

.land-fold {
  padding: 36px 0 64px;
  border-top: 1px solid var(--line);
}
.fold-h2 {
  margin: 6px 0 10px;
}
.fold-lead {
  margin: 0 0 22px;
  max-width: 72ch;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.fold-stage {
  width: min(1200px, calc(100vw - 48px));
  margin-left: calc(50% - min(600px, 50vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 14px;
  align-items: stretch;
}
.fold-win {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.fold-pre {
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.62;
  overflow-x: auto;
  white-space: pre;
}
.fold-cols {
  margin-top: auto;
  padding: 12px 14px 4px;
  border-top: 1px solid var(--line);
}
.fold-cols-h {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 8px;
}
.fold-cols-h b {
  color: var(--text);
  font-weight: 600;
}
.fc {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 62px;
  gap: 10px;
  align-items: center;
  height: 19px;
  font-size: 11px;
  color: var(--hint);
}
.fc > span:first-child {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-t {
  height: 7px;
  border-radius: 2px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 14px, rgba(255, 255, 255, 0.025) 14px 16px);
}
.fc-t i {
  display: block;
  height: 100%;
  width: 0;
  background: #e2c275;
}
.fc em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--hint);
  opacity: 0.7;
}
.fc.read {
  color: var(--text);
}
.fc.read em {
  color: #e2c275;
  opacity: 1;
}
.fold-stage[data-phase="done"] .fc.read .fc-t i {
  background: rgba(124, 196, 221, 0.6);
  transition: background-color 0.4s ease;
}
.fold-again {
  align-self: flex-start;
  margin: 8px 8px 8px 8px;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.fold-again:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}
.fold-stages {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fs {
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  color: var(--hint);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.fs.past {
  color: var(--dim);
}
.fs.on {
  color: #e2c275;
  border-color: rgba(226, 194, 117, 0.6);
  background: rgba(226, 194, 117, 0.1);
}
.fs[data-stage="done"].on {
  color: var(--ok);
  border-color: rgba(143, 201, 164, 0.6);
  background: rgba(143, 201, 164, 0.1);
}
.fold-figs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
  row-gap: 3px;
  padding: 12px 14px 10px;
  font-size: 13px;
}
.fold-figs span {
  color: var(--dim);
}
.fold-figs b {
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fold-bar {
  height: 3px;
  margin: 0 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.fold-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #e2c275;
}
.fold-stage[data-phase="done"] .fold-bar i {
  background: var(--accent);
  transition: background-color 0.4s ease;
}
.fold-segs {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  gap: 3px;
  padding: 12px 14px;
}
.fold-segs i {
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.12s ease;
}
.fold-segs i.on {
  background: rgba(226, 194, 117, 0.7);
}
.fold-stage[data-phase="done"] .fold-segs i.on {
  background: rgba(124, 196, 221, 0.45);
  transition: background-color 0.4s ease;
}
.fold-out {
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.fo-head,
.fo-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 250px;
  gap: 12px;
  padding: 0 14px;
  align-items: center;
}
.fo-head {
  height: 30px;
  color: var(--dim);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.fo-row {
  height: 27px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0;
  transform: translateY(3px);
}
.fo-name {
  color: #e8cf8e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fo-v {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.fo-v b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #9fd4a9;
}
.fo-bar {
  height: 6px;
}
.fo-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 1px;
  background: rgba(159, 212, 169, 0.4);
}
.fo-k {
  color: var(--accent);
}
.fo-foot {
  padding: 8px 14px 10px;
  color: var(--dim);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fold-stage[data-phase="done"] .fo-row {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.fold-stage[data-phase="done"] .fo-foot {
  opacity: 1;
  transition-delay: 0.75s;
}
@media (max-width: 960px) {
  .fold-stage {
    width: auto;
    margin-left: 0;
    grid-template-columns: 1fr;
  }
  .fo-head,
  .fo-row {
    grid-template-columns: 44px minmax(0, 1fr) 150px;
    gap: 8px;
  }
  .fo-v {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 6px;
  }
  .fc {
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 52px;
  }
  .fold-x .dc-title {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fo-row,
  .fo-foot,
  .fc-t i,
  .fs,
  .fold-segs i {
    transition: none !important;
  }
}

.land-console2 {
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
}
.cn-h2 {
  margin: 6px 0 10px;
}
.cn-lead {
  margin: 0 0 24px;
  max-width: 72ch;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.cn-stage {
  width: min(1200px, calc(100vw - 48px));
  margin-left: calc(50% - min(600px, 50vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 22px;
  align-items: start;
}
.cn-win {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
.cn-side {
  padding: 14px 10px;
  background: var(--deep);
  border-right: 1px solid var(--line);
}
.cn-brand {
  margin: 0 0 16px 6px;
  font-size: 15px;
  color: var(--text);
}
.cn-brand b {
  color: var(--accent);
  font-weight: 700;
}
.cn-brand i {
  font-style: normal;
  color: var(--graphite);
  font-weight: 700;
}
.cn-nav {
  padding: 5px 8px;
  margin-bottom: 2px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--dim);
}
.cn-nav.on {
  color: var(--text);
  background: rgba(124, 196, 221, 0.1);
  box-shadow: inset 2px 0 0 #7cc4dd;
}
.cn-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  min-width: 0;
}
.cn-thread {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint);
}
.cn-ask {
  align-self: flex-end;
  max-width: 80%;
  min-height: 1.5em;
  padding: 8px 12px;
  border-radius: 10px 10px 2px 10px;
  background: rgba(124, 196, 221, 0.1);
  border: 1px solid rgba(124, 196, 221, 0.25);
  font-family: var(--prose);
  font-size: 13px;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cn-card {
  padding: 10px 12px;
  background: #0b1118;
  border: 1px solid var(--line);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cn-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cn-step {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  color: var(--hint);
  border: 1px solid var(--line);
  opacity: 0.25;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cn-step.on {
  opacity: 1;
  color: var(--dim);
  border-color: var(--line-strong);
}
.cn-step.fin.on {
  color: var(--ok);
  border-color: rgba(143, 201, 164, 0.5);
}
.cn-rql {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--hint);
}
.cn-meta .ok {
  color: var(--ok);
}
.cn-answer .cn-meta {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cn-grid {
  font-size: 12px;
}
.cn-gh,
.cn-gr {
  display: grid;
  grid-template-columns: 1fr 80px;
  padding: 4px 6px;
}
.cn-gh {
  color: var(--dim);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.cn-gr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cn-gr span:first-child {
  color: #e8cf8e;
}
.cn-gr span:last-child {
  color: #9fd4a9;
  font-variant-numeric: tabular-nums;
}
.cn-compose {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}
.cn-switch {
  display: inline-flex;
  padding: 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.cn-switch b {
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
}
.cn-switch b.on {
  color: #0b1a24;
  background: #7cc4dd;
}
.cn-ph {
  flex: 1;
  min-width: 0;
  font-family: var(--prose);
  font-size: 13px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-again {
  padding: 3px 8px;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  color: var(--dim);
  cursor: pointer;
}
.cn-again:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}
.cn-stage:not([data-phase="0"]) .cn-ask {
  opacity: 1;
}
.cn-stage[data-phase="2"] .cn-answer,
.cn-stage[data-phase="3"] .cn-answer,
.cn-stage[data-phase="4"] .cn-answer {
  opacity: 1;
  transform: none;
}
.cn-stage[data-phase="3"] .cn-rql,
.cn-stage[data-phase="4"] .cn-rql {
  opacity: 1;
}
.cn-stage[data-phase="3"] .cn-answer .cn-meta,
.cn-stage[data-phase="4"] .cn-answer .cn-meta {
  opacity: 1;
}
.cn-stage[data-phase="4"] .cn-run {
  opacity: 1;
  transform: none;
}
.cn-stage[data-phase="4"] .cn-gr {
  opacity: 1;
  transition-delay: calc(0.25s + var(--i) * 90ms);
}
.cn-feats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.cn-feat b {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 600;
}
.cn-feat p {
  margin: 0;
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dim);
}
@media (max-width: 960px) {
  .cn-stage {
    width: auto;
    margin-left: 0;
    grid-template-columns: 1fr;
  }
  .cn-win {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cn-side {
    display: none;
  }
  .cn-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .cn-ask,
  .cn-card,
  .cn-step,
  .cn-rql,
  .cn-gr,
  .cn-meta {
    transition: none !important;
  }
}

.docs {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  z-index: 90;
}
.docs-columns {
  flex: 1;
  min-height: 0;
  display: flex;
}
.doc-toc {
  width: 236px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow: auto;
  padding: 10px 0;
}
.doc-toc-h2,
.doc-toc-h3 {
  cursor: pointer;
  padding: 5px 14px;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-toc-h2 {
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-top: 8px;
}
.doc-toc-h2:first-child {
  margin-top: 0;
}
.doc-toc-h3 {
  color: var(--dim);
  padding-left: 26px;
  font-size: 12px;
}
.doc-toc-h2:hover,
.doc-toc-h3:hover {
  background: var(--bg);
  color: var(--accent);
  border-left-color: var(--accent);
}
.doc-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 8px 0 80px;
}
.doc-body {
  max-width: 860px;
  padding: 16px 32px;
  font-size: 13.5px;
  line-height: 1.7;
}
.doc-h2 {
  margin: 36px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}
.doc-h2:first-child {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.doc-h3 {
  margin: 22px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.doc-p {
  margin: 0 0 12px;
  color: var(--dim);
}
.doc-p.lead {
  color: var(--text);
}
.doc-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 2px solid var(--accent);
  color: var(--dim);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  line-height: 1.6;
}
.doc-note b {
  color: var(--accent);
  font-weight: 600;
}
.doc-figure {
  margin: 10px 0 18px;
}
.doc-figure svg {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
.doc-code {
  margin: 8px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}
.doc-code.rql,
.doc-code.lua,
.doc-code.sql {
  max-height: none;
}

:root {
  /* Taken from the mark: cyan on the navy the books are drawn in. */
  /* Reworked 2026-09-12, grounds restored the same day: the warm grey
       grounds were flat beside the mark's navy, so the three grounds are the
       navy, its lighter step and its deeper one; the text and the accents
       stay as the pass left them. The text was white on near-black and the panels
       could not be told apart, which is the wrong way round — the panels get
       the contrast, the text is a warm grey, the accents are pastel. Three
       grounds: the page, the cards and sidebar a step lighter, and the deep
       one under editors and grids. Lines are a translucent white, so they
       sit on any of the three without cutting the screen into cells. */
  --bg: #0d1620;
  --panel: #14202c;
  --deep: #0a121a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #d4dae3;
  --dim: #8b95a5;
  --hint: #5f6978;
  --accent: #7cc4dd;
  --ok: #8fc9a4;
  --bad: #d98a91;
  --warn: #d6b36a;
  /* The `::` in the name: a pencil grey, present and quiet. */
  --graphite: #5c6573;
  /* The proportional face for prose: notes, notices, paragraphs. Code,
       tables and logs stay monospace. */
  --prose: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* One colour per value kind, used by every cell and by the schema page's
       type column — so the schema page reads as the legend for the grids.
       Pastel, like the accents. */
  --int: #8db8e8;
  --float: #8fc9a4;
  --text-v: #d3bb85;
  --timestamp: #b9a3e0;
  --bool: #dc9fb1;
  --bytes: #8e9fb0;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
header .name {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 14px;
}
header .name .b {
  color: var(--accent);
}
header .spacer {
  flex: 1;
}
button {
  font: inherit;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0b1a24;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
button.ghost {
  background: transparent;
  color: var(--dim);
  border-color: var(--line);
}
main {
  flex: 1;
  display: flex;
  min-height: 0;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.left {
  width: 46%;
  border-right: 1px solid var(--line);
}
.right {
  flex: 1;
}
/* Highlighting without a library: a <pre> paints the colours and the
     textarea sits on top with transparent text and a visible caret. The two
     must agree on every metric or the caret drifts from the glyphs. */
.editor {
  position: relative;
  flex: 1;
  min-height: 0;
}
.editor > pre,
.editor > textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px;
  border: 0;
  font: inherit;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: auto;
}
.editor > pre {
  pointer-events: none;
  color: var(--text);
}
.editor > textarea {
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
  outline: 0;
}
/* The text is transparent, so the placeholder needs a colour of its own. */
.editor > textarea::placeholder {
  color: var(--dim);
}
/* The completion list, under the caret. Absolutely placed inside the editor
     so it changes no metric the `<pre>` and the textarea have to agree on. */
.editor > .hint {
  position: absolute;
  z-index: 5;
  min-width: 260px;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  pointer-events: auto;
  /* It arrives rather than appears, which means it cannot be hidden with
       `display: none` — and hidden this way it still has a size, so the
       position it is given on the way in is measured from the real one. */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.editor > .hint.off {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}
.editor > .hint .hint-sig {
  padding: 6px 10px;
  color: var(--dim);
  white-space: pre-wrap;
}
.editor > .hint .hint-sig b {
  color: var(--text);
  font-weight: 600;
}
.editor > .hint .hint-doc {
  padding: 0 10px 6px;
  color: var(--dim);
  font-size: 11px;
}
.editor > .hint .hint-list {
  border-top: 1px solid var(--line);
  max-height: 260px;
  overflow: auto;
  padding: 4px 0;
}
.editor > .hint .hint-sig:first-child + .hint-list,
.editor > .hint .hint-doc + .hint-list {
  border-top: 1px solid var(--line);
}
.editor > .hint .hint-list:first-child {
  border-top: 0;
}
.editor > .hint .hint-row {
  display: flex;
  gap: 12px;
  padding: 2px 10px;
  cursor: pointer;
}
.editor > .hint .hint-row.on {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.editor > .hint .hint-label {
  color: var(--text);
  white-space: nowrap;
}
.editor > .hint .hint-row.column .hint-label {
  color: var(--ok);
}
.editor > .hint .hint-row.table .hint-label,
.editor > .hint .hint-row.view .hint-label {
  color: var(--ok);
}
.editor > .hint .hint-row.enum .hint-label,
.editor > .hint .hint-row.type .hint-label {
  color: var(--accent);
}
.editor > .hint .hint-row.method .hint-label,
.editor > .hint .hint-row.ctor .hint-label {
  font-weight: 600;
}
.editor > .hint .hint-detail {
  color: var(--dim);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.editor > .hint .hint-more {
  padding: 2px 10px;
  color: var(--dim);
  font-size: 11px;
}
/* The same colours wherever query text is shown — the editor, and a saved
     query's definition, which is the same language read rather than typed. */
.editor i,
.rql i {
  font-style: normal;
}
.editor .c,
.rql .c {
  color: var(--dim);
  font-style: italic;
}
/* comment      */
.editor .t,
.rql .t {
  color: var(--accent);
}
/* Query, Op…   */
.editor .m,
.rql .m {
  color: var(--text);
  font-weight: 500;
}
/* .from, .sort */
.editor .s,
.rql .s {
  color: var(--ok);
}
/* "column"     */
.editor .n,
.rql .n {
  color: var(--warn);
}
/* 20, 1.5      */
.editor .k,
.rql .k {
  color: var(--warn);
}
/* vec!, true   */
.editor .x,
.rql .x {
  color: var(--bad);
  text-decoration: underline dotted;
}
.rql {
  color: var(--text);
  max-height: 40%;
  overflow: auto;
}
/* A generator is Lua, not RQL. Same palette so the two do not look like
     different applications, and one class of its own: `g` is `args` and `rql`,
     the two globals a generator is handed, which is half of its documentation.
     `.lua` carries no `.x` -- see `paintLua` for why nothing here is marked
     wrong. */
.lua i {
  font-style: normal;
}
.lua .c {
  color: var(--dim);
  font-style: italic;
}
/* -- comment   */
.lua .s {
  color: var(--ok);
}
/* 'text'       */
.lua .n {
  color: var(--warn);
}
/* 20, 1.5      */
.lua .k {
  color: var(--accent);
}
/* local, if    */
.lua .g {
  color: var(--text);
  font-weight: 600;
}
/* args, rql    */
/* Same cap as `.rql`: a generator is a program and can be forty lines, and
     without this it pushes the call editor and the expansion off the screen. */
.lua {
  color: var(--text);
  max-height: 40%;
  overflow: auto;
}
/* SQL is shown in the documentation only, beside the RQL for the same page.
     The Lua palette, so the two samples read as one document. */
.sql i {
  font-style: normal;
}
.sql .c {
  color: var(--dim);
  font-style: italic;
}
.sql .s {
  color: var(--ok);
}
.sql .n {
  color: var(--warn);
}
.sql .k {
  color: var(--accent);
}
.sql {
  color: var(--text);
}
/* A procedure's text or JSON answer: the grid's area, not the plan's, so it
     scrolls with the result rather than being capped like a definition. */
.body {
  max-height: none;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.status {
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  min-height: 30px;
  white-space: pre-wrap;
  color: var(--dim);
}
.status.bad {
  color: var(--bad);
}
.status.ok {
  color: var(--ok);
}
/* A query that was stopped is neither. Nothing is wrong with it and nothing
     answered it, and colouring it as a failure would say the query was bad. */
.status.warn {
  color: var(--warn);
}
.pane-title {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.live {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--panel);
}
.live .row {
  display: flex;
  gap: 8px;
}
.live .k {
  color: var(--dim);
  width: 128px;
  flex: none;
}
.live .v {
  color: var(--text);
}
.bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.12s linear;
}
pre.plan {
  margin: 0;
  padding: 10px 12px;
  color: var(--dim);
  white-space: pre-wrap;
  border-bottom: 1px solid var(--line);
}
/* A definition and its expansion are worth reading and worth getting out of
     the way: on a generator they are forty lines and the rows are what the page
     is for. So each gets a bar that folds it, and the choice is remembered —
     somebody who folded the program once meant it. */
.foldbar {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: var(--bg);
  color: var(--dim);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.foldbar:hover {
  color: var(--text);
}
.foldbar::before {
  content: "▾ ";
}
.foldbar.folded::before {
  content: "▸ ";
}
pre.plan.folded {
  display: none;
}
.grid {
  flex: 1;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  text-align: left;
  padding: 4px 10px;
  white-space: nowrap;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The grid keeps its rules — they were taken away for a day and missed —
     with a hover on top and 32px of height. */
td {
  border-bottom: 1px solid var(--line);
  height: 32px;
}
tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--dim);
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}
/* A cell wider than its column. Set by the hover below, so the pointer only
     appears where there is something the ellipsis is hiding. */
td.clipped {
  cursor: zoom-in;
}
td.clipped:hover {
  text-decoration: underline dotted var(--dim);
}
/* The sheet a clipped cell opens. Fixed rather than inside the grid, because
     the grid scrolls and this must not. */
.sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
/* `display: flex` above beats the user agent's `[hidden] { display: none }`,
     so the sheet would be open before anything opened it. Said again, here,
     where the class can lose to it. */
.sheet[hidden] {
  display: none;
}
.sheet > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: min(900px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.sheet header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet header b {
  color: var(--accent);
}
.sheet header span {
  color: var(--dim);
  font-size: 12px;
}
.sheet header .grow {
  flex: 1;
}
.sheet button {
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.sheet button:hover {
  color: var(--text);
  border-color: var(--dim);
}
.sheet pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
/* Order matters: these are all one class deep, so the later rule wins. A key
     is an int and must not look like one; a NULL has no kind at all. */
.t-int {
  color: var(--int);
}
.t-float {
  color: var(--float);
}
.t-text {
  color: var(--text-v);
}
.t-timestamp {
  color: var(--timestamp);
}
.t-bool {
  color: var(--bool);
}
.t-bytes {
  color: var(--bytes);
}
td.key {
  color: var(--accent);
  font-weight: 600;
}
td.null {
  color: var(--dim);
  font-style: italic;
}
.feed {
  border-top: 1px solid var(--line);
  max-height: 132px;
  overflow: auto;
  padding: 6px 12px;
  color: var(--dim);
  background: var(--panel);
}
.feed b {
  color: var(--warn);
  font-weight: 600;
}
datalist {
  display: none;
}
/* ---- sidebar and views -------------------------------------------------
     The query page keeps the layout it always had; it is simply one view
     among three now. `.view` is the switch, so nothing inside a hidden page
     lays out, paints or polls. */
nav#side {
  width: 132px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
nav#side button {
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--dim);
  text-align: left;
  padding: 8px 14px;
  border-radius: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}
nav#side button:hover {
  color: var(--text);
}
/* The active page is the text colour, not the accent: the bar says which. */
nav#side button.on {
  color: var(--text);
  border-left-color: var(--accent);
}
.view {
  display: none;
  flex: 1;
  min-width: 0;
}
.view.on {
  display: flex;
}
.scroll {
  flex: 1;
  overflow: auto;
  min-width: 0;
}
/* ---- schema ---- */
.tbl {
  border-bottom: 1px solid var(--line);
}
.tbl > h3 {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--panel);
  position: sticky;
  top: 0;
  color: var(--text);
  font-weight: 500;
}
.tbl > h3 span {
  color: var(--dim);
  font-weight: 400;
  margin-left: 8px;
}
.flag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  border: 1px solid var(--line);
  color: var(--dim);
}
.flag.i {
  color: var(--accent);
  border-color: var(--accent);
}
.flag.c {
  color: var(--ok);
  border-color: var(--ok);
}
.comp {
  padding: 6px 12px;
  color: var(--dim);
}
.comp b {
  color: var(--text);
  font-weight: 600;
}
/* ---- tables ---- */
/* The list is part of the sidebar rather than of the pane it drives: picking
     a table is navigation, and the pane to its right is what was picked. */
.tablist {
  width: 236px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.tablist .find {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.tablist input {
  width: 100%;
  font: inherit;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  outline: 0;
}
.tablist input:focus {
  border-color: var(--accent);
}
.tablist .names {
  flex: 1;
  overflow: auto;
}
.tablist .name {
  display: flex;
  gap: 8px;
  align-items: baseline;
  cursor: pointer;
  padding: 4px 12px;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tablist .name span {
  margin-left: auto;
  color: var(--dim);
  font-size: 12px;
  flex: none;
  padding-left: 8px;
}
.tablist .name:hover {
  background: var(--bg);
}
.tablist .name.on {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--bg);
}
.tablist .name.off {
  color: var(--dim);
  opacity: 0.5;
  cursor: default;
}
.tablist .name.off:hover {
  background: transparent;
}
.editor.small {
  flex: none;
  height: 120px;
  border-bottom: 1px solid var(--line);
}
.pagebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.pagebar button {
  padding: 4px 12px;
  font-size: 12px;
}
.pagebar .range {
  color: var(--dim);
}
.pagebar .spacer {
  flex: 1;
}
/* ---- monitor ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  padding: 10px;
  align-content: start;
}
.card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.card > h4 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card > h4 .sp {
  flex: 1;
}
.badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge.ok {
  background: #14342c;
  color: var(--ok);
}
.badge.degraded {
  background: #3a2f14;
  color: var(--warn);
}
.badge.write_frozen {
  background: #3a1c1c;
  color: var(--bad);
}
.badge.read_only {
  background: #1b2734;
  color: var(--dim);
}
/* An application that is refusing, which is the one state worth the red. */
.badge.bad {
  background: #3a1c1c;
  color: var(--bad);
}
.kv {
  display: flex;
  gap: 8px;
  padding: 3px 10px;
}
.kv .k {
  color: var(--dim);
  flex: 1;
}
.kv .v {
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.kv .v.hi {
  color: var(--accent);
  font-weight: 600;
}
.kv .v.bad {
  color: var(--bad);
  font-weight: 600;
}
.kv .v.warn {
  color: var(--warn);
  font-weight: 600;
}
.sect {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.sect > .t {
  padding: 3px 10px;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.note {
  padding: 6px 12px;
  color: var(--dim);
}
/* ---- monitor: horizontal bands, each one foldable ----
     A band is a full-width strip with a header you can click. Folded, the grid
     is not rendered at all rather than hidden, so a hundred table cards cost
     nothing while nobody is looking at them. */
.band {
  border-top: 1px solid var(--line);
}
.band:first-child {
  border-top: 0;
}
.bandhead {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  background: var(--panel);
  width: 100%;
  border: 0;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bandhead:hover {
  background: var(--line);
}
.bandhead .caret {
  color: var(--dim);
  width: 10px;
  display: inline-block;
}
.bandhead .sp {
  flex: 1;
}
.bandhead .count {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0;
}
.band.folded .bandhead {
  color: var(--dim);
}
html,
body,
#app {
  height: 100%;
}
#app_root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.console {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: clip;
}
header .conn,
header .who {
  color: var(--dim);
}
header .who {
  margin-left: 12px;
}
.gone {
  display: none !important;
}
.tablist .name span.nm {
  margin-left: 0;
  padding-left: 0;
  color: inherit;
  font-size: inherit;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
nav#side button.foot {
  margin-top: auto;
}
button.off {
  opacity: 0.5;
  cursor: default;
}
.pane-title.empty {
  visibility: hidden;
}
.signin {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
}
.signin-card {
  width: min(380px, 90vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signin-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.signin-sub {
  color: var(--dim);
  margin-bottom: 8px;
}
.signin-input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  outline: 0;
  width: 100%;
}
.signin-input:focus {
  border-color: var(--accent);
}
.signin-btn {
  font: inherit;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0b1a24;
  cursor: pointer;
  margin-top: 4px;
}
.signin-btn--busy {
  opacity: 0.6;
  cursor: default;
}
.signin-error {
  color: var(--bad);
  min-height: 18px;
  white-space: pre-wrap;
}
.signin-error--none {
  visibility: hidden;
}
.signin-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.signin-back:hover {
  color: var(--text);
}
.acc-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.acc-tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
}
.acc-tab--on {
  color: var(--accent);
  border-color: var(--accent);
}
.acc-error {
  padding: 8px 12px;
  color: var(--bad);
  white-space: pre-wrap;
}
.acc-pane {
  padding: 0 12px 24px;
}
.acc-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.acc-input {
  font: inherit;
  padding: 6px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  outline: 0;
  min-width: 220px;
}
.acc-input:focus {
  border-color: var(--accent);
}
.acc-select {
  font: inherit;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  outline: 0;
}
.acc-add {
  font: inherit;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0b1a24;
  cursor: pointer;
}
.acc-add--busy {
  opacity: 0.6;
  cursor: default;
}
.acc-btn {
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.acc-btn:hover {
  color: var(--text);
  border-color: var(--dim);
}
.acc-btn--off {
  opacity: 0.4;
  cursor: default;
}
.acc-table {
  margin-top: 12px;
}
.acc-table td.dim,
.acc-table th {
  color: var(--dim);
}
.acc-table td.ok {
  color: var(--ok);
}
.acc-table td.bad {
  color: var(--bad);
  white-space: normal;
}
.acc-tab--off,
.acc-btn--off {
  opacity: 0.4;
  cursor: default;
}
.acc-btn--done {
  color: var(--ok);
  border-color: var(--ok);
}
.acc-note {
  color: var(--dim);
  align-self: center;
  margin-left: 8px;
}
.app-fault {
  padding: 3px 10px;
  color: var(--bad);
  white-space: pre-wrap;
}
.app-tokens {
  padding: 2px 10px 6px;
}
.app-token {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
}
.app-hash {
  color: var(--dim);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-actions {
  padding: 6px 10px 10px;
}
.mint {
  margin: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  padding: 12px 14px;
}
.mint-head {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.mint-token {
  font-size: 15px;
  color: var(--text);
  word-break: break-all;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  user-select: all;
}
.mint-foot {
  color: var(--dim);
  font-size: 11px;
  margin-top: 8px;
}
.mint-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.acc-btn--thin {
  padding: 1px 8px;
  font-size: 11px;
  margin-left: 8px;
}
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pager-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.pager-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pager-btn.off {
  opacity: 0.35;
  cursor: default;
}
.pager-btn.off:hover {
  border-color: var(--line);
  color: var(--text);
}
.pager-range {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  min-width: 140px;
}
tr.pending td {
  opacity: 0.75;
  border-bottom: 1px dashed var(--line);
}
.shape {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.shape.gone {
  display: none;
}
/*
 * One row of controls, all the same height.
 *
 * They were not: an input with 4px of padding, a native select sizing itself,
 * and a `.acc-btn` with 3px sat on three different baselines, and the name box
 * took the whole width of a modal for a value that is ten characters long. A
 * single control height and a name box that stops at a readable width.
 */
.shape-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.shape-form input,
.shape-form select,
.shape-stage {
  font: inherit;
  font-size: 13px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.shape-form input {
  flex: 1;
  min-width: 140px;
  /* A column name is ten characters. A box the width of the modal invites a
     sentence and makes the two controls beside it look like an afterthought. */
  max-width: 300px;
}
.shape-form input:focus,
.shape-form select:focus {
  outline: none;
  border-color: var(--accent);
}
.shape-form select {
  width: 118px;
  cursor: pointer;
}
.shape-stage {
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
}
.shape-stage:hover {
  color: var(--text);
  border-color: var(--dim);
}
/*
 * What has been staged, in the modal that is covering the card.
 *
 * The staged rows were drawn on the table underneath and nowhere else, so
 * pressing `stage` three times moved one digit in a button and nothing more.
 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.chips.gone {
  display: none;
}
.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px dashed color-mix(in oklab, var(--accent) 50%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.chip b {
  font-weight: 600;
}
.chip-x {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.chip-x:hover {
  color: var(--bad);
  background: color-mix(in oklab, var(--bad) 15%, transparent);
}
.shape-plan {
  margin-top: 12px;
  padding: 7px 11px;
  border-radius: 0 4px 4px 0;
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 12px;
}
.shape-plan.gone {
  display: none;
}
/* The decision, then the caveat under it. Side by side, the caveat was a
   two-line paragraph competing with the button it qualifies. */
.shape-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.shape-actions .acc-add {
  height: 32px;
  padding: 0 18px;
}
.shape-actions .acc-note {
  margin-left: 0;
  font-size: 11px;
  line-height: 1.5;
}
.app-label {
  min-width: 90px;
  color: var(--text);
}
.app-label.none {
  color: var(--dim);
  font-style: italic;
}
.app-actions input {
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  margin-right: 8px;
  min-width: 140px;
}
.fold {
  border-bottom: 1px solid var(--line);
}
.fold-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg);
  cursor: pointer;
  user-select: none;
}
.fold-strip:hover {
  color: var(--text);
}
.fold.empty .fold-strip {
  cursor: default;
  opacity: 0.55;
}
.fold-caret {
  width: 10px;
  flex: none;
}
.fold-title {
  flex: none;
}
.fold-note {
  color: var(--dim);
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.fold-note.gone {
  display: none;
}
.fold-body.shut {
  display: none;
}
.fold-body {
  max-height: 30vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.fold {
  flex: none;
}
.fold-body pre.plan {
  border-bottom: 0;
}
.rowf-wrap {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.rowf-wrap.on {
  display: flex;
}
.rowf-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: min(560px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.rowf-panel header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.rowf-panel header b {
  color: var(--accent);
}
.rowf-table {
  color: var(--dim);
  margin-right: auto;
}
.rowf-fields {
  overflow: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rowf-field {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rowf-name {
  width: 150px;
  flex: none;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.rowf-kind {
  color: var(--dim);
  font-size: 11px;
}
.rowf-field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.rowf-field input::placeholder {
  color: var(--dim);
  opacity: 0.6;
}
.rowf-error {
  padding: 0 12px 8px;
  color: var(--bad);
}
.rowf-error.gone {
  display: none;
}
.rowf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.rowf-del {
  color: var(--bad);
  border-color: var(--bad);
}
.rowf-actions .acc-note {
  font-size: 11px;
  margin-left: auto;
  text-align: right;
}
th.rowedit,
td.rowedit {
  width: 1%;
  padding: 2px 6px;
}
.rowedit-btn {
  font: inherit;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.rowedit-btn:hover {
  color: var(--text);
  border-color: var(--dim);
}
.newtbl {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.newtbl.gone {
  display: none;
}
.newtbl-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.newtbl-head input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
}
.newtbl-cols {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.newtbl-col {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
}
.newtbl-col > span:first-child {
  min-width: 150px;
}
/* ---- tasks ------------------------------------------------------------- */
/*
 * Two lists on one page, and they are styled the same on purpose: the same task
 * appears in both for a moment, and a reader following it across should not
 * have to re-learn the shape.
 *
 * A grid rather than a table because the last column is an error that is
 * usually absent, and a table cell that is empty nine times out of ten costs a
 * column of width for nothing. Here it spans the row and takes no height when
 * it is not there.
 */
.pane-sub {
  padding: 14px 0 6px;
  color: var(--dim);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
/*
 * A page's body under its title.
 *
 * One padded column with one gap, because the alternative is what this was: a
 * margin on the bar, a different one on the list, a third on the block below
 * it, and a distance between two sections that depended on which two. Every
 * piece inside is spaced by the column and carries no vertical margin of its
 * own.
 */
.page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px 28px;
}
.page > .pane-sub {
  /* The heading belongs to what follows it, so it sits close to that and takes
     its distance from what came before out of the column's gap. */
  padding: 0;
  margin-bottom: -6px;
}
.page > .acc-error.gone,
.page > .acc-note.gone {
  display: none;
}
/* A form inside the column takes its spacing from the column and keeps only the
   rule that separates it from what is above. */
.page > .acc-form {
  padding: 12px 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
/*
 * The two questions, and the page of whichever is being asked.
 *
 * *What is happening* and *what happened* are asked at different times and want
 * different orders, so they are two lists behind two buttons rather than one
 * list with a filter — and the count is on the button, because the number of
 * things waiting is most of what somebody came to find out.
 */
.tk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tk-bar .spacer {
  flex: 1;
}
.tk-bar .range {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  min-width: 96px;
  text-align: right;
}
.tk-tab {
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.tk-tab:hover {
  color: var(--text);
}
.tk-tab--on {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.tk-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.tk {
  display: grid;
  grid-template-columns: 84px 84px 150px 1fr 150px 80px 80px 56px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--bg);
}
.tk-id {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.tk-state {
  text-transform: lowercase;
}
.tk-kind {
  color: var(--dim);
}
.tk-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-done,
.tk-took,
.tk-by {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* The state is the one thing worth colour, and only where it is not the
 * ordinary outcome: `done` is what is supposed to happen. */
.tk--running .tk-state,
.tk--stopping .tk-state {
  color: var(--accent);
}
.tk--failed .tk-state {
  color: var(--bad);
}
.tk--cancelled .tk-state,
.tk--pending .tk-state {
  color: var(--dim);
}
/* Spans the row and disappears with it, so an absent error costs no layout. */
.tk-err {
  grid-column: 1 / -1;
  color: var(--bad);
  white-space: pre-wrap;
}
.acc-note.warn {
  color: var(--bad);
}
/* ---- the schema as cards, and the wires between them -------------------- */
/*
 * A card is narrower than the column it sits in, and the space on the right is
 * not margin: it is where the wires run. Two edges between the same pair of
 * neighbours take different lanes, so neither is hidden under the other.
 */
.cardcol {
  position: relative;
  padding: 0 0 40px;
}
.cardcol > .tbl {
  /*
   * Half the column, and the slack inside it goes to the **last** cell rather
   * than being dealt out between the three.
   *
   * A card stretched to the whole column put three columns of whitespace
   * between a name and its type, and the eye had to cross it on every row. One
   * shrunk to its content was the other extreme and read as cluttered. Half,
   * with the name, the type and the flags packed against the left in the order
   * they are read, is the shape that survived both.
   *
   * The other half of the width is the gutter, and that is not spare: it is
   * where the wires run, and a row's right edge sits at the card's, which is
   * where a wire leaves from.
   */
  width: 50%;
  min-width: 420px;
  max-width: calc(100% - 140px);
  margin: 12px 12px 0;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  /*
   * **Not** `overflow: hidden`. That is the usual way to round a header's
   * corners against a card, and it also clips anything a child wants to show
   * outside — which is every tooltip on the segment strip. The header rounds
   * its own two corners below instead.
   */
  overflow: visible;
}
.cardcol > .tbl > h3 {
  /* Not sticky here. A sticky header inside a card that is itself scrolling
   * past would sit over the card below it, and the wire ends would point at a
   * row the header is covering. */
  position: static;
  border-bottom: 1px solid var(--line);
  /* Its own corners, since the card no longer clips them. */
  border-radius: 7px 7px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cardcol > .tbl > h3 span {
  margin-left: 8px;
}
.cardcol > .tbl > h3 > button {
  margin-left: auto;
}
.cardcol > .tbl table {
  /*
   * Fills the card, but the slack all goes to the **last** cell — see below.
   * So the name, the type and the flags stay packed against the left in the
   * order they are read, and the breathing room trails after them instead of
   * being dealt out between them.
   *
   * That is also what puts a row's right edge at the card's, which is where a
   * wire leaves from: an anchor at the end of a shrink-wrapped table would
   * start the line somewhere in the middle of the card.
   */
  width: 100%;
  border-collapse: collapse;
}
.cardcol > .tbl td {
  padding: 3px 0;
  vertical-align: baseline;
  white-space: nowrap;
}
/* The gaps, given to the cells rather than to the table: a name is followed by
 * its type and the type by its flags, and after the flags the card ends. */
.cardcol > .tbl td:first-child {
  padding-left: 12px;
  padding-right: 18px;
}
.cardcol > .tbl td:nth-child(2) {
  padding-right: 14px;
}
.cardcol > .tbl td:last-child {
  /* Takes every spare pixel, so the three columns before it are as wide as
   * their content and no wider. */
  width: 100%;
  padding-right: 12px;
}
/* A field a wire lands on. Marked so the connection is legible when the other
 * end has been scrolled away from. */
.cardcol > .tbl tr.linked td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--accent);
}
.wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.wires svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}
.wires .wire {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.55;
}
.wires .wire-end {
  fill: var(--accent);
  opacity: 0.9;
}
.wires .wire-end--to {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.5;
}
/* ---- the editor, as a form over the page -------------------------------- */
/*
 * Always in the tree and hidden when shut, like every other pane here: a node
 * that comes and goes is a node whose old copy the reconciler has to be trusted
 * to remove on every render.
 */
.mdl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  box-sizing: border-box;
  outline: 0;
}
.mdl-overlay.on {
  display: flex;
}
.mdl {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  padding: 16px 18px 18px;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  animation: mdl-in 0.14s ease;
}
.mdl--wide {
  max-width: 720px;
}
@keyframes mdl-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mdl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mdl-head b {
  color: var(--accent);
}
.mdl-head > button {
  margin-left: auto;
}
/* The row of decisions at the bottom of a dialog. `seal` first, because it is
   the one somebody came here to press; `cancel` beside it rather than pushed to
   the far corner, where a confirmation turns into a hunt. */
.mdl-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.mdl-sub {
  padding: 14px 0 6px;
  color: var(--dim);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
/* The modal owns the form now, so it is never hidden by its own class — and it
   drops the card the form draws for itself outside one. A panel inside a panel,
   inset by its own border, is what made this section look boxed in. */
.mdl .shape,
.mdl .shape.gone {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.rel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.rel-row > button {
  margin-left: auto;
}
.rel-arrow {
  color: var(--dim);
}
.rel-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
.rel-form.gone {
  display: none;
}
.rel-form .acc-input {
  min-width: 130px;
}
/* ---- what a table weighs ------------------------------------------------ */
/*
 * A line and a strip, under the card's header and above its columns. The line
 * says how much; the strip says where the holes are, which is the question
 * compaction answers and the one a total cannot.
 */
.weigh {
  padding: 5px 12px 7px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 11px;
}
.weigh-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.weigh.gone {
  display: none;
}
.weigh.bad {
  color: var(--bad);
}
/*
 * One tick per segment, coloured by what is left alive in it: cyan whole, red
 * empty, and the mix between them the fraction.
 *
 * It was a height first, and the height was worst for the case it exists for —
 * the segments worth pointing at are the nearly-dead ones, and those were the
 * two-pixel stubs nobody could hit. Every tick is now the same size and big
 * enough to hover, which is what the numbers behind it are for.
 *
 * It wraps, because a table with two hundred segments is a real thing and a
 * strip that overflowed would hide exactly the tail somebody is looking for.
 */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 6px;
}
.strip.gone {
  display: none;
}
.strip .tick {
  position: relative;
  display: block;
  width: 12px;
  height: 16px;
  border-radius: 2px;
  opacity: 0.85;
  cursor: pointer;
}
.strip .tick:hover {
  opacity: 1;
  outline: 1px solid var(--text);
}
/*
 * The tooltip, and it is ours rather than the browser's.
 *
 * `title` waits about a second, arrives in the operating system's grey, and
 * cannot be read while a pointer sweeps a row of forty ticks — which is exactly
 * how somebody reads this strip. A `::after` on the hovered tick appears at
 * once, in the console's colours, and needs no state and no re-render.
 *
 * Below the tick rather than above: the strip sits just under the card's header
 * and a box above it would come up over the header's own text.
 *
 * And **left-aligned to the tick**, not centred on it. Centred, the tooltip of
 * the first tick in a row reached left past the card and was cut off — by
 * `.scroll`, which has `overflow: auto`, and an ancestor that clips does so
 * whatever the `z-index` says. Growing rightwards instead puts the leftmost
 * one wholly inside the card and the rightmost one out into the wire gutter,
 * which is empty and nowhere near the edge of the screen.
 */
.strip .tick::after {
  content: attr(data-tip);
  /* Real newlines live in the attribute — `attr()` has no escape for one. */
  white-space: pre;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 5;
  display: none;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}
.strip .tick:hover::after {
  display: block;
}
.weigh-holed {
  color: var(--bad);
  flex: none;
  /* Beside the last brick rather than at the far right: it counts them. */
  align-self: center;
  margin-left: 8px;
}
.weigh-holed.gone {
  display: none;
}
/* ---- long operations, offered where the table is ------------------------ */
/*
 * The same row shape as a relation, because they are the same kind of thing on
 * this page: a line about one column, with what can be done to it on the right.
 */
.tksec {
  margin-top: 4px;
}
/*
 * The offer, as a table rather than a list of buttons.
 *
 * A row of `pack` / `index` buttons said what could be done and nothing about
 * what is already true, so the answer to *is this column indexed* was the
 * absence of a button — read as *nothing here* by everyone who was not told.
 * Four columns instead, and every cell is filled: what it has, what is being
 * built, what can be asked for, and what does not apply.
 */
.tkgrid-wrap {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.tkgrid {
  display: grid;
  grid-template-columns: 1fr 110px 118px 118px;
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
  border-top: 1px solid var(--line);
}
.tkgrid:first-child {
  border-top: none;
}
.tkgrid--head {
  color: var(--dim);
  background: var(--panel);
  font-size: 12px;
}
.tkgrid--head span {
  text-align: left;
}
.tkgrid b {
  font-weight: 600;
}
/* One cell of the two that can be acted on. All four states are the same box,
   so a column of them lines up whatever each row happens to be. */
.tkcell {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.tkcell--has {
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 45%, transparent);
  background: color-mix(in oklab, var(--ok) 12%, transparent);
}
.tkcell--busy {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.tkcell--na {
  color: var(--dim);
  opacity: 0.5;
}
.tkcell--go {
  color: var(--dim);
  border-color: var(--line);
  background: transparent;
  cursor: pointer;
}
.tkcell--go:hover {
  color: var(--text);
  border-color: var(--dim);
}
/* What is already running against this table, above the offer. */
.tkrun-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.tkrun-list.gone {
  display: none;
}
.tkrun {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  border-radius: 5px;
}
.tkrun-state {
  color: var(--accent);
}
/*
 * An index the schema declares that the segments do not all carry.
 *
 * Red on the flag itself, not a note beside it: the flag is what somebody reads
 * when they ask *is this indexed*, and the answer there has to be the one the
 * planner will act on. A quiet `indexed` while a query scans is the exact
 * mistake this marking exists to prevent.
 */
.flag.i.partial {
  color: var(--bad);
  border-color: var(--bad);
  position: relative;
  cursor: help;
}
.flag.i.partial::after {
  content: attr(data-tip);
  white-space: pre;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: none;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}
.flag.i.partial:hover::after {
  display: block;
}
/*
 * A packed column the fast path does not cover everywhere.
 *
 * Dimmed rather than reddened, and the difference is the point: a segment with
 * no `.col` is read the ordinary way, which is correct and only slower, where a
 * segment with no `.idx` makes the planner give the index up. One is a fact
 * about speed; the other is a promise the schema is not keeping.
 */
.flag.c.part {
  color: var(--dim);
  border-color: var(--line);
  position: relative;
  cursor: help;
}
.flag.c.part::after {
  content: attr(data-tip);
  white-space: pre;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: none;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}
.flag.c.part:hover::after {
  display: block;
}
/*
 * A segment waiting in `incoming/`, not yet adopted.
 *
 * Grey, and outlined rather than filled: it is a segment of this table in every
 * sense but the one that counts — the manifest does not name it, so no reader
 * can see it and none of the numbers beside the strip include it. Putting it on
 * the live/dead colour scale would be claiming a place it does not have.
 *
 * It is the one brick that is clickable, because it is the one with something
 * left to decide.
 */
.strip .tick--waiting {
  background: transparent;
  border: 1px dashed var(--dim);
  cursor: pointer;
}
.strip .tick--waiting:hover {
  border-color: var(--accent);
  outline: none;
}
.strip .tick--waiting.tick--bad {
  border-color: var(--bad);
  border-style: solid;
  cursor: not-allowed;
}
/*
 * The segment still being written.
 *
 * Hatched accent rather than white: white is the brightest thing on this page
 * and in a row of forty bricks would read as *the important one*, which it is
 * not — it is the same material, unfinished. It is also off the live/dead
 * colour scale entirely, because its row count is stamped at seal and no file
 * holds it before then: there is no fraction to colour it by.
 *
 * The stripes are what says *in progress* without a legend.
 */
.strip .tick--active {
  background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 5px);
  border: 1px solid var(--accent);
  opacity: 0.9;
  cursor: pointer;
}
.strip .tick--active:hover {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}
.strip .tick--active.tick--busy {
  opacity: 0.4;
  cursor: progress;
}
/* ---- the query log ---------------------------------------------------------
 *
 * Three panes that narrow: which application, which shape inside it, then the
 * lines. The first is the question anybody arrives with, so it is the one with
 * a bar — and the bar is the share of the **summed milliseconds**, not of the
 * count, because a thousand cheap queries and one expensive one are different
 * facts and only one of them is worth looking at.
 */
.lg-apps,
.lg-shapes,
.lg-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.lg-app {
  display: grid;
  grid-template-columns: 150px 1fr 110px 80px 90px 170px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg);
  cursor: pointer;
}
.lg-app:hover {
  background: var(--panel);
}
.lg-app--on {
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
}
.lg-app b {
  color: var(--accent);
}
.lg-bar {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--line) 70%, transparent);
  overflow: hidden;
}
.lg-bar-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.75;
}
.lg-n {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.lg-shape {
  display: grid;
  grid-template-columns: 1fr 150px 80px 80px;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg);
  cursor: pointer;
}
.lg-shape:hover {
  background: var(--panel);
}
.lg-shape--on {
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
}
/* The shape, and on a line the query — one line of it, however long it is.
   A log that reflows to four lines per row is a log nobody scans. */
.lg-code {
  color: var(--dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-line {
  display: grid;
  grid-template-columns: 130px 100px 150px 70px 190px 210px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg);
}
.lg-line--bad .lg-ms,
.lg-line--bad .lg-app-cell {
  color: var(--bad);
}
.lg-at,
.lg-tbl,
.lg-ms,
.lg-path,
.lg-rows {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-app-cell {
  color: var(--accent);
}
/* The error spans the row under it rather than squeezing into a cell: it is a
   sentence, and a sentence in a 200px column is three words and an ellipsis. */
.lg-err {
  grid-column: 1 / -1;
  color: var(--bad);
  font-size: 12px;
  padding-top: 2px;
}
.lg-err.gone {
  display: none;
}
/* ---- who owns what ---------------------------------------------------------
 *
 * Under the accounts table rather than inside a row: a row that grows a form is
 * a table whose columns move, and this list is read beside the other accounts.
 */
.grants {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.grants.gone {
  display: none;
}
.grant-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 5px 10px;
  background: var(--bg);
}
.pg-form .newtbl-head {
  flex-wrap: wrap;
}
.pg-form .newtbl-head input {
  min-width: 180px;
}
.pg-form .newtbl-head input:nth-child(2) {
  flex: 2;
  min-width: 320px;
}
.pg-dsn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.pg-card.on {
  border-color: var(--accent);
}
.pg-actions {
  flex-wrap: wrap;
}
.pg-plan,
.pg-reports {
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
}
.pg-tables {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 12px 16px;
}
.pg-table {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.pg-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pg-table-name {
  font-weight: 600;
}
.pg-table-sum {
  color: var(--dim);
  font-size: 12px;
}
.pg-table-why {
  color: var(--bad);
  font-size: 12px;
  flex-basis: 100%;
}
.pg-cols {
  padding: 6px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2px 16px;
  font-size: 12px;
}
.pg-col {
  display: flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}
.pg-col-name {
  font-weight: 600;
  min-width: 140px;
}
.pg-col-from {
  color: var(--dim);
}
.pg-col-arrow {
  color: var(--dim);
}
.pg-col-to {
  color: var(--ok);
}
.pg-col.lossy .pg-col-to {
  color: var(--warn);
}
.pg-col.refused .pg-col-to {
  color: var(--bad);
}
.pg-col.key .pg-col-to {
  color: var(--accent, var(--ok));
  font-weight: 600;
}
.pg-col-idx {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #14342c;
  color: var(--ok);
}
.pg-col-note {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---- the assistant's page: conversations left, one conversation right ---- */
/* `.view` is hidden unless `.on`; this rule must not outrank that. */
.view.chat.on {
  display: flex;
}
.chat-threads {
  width: 240px;
  flex: none;
  border-right: 1px solid var(--line);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: auto;
}
/* Nothing floats in this column: the button and the rows are the full width of
   it, square, and each one's edge is the next one's. A list of conversations
   is a list, not a tray of cards. */
.chat-threads .acc-add {
  width: 100%;
  height: 38px;
  border-radius: 0;
  border-width: 0 0 1px 0;
  justify-content: flex-start;
  padding: 0 12px;
  flex: none;
}
.chat-thread {
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
}
.chat-thread:hover {
  background: var(--panel);
}
.chat-thread.on {
  background: var(--panel);
  border-left-color: var(--accent);
}
.chat-threads .note {
  padding: 10px 12px;
}
.chat-thread-title {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-thread-n {
  font-size: 11px;
  color: var(--dim);
}
.chat-thread-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-thread-del {
  opacity: 0;
}
.chat-thread:hover .chat-thread-del,
.chat-thread.on .chat-thread-del {
  opacity: 1;
}
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chat-log {
  flex: 1;
  overflow: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.chat-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-user {
  align-self: flex-end;
  max-width: 70%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px 8px 2px 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-user-text {
  white-space: pre-wrap;
}
.chat-at {
  font-size: 11px;
  color: var(--dim);
  align-self: flex-end;
}
.chat-bot {
  align-self: flex-start;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.chat-compose {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assist-prompt {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  flex: none;
  height: 216px;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--deep);
  color: var(--text);
  outline: 0;
}
/* The two modes of the one composer. Writing RQL gets the taller field: a
   query is several lines and a description is usually one. */
.chat-modes {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Two halves and a thumb that slides between them: one of the two is always
   on, which is a switch and not a pair of buttons. The halves are equal
   columns, so the thumb travels exactly its own width. */
.mode-switch {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--deep);
}
.mode-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 6px;
  background: rgba(124, 196, 221, 0.12);
  border: 1px solid var(--accent);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.mode-switch.on-query .mode-thumb {
  transform: translateX(100%);
}
.mode-opt {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: 12px;
  padding: 4px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.mode-opt.on {
  color: var(--text);
}
/* The verdict grows the composer, so it grows it smoothly: the line is always
   in the tree and travels between no height and its own. */
.chat-validate {
  color: var(--dim);
  font-size: 12px;
  white-space: pre-line;
  max-height: 3.4em;
  overflow: auto;
  opacity: 1;
  transition: max-height 0.18s ease, opacity 0.15s ease;
}
.chat-validate.off {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .chat-validate,
  .editor > .hint {
    transition: none;
  }
}
.chat-validate.ok {
  color: var(--ok);
}
.chat-validate.bad {
  color: var(--bad);
}
.chat-validate.warn {
  color: var(--warn);
}
.compose-field {
  height: 216px;
  display: flex;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: visible;
  background: var(--deep);
}
/* The mode swap is a height, not a `display`: the field that is not being
   written into shrinks to nothing and the other grows, so the composer's foot
   stays where the eye left it. `.gone` cannot do this — it is `display: none`,
   which has no height to travel through. */
.compose-field,
.assist-prompt {
  transition: height 0.22s ease, min-height 0.22s ease, opacity 0.16s ease, padding 0.22s ease, border-width 0.22s ease;
}
.compose-field.off,
.assist-prompt.off {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  overflow: hidden;
  pointer-events: none;
}
.compose-field .editor {
  flex: 1;
  min-width: 0;
}
/* Over the log it now opens into. */
.compose-field .editor > .hint {
  z-index: 20;
}
.chat-feed {
  color: var(--dim);
  font-size: 12px;
}
/* A turn arrives rather than appears. The nodes are keyed, so this runs once
   — when the turn is first drawn — and not on every render that adds a step
   or a row to it. The steps of a running turn arrive the same way, quicker,
   because several of them land in a row. */
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chat-turn {
  animation: chat-in 0.22s ease-out both;
}
.assist-step {
  animation: chat-in 0.14s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .chat-turn,
  .assist-step {
    animation: none;
  }
  .compose-field,
  .assist-prompt {
    transition: none;
  }
}
/* A query's turn: what it said, what it cost, and the table it returned. */
.chat-user--query {
  max-width: 90%;
}
.chat-user-rql {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 13px;
}
/* `.rql` caps itself at 40% of its parent (gate.less, for the panes it was
   written for); in a bubble that cut a long query to a scrolling strip with
   the bubble's empty rest under it. The query is as tall as it is. */
.chat-user-rql.rql {
  max-height: none;
  overflow: visible;
}
.chat-user-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-user-foot .chat-at {
  margin-left: auto;
}
.chat-insert {
  padding: 1px 8px;
  font-size: 11.5px;
}
.chat-plan {
  margin: 0;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 6px;
  color: var(--dim);
  white-space: pre-wrap;
  max-height: 150px;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.chat-grid {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.chat-grid table {
  width: auto;
  min-width: 100%;
}
.assist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* One height for the row, whatever a button's padding says on its own. */
.assist-actions .acc-add,
.assist-actions .acc-btn {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.assist-actions .acc-btn {
  padding: 0 12px;
}
.assist-with {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
}
.assist-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assist-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2px 10px;
  padding: 3px 6px;
  border-left: 2px solid var(--ok);
  background: var(--panel);
}
.assist-step.bad {
  border-left-color: var(--bad);
}
.assist-step-tool {
  font-weight: 600;
}
.assist-step-in {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
}
.assist-step-res {
  grid-column: 2;
  color: var(--dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.assist-verdict {
  font-weight: 600;
}
.assist-verdict.ok {
  color: var(--ok);
}
.assist-verdict.bad {
  color: var(--bad);
}
.assist-verdict.dim {
  color: var(--dim);
}
.assist-rql {
  margin: 0;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.assist-notes {
  white-space: pre-wrap;
  line-height: 1.45;
}
.assist-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.assist-cost {
  color: var(--dim);
  font-size: 11px;
}
.pg-load {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.pg-load-progress {
  color: var(--dim);
}
.pg-load-checks {
  color: var(--ok);
}
.pg-load-checks.warn {
  color: var(--warn);
}
.pg-load-err {
  color: var(--bad);
  flex-basis: 100%;
}
.pg-load .pg-lost.warn {
  flex-basis: 100%;
  padding-left: 8px;
}
.pg-losts {
  padding: 6px 10px 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
}
.pg-lost {
  padding: 1px 0;
}
.pg-lost.warn {
  color: var(--warn);
}
.pg-report {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
}
.pg-report-at {
  color: var(--dim);
}
.pg-report-err {
  color: var(--bad);
}
.pg-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
  background: #2a1c1c;
  font-size: 12px;
  flex-wrap: wrap;
}
.pg-confirm-q {
  color: var(--bad);
  flex: 1;
}
/* =============================================================================
   The design pass of 2026-09-12, as overrides at the end so that the rules
   above keep saying what each thing is and this says how it all looks:
   warm grey text on three grounds, pastel accents, prose in a proportional
   face, one radius, translucent lines. The palette itself is in gate.less.
   ============================================================================= */
/* Placeholders are a third shade, quieter than secondary text. */
::placeholder {
  color: var(--hint);
  opacity: 1;
}
/* The deep ground under anything that is typed into or read as a grid. */
.editor,
.editor > textarea,
.grid,
.assist-rql,
pre.plan,
.assist-prompt,
.tablist input,
.newtbl input,
.pg-form input,
input[type="text"],
input[type="password"],
textarea {
  background: var(--deep);
}
.editor > textarea {
  background: transparent;
}
/* One radius. */
button,
.acc-btn,
.acc-add,
input,
textarea,
.card,
.sheet > div,
.assist-rql,
.assist-step,
.chat-user,
.assist-prompt,
.tablist input,
.badge {
  border-radius: 6px;
}
.badge {
  border-radius: 10px;
}
/* Outline buttons: a translucent edge, secondary text; the one filled button
   per pane stays filled with the accent and dark text. */
.acc-btn,
button.ghost,
td.rowedit button,
.pagebar button {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line-strong);
  font-weight: 500;
}
.acc-btn:hover,
button.ghost:hover,
td.rowedit button:hover,
.pagebar button:hover {
  color: var(--text);
  border-color: var(--dim);
}
/* Prose: everything a person reads as sentences leaves the monospace face. */
.assist-notes,
.assist-unsupported,
.chat-user-text,
.note,
.acc-note,
.pg-lost,
.pg-confirm-q,
.app-fault,
.acc-error,
.assist-verdict,
.assist-cost,
.pg-load-err,
.pg-load-checks,
.intro,
.chat-log .note {
  font-family: var(--prose);
  font-size: 14px;
  line-height: 1.6;
}
.assist-notes,
.assist-unsupported,
.pg-losts,
.chat-log .note {
  max-width: 80ch;
}
.assist-cost,
.acc-note,
.pg-lost {
  font-size: 13px;
}
/* A remark is ordinary text with a small mark, not a paragraph in yellow. */
.pg-lost.warn {
  color: var(--text);
}
.pg-lost.warn::before {
  content: "note";
  font-family: var(--prose);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
  margin-right: 8px;
  vertical-align: middle;
}
.assist-unsupported .pg-lost.warn::before {
  content: "not in the query";
}
.assist-step-res {
  color: var(--dim);
}
/* The assistant's step cards: a soft edge, room inside, and the drafts a
   step quieter than the answer — they are the working, not the result. */
.assist-step {
  border-left: 2px solid rgba(143, 201, 164, 0.6);
  padding: 10px 14px;
  gap: 4px 12px;
  background: var(--panel);
}
.assist-step.bad {
  border-left-color: rgba(217, 138, 145, 0.6);
}
.assist-step-tool {
  font-weight: 500;
  color: var(--dim);
  font-size: 12px;
}
.assist-step-in {
  color: #a6afbc;
  font-size: 13px;
  line-height: 1.55;
}
.assist-step-res {
  color: #7d8797;
  font-size: 12.5px;
  line-height: 1.55;
}
.assist-notes {
  color: #c3cad4;
}
.assist-rql {
  padding: 12px 14px;
  line-height: 1.5;
}
.chat-user {
  padding: 10px 14px;
  border-radius: 8px 8px 2px 8px;
}
.chat-turn {
  gap: 10px;
}
.chat-log {
  gap: 20px;
}
.assist-verdict {
  font-weight: 500;
}
/* Section titles inside a pane: small, lighter, not shouting; air between sections. */
.fold-title,
.card > h4,
.tbl > h3 span {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.fold + .fold,
.acc-table {
  margin-top: 16px;
}
.card > h4 {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 500;
}
/* Monospace where it stays: tables and logs at 13px, no bold headers. */
table,
.grid,
pre.plan,
.assist-step-in {
  font-size: 13px;
  line-height: 1.5;
}
th,
.tbl > h3,
.live .k,
.kv .k {
  font-weight: 400;
}
td.key {
  font-weight: 500;
}
/* Headers that were the accent: the accent marks state, not titles. */
header .name .b {
  color: var(--accent);
}
.flag.i {
  color: var(--accent);
  border-color: rgba(124, 196, 221, 0.5);
}
.flag.c {
  color: var(--ok);
  border-color: rgba(143, 201, 164, 0.5);
}
/* ---- the sidebar, now that there is no header -----------------------------
   The mark begins the column with nothing ruled off under it, and the account
   ends it: a button that says who, and a menu that opens upward with the rest
   of what the header used to carry. Every rule here is written under `nav#side`
   because the id in `nav#side button` outranks a class on its own. */
/* The account block sits on the floor of the column, and the mark near its
   ceiling: the column's own top padding is taken off, so the name is 8px from
   the top of the window instead of 20. */
nav#side {
  padding-bottom: 0;
  padding-top: 0;
}
.side-brand {
  padding: 8px 14px 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.side-brand .b {
  color: var(--accent);
}
.side-account {
  position: relative;
  border-top: 1px solid var(--line);
}
nav#side button.side-who {
  width: 100%;
  padding: 9px 14px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  border-left-color: transparent;
  color: var(--dim);
}
nav#side button.side-who.on,
nav#side button.side-who:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}
.side-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 6px;
  width: 250px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.side-menu-who {
  padding: 6px 12px 2px;
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.side-menu-line {
  padding: 0 12px 8px;
  margin-bottom: 4px;
  color: var(--dim);
  font-size: 11px;
  border-bottom: 1px solid var(--line);
}
nav#side .side-menu-item {
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
nav#side .side-menu-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
/* ---- the composer: one height for both modes, folded while an answer arrives ----
   The two fields are the same height, so flipping the switch cross-fades them
   instead of moving the log. That height is the old RQL field and a fifth
   more. While an answer is on its way the composer folds down, so what comes
   back has the room; writing, or putting the caret back, unfolds it. */
.chat-compose.compact .compose-field:not(.off),
.chat-compose.compact .assist-prompt:not(.off) {
  height: 96px;
}
/* The fold by hand: a chevron that points the way the field will go. The
   whole button turns, and its box is square, so only the arrow changes. */
.compose-toggle {
  margin-left: auto;
  width: 28px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: transform 0.22s ease, color 0.15s ease, border-color 0.15s ease;
}
.compose-toggle:hover {
  color: var(--text);
  border-color: var(--dim);
}
.chat-compose.compact .compose-toggle {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .compose-toggle {
    transition: none;
  }
}
/* ---- one answer, one card ---------------------------------------------------
   Everything a turn says sits inside one border, and the footer is the one
   place the counts are said. A query's card is as wide as the log: a table
   has no business being narrower than the room it is given. */
.chat-bot--wide {
  max-width: none;
}
.chat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.chat-bar {
  height: 2px;
  background: var(--line);
  flex: none;
}
.chat-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}
.chat-trouble {
  padding: 10px 14px;
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-line;
}
.chat-trouble.bad {
  color: var(--bad);
}
.chat-trouble.warn {
  color: var(--warn);
}
.chat-card .chat-grid {
  border: 0;
  border-radius: 0;
  max-height: 460px;
  background: var(--deep);
}
.chat-card .chat-plan {
  margin: 0;
  padding: 10px 14px;
  max-height: 220px;
  border-radius: 0;
  background: var(--deep);
  color: var(--dim);
  white-space: pre-wrap;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.chat-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  flex-wrap: wrap;
  color: var(--dim);
}
/* **One rule divides the sections**: a line above each, only when something
   visible stands above it. The parts that are not there are still in the tree
   (`gone`), so `:first-child` would count them and draw a line under nothing;
   "after a visible sibling" does not. The strip at the top is not a section,
   and the remarks belong to the notes above them. */
.chat-card > * {
  border-top: 0;
}
.chat-card > :not(.gone):not(.chat-bar) ~ :not(.chat-bar):not(.assist-unsupported) {
  border-top: 1px solid var(--line);
}
.chat-meta {
  font-family: var(--prose);
  font-size: 12.5px;
}
.chat-card-foot .acc-btn {
  margin-left: auto;
}
.chat-fold {
  font: inherit;
  font-size: 12px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.chat-fold:hover,
.chat-fold.on {
  color: var(--text);
}
.chat-badge {
  font-family: var(--prose);
  font-size: 12.5px;
}
.chat-badge.ok {
  color: var(--ok);
}
.chat-badge.bad {
  color: var(--bad);
}
.chat-badge.warn {
  color: var(--warn);
}
/* The assistant's card: drafts on the deep ground above, the query, then
   the notes — sections of one answer, divided by a rule and not by a gap. */
.chat-card .assist-steps {
  padding: 8px 10px;
  gap: 4px;
  background: var(--deep);
}
/* One draft is a few lines at most, however long what the tool said: a table
   described column by column scrolls inside its step instead of pushing the
   rest of the conversation away. */
.chat-card .assist-step-in {
  max-height: 6.5em;
  overflow: auto;
}
.chat-card .assist-step-res {
  max-height: 8em;
  overflow: auto;
}
.chat-card .assist-rql {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--deep);
}
/* `.rql` caps itself at 40% of its parent, for the panes it was written for;
   in a card the answer is the whole point, and it is as tall as it is. */
.chat-card .assist-rql {
  max-height: none;
}
.chat-card .assist-notes {
  padding: 10px 14px 6px;
}
.chat-card .assist-unsupported {
  padding: 0 14px 10px;
}
.chat-card .assist-notes:last-child,
.chat-card .assist-unsupported:last-child {
  padding-bottom: 10px;
}
/* ---- sections that fold -----------------------------------------------------
   A head you press and a body that closes. The height is animated through
   grid-template-rows (1fr ↔ 0fr): the one way to animate to a height nobody
   knows, and the nodes stay put while the class changes. */
.cf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  min-height: 18px;
  cursor: pointer;
  user-select: none;
  color: var(--dim);
  background: var(--panel);
}
.cf-head:hover {
  background: rgba(255, 255, 255, 0.025);
}
.cf-head.live {
  cursor: default;
}
.cf-head.live:hover {
  background: var(--panel);
}
.cf-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.cf-sub {
  font-family: var(--prose);
  font-size: 12.5px;
  color: var(--hint);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--hint);
  transition: transform 0.25s ease, color 0.15s ease;
}
.cf-head:hover .cf-chev {
  color: var(--text);
}
.cf-head.folded .cf-chev {
  transform: rotate(-90deg);
}
.cf-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.cf-body.folded {
  grid-template-rows: 0fr;
  opacity: 0;
}
.cf-inner {
  min-height: 0;
  overflow: hidden;
}
/* A turn is as tall as it is, and the log scrolls. The log is a column of
   fixed height and a flex item may shrink to its min-content, which a folding
   body (min-height 0, overflow hidden) makes small — so nothing in a turn is
   allowed to shrink. Written while chasing the answer being cut after five
   lines; that turned out to be two older caps meeting a parent that now had a
   height (`.fold-body`'s 30vh, hence the `cf-` names, and `.rql`'s 40%, lifted
   below) — this stays as the guard against the other half of the same trap. */
.chat-log > *,
.chat-turn > *,
.chat-bot > *,
.chat-card > *,
.assist-run > *,
.assist-result > *,
.chat-result > * {
  flex-shrink: 0;
}
/* The rule under a head only while its body is open. */
.cf-head + .cf-body > .cf-inner {
  border-top: 1px solid var(--line);
}
.cf-head.folded + .cf-body > .cf-inner {
  border-top-color: transparent;
}
/* ---- the assistant's steps, as they happen ----------------------------------
   The landing's chips, for real: each arrives with a small pop, the newest
   is lit, and a pulse after it is the step being taken. Nodes are keyed, so
   a chip animates once — when it is first drawn — not on every render. */
@keyframes chip-in {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.86);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes chip-live {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(226, 194, 117, 0);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(226, 194, 117, 0.16);
  }
}
@keyframes dot-blink {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
.assist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 12px;
  background: var(--deep);
}
.assist-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 11.5px;
  color: var(--dim);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  animation: chip-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.assist-chip.bad {
  color: var(--bad);
  border-color: rgba(217, 138, 145, 0.45);
}
.assist-chip.fin {
  color: var(--ok);
  border-color: rgba(143, 201, 164, 0.5);
}
.assist-chip.live {
  color: #e2c275;
  border-color: rgba(226, 194, 117, 0.6);
  background: rgba(226, 194, 117, 0.08);
  animation: chip-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both, chip-live 1.6s ease-in-out 0.4s infinite;
}
.assist-chip.next {
  border-style: dashed;
  padding: 2px 10px;
}
.assist-chip.next i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dim);
  animation: dot-blink 1.2s infinite both;
}
.assist-chip.next i:nth-child(2) {
  animation-delay: 0.2s;
}
.assist-chip.next i:nth-child(3) {
  animation-delay: 0.4s;
}
.assist-run.working .assist-step {
  animation: chat-in 0.3s ease-out both;
}
.run-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2c275;
  flex: none;
  animation: dot-blink 1.2s ease-in-out infinite;
}
/* ---- a query's run, drawn the way the overview draws it ----------------------
   The engine's stages as chips in the head, then the counters, the bar and a
   cell per segment — yellow while it reads, the console's blue once it is
   done. Nodes are keyed, so what animates on first drawing (the bar filling,
   the cells lighting in a sweep) does it once per turn; a live run moves by
   the numbers the stream sends. */
@keyframes bar-fill {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes cell-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.exec-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.assist-chip.exec-stage {
  font-size: 11px;
  padding: 1px 8px;
}
.assist-chip.past {
  color: var(--dim);
}
.assist-chip.warn {
  color: var(--warn);
  border-color: rgba(214, 179, 106, 0.5);
}
.exec-panel {
  padding: 10px 14px 10px;
  background: var(--deep);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exec-figs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 26px;
  row-gap: 2px;
  font-size: 12.5px;
}
.exec-fig-n {
  color: var(--dim);
}
.exec-fig-v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.exec-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.exec-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: bar-fill 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.chat-exec.live .exec-bar i {
  background: #e2c275;
  animation: none;
}
.exec-segs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11px, 1fr));
  gap: 3px;
}
.exec-segs i {
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  animation: cell-in 0.3s ease-out both;
  animation-delay: calc(var(--i) * 7ms);
  transition: background-color 0.25s ease;
  transition-delay: calc(var(--i) * 5ms);
}
.exec-segs i.on {
  background: rgba(124, 196, 221, 0.45);
}
.chat-exec.live .exec-segs i.on {
  background: rgba(226, 194, 117, 0.7);
  transition-delay: 0s;
}
.exec-path {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--hint);
}
.exec-path .chat-fold {
  margin-left: auto;
}
.exec-panel .chat-plan {
  margin: 0;
  border-radius: 6px;
  max-height: 260px;
  background: var(--panel);
}
.chat-exec .cf-head {
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
  .exec-bar i,
  .exec-segs i {
    animation: none;
    transition: none;
  }
}
/* ---- the answer, and a query's rows, arrive -------------------------------
   Display none → shown restarts an animation, so these run when the section
   first appears: the answer drawn down from its top, the rows one after
   another. */
@keyframes reveal-down {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.3;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.assist-result,
.chat-result {
  animation: chat-in 0.35s ease-out both;
}
.assist-result .assist-rql {
  animation: reveal-down 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.assist-result .assist-notes,
.assist-result .assist-unsupported {
  animation: chat-in 0.4s ease-out 0.45s both;
}
.chat-result .grid tbody tr {
  animation: row-in 0.3s ease-out both;
}
.chat-result .grid tbody tr:nth-child(1) {
  animation-delay: 0.04s;
}
.chat-result .grid tbody tr:nth-child(2) {
  animation-delay: 0.08s;
}
.chat-result .grid tbody tr:nth-child(3) {
  animation-delay: 0.12s;
}
.chat-result .grid tbody tr:nth-child(4) {
  animation-delay: 0.16s;
}
.chat-result .grid tbody tr:nth-child(5) {
  animation-delay: 0.2s;
}
.chat-result .grid tbody tr:nth-child(6) {
  animation-delay: 0.24s;
}
.chat-result .grid tbody tr:nth-child(7) {
  animation-delay: 0.28s;
}
.chat-result .grid tbody tr:nth-child(8) {
  animation-delay: 0.32s;
}
.chat-result .grid tbody tr:nth-child(9) {
  animation-delay: 0.36s;
}
.chat-result .grid tbody tr:nth-child(n+10) {
  animation-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .assist-chip,
  .assist-chip.live,
  .assist-chip.next i,
  .run-dot,
  .assist-result,
  .chat-result,
  .assist-result .assist-rql,
  .assist-result .assist-notes,
  .chat-result .grid tbody tr {
    animation: none;
  }
  .cf-body,
  .cf-chev {
    transition: none;
  }
}
/* The edit button belongs to the row under the pointer, not to every row at
   once: a column of forty identical buttons read as part of the data. It is
   still there to be tabbed to, and shows when it has the focus. */
td.rowedit .rowedit-btn {
  opacity: 0;
  transition: opacity 0.12s ease;
}
tr:hover td.rowedit .rowedit-btn,
td.rowedit .rowedit-btn:focus-visible {
  opacity: 1;
}
/* The completion list above whatever it opens over, in any editor: the query
   composer's log, or a table browser's grid with its sticky header. */
.editor > .hint {
  z-index: 20;
}
/* ---- a column's name is a menu -------------------------------------------- */
th.colhead {
  cursor: pointer;
  user-select: none;
}
th.colhead:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
th.colhead::after {
  content: " ▾";
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
th.colhead:hover::after {
  opacity: 0.7;
}
.colmenu {
  position: fixed;
  z-index: 40;
  width: 320px;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  animation: chat-in 0.12s ease-out both;
}
.colmenu-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 12px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.colmenu-col {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.colmenu-kind {
  color: var(--dim);
  font-size: 11px;
}
.colmenu-label {
  padding: 4px 12px 0;
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.colmenu-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
}
.colmenu .colmenu-btn {
  font: inherit;
  font-size: 12px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
  white-space: nowrap;
}
.colmenu .colmenu-btn:hover {
  color: var(--text);
  border-color: var(--dim);
}
.colmenu .colmenu-go {
  color: var(--text);
  border-color: var(--accent);
}
.colmenu .colmenu-wide {
  margin: 3px 12px 0;
  width: calc(100% - 24px);
  text-align: left;
}
.colmenu-op {
  font: inherit;
  font-size: 12px;
  height: 26px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--deep);
  color: var(--text);
}
.colmenu-value {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--deep);
  color: var(--text);
  outline: 0;
}
.colmenu-value:focus {
  border-color: var(--accent);
}
.colmenu-err {
  padding: 4px 12px 2px;
  color: var(--bad);
  font-family: var(--prose);
  font-size: 12.5px;
}
/* ---- the name: Qriex in the accent, :: bold and graphite, db plain -------------
   `.b` is already the accent on every page that draws it; the other two are
   the same everywhere, including the sign-in title, whose own colour is the
   accent and must not reach `db`. */
.brand-sep {
  color: var(--graphite);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.brand-db {
  color: var(--text);
  font-weight: 400;
}
.signin-title .b {
  color: var(--accent);
}
/* The mark reads first. In a console where nearly everything is the same
   monospace at the same weight, the name dissolved into the rows beside it:
   so it is a size up, Qriex is heavier and a shade brighter than the accent
   it is otherwise, and `::db` steps back — the name is the first word. */
.side-brand .b,
.land-brand .b {
  font-weight: 700;
  color: #95d3ea;
}
.side-brand .brand-db,
.land-brand .brand-db {
  color: #aab3bf;
}
/* A question and its answer are one exchange; the next question starts the
   next. So the space inside a turn stays as it is and the space between turns
   is nearly four times it — the log reads in pairs, not as a stream. */
.chat-log {
  gap: 38px;
}
/* "put in the composer" is a quiet action at the end of the footer, not a
   control: no frame, only the text, brightening under the pointer. */
.chat-card-foot .acc-btn {
  border-color: transparent;
  background: transparent;
  padding: 0 6px;
}
.chat-card-foot .acc-btn:hover {
  border-color: transparent;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
/* The menu's pages, and the parts the relation pages add: a way back, a list
   of neighbours, chips to choose columns or an aggregate. */
.colmenu-page {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.colmenu .colmenu-back {
  font: inherit;
  font-size: 13px;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.colmenu .colmenu-back:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.colmenu-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow: auto;
  padding-bottom: 2px;
}
.colmenu-list .colmenu-wide {
  margin-top: 0;
}
.colmenu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 12px;
  max-height: 200px;
  overflow: auto;
}
.colmenu .colmenu-chip {
  font: inherit;
  font-size: 12px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
}
.colmenu .colmenu-chip:hover {
  color: var(--text);
}
.colmenu .colmenu-chip.on {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(124, 196, 221, 0.12);
}
.colmenu .colmenu-push {
  margin-left: auto;
}
.colmenu-grow {
  flex: 1;
  min-width: 0;
}