button {
  text-transform: uppercase;
}
.scroll {
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar,
.scroll-pan::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.panes {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
  z-index: 1;
  /* Panes overlap by 1px (margin -1px) so neighbours share one border.
     This padding gives that 1px back, so the outer left and top borders,
     including the orange border of the active pane, stay on screen. */
  padding: 1px 0 0 1px;
}
.split {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
}
.split.v {
  flex-direction: row;
}
.split.h {
  flex-direction: column;
}
.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--rib);
  margin: -1px 0 0 -1px;
}
.pane.solo {
  border: 0;
  margin: 0;
}
.pane.cur {
  border-color: var(--titan);
  z-index: 1;
}
.pane-head {
  font-size: 0.78em;
  color: var(--dust);
  padding: 0.1em 0.8em;
  border-bottom: 1px solid var(--rib);
  white-space: nowrap;
  overflow: hidden;
}
.pane.cur > .pane-head {
  color: var(--hall);
  background: var(--titan);
  text-shadow: none;
  border-bottom-color: var(--titan);
}
.pane-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Divider between two panes. Drag it, or focus it and use the arrow keys,
   to resize; a double click returns to the default size. It overlaps the
   pane borders, so it takes no space of its own */
.split-bar {
  flex: 0 0 8px;
  position: relative;
  z-index: 2;
  touch-action: none;
  background: transparent;
}
.split.v > .split-bar {
  margin: 0 -4px;
  cursor: col-resize;
}
.split.h > .split-bar {
  margin: -4px 0;
  cursor: row-resize;
}
.split-bar:hover,
.split-bar:focus-visible,
.split-bar.drag {
  background: rgba(214, 195, 150, 0.25);
  outline: none;
}
/* A pane sized to its content, up to 45% of the split (the stacked inbox) */
.pane.fit {
  flex: 0 1 auto;
  max-height: 45%;
}
.pane.fit > .pane-body,
.pane.fit > .pane-body > * {
  flex: 1 1 auto;
}
/* Narrow screens: the stacked inbox is compact, so all six messages fit
   without scrolling on a phone of 640 px or taller */
@media (max-width: 700px) {
  .pane.fit {
    max-height: 52%;
  }
  .pane.fit .mailpane {
    padding: 0.4em 0.8em;
  }
  .pane.fit .mailpane .pane-title {
    margin-bottom: 0.2em;
  }
}
.pane-body > * {
  flex: 1;
  min-height: 0;
}
.pane-title {
  font-family: var(--font-crt);
  font-size: 1.35em;
  margin-bottom: 0.4em;
}
.shell {
  display: flex;
  flex-direction: column;
}
.log {
  flex: 1;
  min-height: 0;
  padding: 0.8em 1em 1em;
  overflow-x: hidden;
}
/* Shell output rhythm. Every line is one line box of 1.5em, headings
   included. A gap is half a line (0.75em) and sits equally above and below
   what it separates: a command echo, a heading, a block (entry, message,
   note, table, hint) and a paragraph inside a text. Plain lines follow each
   other with no gap. Margins of larger type are divided by its size, so the
   gap stays 0.75em of the shell font. */
