@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/open-sans-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #232323;
  --muted: #606062;
  --line: #cccccc;
  --paper: #f4f4f4;
  --panel: #ffffff;
  --wash: #e6e6e6;
  --wash-strong: #cccccc;
  --chrome: #00002b;
  --chrome-ink: #ffffff;
  --chrome-muted: #9d9d9f;
  --chrome-raise: #232323;
  --chrome-line: #9d9d9f;
  --accent: #c3a55a;
  --accent-ink: #00002b;
  --accent-hover: #ad8f48;
  --accent-hover-ink: #00002b;
  --accent-text: #6e5824;
  --accent-soft: #f3ecda;
  --accent-soft-ink: #232323;
  --accent-line: #c3a55a;
  --nav-mark: #c3a55a;
  --danger: #8d2f2f;
  --danger-bg: #f8ece8;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  font-family: "Open Sans", "Segoe UI", "Liberation Sans", "DejaVu Sans", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}

a { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

aside :focus-visible { outline-color: var(--nav-mark); }

.shell {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}

aside {
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  color: var(--chrome-ink);
  padding: 1.15rem 0.7rem 0.85rem;
}

@media (min-width: 801px) {
  aside {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: hidden;
  }

  nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

.product {
  display: block;
  margin: 0 0 0.8rem;
  padding: 0 0.6rem;
  color: var(--nav-mark);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.product:hover { color: var(--chrome-ink); }

.agency-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 0.6rem;
}

.agency-brand:not(:has(:not([hidden]))) { display: none; }

.agency {
  margin: 0;
  min-width: 0;
  padding: 0;
  color: var(--chrome-ink);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.15;
}

.agency-long {
  margin: 0.3rem 0 0;
  padding: 0 0.6rem;
  color: var(--chrome-muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.9rem;
}

nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--chrome-muted);
  text-decoration: none;
  padding: 0.42rem 0.6rem 0.42rem 0.95rem;
  border-radius: 0.25rem;
}

nav a.is-current,
nav a:hover {
  background: var(--chrome-raise);
  color: var(--chrome-ink);
}

nav a.is-current { box-shadow: inset 3px 0 0 var(--nav-mark); }

.nav-foot {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: auto;
}

.nav-section {
  margin: 1rem 0 0.15rem;
  padding: 0 0.6rem 0 0.15rem;
  color: var(--nav-mark);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

nav > .nav-section:first-child { margin-top: 0.15rem; }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

nav button.is-disabled {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--chrome-muted);
  font: inherit;
  text-align: left;
  padding: 0.42rem 0.6rem 0.42rem 0.95rem;
  border-radius: 0.25rem;
}

.nav-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.nav-icon-birdseye { --nav-icon: url("/icons/birdseye.svg"); }
.nav-icon-recon { --nav-icon: url("/icons/recon.svg"); }
.nav-icon-terminate { --nav-icon: url("/icons/terminate.svg"); }
.nav-icon-people { --nav-icon: url("/icons/people.svg"); }
.nav-icon-settings { --nav-icon: url("/icons/profile.svg"); }
.nav-icon-device { --nav-icon: url("/icons/device.svg"); }
.nav-icon-support { --nav-icon: url("/icons/support-question.svg"); }
.nav-icon-health { --nav-icon: url("/icons/health.svg"); }
.nav-icon-core-data { --nav-icon: url("/icons/core-data.svg"); }
.nav-icon-organization { --nav-icon: url("/icons/organization.svg"); }
.nav-icon-sites { --nav-icon: url("/icons/sites.svg"); }
.nav-icon-tuning { --nav-icon: url("/icons/tuning.svg"); }
.nav-icon-sysadmin { --nav-icon: url("/icons/sysadmin-monitor.svg"); }

nav button.is-disabled:hover,
nav button.is-disabled:disabled {
  background: transparent;
  color: var(--chrome-muted);
  opacity: 0.55;
  cursor: default;
}

main {
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
}

h1 {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 650;
}

h2 {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}

.lede {
  margin: 0 0 1.25rem;
  max-width: 44rem;
  color: var(--muted);
}

.lede.acting {
  color: var(--ink);
  font-weight: 650;
}

.org-key {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

.org-status {
  margin: 0.2rem 0 0.85rem;
  color: var(--muted);
}

#membership { margin-top: 0; }

.account-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}

.account-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  align-items: center;
  grid-column: 1 / -1;
}

.flag {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.92rem;
}

.account-line .field-error:empty,
.account-flags .field-error:empty,
#membership .field-error:empty { display: none; }

.account-flags .field-error { flex-basis: 100%; }

