@layer overscan {
.ov {
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-2);
  color: var(--ov-ink);
  background: var(--ov-field);
  letter-spacing: var(--ov-track);
}
:root,
[data-ov-theme] { color-scheme: dark; }
.ov-table__scroll,
.ov-code__pre,
.ov-cli__out,
.ov-log__lines,
.ov-window__body,
.ov-rail,
.ov-pop,
.ov-tip {
  scrollbar-width: thin;
  scrollbar-color: var(--ov-scroll-thumb, var(--ov-line-strong))
                   var(--ov-scroll-track, var(--ov-field));
}
.ov-panel,
.ov-btn,
.ov-input,
.ov-select,
.ov-modal__box,
.ov-screen__body .ov-viewport {
  --ov-cut-w: 0px;
  --ov-cut-tl: 0px;
  --ov-cut-tr: 0px;
  --ov-cut-bl: 0px;
  --ov-cut-br: 0px;
  --ov-cut-off: calc(var(--ov-cut-w) * 0.7071);
  --ov-cut-img:
    linear-gradient(135deg, transparent 50%, var(--ov-furn) 50%),
    linear-gradient(135deg, var(--ov-furn) 50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, var(--ov-furn) 50%),
    linear-gradient(45deg, var(--ov-furn) 50%, transparent 50%);
  --ov-cut-size:
    var(--ov-cut-br) var(--ov-cut-br),
    var(--ov-cut-tl) var(--ov-cut-tl),
    var(--ov-cut-tr) var(--ov-cut-tr),
    var(--ov-cut-bl) var(--ov-cut-bl);
  --ov-cut-pos:
    calc(100% - var(--ov-cut-off)) calc(100% - var(--ov-cut-off)),
    var(--ov-cut-off) var(--ov-cut-off),
    calc(100% - var(--ov-cut-off)) var(--ov-cut-off),
    var(--ov-cut-off) calc(100% - var(--ov-cut-off));
  background-origin: border-box;
  background-repeat: no-repeat;
}
.ov-panel {
  position: relative;
  background-color: var(--ov-panel);
  --ov-cut-w: var(--ov-bezel);
  --ov-cut-br: var(--ov-corner);
  background-image: var(--ov-cut-img);
  background-size: var(--ov-cut-size);
  background-position: var(--ov-cut-pos);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  padding-block: calc(var(--ov-pad) + 4px) calc(var(--ov-pad) + var(--ov-corner));
  padding-inline: var(--ov-pad) calc(var(--ov-pad) + var(--ov-corner));
  display: flex;
  flex-direction: column;
  gap: var(--ov-gap);
  clip-path: polygon(
    0 calc(var(--ov-label-overhang) * -1),
    100% calc(var(--ov-label-overhang) * -1),
    100% calc(100% - var(--ov-corner)),
    calc(100% - var(--ov-corner)) 100%,
    0 100%
  );
}
.ov-panel > *:not(ov-field):not(.ov-panel__label) {
  position: relative;
  z-index: 1;
}
.ov-panel__label { z-index: 2; }
.ov-panel__label {
  position: absolute;
  top: calc(var(--ov-bezel) * -1);
  left: calc(var(--ov-pad) + 2px);
  transform: translateY(-50%);
  padding: 0 6px;
  background: var(--ov-lit-bg);
  color: var(--ov-lit-fg);
  font-size: var(--ov-size-2);
  text-transform: var(--ov-case);
  letter-spacing: calc(var(--ov-track) + 0.4px);
}
.ov-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ov-row__key {
  flex: 1 1 auto;
  color: var(--ov-dim);
  text-transform: var(--ov-case);
}
.ov-row__key--faint { color: var(--ov-faint); }
.ov-row__key--ink { color: var(--ov-ink); }
.ov-row__value {
  flex: 0 0 auto;
  min-width: 7ch;
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0;
  color: var(--ov-ink);
  font-variant-numeric: tabular-nums;
}
.ov-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--ov-alarm);
  flex: 0 0 auto;
}
.ov-alarm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  color: var(--ov-alarm);
  text-transform: var(--ov-case);
}
.ov-aux {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ov-accent-2);
  font-size: var(--ov-size-1);
  text-transform: var(--ov-case);
}
.ov-aux__bar {
  inline-size: 44px;
  block-size: 6px;
  background: var(--ov-accent-2);
  flex: 0 0 auto;
}
.ov-instrument { display: flex; flex-direction: column; gap: 4px; }
.ov-instrument__label {
  color: var(--ov-faint);
  font-size: var(--ov-size-1);
  text-transform: var(--ov-case);
}
.ov-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--ov-bar-gap, 2px);
  block-size: var(--ov-bar-height, 10px);
}
.ov-bar__cell {
  flex: 1 1 0;
  block-size: 100%;
  background: var(--ov-line);
}
.ov-bar__cell--on { background: var(--ov-accent); }
.ov-bar__cell--alt { background: var(--ov-accent-2); }
.ov-bar__cell--over { background: var(--ov-alarm); }
.ov-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: var(--ov-case);
  color: var(--ov-ink);
  background-color: var(--ov-btn-bg);
  background-image:
    linear-gradient(var(--ov-furn) 0 0), linear-gradient(var(--ov-furn) 0 0),
    linear-gradient(var(--ov-furn) 0 0), linear-gradient(var(--ov-furn) 0 0),
    linear-gradient(var(--ov-furn) 0 0), linear-gradient(var(--ov-furn) 0 0),
    linear-gradient(var(--ov-furn) 0 0), linear-gradient(var(--ov-furn) 0 0),
    var(--ov-cut-img);
  background-position:
    0 var(--ov-ctl-over), var(--ov-ctl-over) 0,
    100% var(--ov-ctl-over), calc(100% - var(--ov-ctl-over)) 0,
    0 calc(100% - var(--ov-ctl-over)), var(--ov-ctl-over) 100%,
    100% calc(100% - var(--ov-ctl-over)), calc(100% - var(--ov-ctl-over)) 100%,
    var(--ov-cut-pos);
  --ov-tick-tl: var(--ov-ctl-tick);
  --ov-tick-tr: var(--ov-ctl-tick);
  --ov-tick-bl: var(--ov-ctl-tick);
  --ov-tick-br: var(--ov-ctl-tick);
  background-size:
    var(--ov-tick-tl) var(--ov-rule), var(--ov-rule) var(--ov-tick-tl),
    var(--ov-tick-tr) var(--ov-rule), var(--ov-rule) var(--ov-tick-tr),
    var(--ov-tick-bl) var(--ov-rule), var(--ov-rule) var(--ov-tick-bl),
    var(--ov-tick-br) var(--ov-rule), var(--ov-rule) var(--ov-tick-br),
    var(--ov-cut-size);
  --ov-cut-w: var(--ov-btn-border);
  --ov-cut-br: calc(var(--ov-ctl-corner) + var(--ov-ctl-chamfer));
  --ov-cut-tl: var(--ov-ctl-chamfer);
  --ov-cut-tr: var(--ov-ctl-chamfer);
  --ov-cut-bl: var(--ov-ctl-chamfer);
  box-shadow:
    inset var(--ov-ctl-edge) 0 0 0 var(--ov-furn),
    inset 0 calc(var(--ov-ctl-base) * -1) 0 0 var(--ov-furn);
  border: var(--ov-btn-border) solid var(--ov-line-strong);
  border-radius: 0;
  padding: 9px calc(16px + var(--ov-ctl-corner) + var(--ov-ctl-chamfer))
           9px calc(16px + var(--ov-ctl-edge) + var(--ov-ctl-chamfer));
  cursor: pointer;
  transform: skewX(calc(var(--ov-shear) * -1));
  clip-path: var(--ov-ctl-clip);
  transition: background-color var(--ov-dur-fast) var(--ov-ease),
              border-color var(--ov-dur-fast) var(--ov-ease);
}
.ov-btn > span,
.ov-btn::before,
.ov-btn::after { display: inline-block; transform: skewX(var(--ov-shear)); }
.ov-btn::before { content: var(--ov-bracket-o); }
.ov-btn::after { content: var(--ov-bracket-c); }
.ov-btn:hover {
  background-color: var(--ov-raised);
  border-color: var(--ov-accent);
  --ov-furn: var(--ov-accent);
}
.ov-btn[aria-pressed="true"] {
  background-color: var(--ov-lit-bg);
  color: var(--ov-lit-fg);
  border-color: var(--ov-accent);
  --ov-furn: var(--ov-accent);
}
.ov-btn[aria-disabled="true"] {
  color: var(--ov-faint);
  border-color: var(--ov-line);
  cursor: not-allowed;
  --ov-furn: var(--ov-line);
}
.ov-btn[aria-disabled="true"]:hover {
  background-color: var(--ov-panel);
  border-color: var(--ov-line);
  --ov-furn: var(--ov-line);
}
.ov :focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: -2px;
}
.ov-tabs { display: flex; align-items: flex-end; }
.ov-tab {
  font: inherit;
  letter-spacing: inherit;
  text-transform: var(--ov-case);
  background: none;
  border: 0;
  padding: 8px var(--ov-pad) 6px;
  color: var(--ov-dim);
  cursor: pointer;
  border-bottom: 2px solid var(--ov-line);
}
.ov-tab[aria-selected="true"] {
  color: var(--ov-accent);
  border-bottom-color: var(--ov-accent);
}
.ov-input {
  font: inherit;
  letter-spacing: 0;
  color: var(--ov-ink);
  background-color: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  --ov-cut-w: var(--ov-bezel);
  --ov-cut-br: calc(var(--ov-ctl-corner) + var(--ov-ctl-chamfer));
  --ov-cut-tl: var(--ov-ctl-chamfer);
  --ov-cut-tr: var(--ov-ctl-chamfer);
  --ov-cut-bl: var(--ov-ctl-chamfer);
  background-image: var(--ov-cut-img);
  background-size: var(--ov-cut-size);
  background-position: var(--ov-cut-pos);
  padding: 9px calc(12px + var(--ov-ctl-corner) + var(--ov-ctl-chamfer))
           9px calc(12px + var(--ov-ctl-chamfer));
  min-inline-size: 0;
  clip-path: var(--ov-ctl-clip);
}
.ov-input::placeholder { color: var(--ov-faint); }
.ov-toggle {
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--ov-dim);
  text-transform: var(--ov-case);
}
.ov-toggle__track {
  inline-size: 34px;
  block-size: 16px;
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  display: flex;
  align-items: center;
  padding: 2px;
  flex: 0 0 auto;
}
.ov-toggle__knob {
  inline-size: 12px;
  block-size: 12px;
  background: var(--ov-line-strong);
  transition: transform var(--ov-dur-fast) var(--ov-ease),
              background var(--ov-dur-fast) var(--ov-ease);
}
.ov-toggle[aria-pressed="true"] .ov-toggle__track { background: var(--ov-accent); }
.ov-toggle[aria-pressed="true"] .ov-toggle__knob {
  transform: translateX(14px);
  background: var(--ov-field);
}
.ov-aside.ov-aside:not(:where([data-ov-chrome="full"], [data-ov-chrome="full"] *)),
.ov-head.ov-head:not(:where([data-ov-chrome="full"], [data-ov-chrome="full"] *)) {
  display: none;
}
[data-ov-chrome="bare"] .ov-aside.ov-aside,
[data-ov-chrome="bare"] .ov-head.ov-head {
  display: none;
}
.ov-state.ov-state.ov-state:not(:where([data-ov-chrome="full"], [data-ov-chrome="full"] *)),
[data-ov-chrome="bare"] .ov-state.ov-state.ov-state {
  padding: 0;
  border: 0;
  background: none;
  transform: none;
}
.ov-state.ov-state.ov-state:not(:where([data-ov-chrome="full"], [data-ov-chrome="full"] *)) .ov-state__word,
[data-ov-chrome="bare"] .ov-state.ov-state.ov-state .ov-state__word {
  color: inherit;
}
.ov-state.ov-state[data-ov-tone="ok"]:not(.ov-state--reading):not(:where([data-ov-chrome="full"], [data-ov-chrome="full"] *)),
[data-ov-chrome="bare"] .ov-state.ov-state[data-ov-tone="ok"]:not(.ov-state--reading) {
  display: none;
}
.ov-state {
  display: grid;
  gap: 2px;
  color: var(--ov-accent);
}
.ov-state__word {
  font-size: calc(var(--ov-size-2, 12px) * 1.5);
  letter-spacing: .1em;
  text-shadow: 0 0 calc(var(--ov-bloom, .2) * 10px) currentColor;
}
.ov-state__why { color: var(--ov-ink); letter-spacing: .06em; line-height: 1.45; overflow-wrap: anywhere; }
.ov-state__why:empty { display: none; }
.ov-state[data-ov-tone="bad"], .ov-state[data-ov-tone="bad"] .ov-state__why { color: var(--ov-alarm); }
.ov-state--panel {
  padding: 6px 10px;
  border: var(--ov-rule, 1px) solid currentColor;
}
.ov-state--panel[data-ov-tone="note"] { border-style: dashed; }
.ov-state--panel[data-ov-tone="bad"] { border-width: 3px; border-style: double; }
.ov-state--badge {
  justify-self: start;
  padding: 3px 10px;
  border: 2px solid currentColor;
  transform: skewX(calc(var(--ov-shear, 0deg) * -1));
}
.ov-state--badge .ov-state__word { font-size: var(--ov-size-2, 12px); }
.ov-state--badge[data-ov-tone="note"],
.ov-state--badge[data-ov-tone="bad"] {
  background: currentColor;
  border-style: solid;
}
.ov-state--badge[data-ov-tone="note"] .ov-state__word,
.ov-state--badge[data-ov-tone="bad"] .ov-state__word {
  color: var(--ov-field);
  text-shadow: none;
}
.ov-state--bar {
  padding: 2px 0 2px 10px;
  border-inline-start: 3px solid currentColor;
}
.ov-state--bar[data-ov-tone="note"] { border-inline-start-style: dashed; }
.ov-state--bar[data-ov-tone="bad"] { border-inline-start-width: 6px; }
.ov-state--bare { padding-block-end: 4px; }
.ov-state--bare .ov-state__word { font-size: calc(var(--ov-size-2, 12px) * 2.4); letter-spacing: .06em; }
.ov-state--bare[data-ov-tone="note"] { border-block-end: var(--ov-rule, 1px) dashed var(--ov-ink); }
.ov-state--bare[data-ov-tone="bad"] { border-block-end: 2px solid currentColor; }
.ov-state--edge {
  padding-block: 5px 2px;
  border-block-start: 3px solid currentColor;
}
.ov-state--edge[data-ov-tone="note"] { border-block-start-style: dashed; }
.ov-state--edge[data-ov-tone="bad"] { border-block-start-width: 6px; }
.ov-state--tag {
  justify-self: start;
  padding: 3px 9px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-inline-start: 3px solid currentColor;
}
.ov-state--tag[data-ov-tone="note"] { border-inline-start-style: dashed; }
.ov-state--tag[data-ov-tone="bad"] { background: color-mix(in srgb, currentColor 26%, transparent); }
.ov-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 2ch;
  padding-block-end: 6px;
  border-block-end: var(--ov-rule, 1px) solid var(--ov-line);
}
.ov-head--tight { justify-content: flex-start; }
.ov-head__name {
  font-size: var(--ov-size-2, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ov-head__note {
  color: var(--ov-faint);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.ov-badge {
  display: inline-block;
  transform: skewX(calc(var(--ov-shear) * -1));
  padding: 3px 8px;
  font-size: var(--ov-size-1);
  letter-spacing: calc(var(--ov-track) + 0.8px);
  text-transform: uppercase;
  color: var(--ov-accent);
  border: var(--ov-rule) solid currentColor;
}
.ov-badge--aux { color: var(--ov-accent-2); }
.ov-badge--fault { color: var(--ov-alarm); }
.ov-status {
  --ov-status-c: var(--ov-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 7px;
  font-size: var(--ov-size-1);
  letter-spacing: calc(var(--ov-track) + 0.8px);
  text-transform: uppercase;
  color: var(--ov-ink);
  border: var(--ov-rule) dashed var(--ov-status-c);
  background: repeating-linear-gradient(135deg, transparent 0 4px,
    color-mix(in srgb, var(--ov-status-c) 22%, transparent) 4px 5px);
}
.ov-status::before {
  content: '?';
  display: inline-grid;
  place-items: center;
  inline-size: 9px;
  block-size: 9px;
  font-size: 9px;
  line-height: 1;
  color: var(--ov-status-c);
  flex: 0 0 auto;
}
.ov-status::after { content: 'NO STATE'; color: var(--ov-status-c); }
.ov-status[data-ov-state] { border-style: solid; background: none; }
.ov-status[data-ov-state]::before { content: ''; background: var(--ov-status-c); }
.ov-status[data-ov-state]::after { content: none; }
.ov-status[data-ov-state="ok"] { --ov-status-c: var(--ov-accent); }
.ov-status[data-ov-state="ok"]::before { border-radius: 50%; }
.ov-status[data-ov-state="caution"] { --ov-status-c: var(--ov-accent-2); }
.ov-status[data-ov-state="caution"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ov-status[data-ov-state="alarm"] { --ov-status-c: var(--ov-alarm); }
.ov-status[data-ov-state="alarm"]::before { border-radius: 0; }
.ov-status[data-ov-state="off"] { --ov-status-c: var(--ov-dim); }
.ov-status[data-ov-state="off"]::before { background: none; border: 1.5px solid var(--ov-status-c); border-radius: 50%; }
.ov-status[data-ov-state="nosignal"] {
  --ov-status-c: var(--ov-alarm);
  border-style: dashed;
  background: repeating-linear-gradient(135deg, transparent 0 4px,
    color-mix(in srgb, var(--ov-status-c) 22%, transparent) 4px 5px);
}
.ov-status[data-ov-state="nosignal"]::before { block-size: 2px; }
.ov-status[data-ov-state="nosignal"]::after { content: 'NO SIGNAL'; color: var(--ov-status-c); }
.ov-status[data-ov-age]::after { content: 'STALE ' attr(data-ov-age); color: var(--ov-faint); }
.ov-status[data-ov-age] { opacity: 0.75; }
.ov-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--ov-alarm);
  border: var(--ov-rule) solid var(--ov-alarm);
  text-transform: var(--ov-case);
}
.ov-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--ov-raised);
  border-bottom: var(--ov-rule) solid var(--ov-line-strong);
  color: var(--ov-dim);
  text-transform: var(--ov-case);
  font-size: var(--ov-size-1);
}
.ov-rule {
  block-size: var(--ov-rule);
  background: var(--ov-line);
  border: 0;
  margin: 0;
}
.ov-rule--strong { background: var(--ov-line-strong); }
}