.ln {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.5em;
}
.row {
  white-space: pre-wrap;
}
.etable.listing td {
  border-bottom: 0;
  padding-right: 1.6em;
}
.echo {
  color: var(--dust);
  margin: 0.75em 0;
}
.echo:last-child {
  margin-bottom: 0;
}
.dim {
  color: var(--dust);
}
.err {
  color: var(--flag);
}
.ok {
  color: var(--lamp);
}
.warn {
  color: var(--titan);
}
.head,
.head-s {
  font-family: var(--font-crt);
  font-size: 1.5em;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 1em;
  margin: 0.5em 0;
}
.head-s {
  font-size: 1.3em;
  line-height: 1.1538;
  min-height: 1.1538em;
  margin: 0.5769em 0;
}
.lnk,
.term {
  font: inherit;
  color: var(--titan);
  background: none;
  border: 0;
  padding: 0;
  text-shadow: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-transform: none;
}
.term {
  text-decoration-style: dotted;
}
.lnk:hover,
.term:hover {
  background: var(--titan);
  color: var(--hall);
  text-shadow: none;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--titan);
  outline-offset: 3px;
}
.btn,
.use,
.opt,
.tab {
  font: inherit;
  color: var(--haze);
  background: none;
  border: 1px solid var(--rib);
  padding: 0.15em 0.7em;
  text-shadow: inherit;
}
.btn:hover,
.opt:hover,
.tab:hover {
  border-color: var(--dust);
}
.btn.primary {
  border-color: var(--titan);
  color: var(--titan);
}
.btn:disabled {
  opacity: 0.35;
}
.use {
  display: inline-block;
  margin-top: 0.8em;
  border-color: var(--titan);
  color: var(--titan);
}
.use:hover,
.btn.primary:hover {
  background: var(--titan);
  color: var(--hall);
  text-shadow: none;
}
.entry {
}
.log .entry {
  margin: 0.75em 0;
  border-left: 2px solid var(--rib);
  padding-left: 0.9em;
}
.entry-title {
  font-family: var(--font-crt);
  font-size: 1.5em;
  line-height: 1;
}
.rule {
  height: 1px;
  background: var(--rib);
  margin: 0.375em 0;
}
.entry-body,
.mail-body {
  font: inherit;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mail-body {
  white-space: pre-wrap;
  margin: 0.75em 0;
}
/* Inside a box the first and last parts meet the box's own padding */
.mail > :first-child,
.entry > :first-child,
.note > :first-child {
  margin-top: 0;
}
.mail > :last-child,
.entry > :last-child,
.note > :last-child,
.mail-body:last-child {
  margin-bottom: 0;
}
.cam {
  margin: 0.75em 0;
}
.cam img {
  display: block;
  width: min(100%, 640px);
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  border: 1px solid var(--rib);
}
.cam figcaption {
  font-size: 0.85em;
  margin-top: 0.3em;
}
.note {
  padding: 0.55em 0.8em;
  border: 1px dashed var(--rib);
}
.log .note {
  margin: 0.75em 0;
}
.note-title {
  color: var(--titan);
}
.log .mail {
  margin: 0.75em 0;
  padding: 0.7em 0.9em;
  border: 1px solid var(--rib);
}
.mail-head {
  font-family: var(--font-crt);
  font-size: 1.3em;
  line-height: 1.1538;
}
.hintbox {
  margin: 0.75em 0;
}
/* Two lines of the shell font */
.count {
  font-family: var(--font-crt);
  font-size: 2em;
  color: var(--titan);
  line-height: 1.5;
}
.viewer {
  display: flex;
  flex-direction: column;
}
.v-head {
  padding: 0.35em 1em;
  color: var(--dust);
  border-bottom: 1px dashed var(--rib);
  font-size: 0.85em;
}
.v-body {
  flex: 1;
  min-height: 0;
  padding: 0.8em 1em;
}
.v-note {
  border-top: 1px solid var(--rib);
  padding: 0.6em 1em;
  max-height: 40%;
  overflow-y: auto;
  position: relative;
}
.v-note .note {
  border: 0;
  padding: 0;
}
.v-close {
  float: right;
  font-size: 0.8em;
}
.mc {
  display: flex;
  flex-direction: column;
}
.mc-panels {
  flex: 1;
  min-height: 0;
  display: flex;
}
.mc-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px double var(--rib);
  margin: 0.3em;
  position: relative;
}
.mc-panel.act {
  border-color: var(--dust);
}
.mc-head {
  position: absolute;
  top: -0.75em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hall);
  padding: 0 0.3em;
  font-size: 0.85em;
  white-space: nowrap;
}
.mc-panel.act .mc-head {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
}
.mc-list {
  flex: 1;
  min-height: 0;
}
.mc-row {
  display: flex;
  gap: 0.6em;
  padding: 0 0.5em;
  white-space: nowrap;
  user-select: none;
}
.mc-cols {
  color: var(--titan);
  margin-top: 0.4em;
  border-bottom: 1px solid var(--rib);
}
.mc-n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-i {
  flex: 0 1 auto;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dust);
}
.mc-row.lock .mc-i {
  color: var(--flag);
}
.mc-row.read .mc-n {
  color: var(--dust);
}
.mc-row.sel {
  background: rgba(214, 195, 150, 0.14);
}
.mc-panel.act .mc-row.sel {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
}
.mc-panel.act .mc-row.sel .mc-i,
.mc-panel.act .mc-row.sel .mc-n {
  color: var(--hall);
}
.mc-mini {
  border-top: 1px solid var(--rib);
  padding: 0.2em 0.8em;
  font-size: 0.85em;
  color: var(--dust);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.mc-mini.scrolled {
  text-overflow: clip;
}
/* Horizontal finger drags go to the strip's own drag-to-scroll */
.mc-mini {
  touch-action: pan-y;
}
.mc-use {
  display: block;
  width: calc(100% - 0.6em);
  min-height: 2.75rem;
  margin: 0.3em;
  padding: 0.35em 0.6em;
  color: var(--hall);
  background: var(--titan);
  border: 1px solid var(--haze);
  font: inherit;
  font-size: 0.85em;
  text-shadow: none;
}
.mc-use:hover,
.mc-use:focus-visible {
  background: var(--haze);
  border-color: var(--titan);
}
.mailpane,
.watch,
.reportpane {
  padding: 0.8em 1em;
}
.mrow {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--dust);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--rib);
  padding: 0.2em 0;
  text-shadow: inherit;
}
.mrow.unread {
  color: var(--titan);
}
.mrow {
  display: flex;
  align-items: baseline;
  gap: 1em;
}
.mrow-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mrow-new {
  margin-left: auto;
  flex: none;
}
.mrow.open {
  color: var(--haze);
  background: rgba(214, 195, 150, 0.08);
}

.mrow:hover {
  color: var(--haze);
}
.watch .ln {
  white-space: pre;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.2em;
}
.tab.act {
  border-color: var(--titan);
  color: var(--titan);
}
.tab.done {
  color: var(--lamp);
}
.tab.decide {
  border-color: var(--flag);
  color: var(--flag);
}
.fbar {
  display: flex;
  gap: 0.25em;
  padding: 0.25em 0.6em;
  border-top: 1px solid var(--rib);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 2;
}
.fbar button {
  font: inherit;
  font-size: 0.82em;
  color: var(--hall);
  background: var(--dust);
  border: 0;
  padding: 0 0.6em 0 0;
  white-space: nowrap;
  text-shadow: none;
  flex: 1 0 auto;
  text-align: left;
}
.fbar button:hover {
  background: var(--haze);
}
.fk {
  display: inline-block;
  background: var(--hall);
  color: var(--haze);
  padding: 0 0.3em;
  margin-right: 0.35em;
}
.screen:not(.session) .fbar {
  display: none;
}
.tmux {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.15em 0.6em;
  background: var(--titan);
  color: var(--hall);
  text-shadow: none;
  font-size: 0.82em;
  position: relative;
  z-index: 2;
  min-width: 0;
}
.tmux-wins {
  display: flex;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;
  overflow: hidden;
}
.tmux-sess {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
  margin-right: 0.4em;
}
.tmux-win {
  font: inherit;
  color: var(--hall);
  background: none;
  border: 0;
  padding: 0 0.3em;
}
.tmux-win.act {
  background: var(--hall);
  color: var(--titan);
}
.tmux-prompt {
  flex: 1;
  font: inherit;
  background: var(--hall);
  color: var(--haze);
  border: 0;
  padding: 0 0.4em;
  outline: none;
}
.tmux-msg {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmux-msg.err {
  background: var(--flag);
  color: var(--hall);
  padding: 0 0.4em;
}
/* The global .ok and .warn colours vanish on the titan bar, which left the
   mobile message row looking empty */
.tmux-msg.ok,
.tmux-msg.warn {
  color: var(--hall);
}
.screen.prefix .tmux-sess::after {
  content: " ^B";
}
.tmux-right {
  display: flex;
  align-items: center;
  gap: 0.8em;
  white-space: nowrap;
  margin-left: auto;
}
.tmux-shell-action {
  flex: 0 0 auto;
}
.st-btn {
  font: inherit;
  color: var(--hall);
  background: none;
  border: 1px solid rgba(30, 36, 39, 0.5);
  padding: 0 0.4em;
}
.screen:not(.desktop) #st-mail,
.screen:not(.desktop) #st-report {
  display: none;
}
.st-btn.live,
.wb-btn.live {
  background: var(--titan);
  color: var(--hall);
  font-weight: 500;
  animation: mail-pulse 1.6s ease-in-out infinite;
}
@keyframes mail-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}
/* Uplink and save buttons sit on the titan status bar (and the haze desktop
   bar), so they take the bar's dark text colour */