.remove-row {
  display: flex;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.remove-row p { margin: 0; color: var(--muted); }

.import-row {
  padding: 0.35rem 0 0;
  border-top: 1px solid var(--line);
}

.import-id {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
  min-width: 0;
  margin-bottom: 0.05rem;
}

.import-swatch {
  width: 0.7rem;
  height: 0.7rem;
  background: var(--accent);
}

.import-place {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  min-width: 0;
}

.import-place strong,
.import-place .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-place .mono { color: var(--muted); font-size: 0.8rem; }

.import-chart {
  display: block;
  width: 100%;
  height: auto;
}

.import-chart .frame { fill: white; stroke: var(--line); }
.import-chart .day-line { stroke: #e4e4e4; stroke-width: 1; pointer-events: none; }
.import-chart .day-mark {
  fill: #c8c8c8;
  font-family: "Open Sans", "Segoe UI", "Liberation Sans", "DejaVu Sans", sans-serif;
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}
.import-chart .guide { stroke: var(--ink); stroke-width: 1; opacity: 0.35; pointer-events: none; }
.import-chart .import-line { fill: none; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.import-chart .import-line.previous { stroke-width: 0.95; stroke-dasharray: 3.5 2.5; }
.import-chart .import-line.earlier { stroke-width: 0.8; stroke-dasharray: 0.7 2.2; }
.import-chart circle { pointer-events: none; }
.import-chart circle.previous { opacity: 0.8; }
.import-chart circle.earlier { opacity: 0.55; }

.import-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.import-key > span { display: inline-flex; align-items: center; gap: 0.4rem; }

.import-find { max-width: 20rem; margin: 0.15rem 0 0.75rem; }

.import-mark {
  width: 1.15rem;
  height: 0;
  border-top: 1px solid currentColor;
  color: var(--ink);
}

.import-mark.previous { border-top-style: dashed; }
.import-mark.earlier { border-top-style: dotted; }

.import-tip {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 0.2rem;
  max-width: 24rem;
  padding: 0.45rem 0.6rem;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  line-height: 1.35;
  pointer-events: none;
}

.import-tip-line { display: flex; gap: 0.45rem; align-items: center; }
.import-tip-line .import-mark { flex: 0 0 auto; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.status-line {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.status-line strong { color: var(--ink); font-weight: 650; }
.status-line strong.ok { color: var(--accent-text); }
.status-line strong.down { color: var(--danger); }

.choices {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
}

.stat,
.panel,
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.stat { padding: 0.85rem 1rem; }

.stat > span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.stat strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.stat strong.ok { color: var(--accent-text); }
.stat strong.down { color: var(--danger); }

.panel { padding: 1rem 1rem 1.1rem; margin-top: 1rem; }

.panel > h2 {
  margin: -1rem -1rem 0.85rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
  font-size: 0.95rem;
}

.panel.stack > h2 { margin-bottom: 0; }

.panel .lede { margin-bottom: 0; max-width: none; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

.split > .panel { margin-top: 0; }

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}

.facts .stat strong {
  font-size: 1rem;
  line-height: 1.35;
}

.facts .stat .hint { margin-top: 0.2rem; }

.facts .stat .timings {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.35rem;
}

.facts .stat .timings div {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
}

.facts .stat .timings span { min-width: 0; }

.facts .stat .timings strong {
  display: inline;
  flex: 0 0 auto;
  margin-top: 0;
  font-size: 0.92rem;
}

.facts .stat a { overflow-wrap: anywhere; }

.brief-features {
  display: grid;
  margin: 0.15rem 0 0;
  border-top: 1px solid var(--line);
}

.brief-features > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--line);
}

.brief-features > div > span {
  color: var(--muted);
  font-size: 0.92rem;
}

.brief-features strong {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.brief-features strong.wait { color: #8a5a12; font-weight: 650; }

.brief-features .hint { grid-column: 1 / -1; margin-top: 0.1rem; }

.id-head { margin: 0 0 0.7rem; }

.id-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.25rem;
}

.id-head h1 {
  margin: 0;
  font-size: 1.35rem;
  min-width: 0;
}

.id-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.12rem 0.15rem;
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.id-meta > span + span::before {
  content: "·\00a0";
  color: var(--muted);
}

.id-meta a { font-weight: 650; text-decoration: none; }
.id-meta a:hover { text-decoration: underline; }

.identifier-note {
  display: grid;
  grid-template-columns: auto minmax(11rem, 16rem);
  align-items: center;
  gap: 0.1rem 0.45rem;
  margin: 0;
  max-width: none;
}

.identifier-note > span:first-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.identifier-note input {
  width: 16rem;
  max-width: 100%;
  padding: 0.28rem 0.5rem;
  font-size: 0.86rem;
}

.identifier-note .field-error { grid-column: 2; }

.id-strip {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr);
  gap: 0.55rem 1.35rem;
  align-items: start;
  margin: 0 0 0.15rem;
  padding: 0.65rem 0.85rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.id-decision,
.id-sites,
.id-with {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.2rem 0.65rem;
  align-items: start;
  min-width: 0;
}

.id-sites {
  padding-left: 1.15rem;
  border-left: 1px solid var(--line);
}

.id-with {
  grid-column: 1 / -1;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.id-kicker {
  padding-top: 0.12rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.id-decision-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  column-gap: 0.55rem;
  row-gap: 0.12rem;
  min-width: 0;
}

.id-decision-body .decision-head { display: contents; }

.id-decision-body #decision-line { grid-column: 1; grid-row: 1; }

.id-decision-body #decision-actions { grid-column: 2; grid-row: 1; justify-self: start; }

.id-decision-body #decision-who { grid-column: 1 / -1; grid-row: 2; }

.id-decision-body #locked { grid-column: 1 / -1; grid-row: 3; }

#view-only { grid-column: 1 / -1; grid-row: 1; }

.id-strip p { margin: 0; }

.id-decision-body .hint { font-size: 0.78rem; }

.id-sites .place-shares {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.id-sites .place-share {
  flex: 1 1 9rem;
  max-width: 16rem;
  gap: 0.2rem 0.45rem;
}

.id-sites .place-meter { height: 0.55rem; }

.decision-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
}

.decision-head p { margin: 0; }

.place-shares {
  display: grid;
  gap: 0.4rem;
}

.place-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name pct" "meter meter";
  gap: 0.08rem 0.45rem;
  align-items: baseline;
}

.place-name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.place-pct {
  grid-area: pct;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.place-meter {
  grid-area: meter;
  display: block;
  height: 0.32rem;
  background: var(--wash);
  overflow: hidden;
}

.place-meter span { display: block; height: 100%; }

.id-with .associate-group {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0.1rem 0.4rem;
}

#associates {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  max-height: 5.5rem;
  overflow: auto;
}

.working {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.55rem 0.7rem;
  background: #fbf3e4;
  color: #8a5a12;
  border: 1px solid #ead7b0;
}

.working::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.15rem;
  border: 2px solid #ead7b0;
  border-top-color: currentColor;
  border-radius: 50%;
  flex: none;
  animation: ww-spin 0.7s linear infinite;
}

@keyframes ww-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .working::before { animation: none; }
}

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "copy copy"
    "times times";
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: center;
  margin: 0 0 0.7rem;
}

.page-head h1 { grid-area: title; margin: 0; }

.page-head .lede {
  grid-area: copy;
  margin: 0;
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.35;
}

.admin-card { display: contents; }

.admin-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.55rem;
}

