/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, utilities;
@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --spacing: 0.25rem;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --color-bg: #ffffff;
    --color-fg: #1f2933;
    --color-muted: #6b7785;
    --color-rule: #d7dce2;
    --color-accent: #1f5f8b;
    --color-danger: #a3241b;
    --color-warn: #b57f00;
    --color-ok: #1d7a4c;
    --color-panel: #f6f8fa;
    --color-danger-wash: #fdf3f2;
    --color-ok-wash: #f2fbf6;
    --color-fleet: #1f5f8b;
    --color-organization: #2f7c86;
    --color-group: #5b46a8;
    --color-station: #0b6a72;
    --color-display: #7a3f6d;
  }
}
@layer utilities {
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .bottom-\[0\.6rem\] {
    bottom: 0.6rem;
  }
  .left-\[0\.6rem\] {
    left: 0.6rem;
  }
  .m-0 {
    margin: 0px;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-\[0\.4rem\] {
    margin-bottom: 0.4rem;
  }
  .mb-\[0\.6rem\] {
    margin-bottom: 0.6rem;
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .max-h-\[26rem\] {
    max-height: 26rem;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[22rem\] {
    max-width: 22rem;
  }
  .max-w-\[24rem\] {
    max-width: 24rem;
  }
  .max-w-\[32rem\] {
    max-width: 32rem;
  }
  .max-w-\[42rem\] {
    max-width: 42rem;
  }
  .max-w-\[46rem\] {
    max-width: 46rem;
  }
  .max-w-full {
    max-width: 100%;
  }
  .flex-none {
    flex: none;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .resize-y {
    resize: vertical;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-\[max-content_minmax\(0\,1fr\)\] {
    grid-template-columns: max-content minmax(0,1fr);
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-\[0\.3rem\] {
    gap: 0.3rem;
  }
  .gap-\[0\.35rem\] {
    gap: 0.35rem;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[6px\] {
    border-radius: 6px;
  }
  .rounded-\[8px\] {
    border-radius: 8px;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-\[6px\] {
    border-style: var(--tw-border-style);
    border-width: 6px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-\[\#2f3740\] {
    border-color: #2f3740;
  }
  .border-rule {
    border-color: var(--color-rule);
  }
  .bg-bg {
    background-color: var(--color-bg);
  }
  .bg-panel {
    background-color: var(--color-panel);
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-\[0\.5rem\] {
    padding-inline: 0.5rem;
  }
  .px-\[0\.6rem\] {
    padding-inline: 0.6rem;
  }
  .px-\[0\.55rem\] {
    padding-inline: 0.55rem;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-\[0\.2rem\] {
    padding-block: 0.2rem;
  }
  .py-\[0\.4rem\] {
    padding-block: 0.4rem;
  }
  .py-\[0\.35rem\] {
    padding-block: 0.35rem;
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-top {
    vertical-align: top;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-\[0\.9rem\]\/\[1\.2\] {
    font-size: 0.9rem;
    line-height: 1.2;
  }
  .text-\[0\.9rem\]\/\[1\.5\] {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .text-\[0\.9rem\] {
    font-size: 0.9rem;
  }
  .text-\[0\.75rem\] {
    font-size: 0.75rem;
  }
  .text-\[0\.85rem\] {
    font-size: 0.85rem;
  }
  .text-\[0\.875rem\] {
    font-size: 0.875rem;
  }
  .text-\[1\.1rem\] {
    font-size: 1.1rem;
  }
  .text-\[1\.35rem\] {
    font-size: 1.35rem;
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.02em\] {
    --tw-tracking: 0.02em;
    letter-spacing: 0.02em;
  }
  .wrap-anywhere {
    overflow-wrap: anywhere;
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-fg {
    color: var(--color-fg);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .text-ok {
    color: var(--color-ok);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .shadow-\[0_1px_2px_rgb\(31_41_51\/12\%\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(31 41 51/12%));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_2px_6px_rgb\(31_41_51\/25\%\)\] {
    --tw-shadow: 0 2px 6px var(--tw-shadow-color, rgb(31 41 51/25%));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .\[image-rendering\:pixelated\] {
    image-rendering: pixelated;
  }
  @media (hover: hover) {
    .hover\:border-accent:hover {
      border-color: var(--color-accent);
    }
    .hover\:text-accent:hover {
      color: var(--color-accent);
    }
  }
}
:root {
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --muted: var(--color-muted);
  --rule: var(--color-rule);
  --accent: var(--color-accent);
  --danger: var(--color-danger);
  --warn: var(--color-warn);
  --ok: var(--color-ok);
  --panel: var(--color-panel);
  --danger-wash: var(--color-danger-wash);
  --ok-wash: var(--color-ok-wash);
  --fleet: var(--color-fleet);
  --organization: var(--color-organization);
  --group: var(--color-group);
  --station: var(--color-station);
  --display: var(--color-display);
}
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
#app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem 3rem;
}
noscript {
  display: block;
  padding: 0 1.25rem;
}
.banner {
  margin: 1rem 1.25rem 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  background: var(--danger-wash);
}
@layer base {
  label {
    color: var(--muted);
    font-size: 0.9rem;
  }
  input, select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font: inherit;
    background: var(--bg);
    color: var(--fg);
  }
  button {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--panel);
    color: var(--fg);
    font: inherit;
    cursor: pointer;
  }
  button:disabled {
    color: var(--muted);
    cursor: not-allowed;
  }
  button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
  }
  button.danger {
    color: var(--danger);
  }
}
.nav-item {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
}
.nav-item:hover {
  color: var(--fg);
}
.nav-item[aria-current="page"] {
  color: var(--fg);
  border-color: var(--rule);
  background: var(--panel);
}
.screen-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0.45rem 0.9rem;
  margin-bottom: -1px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.screen-tab:hover {
  color: var(--fg);
}
.screen-tab-on {
  color: var(--fg);
  font-weight: 600;
  border-color: var(--rule);
  background: var(--bg);
}
.state-failed, .revoked {
  color: var(--danger);
}
.state-retired {
  color: var(--muted);
}
.mono, .key-prefix, #claim-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.row-actions {
  display: flex;
  gap: 0.5rem;
}
@layer base {
  .row-actions button {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
  }
}
.reveal {
  border: 1px solid var(--ok);
  border-radius: 6px;
  background: var(--ok-wash);
  padding: 1rem 1.25rem;
  margin: 0 1.25rem 1.5rem;
  max-height: 45vh;
  overflow-y: auto;
}
@layer base {
  menu {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
  }
  dialog {
    max-width: 34rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem;
    color: var(--fg);
    background: var(--bg);
  }
  dialog p {
    color: var(--muted);
    max-width: 30rem;
  }
  dialog input, dialog select {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
#screen-canvas {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.workspace {
  flex: 1;
  min-height: 26rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  align-items: stretch;
  overflow: hidden;
  transition: grid-template-columns 220ms ease;
}
.canvas-frame {
  position: relative;
  background: var(--panel);
  overflow: hidden;
  border-right: 1px solid var(--rule);
}
#side {
  width: 21rem;
  transition: opacity 220ms ease, display 220ms allow-discrete;
}
#side[hidden] {
  opacity: 0;
}
@starting-style {
  #side {
    opacity: 0;
  }
}
@media (max-width: 60rem) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 60vh auto;
    overflow: visible;
    transition: none;
  }
  .canvas-frame {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  #side {
    width: auto;
    transition: none;
  }
}
.side-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.85rem 0.9rem;
}
.side-head {
  --side-kind: var(--rule);
}
.side-head-fleet {
  --side-kind: var(--fleet);
}
.side-head-organization {
  --side-kind: var(--organization);
}
.side-head-group {
  --side-kind: var(--group);
}
.side-head-base_station {
  --side-kind: var(--station);
}
.side-head-display {
  --side-kind: var(--display);
}
.side-head-retired {
  --side-kind: var(--muted);
}
.side-head-top {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  align-items: center;
}
.side-badge {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  color: var(--side-kind);
  background: var(--side-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--side-kind) 12%, var(--bg));
  }
}
.side-head-none .side-badge {
  color: var(--muted);
  background: var(--panel);
}
.side-badge .icon {
  width: 1.3rem;
  height: 1.3rem;
}
.side-title {
  grid-column: 2 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.side-head-base_station .side-title, .side-head-display .side-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.side-head-none .side-title {
  grid-row: 1 / span 2;
}
.side-kind {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.side-head .side-kind {
  grid-column: 2;
  grid-row: 1;
  color: var(--side-kind);
  font-weight: 700;
}
.side-kind:empty {
  display: none;
}
.side-pill {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  background: #eef1f4;
}
.side-pill::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}
.side-pill-ok {
  color: var(--ok);
  background: #e6f4ec;
}
.side-pill-warn {
  color: var(--warn);
  background: #f8eed3;
}
.side-pill-bad {
  color: var(--danger);
  background: #fbecea;
}
@layer base {
  .side-detail dt {
    color: var(--muted);
  }
}
.side-detail dt, .side-detail dd {
  padding: 0.42rem 0;
  border-top: 1px solid #eef1f4;
}
.side-detail dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
  white-space: nowrap;
}
.side-detail dt .icon {
  order: -1;
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}
.side-detail dd {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.side-detail dt:first-child, .side-detail dt:first-child + dd, .side-detail dt.side-heading + dt, .side-detail dt.side-heading + dt + dd {
  border-top: none;
}
.side-detail dt.side-heading {
  grid-column: 1 / -1;
  padding: 0.95rem 0 0.2rem;
  border-top: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.side-detail dt.side-heading:first-child {
  padding-top: 0;
}
@layer base {
  .side-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
  }
}
.side-actions {
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.side-actions:empty {
  display: none;
}
.side-actions button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-color: var(--rule);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}
.side-actions button .icon {
  order: -1;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}
.side-actions button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.side-actions button:hover:not(:disabled) .icon {
  color: var(--accent);
}
.side-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
.side-actions button.primary .icon, .side-actions button.primary:hover:not(:disabled), .side-actions button.primary:hover:not(:disabled) .icon {
  color: #ffffff;
}
.side-actions button.danger, .side-actions button.danger .icon {
  color: var(--danger);
}
.side-actions button.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-wash);
  color: var(--danger);
}
.side-actions button.danger:hover:not(:disabled) .icon {
  color: var(--danger);
}
.side-actions button:not(.danger) + button.danger {
  margin-top: 0.4rem;
}
.side-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}
.side-note:empty {
  display: none;
}
.side-kind-block .side-note, #radio-list .side-note {
  padding: 0.55rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
}
.side-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.side-tab:hover {
  color: var(--fg);
}
.side-tab .icon {
  width: 0.95rem;
  height: 0.95rem;
}
.side-tab-on {
  color: var(--fg);
  border-color: var(--rule);
  background: var(--bg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(31 41 51 / 8%);
}
.side-kind-block + .side-kind-block {
  margin-top: 0.9rem;
}
.side-kind-block .side-kind {
  margin: 0 0 0.4rem;
}
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.nodes.dragging .node {
  opacity: 0.3;
  transition: opacity 140ms ease-out;
}
.nodes.dragging .node-drop, .nodes.dragging .node-refused {
  opacity: 1;
}
.node.node-drop .node-card {
  fill: #eefaf3;
  stroke: var(--ok);
  stroke-width: 3;
  animation: drop-breathe 900ms ease-in-out infinite;
}
@keyframes drop-breathe {
  0%, 100% {
    stroke-width: 3;
    stroke-opacity: 1;
  }
  50% {
    stroke-width: 5;
    stroke-opacity: 0.7;
  }
}
.node.node-refused .node-card {
  fill: #fdf0ee;
  stroke: var(--danger);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
}
.node.node-landed .node-card {
  animation: drop-landed 700ms ease-out 1;
}
@keyframes drop-landed {
  0% {
    stroke: var(--ok);
    stroke-width: 6;
  }
  100% {
    stroke-width: 1;
  }
}
.side-item-carried {
  opacity: 0.45;
  border-style: solid;
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .node.node-drop .node-card, .node.node-landed .node-card {
    animation: none;
  }
  .nodes.dragging .node {
    transition: none;
  }
}
.side-item {
  --side-kind: var(--muted);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 0.6rem;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  font-size: 0.85rem;
  cursor: grab;
}
.side-item:hover {
  border-color: var(--accent);
}
.side-item-base_station {
  --side-kind: var(--station);
}
.side-item-display {
  --side-kind: var(--display);
}
.side-item > .icon {
  grid-column: 1;
  grid-row: 1;
  box-sizing: content-box;
  width: 0.95rem;
  height: 0.95rem;
  padding: 0.4rem;
  border-radius: 6px;
  color: var(--side-kind);
  background: var(--side-kind);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--side-kind) 12%, var(--bg));
  }
}
.side-item::after {
  content: "";
  grid-column: 4;
  grid-row: 1;
  width: 0.45rem;
  height: 0.8rem;
  background-image: radial-gradient(circle, var(--muted) 1px, transparent 1.3px);
  background-size: 0.225rem 0.27rem;
  opacity: 0.6;
}
.side-item .side-item-kind {
  grid-column: 3;
  grid-row: 1;
  color: var(--muted);
  font-size: 0.72rem;
}
.side-item-fixed {
  cursor: default;
}
.side-item-fixed:hover {
  border-color: var(--rule);
}
.side-item-fixed::after {
  display: none;
}
.side-item-stack {
  row-gap: 0.05rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.side-item-stack > .icon {
  grid-row: 1 / span 2;
}
.side-item-stack .side-item-kind {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: 0.75rem;
}
.side-item-holding {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--bg));
  }
  box-shadow: inset 3px 0 0 var(--accent);
}
.side-item-holding.side-item-fixed:hover {
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--bg));
  }
}
.side-item-retired .side-item-name {
  color: var(--muted);
  text-decoration: line-through;
}
.side-item-retired .side-item-kind {
  color: var(--danger);
}
.side-item-retired {
  --side-kind: var(--muted);
}
.side-item .side-item-name {
  grid-column: 2;
  grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.side-fold {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-right: none;
  border-radius: 3px 0 0 3px;
  box-shadow: -1px 0 2px rgb(31 41 51 / 10%);
  padding: 0.5rem 0.15rem;
  line-height: 0;
  cursor: pointer;
}
.side-fold:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.side-fold-shut .icon {
  transform: scaleX(-1);
}
.workspace-shut {
  grid-template-columns: minmax(0, 1fr) 0rem;
  grid-template-rows: minmax(0, 1fr);
}
@media (prefers-reduced-motion: reduce) {
  .workspace, #side {
    transition: none;
  }
}
.icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.grid-dot {
  fill: var(--rule);
}
.wire {
  stroke: var(--muted);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
}
.wire-ownership.wire-from-fleet {
  stroke: var(--fleet);
  stroke-width: 2.25;
  opacity: 0.85;
}
.wire-ownership.wire-from-organization {
  stroke: var(--organization);
  stroke-width: 1.9;
  opacity: 0.82;
}
.wire-ownership.wire-from-group {
  stroke: var(--group);
  stroke-width: 1.6;
  opacity: 0.8;
}
.port {
  fill: var(--bg);
  stroke: var(--muted);
  stroke-width: 1.5;
}
.port-fleet {
  stroke: var(--fleet);
}
.port-group {
  stroke: var(--group);
}
.port-base_station {
  stroke: var(--station);
}
.wire-radio {
  stroke: var(--station);
  stroke-width: 2.25;
  stroke-dasharray: 7 5;
  opacity: 0.9;
}
.wire-no-base-station {
  stroke: var(--danger);
  stroke-width: 2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  opacity: 0.85;
}
.wire.wire-lost {
  stroke: var(--danger);
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  opacity: 0.85;
}
.mark-disc {
  fill: var(--bg);
  stroke: none;
}
.mark-cross {
  stroke: var(--danger);
  stroke-width: 2.25;
  stroke-linecap: round;
  fill: none;
}
.node-card {
  fill: var(--bg);
  stroke: var(--rule);
  stroke-width: 1;
}
.node-spine {
  stroke: none;
}
.node-fleet .node-spine {
  fill: var(--fleet);
}
.node-organization .node-spine {
  fill: var(--organization);
}
.node-group .node-spine {
  fill: var(--group);
}
.node-base_station .node-spine {
  fill: var(--station);
}
.node-display .node-spine {
  fill: var(--display);
}
.node-retired .node-spine {
  fill: var(--muted);
}
.node-title {
  font: 700 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.08em;
  fill: var(--fg);
}
.node-field-icon {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-field-label {
  font: 600 9px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.09em;
  fill: var(--muted);
}
.node-field-value {
  font: 700 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  fill: var(--fg);
}
.node-value-warn {
  fill: var(--warn);
}
.node-value-bad {
  fill: var(--danger);
}
.node-rule {
  stroke: var(--rule);
  stroke-width: 1;
}
.node-footer {
  font: 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  fill: var(--muted);
}
.node-footer-warn {
  fill: var(--warn);
}
.node-footer-bad {
  fill: var(--danger);
}
.node-footer-icon {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-pill {
  stroke: none;
}
.node-pill-text {
  font: 600 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.node-dot {
  stroke: none;
}
.node-pill-ok {
  fill: #e6f4ec;
}
.node-dot-ok, .node-pill-text-ok {
  fill: var(--ok);
}
.node-pill-warn {
  fill: #f8eed3;
}
.node-dot-warn, .node-pill-text-warn {
  fill: var(--warn);
}
.node-pill-bad {
  fill: #fbecea;
}
.node-dot-bad, .node-pill-text-bad {
  fill: var(--danger);
}
.node-pill-muted {
  fill: #eef1f4;
}
.node-dot-muted, .node-pill-text-muted {
  fill: var(--muted);
}
.node-failed .node-card {
  stroke: var(--danger);
  stroke-width: 2;
}
.node-retired .node-card {
  fill: var(--panel);
  stroke: var(--muted);
}
.icon-sprite {
  display: none;
}
.node-fleet, .node-organization, .node-group {
  cursor: pointer;
}
.node-open .node-card {
  fill: #f7f9fb;
  stroke-width: 2.5;
}
.node-fleet.node-open .node-card {
  stroke: var(--fleet);
}
.node-organization.node-open .node-card {
  stroke: var(--organization);
}
.node-group.node-open .node-card {
  stroke: var(--group);
}
.node .node-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.node-twisty {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes layer-settle {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wire-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nodes.layer-settling {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: layer-settle 260ms ease-out both;
}
.wires.layer-settling, .ports.layer-settling, .marks.layer-settling {
  animation: wire-settle 260ms ease-out 120ms both;
}
@media (prefers-reduced-motion: reduce) {
  .nodes.layer-settling, .wires.layer-settling, .ports.layer-settling, .marks.layer-settling, .frame-stage {
    animation: none;
  }
}
.side-bad {
  color: var(--danger);
}
.side-detail dd.side-bad, .side-detail dt.side-bad {
  font-weight: 600;
  color: var(--danger);
}
@keyframes stage-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.frame-stage + .side-detail {
  margin-top: 0.75rem;
}
.frame-stage {
  position: relative;
  padding: 2.4rem 0.75rem 0.7rem;
  border: 1px solid #eef1f4;
  border-radius: 8px;
  background: var(--panel);
  animation: stage-open 200ms ease-out both;
}
.frame-caption {
  margin: 0.6rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}
.frame-caption.side-bad {
  color: var(--danger);
}
@layer base {
  dialog textarea {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 0.5rem;
  }
}
.swatch {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}
tr.needs-attention td:nth-child(3) {
  font-weight: 600;
  color: var(--danger);
}
tr.retired {
  opacity: 0.55;
}
.placing {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.9rem;
}
.placing button {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid currentcolor;
  background: none;
  color: inherit;
}
.nav-toggle {
  display: none;
}
.nav-panel {
  display: contents;
}
@media (width < 40rem) {
  header {
    position: relative;
  }
  .nav-toggle {
    display: grid;
    place-items: center;
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .nav-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 6px 16px rgb(31 41 51 / 12%);
  }
  .nav-panel[data-open] {
    display: flex;
  }
  .nav-panel > nav {
    flex-direction: column;
    gap: 0.15rem;
  }
  .nav-panel .nav-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    text-align: left;
  }
  .nav-panel .nav-account {
    margin-left: 0;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
  }
  .nav-panel .nav-account button {
    min-height: 44px;
  }
  table {
    display: block;
  }
  thead {
    display: none;
  }
  tbody {
    display: block;
  }
  tbody tr {
    display: block;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 5px;
  }
  tbody td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
    border-bottom: 0;
    text-align: left;
  }
  tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
  }
  tbody td:not([data-label])::before {
    content: none;
  }
  tbody td:first-child {
    display: block;
    margin-bottom: 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
    font-weight: 600;
  }
  tbody td:first-child::before {
    content: none;
  }
  dialog {
    width: calc(100% - 1rem);
    max-width: none;
    max-height: 90dvh;
    padding: 0.9rem;
    overflow-y: auto;
  }
  dialog menu {
    flex-direction: column;
  }
  dialog menu button {
    width: 100%;
    min-height: 44px;
  }
  input, select, textarea {
    font-size: 1rem;
  }
  .screen-tab, .side-tab, .side-item, #devices-prev, #devices-next {
    min-height: 44px;
  }
  .workspace {
    grid-template-rows: 50vh auto;
  }
  #side {
    padding: 0.75rem;
  }
  #canvas-zoom-in, #canvas-zoom-out, #canvas-fit, .side-fold {
    min-width: 44px;
    min-height: 44px;
  }
}
.side-sheet-header {
  display: none;
}
.side-content {
  display: contents;
}
#side > *, .side-content > * {
  flex: none;
}
@media (max-width: 1049px) {
  #app:has(#screen-canvas:not([hidden])) {
    overflow: hidden;
    padding-bottom: 0;
  }
  #screen-canvas {
    min-height: 0;
    overflow: hidden;
  }
  #screen-canvas .workspace {
    position: relative;
    display: block;
    min-height: 180px;
    overflow: hidden;
  }
  #screen-canvas .canvas-frame {
    position: absolute;
    inset: 0;
    border: 0;
  }
  #side {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    height: 47%;
    z-index: 2;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px rgb(31 41 51 / 12%);
  }
  .workspace[data-sheet-expanded="true"] #side {
    height: 91%;
  }
  .side-sheet-header {
    display: block;
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--rule);
  }
  .side-sheet-grip {
    display: grid;
    place-items: center;
    height: 18px;
  }
  .side-sheet-grip::before {
    content: "";
    width: 32px;
    height: 4px;
    border-radius: 4px;
    background: var(--rule);
  }
  .side-sheet-heading {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .side-sheet-heading strong {
    flex: 1;
    min-width: 0;
  }
  .side-sheet-heading button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--panel);
    font-size: 22px;
  }
  #side > .side-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px max(14px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  #side .side-card {
    padding: 12px;
    border-radius: 12px;
  }
  #side button, #side .side-item {
    min-height: 44px;
  }
  #canvas-zoom-in, #canvas-zoom-out, #canvas-fit, .side-fold {
    min-width: 44px;
    min-height: 44px;
    border-radius: 9px;
  }
  .canvas-frame > .absolute, .canvas-frame > .side-fold {
    bottom: calc(47% + .75rem);
  }
  .workspace-shut .canvas-frame > .absolute, .workspace-shut .canvas-frame > .side-fold {
    bottom: calc(.75rem + env(safe-area-inset-bottom));
  }
  .workspace[data-sheet-expanded="true"] .canvas-frame > .absolute, .workspace[data-sheet-expanded="true"] .side-fold {
    visibility: hidden;
  }
  .canvas-frame > .side-fold {
    top: auto;
    right: .75rem;
    transform: none;
    border: 1px solid var(--rule);
  }
  .side-fold .icon {
    transform: rotate(90deg);
  }
  .side-fold-shut .icon {
    transform: rotate(-90deg);
  }
}
@media (max-width: 640px) {
  #app:has(#screen-canvas:not([hidden])) {
    padding-left: 0;
    padding-right: 0;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}