.st-uplink,
.st-save {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  padding: 0 0.4em;
  white-space: nowrap;
}
/* Status bar buttons have one line of capitals. A line box of exactly 1em puts
   the cap height in the middle of the box, so the label is centred vertically */
.st-btn,
.st-uplink,
.st-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 1.5em;
}
.st-uplink.live {
  font-weight: 500;
}
.st-uplink:hover,
.st-uplink:focus-visible,
.st-save:hover,
.st-save:focus-visible {
  background: rgba(30, 36, 39, 0.12);
  border-color: rgba(30, 36, 39, 0.5);
  outline-offset: 1px;
}
.st-hint {
  border: 1px solid rgba(30, 36, 39, 0.5);
  padding: 0 0.4em;
  opacity: 0.5;
}
/* Save lamp: faint while progress lives in this tab, solid when saving fails */
.st-save.fail {
  opacity: 1;
  background: var(--hall);
  color: var(--flag);
}
.status-info-pop {
  position: absolute;
  z-index: 8;
  width: min(26em, calc(100% - 16px));
  max-height: calc(100% - 8px);
  overflow-y: auto;
  padding: 0.7em;
  border: 1px solid var(--titan);
  background: var(--hall);
  color: var(--haze);
  box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.5);
  font-size: 0.9em;
  line-height: 1.4;
  text-shadow: none;
  pointer-events: auto;
  text-wrap: pretty;
}
.status-info-head {
  display: block;
  color: var(--titan);
  letter-spacing: 0.04em;
}
.status-info-copy {
  margin-top: 0.25em;
}
/* History rows: event and time centred vertically, the same size, with equal
   space above and below each row; the last row ends on the pop-up's padding */