.page-head .admin-actions button {
  padding: 0.32rem 0.65rem;
  font-size: 0.85rem;
}

.admin-mark {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-times {
  grid-area: times;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  margin-top: 0.1rem;
}

.admin-times div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.admin-times div + div::before {
  content: "·";
  margin-right: 0.15rem;
  color: var(--line);
}

.admin-times span,
.admin-times strong {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.admin-times strong { font-variant-numeric: tabular-nums; }

.admin-times strong.wait { color: #8a5a12; font-weight: 650; }

.stat strong.wait { color: #8a5a12; }

.places { margin: 0 0 0.35rem; }

.stack { display: grid; gap: 0.75rem; }

label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.92rem;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 0.45rem 0.55rem;
  font: inherit;
}

textarea { min-height: 6rem; resize: vertical; }

.find-line { max-width: 28rem; }

.find-line input,
#api-key {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}

button {
  justify-self: start;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

button:hover {
  background: var(--accent-hover);
  color: var(--accent-hover-ink);
}

button.quiet {
  display: block;
  width: 100%;
  margin-top: 0;
  background: transparent;
  color: var(--chrome-muted);
  text-align: left;
  padding: 0.42rem 0.6rem 0.42rem 0.95rem;
}

button.quiet:hover {
  background: var(--chrome-raise);
  color: var(--chrome-ink);
}

button.danger { background: var(--danger); color: white; }
button.danger:hover { background: #732525; }

button.plain {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

button.plain:hover { background: var(--wash-strong); color: var(--ink); }

button.choice {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}

button.choice:hover { background: var(--wash-strong); color: var(--ink); }
button.choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
button.choice strong { display: block; font-size: 1.05rem; }
button.choice span { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.9rem; font-weight: 400; }

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

p.hint + p.hint { margin-top: 0.45rem; }

.logo-preview {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  background: var(--chrome);
  border: 1px solid var(--line);
}

.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
#queue {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}
#queue button {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
}
#queue button + button { margin-left: -1px; }
#queue button:first-child { border-radius: 0.25rem 0 0 0.25rem; }
#queue button:last-child { border-radius: 0 0.25rem 0.25rem 0; }
#queue button:hover {
  background: var(--wash-strong);
  color: var(--ink);
  position: relative;
  z-index: 1;
}
#queue button[aria-pressed="true"],
#queue button[aria-pressed="true"]:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}

#recon-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  background: var(--paper);
}
#recon-sections {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--line);
}
#recon-sections button {
  margin: 0;
  padding: 0.6rem 1.05rem 0.55rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;
}
#recon-sections button:hover {
  background: var(--wash);
  color: var(--ink);
}
#recon-sections button[aria-selected="true"],
#recon-sections button[aria-selected="true"]:hover {
  margin-bottom: -1px;
  padding-bottom: calc(0.55rem + 1px);
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: inset 0 3px 0 var(--accent);
}
#admin-nav { margin-top: 1.25rem; }
#admin-sections {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--line);
}
#admin-sections button {
  margin: 0;
  padding: 0.6rem 1.05rem 0.55rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;
}
#admin-sections button:hover {
  background: var(--wash);
  color: var(--ink);
}
#admin-sections button[aria-selected="true"],
#admin-sections button[aria-selected="true"]:hover {
  margin-bottom: -1px;
  padding-bottom: calc(0.55rem + 1px);
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: inset 0 3px 0 var(--accent);
}
#admin-sheet.is-open > .panel {
  margin-top: 0;
  border-top: none;
}
#admin-sheet .lede { margin-bottom: 0.85rem; }
#admin-sheet .saved { margin: 0 0 0.85rem; }
#admin-sheet .settings-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#desk:not(.is-open) #work {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#desk.is-open > #work.panel,
#desk.is-open > #clusters.panel {
  margin-top: 0;
  border-top: none;
}
#desk.is-open #work > #roster { margin-top: 0; }
#cluster-charts {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}
#cluster-charts button {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
}
#cluster-charts button + button { margin-left: -1px; }
#cluster-charts button:first-child,
#cluster-charts button:last-child,
#cluster-charts button:only-child { border-radius: 0; }
#cluster-charts button:hover {
  background: var(--wash-strong);
  color: var(--ink);
  position: relative;
  z-index: 1;
}
#cluster-charts button[aria-selected="true"],
#cluster-charts button[aria-selected="true"]:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}