.status-history {
  margin-top: 0.6em;
  border-top: 1px solid var(--rib);
}
.status-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7em;
  padding: 0.35em 0;
}
.status-history-row + .status-history-row {
  border-top: 1px solid rgba(214, 195, 150, 0.16);
}
.status-history-row:last-child {
  padding-bottom: 0;
}
.status-history-event {
  min-width: 0;
  overflow-wrap: anywhere;
}
.status-history-time,
.status-history-empty {
  color: var(--dust);
  white-space: nowrap;
}
.status-history-empty {
  padding-top: 0.35em;
}
.st-hint.lit {
  opacity: 1;
  background: var(--hall);
  color: var(--titan);
}
.st-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(30, 36, 39, 0.4);
}
.st-led.on {
  background: var(--hall);
}
.inputline {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 1em;
  border-top: 1px solid var(--rib);
}
.prompt {
  color: var(--titan);
  white-space: nowrap;
}
.title-screen .inputline {
  display: none;
}
.cmd {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: max(16px, 1em);
  color: var(--haze);
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--titan);
  text-shadow: inherit;
  padding: 0.1em 0;
}
.dlg-ov {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(10, 13, 14, 0.55);
  padding: 1em;
}
.dlg {
  background: var(--hall);
  border: 3px double var(--haze);
  min-width: min(28em, 100%);
  max-width: min(44em, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0.6em 0.6em 0 rgba(0, 0, 0, 0.5);
}
.dlg.wide {
  min-width: min(40em, 100%);
  max-width: min(52em, 100%);
}
.dlg-title {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  text-align: center;
  padding: 0.1em 0.5em;
}
.dlg-body {
  padding: 0.8em 1.1em;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.dlg-in {
  font: inherit;
  color: var(--haze);
  background: transparent;
  border: 1px solid var(--rib);
  padding: 0.3em 0.5em;
  text-transform: uppercase;
}
.dlg-in:focus {
  border-color: var(--titan);
  outline: none;
}
.dlg-btns {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  padding: 0 1em 0.9em;
}
.dlg-rule {
  height: 1px;
  background: var(--rib);
  margin: 0.3em 0;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em 1em;
  flex-wrap: wrap;
}
.set-label {
  color: var(--dust);
}
.set-ctl {
  display: flex;
  gap: 0.2em 0.3em;
  align-items: center;
  flex-wrap: wrap;
}
.opt {
  padding: 0 0.5em;
  font-size: 0.9em;
}
.opt.on {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  border-color: var(--haze);
}
.set-val {
  min-width: 4.5ch;
  text-align: center;
}
.title {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4em;
}
.title-big {
  font-family: var(--font-crt);
  font-size: clamp(4.5rem, 16vw, 10rem);
  line-height: 0.9;
  letter-spacing: 0.25em;
  margin-right: -0.25em;
}
.title-go {
  margin-top: 1.6em;
  padding: 0.4em 1.1em;
}
.title-note {
  margin-top: 1.2em;
  font-size: 0.8em;
}
@media (prefers-reduced-motion: no-preference) {
  .blink {
    animation: blink 1.1s steps(1) infinite;
  }
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
body.dragging .blank:not(:disabled) {
  outline: 1px dashed var(--ink);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .st-user {
    display: none;
  }
  .status-info-pop {
    width: calc(100% - 16px);
  }
  .tmux {
    gap: 0.3em 0.5em;
    flex-wrap: wrap;
    font-size: 0.76em;
    padding: 0.25em 0.5em;
  }
  .tmux-wins {
    flex-basis: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tmux-win {
    min-height: 2.4em;
    padding: 0.3em 0.45em;
  }
  .tmux-msg:empty {
    display: none;
  }
  .tmux-right {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.35em;
  }
  .st-btn {
    min-height: 2.4em;
  }
  /* UPLINK and the save lamp share the row space equally, so both have one size */
  .st-uplink,
  .st-save {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.4em;
    border-color: rgba(30, 36, 39, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-panels {
    flex-direction: column;
  }
  .mc-panel {
    flex: 1 1 50%;
  }
  .log,
  .v-body,
  .mailpane,
  .watch,
  .reportpane {
    padding: 0.6em 0.7em;
  }
  .fbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.2em;
    padding: 0.3em 0.35em;
    overflow: visible;
  }
  .fbar button {
    display: flex;
    min-width: 0;
    min-height: 1.85rem;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.1em;
    font-size: 0.68em;
    color: var(--haze);
    background: var(--hall);
    border: 1px solid var(--haze);
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }
  .fbar button:hover,
  .fbar button:active,
  .fbar button:focus-visible {
    color: var(--hall);
    background: var(--haze);
    border-color: var(--haze);
  }
  .fk {
    display: none;
  }
  .tab,
  .mrow,
  .mc-use {
    min-height: var(--tap-mobile);
  }
}
.livecam {
  margin: 0 0 0.8em;
}
canvas.live {
  display: block;
  width: min(100%, 640px);
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  border: 1px solid var(--rib);
  background: #a88d5c;
}
/* Drop-down list in Setup: an option button with a list in the style of the
   context menu */
.set-pick {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* Down arrow after the button text. Buttons show their text in capitals,
   and vertical-align: middle puts the arrow too low for capitals. So the
   arrow is lifted until its middle lines up with the middle of the capital
   letters, which in Plex Mono is 0.349em above the baseline.
   Width and height are rounded to whole pixels to keep the edges sharp, and
   the width to an even number so the tip lands on a pixel. Browsers without
   round() use the plain em values. */
.set-pick-btn::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  width: round(0.6em, 2px);
  height: 0.35em;
  height: round(0.35em, 1px);
  margin-left: 0.6em;
  vertical-align: 0.175em;
  vertical-align: calc(0.349em - round(0.35em, 1px) / 2);
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.set-pick-btn[aria-expanded="true"] {
  border-color: var(--dust);
}
.set-pick-list {
  position: absolute;
  z-index: 6;
  top: 100%;
  left: 0;
  min-width: 100%;
  margin-top: 2px;
  padding: 0.2em 0;
  background: var(--hall);
  border: 1px solid var(--haze);
  box-shadow: 0.35em 0.35em 0 rgba(0, 0, 0, 0.55);
  font-size: 0.9em;
}
.set-pick-item {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  color: var(--haze);
  background: none;
  border: 0;
  padding: 0.15em 0.9em;
  text-shadow: inherit;
}
.set-pick-item[aria-selected="true"] {
  background: var(--rib);
}
.set-pick-item:hover,
.set-pick-item:focus-visible {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  outline: none;
}
.set-range {
  width: min(14em, 40vw);
  accent-color: var(--titan);
}
.st-sub {
  margin-top: 0.8em;
}
.st-json {
  max-height: 16em;
  overflow: auto;
  font-size: 0.85em;
}
.desk {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.screen.desktop .panes,
.screen.desktop .fbar,
.screen.desktop .tmux {
  display: none;
}
.wb-bar {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.15em 0.7em;
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  font-size: 0.85em;
}
.wb-title {
  font-family: var(--font-crt);
  font-size: 1.3em;
  line-height: 1;
}
.wb-info {
  color: var(--ink-soft);
}
.wb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}
.wb-btn {
  font: inherit;
  color: var(--hall);
  background: none;
  border: 1px solid rgba(30, 36, 39, 0.5);
  padding: 0 0.45em;
}
.wb-btn.live {
  background: var(--hall);
  color: var(--titan);
}
.wb-back {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.06) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(ellipse at 70% 30%, #2a3236 0%, var(--hall) 70%);
}
.wb-tools {
  position: absolute;
  right: 0.6em;
  top: 0.6em;
  bottom: 0.6em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  gap: 0.4em;
}
.wb-icon {
  width: 6.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: 0.3em 0.2em;
  user-select: none;
  outline: none;
}
.wb-icon svg {
  width: 3.2em;
  height: 2.4em;
  image-rendering: pixelated;
}
.wb-label {
  font-size: 0.8em;
  text-align: center;
  background: var(--hall);
  padding: 0 0.3em;
  overflow-wrap: anywhere;
}
.wb-icon.sel .wb-label,
.wb-icon:focus-visible .wb-label {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
}
.wb-icon.dim .wb-label {
  color: var(--dust);
}
.wb-win {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--hall);
  border: 2px solid var(--dust);
  box-shadow: 0.35em 0.35em 0 rgba(0, 0, 0, 0.55);
  min-width: 180px;
  min-height: 120px;
}
.wb-win.act {
  border-color: var(--haze);
}
.wb-tbar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.2em;
  background: repeating-linear-gradient(
    0deg,
    var(--rib) 0 1px,
    transparent 1px 3px
  );
  user-select: none;
  touch-action: none;
}
.wb-win.act .wb-tbar {
  background: repeating-linear-gradient(
    0deg,
    var(--titan) 0 1px,
    var(--hall) 1px 3px
  );
}
.wb-wtitle {
  background: var(--hall);
  padding: 0 0.4em;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-win.act .wb-wtitle {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
}
.wb-gad {
  width: 1.4em;
  height: 1.1em;
  border: 1px solid var(--dust);
  background: var(--hall);
  padding: 0;
  position: relative;
  flex: none;
}
.wb-close::after {
  content: "";
  position: absolute;
  inset: 0.25em 0.4em;
  background: var(--haze);
}
.wb-depth {
  margin-left: auto;
}
.wb-depth::before,
.wb-depth::after {
  content: "";
  position: absolute;
  width: 0.6em;
  height: 0.45em;
  border: 1px solid var(--haze);
}
.wb-depth::before {
  left: 0.15em;
  top: 0.12em;
  background: var(--hall);
}
.wb-depth::after {
  left: 0.45em;
  top: 0.35em;
  background: var(--haze);
}
.wb-wbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.wb-wbody > * {
  flex: 1;
  min-height: 0;
}
.wb-wbody.wb-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.2em;
  padding: 0.5em;
}
.wb-wbody.wb-icons > * {
  flex: none;
}
.wb-wbody.wb-live {
  padding: 0.4em;
  align-items: center;
  justify-content: center;
}
.wb-wbody.wb-live canvas.live {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.wb-size {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.9em;
  height: 0.9em;
  background: linear-gradient(135deg, transparent 50%, var(--dust) 50%);
  touch-action: none;
}
.fields {
  display: grid;
  grid-template-columns: minmax(7em, max-content) minmax(0, 1fr);
  gap: 0.1em 1.2em;
  margin: 0;
}
.fields dt {
  color: var(--dust);
}
.fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.fields dt.err,
.fields dd.err {
  color: var(--flag);
}
.fields dt.warn,
.fields dd.warn {
  color: var(--titan);
}
.fields.help dt {
  color: var(--haze);
}
.etable-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.log > .etable-wrap {
  margin: 0.75em 0;
}
.etable {
  border-collapse: collapse;
  min-width: 100%;
}
.etable th {
  color: var(--titan);
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--rib);
  padding: 0 1.2em 0.15em 0;
  white-space: nowrap;
}
.etable td {
  padding: 0.1em 1.2em 0.1em 0;
  vertical-align: top;
  border-bottom: 1px dotted var(--rib);
}
.etable tr.err td {
  color: var(--flag);
}
.paras p {
  margin: 0.75em 0;
}
.paras > p:first-child {
  margin-top: 0;
}
.paras > p:last-child {
  margin-bottom: 0;
}
.telem {
  margin-bottom: 0.9em;
}
.telem dd {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.cbar {
  white-space: pre;
  font-variant-ligatures: none;
}
.meter-text {
  white-space: nowrap;
}
.st-hdd {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.st-led.on {
  background: var(--lamp);
  box-shadow: 0 0 5px var(--lamp);
}
.wb-bar .st-led {
  background: rgba(30, 36, 39, 0.35);
}
.wb-bar .st-led.on {
  background: #5e8c3f;
  box-shadow: 0 0 5px #5e8c3f;
}
@media (max-width: 520px) {
  .fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .fields dd {
    margin-bottom: 0.35em;
  }
  .fields dt:empty {
    display: none;
  }
}
.grip {
  display: inline-block;
  flex: none;
  width: 0.5em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.05em;
  opacity: 0.6;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect y='8' width='2' height='2'/%3E%3Crect x='4' y='8' width='2' height='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect y='8' width='2' height='2'/%3E%3Crect x='4' y='8' width='2' height='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.grip:hover {
  opacity: 1;
  color: var(--titan);
}
.grip-space {
  display: inline-block;
  width: 0.6em;
  margin-right: 0.45em;
  flex: none;
}
.mc-row .grip {
  align-self: center;
}
.entry-title .grip {
  height: 0.7em;
  width: 0.45em;
}
.wb-icon {
  position: relative;
}
.wb-img {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.wb-badge {
  position: absolute;
  left: 0.08em;
  bottom: 0.08em;
  width: 1.05em;
  height: 1.05em;
  background: var(--haze);
  border: 1px solid var(--hall);
  box-shadow: 0 0 0 1px var(--haze);
  display: grid;
  place-items: center;
}
.wb-dots {
  width: 0.42em;
  height: 0.66em;
  background-color: var(--hall);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect y='8' width='2' height='2'/%3E%3Crect x='4' y='8' width='2' height='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Crect width='2' height='2'/%3E%3Crect x='4' width='2' height='2'/%3E%3Crect y='4' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect y='8' width='2' height='2'/%3E%3Crect x='4' y='8' width='2' height='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.wb-icon:hover .wb-badge {
  background: var(--titan);
  box-shadow: 0 0 0 1px var(--titan);
}
.wb-icon.sel .wb-img svg {
  filter: invert(0.85) hue-rotate(180deg);
}
.wb-lock {
  font-size: 0.7em;
  color: var(--flag);
}
.wb-icon.locked .wb-label {
  color: var(--flag);
}
.lnk.locked {
  color: var(--flag);
  text-decoration-style: dashed;
}
.lnk.locked::after {
  content: " [locked]";
  font-size: 0.85em;
}
.ctx {
  position: absolute;
  z-index: 6;
  min-width: 16em;
  background: var(--hall);
  border: 1px solid var(--haze);
  box-shadow: 0.35em 0.35em 0 rgba(0, 0, 0, 0.55);
  padding: 0.2em 0;
  font-size: 0.9em;
}
.ctx-item {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--haze);
  background: none;
  border: 0;
  padding: 0.15em 0.9em;
  text-shadow: inherit;
}
.ctx-item:hover:not(:disabled),
.ctx-item:focus-visible {
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  outline: none;
}
.ctx-item:disabled {
  color: var(--dust);
}
.ctx-key {
  color: var(--dust);
}
.ctx-item:hover .ctx-key {
  color: var(--ink-soft);
}
.ctx-sep {
  height: 1px;
  background: var(--rib);
  margin: 0.2em 0;
}
.notification-stack {
  position: absolute;
  right: 0.8em;
  top: 2.2em;
  z-index: 7;
  width: min(27em, calc(100% - 1.6em));
  max-height: calc(100% - 3em);
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  overflow-y: auto;
  pointer-events: none;
}
.notification-stack > * {
  width: 100%;
  flex: 0 0 auto;
  pointer-events: auto;
}
.tut {
  position: relative;
  background: var(--hall);
  border: 3px double var(--titan);
  padding: 0.6em 0.9em 0.7em;
  box-shadow: 0.4em 0.4em 0 rgba(0, 0, 0, 0.5);
}
.tut-head {
  font-family: var(--font-crt);
  font-size: 1.25em;
  color: var(--titan);
}
.tut p {
  margin: 0.35em 0 0.6em;
}
.tut-btns {
  display: flex;
  gap: 0.6em;
}
.tut-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
}
/* The roll toggle exists on narrow screens only; tour.js keeps .rolled off
   elsewhere, so a wide screen always shows the whole panel. */
.tut-roll {
  display: none;
  flex: 0 0 auto;
}
.tut.rolled .tut-body {
  display: none;
}
/* Compact size shared with the notes navigation buttons. The whole header
   bar toggles the panel, so the tap target stays the full width. */
[data-screen="narrow"] .tut-roll {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.15em 0.55em;
  font-size: 0.85em;
  line-height: 1.3;
}
[data-screen="narrow"] .tut-bar {
  cursor: pointer;
}
[data-screen="narrow"] .tut.rolled {
  padding-bottom: 0.45em;
  box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.5);
}
/* The tour panel is the first child of the stack. Where the stack hangs from
   the bottom edge, the order is reversed so the panel stays on that edge and
   mail toasts pile up above it. */
.screen.desktop .notification-stack {
  top: auto;
  bottom: 1em;
  right: auto;
  left: 1em;
  flex-direction: column-reverse;
}
@media (max-width: 700px) {
  .notification-stack {
    top: auto;
    right: 0.45em;
    bottom: 8.7rem;
    left: 0.45em;
    width: auto;
    max-height: min(60%, 27rem);
    flex-direction: column-reverse;
  }
  .notification-stack.tut-mobile-top {
    top: 0.45em;
    bottom: auto;
    flex-direction: column;
  }
  .notification-stack.tut-mobile-bottom {
    top: auto;
    bottom: 8.7rem;
    flex-direction: column-reverse;
  }
  .screen.desktop .notification-stack {
    bottom: 9.7rem;
  }
  .tut {
    padding: 0.45em 0.65em 0.5em;
    font-size: 0.9em;
  }
  /* Same rendered size as .mail-toast-head (1.2em of the screen font),
     compensating for the 0.9em panel font above */
  .tut-head {
    font-size: 1.3333em;
  }
  .tut p {
    margin: 0.25em 0 0.4em;
  }
  .tut-btns {
    flex-wrap: wrap;
  }
  .tut-btns .btn {
    min-height: var(--tap-mobile);
  }
}
.title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
  margin-top: 1.4em;
}
.title-go {
  margin-top: 1.4em;
  padding: 0.35em 1.6em;
}
.wb-title {
  font-family: var(--font-crt);
  font-size: 1.3em;
  line-height: 1;
  color: var(--hall);
  background: none;
  border: 0;
  padding: 0;
}
.wb-msg {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-msg.err {
  color: #8e3b2a;
}
.wb-tools {
  flex-wrap: nowrap;
  gap: 0.6em;
  overflow-y: auto;
  scrollbar-width: none;
}
.wb-group {
  border: 1px solid var(--rib);
  background: rgba(30, 36, 39, 0.75);
  padding: 0.1em 0.2em 0.3em;
}
.wb-gtitle {
  font-size: 0.72em;
  color: var(--dust);
  letter-spacing: 0.12em;
  padding: 0.1em 0.4em;
  border-bottom: 1px solid var(--rib);
  margin-bottom: 0.2em;
}
.wb-ggrid {
  display: grid;
  grid-template-columns: repeat(2, 6.2em);
  gap: 0.1em;
}
.wb-ggrid .wb-icon {
  width: 6.2em;
}
.switcher {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  min-width: min(24em, 90%);
  background: var(--hall);
  border: 3px double var(--haze);
  box-shadow: 0.4em 0.4em 0 rgba(0, 0, 0, 0.55);
  padding: 0.3em 0 0.4em;
}
.switcher-head {
  text-align: center;
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  margin: -0.3em 0 0.3em;
}
.switcher-item {
  padding: 0.15em 1em;
}
.switcher-item.on {
  background: var(--titan);
  color: var(--hall);
  text-shadow: none;
}
.switcher-foot {
  font-size: 0.8em;
  padding: 0.3em 1em 0;
}
.drag-ghost {
  position: fixed;
  left: -1000px;
  top: -1000px;
  padding: 0.2em 0.6em;
  background: var(--haze);
  color: var(--hall);
  font-family: var(--font-mono);
  font-size: 14px;
  border: 1px solid var(--hall);
}
.sysfile p {
  margin: 0 0 0.25em;
}
.sys-sec {
  color: var(--titan);
  margin: 0.5em 0 0.15em;
}
.sysfile .fields .fields {
  margin-top: 0.1em;
}
.etable caption {
  caption-side: top;
  text-align: left;
  color: var(--dust);
  padding-bottom: 0.3em;
}
.etable.wraps {
  table-layout: auto;
  width: 100%;
}
.etable.wraps td,
.etable.wraps th {
  overflow-wrap: anywhere;
  white-space: normal;
}
.etable td {
  overflow-wrap: anywhere;
}
.json-list {
  margin: 0;
  padding-left: 1.4em;
}
.fields.json {
  gap: 0 0.8em;
}
.json-v {
  color: var(--haze);
}
.st-json {
  max-height: 20em;
  overflow: auto;
  border-left: 2px solid var(--rib);
  padding-left: 0.7em;
  margin: 0.3em 0 0.6em;
  font-size: 0.9em;
}
.mail-toast {
  background: var(--hall);
  border: 2px solid var(--titan);
  box-shadow: 0 0 16px rgba(199, 132, 58, 0.4),
    0.4em 0.4em 0 rgba(0, 0, 0, 0.55);
  padding: 0.7em 0.9em 0.8em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  animation: mail-toast-in 0.3s ease-out;
}
@keyframes mail-toast-in {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.mail-toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-crt);
  font-size: 1.2em;
  color: var(--titan);
  border-bottom: 1px solid var(--rib);
  padding-bottom: 0.3em;
}
.mail-toast-tag {
  color: var(--flag);
  margin-right: 0.4em;
  font-weight: bold;
}
.mail-toast-close {
  background: none;
  border: none;
  color: var(--dust);
  font-size: 1.3em;
  line-height: 1;
  padding: 0 0.2em;
}
.mail-toast-close:hover {
  color: var(--haze);
}
.mail-toast-body {
  font-size: 0.9em;
  color: var(--haze);
  line-height: 1.4;
}
.mail-toast-actions {
  display: flex;
  gap: 0.6em;
  margin-top: 0.2em;
}
@media (max-width: 700px) {
  .mail-toast {
    width: 100%;
  }
}

/* Accessibility */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.sr-mode .glass {
  display: none;
}
body.sr-mode .screen,
body.sr-mode .panes,
body.sr-mode .blink {
  animation: none !important;
}
.mc-list:focus-visible {
  outline: 1px solid var(--titan);
  outline-offset: -1px;
}

.screen.title-screen #st-mode,
[data-screen="narrow"] #st-mode {
  display: none;
}
.title-toggles {
  margin-top: 0.6em;
}
.pane-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.pane-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pane-close {
  font: inherit;
  font-size: 0.9em;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  padding: 0 0.4em;
  line-height: 1.3;
  opacity: 0.8;
}
.pane-close:hover,
.pane-close:focus-visible {
  opacity: 1;
}
.tut-spot {
  outline: 2px dashed var(--titan) !important;
  outline-offset: 3px;
  position: relative;
  z-index: 4;
}
@media (prefers-reduced-motion: no-preference) {
  .tut-spot {
    animation: tutspot 1.2s ease-in-out infinite;
  }
}
body.motion-force .tut-spot {
  animation: tutspot 1.2s ease-in-out infinite;
}
body.motion-reduce .tut-spot,
body.sr-mode .tut-spot {
  animation: none;
}
@keyframes tutspot {
  50% {
    outline-color: var(--haze);
  }
}

/* Setup help tooltip: appears under the row being hovered or focused */
.dlg {
  position: relative;
}
.set-tip {
  position: absolute;
  z-index: 2;
  max-width: min(22em, calc(100% - 16px));
  padding: 0.35em 0.6em;
  background: var(--haze);
  color: var(--hall);
  text-shadow: none;
  font-size: 0.85em;
  line-height: 1.4;
  text-wrap: pretty;
  box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.set-row:hover .set-label {
  color: var(--haze);
}

/* Desktop: a maximised window fills the desktop exactly */
.wb-win.maximised {
  box-shadow: none;
  border-width: 0;
}

/* Setup group heading and DEBUG panel */
.set-group {
  color: var(--titan);
  font-size: 0.85em;
  letter-spacing: 0.1em;
  margin: 0.2em 0;
}
/* Setup sections. FULL LIST stacks them under plain headings; SECTIONS folds
   each one behind a header row laid out like a line in FILES: name on the
   left, count on the right. Open rows hang from a rule on the left. */
.set-list,
.set-sec-body {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.set-sec-body {
  margin: 0.35em 0 0.35em 0.35em;
  padding-left: 0.8em;
  border-left: 2px solid var(--rib);
}
.set-sec-body[hidden] {
  display: none;
}
.set-body.set-folding {
  gap: 0;
}
.set-folding > .set-row {
  margin-bottom: 0.35em;
}
.set-sec:last-child > .set-sec-body {
  margin-bottom: 0;
}
/* Notice under the Language row in a translated game */
.set-note {
  margin: 0 0 0.35em;
  color: var(--dust);
  font-size: 0.85em;
  line-height: 1.4;
}
/* Warning under incompatible settings */
.set-warn p {
  margin: 0;
}
.set-warn p + p {
  margin-top: 0.5em;
}
.set-warn {
  color: var(--flag);
  font-size: 0.85em;
  line-height: 1.4;
  padding-left: 0.6em;
  border-left: 2px solid var(--flag);
}
.set-sec-head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  width: 100%;
  font: inherit;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--titan);
  text-shadow: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rib);
  padding: 0.35em 0.1em;
}
.set-sec-mark {
  color: var(--dust);
}
.set-sec-name {
  flex: 1 1 auto;
}
.set-sec-count {
  color: var(--dust);
  letter-spacing: 0;
}
.set-sec-head:hover .set-sec-name,
.set-sec-head.open .set-sec-name {
  color: var(--haze);
}
.set-sec-head.open .set-sec-mark {
  color: var(--titan);
}
.dbg {
  position: absolute;
  right: 0.8em;
  top: 0.8em;
  z-index: 31;
  width: min(21em, calc(100% - 1.6em));
  max-height: calc(100% - 1.6em);
  overflow-y: auto;
  background: var(--hall);
  border: 2px solid #6fbf5a;
  box-shadow: 0.3em 0.3em 0 rgba(0, 0, 0, 0.55);
  font-size: 0.8em;
}
.dbg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15em 0.5em;
  background: #6fbf5a;
  color: var(--hall);
  text-shadow: none;
  cursor: var(--cur-move);
  user-select: none;
  touch-action: none;
}
.dbg-fold {
  font: inherit;
  color: var(--hall);
  background: none;
  border: 1px solid var(--hall);
  padding: 0 0.4em;
}
.dbg-info {
  white-space: pre-wrap;
  padding: 0.4em 0.6em;
  color: var(--dust);
  border-bottom: 1px solid var(--rib);
}
.dbg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3em;
  padding: 0.5em;
}
.dbg-grid .btn {
  padding: 0.15em 0.3em;
  font-size: 0.95em;
}
.dbg.folded .dbg-info,
.dbg.folded .dbg-grid {
  display: none;
}

/* Dialogs never grow past the screen: the body scrolls, while the title and
   buttons stay in view. */
.dlg-ov {
  overflow: hidden;
}
.dlg {
  max-height: calc(100% - 1em);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dlg-title,
.dlg-btns {
  flex: none;
}
.dlg-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Setup screen: equal top and bottom padding around the settings and the
   button row. Other dialogs keep the shared values. */
.dlg-body.set-body {
  padding: 0.6em 1em;
}
.dlg-body.set-body + .dlg-btns {
  padding: 0.6em 1em;
}

.dlg:focus {
  outline: none;
}
/* Storage page rows: readable name, then where it is kept, size and raw key */
.storage-name {
  display: grid;
  min-width: 0;
}
.storage-meta {
  font-size: 0.82em;
  overflow-wrap: anywhere;
}

/* Decision time: everything around the shell steps back */
.screen .fbar,
.screen .tmux,
.screen .wb-bar,
.screen .pane-head {
  transition: opacity var(--fade, 0.7s) ease-in-out;
}
.screen.finale .fbar,
.screen.finale .tmux,
.screen.finale .wb-bar,
.screen.finale .pane-head {
  opacity: 0.12;
}
.screen.finale .notification-stack {
  display: none;
}
[data-motion="reduced"] .screen .fbar,
[data-motion="reduced"] .screen .tmux,
[data-motion="reduced"] .screen .wb-bar,
[data-motion="reduced"] .screen .pane-head {
  transition: none;
}
.ln.epilogue {
  color: var(--haze);
  max-width: 62ch;
  line-height: 1.6;
}

/* Finale cinema: a black stage over the whole terminal. Everything is centred
   with even space around it; each card fades in on its own. */
.cine {
  position: absolute;
  inset: 0;
  z-index: 30;
  will-change: opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5em;
  background: #000;
  color: var(--haze);
  opacity: 0;
  transition: opacity var(--fade, 0.7s) ease-in-out;
  outline: none;
  overflow: hidden;
}
.cine.on {
  opacity: 1;
}
.cine-stage {
  width: 100%;
  max-width: 46em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  text-align: center;
}
.cine-lines {
  display: grid;
  gap: 1em;
}
.cine-line {
  margin: 0;
  font-family: var(--font-crt);
  font-size: 1.5em;
  line-height: 1.3;
  text-wrap: balance;
}
.cine-head {
  font-family: var(--font-crt);
  font-size: 1.6em;
  color: var(--titan);
  letter-spacing: 0.08em;
  margin-bottom: 0.4em;
}
.cine-choices {
  display: grid;
  gap: 0.45em;
  width: min(100%, 32em);
}
.cine-choice {
  font: inherit;
  text-align: left;
  color: var(--haze);
  background: none;
  border: 1px solid var(--rib);
  padding: 0.55em 0.8em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
.cine-choice:hover:not(:disabled),
.cine-choice:focus-visible {
  border-color: var(--titan);
  color: var(--titan);
  outline: none;
}
.cine-choice:disabled {
  color: var(--rib);
}
.cine-note {
  color: var(--flag);
  font-size: 0.85em;
}
.cine-frame {
  width: min(100%, 44em);
}
.scene {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rib);
  background: #000;
}
.cine-caption {
  margin: 1em auto 0;
  max-width: 38em;
  min-height: 3.2em;
  font-family: var(--font-crt);
  font-size: 1.35em;
  line-height: 1.35;
  text-wrap: balance;
}
/* The office's letter: paper with the same space on every side */
.cine-letter {
  width: min(100%, 34em);
  padding: 1.4em;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  text-shadow: none;
  box-shadow: 0.4em 0.4em 0 rgba(0, 0, 0, 0.6);
}
.cine-letter-head {
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cine-letter-meta {
  color: var(--ink-soft);
  font-size: 0.85em;
}
.cine-letter-body {
  margin: 1em 0 0;
  line-height: 1.55;
}
.cine-kicker {
  color: var(--dust);
  letter-spacing: 0.3em;
}
.cine-name {
  margin: 0.15em 0 0.3em;
  font-family: var(--font-crt);
  font-weight: 400;
  font-size: 3.2em;
  line-height: 1;
  color: var(--titan);
  text-transform: uppercase;
}
.cine-sub {
  color: var(--dust);
}
/* Button groups: each row centred, a short caption before its buttons */
.cine-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.6em;
}
.cine-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
.cine-choices .cine-group {
  margin-top: 0.8em;
}
.cine-group-label {
  color: var(--dust);
  font-size: 0.8em;
  letter-spacing: 0.15em;
}
/* Cards cross-fade: layers share one grid cell, the new one fades in over
   the old one as it fades out */
.cine-stage {
  display: grid;
}
.cine-layer {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  transition: opacity var(--fade, 0.45s) ease-in-out;
}
.cine-layer.fading {
  opacity: 0;
}
.cine-layer.leaving {
  pointer-events: none;
}
[data-motion="reduced"] .cine-layer {
  transition: none;
}
[data-motion="reduced"] .cine {
  transition: none;
}

/* Setup rows that cannot apply right now */
.set-unavail .set-label,
.set-unavail .set-ctl {
  opacity: 0.55;
}
.set-why {
  display: block;
  font-size: 0.8em;
  color: var(--dust);
}
/* Choice notes sit on the choice's centre line */
.cine-choice {
  align-items: center;
}

/* Decision report page */
.decision-list {
  margin: 0.8em 0;
  padding-left: 1.6em;
  display: grid;
  gap: 0.35em;
}

.cine-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.2em;
  text-align: center;
  color: var(--dust);
  font-size: 0.85em;
}

/* The page fades in from black when it loads */
.room {
  animation: page-in var(--fade, 0.7s) ease-in-out both;
}
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .room {
    animation: none;
  }
}
[data-motion="reduced"] .room {
  animation: none;
}

/* The Continue control of the ending: out of sight until it has focus */
.cine-next {
  position: absolute;
  left: 50%;
  bottom: 3em;
  transform: translateX(-50%);
  font: inherit;
  color: var(--haze);
  background: #000;
  border: 1px solid var(--titan);
  padding: 0.3em 0.9em;
  opacity: 0;
  pointer-events: none;
}
.cine-next:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: none;
}