.network-frame {
  position: relative;
  height: 32rem;
  background: white;
  border: 1px solid var(--line);
  overflow: hidden;
}
.network-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.network-frame canvas.is-pointing { cursor: pointer; }
.network-frame canvas.is-panning { cursor: grabbing; }
.network-tip {
  position: absolute;
  z-index: 2;
  max-width: min(22rem, calc(100% - 1rem));
  margin: 0;
  padding: 0.45rem 0.6rem 0.5rem;
  background: var(--chrome);
  color: white;
  pointer-events: none;
}
.network-tip span,
.network-tip strong { display: block; }
.network-tip strong {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.network-tip-kind {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chrome-muted);
}
.network-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.network-foot .plain { padding: 0.25rem 0.65rem; }
.network-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.network-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.network-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.network-swatch[data-kind="imsi"] { background: var(--chrome); }
.network-swatch[data-kind="imei"] { background: #8d6b2f; }
.network-swatch[data-kind="msisdn"] { background: #0c5c48; }

@media (max-width: 800px) {
  .network-frame { height: 24rem; }
}

.dir-list { display: grid; gap: 0.4rem; }
.dir-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.dir-label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dir-head .plain { padding: 0.2rem 0.5rem; font-size: 0.82rem; }
.dir-rows { display: grid; gap: 0.35rem; }
.dir-row { display: flex; gap: 0.35rem; align-items: center; }
.dir-row input { flex: 1; min-width: 0; font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace; font-size: 0.86rem; }
.dir-row button { padding: 0.35rem 0.55rem; font-size: 0.82rem; }
.dir-read { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.dir-read li { color: var(--muted); font-size: 0.86rem; }

.logo {
  display: block;
  width: 5rem;
  height: 5rem;
  flex: 0 0 auto;
  object-fit: contain;
  margin: 0;
  background: transparent;
}

#session-slot:empty { margin: 0; }
#session-slot:not(:empty) { margin: 0.85rem 0 0; }

#session-slot .switch-label {
  margin: 0 0 0.25rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  color: var(--chrome-muted);
}

#session-slot select {
  width: 100%;
  background: var(--chrome-raise);
  color: var(--chrome-ink);
  border-color: var(--chrome-line);
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.login-card { width: min(24rem, 100%); }
.login-card.picking { width: min(32rem, 100%); }
.login-card .choices { margin-bottom: 0.85rem; }

.check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.45rem 0.55rem;
  background: white;
  border: 1px solid var(--line);
}

.check-list { display: grid; gap: 0.35rem; }

.panel h3 {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
}

.disclosure { padding: 0; }
.disclosure summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 650;
  background: var(--wash);
}
.disclosure summary:hover { background: var(--wash-strong); }
details[open].disclosure > summary { border-bottom: 1px solid var(--line); }
.disclosure > .stack { padding: 0 1rem 1.1rem; }

.list-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }

main.recon .page-head { margin-bottom: 0.85rem; }

main.recon .page-head .list-bar {
  grid-area: actions;
  margin: 0;
  justify-content: flex-end;
}

main.recon > .empty {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.guide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--accent);
}

.guide .eyebrow { margin-bottom: 0.1rem; }

#guide button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

#guide button:hover {
  background: none;
  color: var(--accent-text);
}

.recon-board {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.recon-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem 2rem;
  align-items: start;
  margin: 0;
  padding: 0.8rem 0.9rem 0.85rem;
  border-bottom: 1px solid var(--line);
}

.recon-tool {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  justify-items: start;
  min-width: 0;
}

.recon-tool .eyebrow,
.recon-tool .hint { margin: 0; }

.recon-range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: end;
}

.recon-range label {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recon-range input[type="date"] {
  width: 11rem;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 0.38rem 0.5rem;
  font: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#period-error:empty { display: none; }

.recon-shown {
  margin: 0;
  padding: 0.45rem 0.9rem 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.recon-board > .empty { padding: 0.35rem 0.9rem 0.9rem; }

.recon-board .table-wrap {
  border: 0;
  box-shadow: none;
  background: transparent;
}

#table-wrap:not(.has-actions) .recon-table th:last-child,
#table-wrap:not(.has-actions) .recon-table td:last-child { display: none; }

.recon-table th:last-child,
.recon-table td:last-child { width: 1%; white-space: nowrap; }

.recon-table button.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid #e3c8c2;
  padding: 0.28rem 0.55rem;
  font-size: 0.82rem;
}

.recon-table button.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.recon-name { display: grid; gap: 0.15rem; min-width: 0; }

.recon-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recon-places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.4rem;
  align-items: baseline;
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.recon-places span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recon-window {
  display: grid;
  gap: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

.recon-window span { white-space: nowrap; }

.recon-window i {
  display: block;
  margin-bottom: 0.05rem;
  color: var(--muted);
  font-family: "Open Sans", "Segoe UI", "Liberation Sans", "DejaVu Sans", sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recon-about { margin-top: 1.25rem; }

.recon-about .stack { padding: 0.85rem 1rem 1.1rem; }

.recon-about p { margin: 0; }

#states,
#period {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

#states button,
#period button {
  padding: 0.32rem 0.65rem;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 0.85rem;
}

#states button:hover,
#period button:hover {
  background: var(--wash-strong);
  color: var(--ink);
}

#states button[aria-pressed="true"],
#states button[aria-pressed="true"]:hover,
#period button[aria-pressed="true"],
#period button[aria-pressed="true"]:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

@media (max-width: 800px) {
  .recon-table thead { display: none; }

  .recon-table,
  .recon-table tbody { display: block; }

  .recon-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    align-items: start;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line);
  }

  .recon-table tbody tr:last-child { border-bottom: 0; }

  .recon-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .recon-table td:nth-child(1),
  .recon-table td:nth-child(2) { grid-column: 1 / -1; }

  .recon-table tbody tr:hover td { background: transparent; }

  .recon-table tbody tr:hover { background: var(--wash); }

  .recon-window { margin-top: 0.35rem; }

  .recon-window span { white-space: normal; }
}

dialog.modal {
  width: min(40rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(26, 26, 26, 0.28);
}

dialog.modal[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

dialog.modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 2rem);
}

dialog.modal::backdrop { background: rgba(26, 26, 26, 0.45); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
}

.modal-head h2 { margin: 0; font-size: 0.95rem; }

.modal h3 { margin: 0.2rem 0 0; font-size: 0.95rem; }

.modal-body {
  min-height: 0;
  padding: 1rem 1rem 1.1rem;
  overflow: auto;
}

.modal .banner { margin: 0; }

.modal-actions { display: flex; gap: 0.5rem; align-items: center; }

.modal .pair { grid-template-columns: 1fr; }

.saved {
  margin: 0 0 1rem;
  padding: 0.55rem 0.7rem;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border: 1px solid var(--accent-line);
}

.back { margin: 0 0 0.8rem; }

.settings-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 0.9rem;
  margin: 0 0 0.85rem;
}

.settings-head h1 { margin: 0; }

.settings .saved {
  margin: 0;
  padding: 0.12rem 0.45rem;
  font-size: 0.8rem;
}

.settings-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
  max-width: 52rem;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem 0.8rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.settings-card > button,
.settings-card > .row-actions { margin-top: auto; align-self: flex-start; }

.settings-card .field-error:empty { display: none; }

.settings-card h2 {
  margin: 0;
  color: var(--nav-mark);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-card .hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.settings-card button {
  justify-self: start;
  padding: 0.32rem 0.7rem;
  font-size: 0.85rem;
}

.settings-card .color-row input[type="color"] {
  width: 2.2rem;
  height: 1.9rem;
}

.server-mail { max-width: 28rem; }

.switch-line {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-weight: 650;
}

.color-row { display: flex; gap: 0.5rem; align-items: center; }
.color-row input[type="color"] {
  width: 2.6rem;
  height: 2.2rem;
  padding: 0.15rem;
  border: 1px solid var(--line);
  background: white;
}
.color-row input[type="text"] { width: 6.5rem; }

.banner {
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #e3c8c2;
}

.field-error {
  color: var(--danger);
  font-size: 0.82rem;
}

.note-cell { width: 14rem; vertical-align: middle; }
.note-cell input { padding: 0.28rem 0.45rem; font-size: 0.86rem; }
.note-cell .field-error:empty,
.identifier-note .field-error:empty { display: none; }

.table-wrap { overflow-x: auto; }

.panel .table-wrap {
  border: 0;
  box-shadow: none;
  background: transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td { border-bottom: 0; }

tbody tr:hover td { background: var(--wash); }

td a:not(.text-action) { font-weight: 650; text-decoration: none; }
td a:not(.text-action):hover { text-decoration: underline; }

a.text-action {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  background: white;
  text-decoration: none;
  font-size: 0.85rem;
}

a.text-action:hover { background: var(--wash-strong); }

th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
  background: var(--wash);
}

.access-stack { display: grid; gap: 0.15rem; }

.access-places {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.mono {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.swap-scroll {
  max-height: 16rem;
  overflow-y: auto;
}

.swap-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.swap-scroll .mono {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.swap-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.15rem 0.65rem;
  align-items: center;
  min-width: 0;
}

.swap-side {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.swap-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}

.swap-arrow {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.dial-with {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  min-width: 0;
}

.dial-with > span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
}

.dial-kind {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}

.dial-with a {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dial-with a:hover { text-decoration: underline; }

.sms-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 36rem;
}

.associate-group {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  min-width: 0;
}

.associate-kind {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
  padding-top: 0.15rem;
}

.associate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  min-width: 0;
}

.associate-links a {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.associate-links a:hover { text-decoration: underline; }

.set-copy {
  margin: 0 0 0.55rem;
  max-width: 44rem;
}

.sample {
  margin: 0.15rem 0 0;
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow-x: auto;
}

.raw {
  font-family: "Liberation Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  word-break: break-word;
}

.tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  background: white;
  font-size: 0.75rem;
  white-space: nowrap;
}

.tag.ok { color: var(--accent-soft-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.tag.wait { color: #8a5a12; border-color: #ead7b0; background: #fbf3e4; }
.tag.skip { color: var(--muted); }
.tag.stop { color: var(--danger); border-color: #e3c8c2; background: var(--danger-bg); }

button:disabled { opacity: 0.45; cursor: default; }
.row-actions button.plain,
.row-actions button.danger { padding: 0.28rem 0.55rem; font-size: 0.82rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 0 1rem; }

.location-block { margin-top: 1rem; }
.location-block h2 { margin-bottom: 0.15rem; }
.location-block h2 span {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}

.location-fold > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  list-style: none;
  font-weight: 400;
}

.location-fold > summary::-webkit-details-marker { display: none; }
.location-fold > summary::marker { content: ""; }

.location-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.08rem) rotate(-45deg);
}

.location-fold[open] > summary::before { transform: translateY(0.06rem) rotate(45deg); }

.location-fold .fold-id {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  min-width: 0;
  font-weight: 650;
}

.location-fold .fold-place { color: var(--muted); font-weight: 400; }

.location-fold .fold-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
}

.location-fold.is-problem > summary { background: var(--danger-bg); }
.location-fold.is-problem > summary:hover { background: #f3e0da; }
.location-fold.is-attention > summary { background: #fbf3e4; }
.location-fold.is-attention > summary:hover { background: #f6ead3; }

.location-fold > .fold-body { padding: 0.35rem 1rem 1rem; }

.recent-scroll {
  max-height: 16rem;
  overflow: auto;
}

.recent-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.location-fold .kicker {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.location-fold .core-card {
  margin-top: 0.85rem;
  border: 1px solid var(--line);
  background: white;
}

.location-fold .core-card-head,
.location-fold .source-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
}

.location-fold .core-card-head {
  padding: 0.55rem 0.75rem;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}

.location-fold .core-card-head strong,
.location-fold .source-head strong {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.location-fold .source-card {
  margin: 0.85rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.location-fold .source-head {
  padding: 0.45rem 0.7rem;
  background: white;
  border-bottom: 1px solid var(--line);
}

.location-fold .dir-block { padding: 0.6rem 0.7rem 0.75rem; }

.location-fold .dir-block + .dir-block { border-top: 1px solid var(--line); }

.location-fold .dir-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  margin: 0 0 0.45rem;
}

.location-fold .dir-caption .mono { overflow-wrap: anywhere; }

.location-fold .source-note,
.location-fold .core-note { margin: 0.65rem 0.75rem; }

.location-fold .dir-block .hint { margin: 0; }

.location-fold .source-card .table-wrap { margin-top: 0.15rem; }

.server-name {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.95rem;
}

.server-where {
  margin: -0.15rem 0 0.45rem;
  color: var(--muted);
  white-space: pre-line;
}

.server-form { display: grid; gap: 0.7rem; }
.disclosure > .server-form { padding: 0.85rem 1rem 1rem; }
.server-line {
  display: grid;
  grid-template-columns: 8.4rem minmax(0, 0.7fr) minmax(0, 1.4fr) 5.4rem minmax(0, 0.85fr);
  gap: 0.45rem 0.65rem;
  align-items: start;
}
.server-line.connect { grid-template-columns: 8.4rem minmax(0, 1.5fr) 5.4rem minmax(0, 1fr); }
.server-line.is-local .ssh-only { display: none; }
.server-line label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.server-line input,
.server-line select {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.92rem;
}
.server-line .port input {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.server-line .port input::-webkit-outer-spin-button,
.server-line .port input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.seed-line {
  display: grid;
  grid-template-columns: 7.5rem minmax(8rem, 1.1fr) minmax(10rem, 1.6fr) auto;
  gap: 0.45rem 0.65rem;
  align-items: center;
}
.seed-line label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.seed-line input,
.seed-line select {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.92rem;
}
.seed-line button { justify-self: start; }
#seeds-error:empty { display: none; }
.seed-table th,
.seed-table td { padding: 0.42rem 0.65rem; }
.seed-ratio { white-space: nowrap; font-variant-numeric: tabular-nums; }

.tuning-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

.tuning-board > .panel {
  margin-top: 0;
  min-width: 0;
}

.tuning-board.is-single { grid-template-columns: minmax(0, 1fr); }

#known { container-type: inline-size; }

@container (max-width: 36rem) {
  #known .seed-line { grid-template-columns: minmax(0, 1fr); }
}

.tuning-board .seed-table button.plain {
  padding: 0.28rem 0.5rem;
  font-size: 0.82rem;
}

.tuning-board:not(.is-single) .signal { grid-template-columns: minmax(0, 1fr); }

.tuning-board:not(.is-single) .signal h3,
.tuning-board:not(.is-single) .signal-example,
.tuning-board:not(.is-single) .signal .sample,
.tuning-board:not(.is-single) .signal-calc {
  grid-column: 1;
  grid-row: auto;
}

.tuning-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: -1rem -1rem 0.85rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
}

.tuning-head h2 {
  margin: 0;
  font-size: 0.95rem;
}

.tuning-count {
  margin-left: 0.35rem;
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.tuning-head .hint {
  margin: 0.2rem 0 0;
  max-width: 46rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

.tuning-head button {
  flex: none;
  margin-top: 0.1rem;
  padding: 0.32rem 0.75rem;
  font-size: 0.85rem;
}

#known .seed-line { margin-bottom: 0.15rem; }

.signal {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.2rem;
  align-items: start;
  padding: 0.75rem 0;
}

.signal + .signal { border-top: 1px solid var(--line); }

.signal h3 {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.signal-example,
.signal .sample,
.signal-calc { grid-column: 2; }

#comparison { margin-top: 0.35rem; }

.signal-example {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.signal .sample {
  margin: 0;
  font-size: 0.82rem;
}

.signal-calc {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.server-form .field-error:empty,
.server-card .field-error:empty { display: none; }
.server-line .field-error,
.dir-list .field-error {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.server-card {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding: 0.7rem 0.8rem 0.8rem;
  background: white;
  border: 1px solid var(--line);
}
.server-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
}
.server-card h3 { margin: 0; font-size: 1rem; }
.server-head .row-actions button { padding: 0.28rem 0.65rem; font-size: 0.82rem; }
.server-card .saved { margin: 0; }
.server-card .server-where { margin: 0; color: var(--ink); }

.core-fields { display: grid; gap: 0.75rem; }
.core-section { display: grid; gap: 0.45rem; }
.core-read { display: grid; gap: 0.15rem; }
.name-line,
.key-line { display: grid; gap: 0.35rem; }
.name-line label,
.key-line label { max-width: 18rem; }
.name-line label,
.key-line label,
.endpoint-line label {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.name-line input,
.key-line input,
.endpoint-line input {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.92rem;
}
.endpoint-rows { display: grid; gap: 0.45rem; }
.endpoint {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.endpoint-line {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 5.4rem auto;
  gap: 0.45rem 0.65rem;
  align-items: end;
}
.endpoint-line .port input {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.endpoint-line .port input::-webkit-outer-spin-button,
.endpoint-line .port input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.endpoint-line > button { align-self: end; }
.endpoint-line .field-error,
.name-line .field-error,
.key-line .field-error,
.core-section > .field-error {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.target-block { display: grid; gap: 0.2rem; margin: 0.15rem 0 0.85rem; }
.target-block .server-where { margin: 0; }

.ssh-log {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: white;
  border: 1px solid var(--line);
  white-space: pre-wrap;
  word-break: break-word;
}

.empty { color: var(--muted); }

h1 .mono { font-size: 0.92em; }

.chart-scroll {
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.bars {
  display: flex;
  align-items: stretch;
  gap: 0.28rem;
  height: var(--bars-height, 11rem);
}

.bar {
  flex: 1 0 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1.2rem;
  height: 100%;
  gap: 0.15rem;
}

.bar-value {
  height: 0.95rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.bar-plot {
  width: 100%;
  height: calc(var(--bars-height, 11rem) - 0.95rem - 1.7rem - 0.3rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar-fill {
  display: block;
  width: 0.7rem;
  height: calc(var(--share) * 100%);
  background: var(--accent);
}

.bar-fill.is-zero {
  height: 2px;
  background: var(--line);
}

.bar-label {
  height: 1.7rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.15;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.week-chart {
  position: relative;
  max-width: 100%;
}

.week-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 22rem;
  max-width: 100%;
  border: 1px solid var(--line);
  background: white;
}

.week-head,
.week-row {
  display: grid;
  grid-template-columns: 8.4rem minmax(0, 1fr);
}

.week-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}

.week-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
  background: var(--panel);
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.week-year { font-size: 0.68rem; }

.week-head .week-label,
.week-head .week-days {
  background: var(--wash);
}

.week-days,
.week-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.week-day-name {
  min-width: 0;
  padding: 0.28rem 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  overflow: hidden;
}

.week-day {
  position: relative;
  min-width: 0;
  min-height: 1.35rem;
  overflow: hidden;
  background: var(--wash-strong);
  border-left: 1px solid var(--line);
}

.week-row + .week-row .week-label,
.week-row + .week-row .week-day { border-top: 1px solid var(--line); }

.week-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 1px;
}

.week-part {
  flex: 1 1 0;
  min-height: 1px;
}

.week-tip {
  position: fixed;
  z-index: 30;
  max-width: 22rem;
  padding: 0.45rem 0.6rem;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  line-height: 1.35;
  pointer-events: none;
}

.week-tip-line {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.week-swatch {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.2rem;
  background: var(--accent);
}

.swap-chart {
  position: relative;
  padding-right: 1.35rem;
}

.swap-plot {
  position: relative;
  min-height: 2rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.swap-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

.swap-tick-name {
  position: absolute;
  top: 0.15rem;
  left: 0.3rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

button.swap-dot,
button.swap-dot:hover {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 0 0 -0.35rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 43, 0.45);
  border-radius: 50%;
  justify-self: auto;
  z-index: 1;
  cursor: pointer;
}

.swap-axis {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .tuning-board,
  .tuning-board.is-single { grid-template-columns: minmax(0, 1fr); }
  .tuning-board:not(.is-single) .signal { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .tuning-board:not(.is-single) .signal h3 { grid-column: 1; grid-row: 1 / -1; }
  .tuning-board:not(.is-single) .signal-example,
  .tuning-board:not(.is-single) .signal .sample,
  .tuning-board:not(.is-single) .signal-calc { grid-column: 2; }
}

@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  aside { padding: 1rem 0.7rem 0.85rem; }
  .product { margin-bottom: 0.75rem; }
  .nav-foot { margin-top: 0.75rem; }
  nav { flex-direction: row; flex-wrap: wrap; }
  .nav-group { flex-direction: row; flex-wrap: wrap; }
  nav > .nav-section,
  .nav-group,
  .nav-group > .nav-section { flex-basis: 100%; }
  nav button.is-disabled { width: auto; }
  nav a.is-current { box-shadow: inset 0 -2px 0 var(--nav-mark); }
  main { padding: 1.25rem 1rem 2rem; }
  .stats,
  .stats.four,
  .stats.five,
  .facts { grid-template-columns: 1fr 1fr; }
  .id-strip { grid-template-columns: minmax(0, 1fr); }
  .id-sites {
    padding-left: 0;
    border-left: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
  }
  .id-decision-body { grid-template-columns: minmax(0, 1fr); }
  .id-decision-body #decision-line { grid-row: 1; grid-column: 1; }
  .id-decision-body #decision-actions { grid-row: 2; grid-column: 1; }
  .id-decision-body #decision-who { grid-row: 3; grid-column: 1; }
  .id-decision-body #locked { grid-row: 4; grid-column: 1; }
  #view-only { grid-row: 1; grid-column: 1; }
  .identifier-note { flex: 1 1 100%; }
  .identifier-note input { width: 100%; }
  .id-meta { display: grid; gap: 0.12rem; }
  .id-meta > span + span::before { content: none; }
  .settings-board { grid-template-columns: 1fr; }
  .page-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "actions"
      "copy"
      "times";
  }
  .admin-actions { justify-content: flex-start; }
  .split,
  .pair,
  .account-line { grid-template-columns: 1fr; }
  .account-flags { grid-column: auto; padding-bottom: 0; }
  .remove-row { align-items: flex-start; flex-direction: column; }
  .server-line,
  .server-line.connect { grid-template-columns: minmax(0, 1fr) 5.4rem; }
  .seed-line { grid-template-columns: 1fr; }
  .tuning-board,
  .tuning-board.is-single { grid-template-columns: minmax(0, 1fr); }
  .tuning-head { flex-direction: column; }
  .signal,
  .tuning-board:not(.is-single) .signal { grid-template-columns: minmax(0, 1fr); }
  .signal h3,
  .signal-example,
  .signal .sample,
  .signal-calc,
  .tuning-board:not(.is-single) .signal h3,
  .tuning-board:not(.is-single) .signal-example,
  .tuning-board:not(.is-single) .signal .sample,
  .tuning-board:not(.is-single) .signal-calc { grid-column: 1; grid-row: auto; }
  .server-line > label.import,
  .server-line > label.name,
  .server-line > label.key { grid-column: 1 / -1; }
  .endpoint-line { grid-template-columns: minmax(0, 1fr) 5.4rem; }
  .endpoint-line > button { grid-column: 1 / -1; justify-self: start; }
}