/* A harbor ledger rather than a dashboard: the topology is the one expressive
 * object and the tables around it stay quiet enough to be checked at a glance. */
[data-product="valheim-network"] {
  --vn-pine: #263229;
  --vn-paper: #d9d0b7;
  --vn-ember: #da8b45;
  --vn-timber: #7b5939;
  --vn-sea: #3f6a73;
  --vn-danger: #953f36;
  --vn-sheet: #eee6d4;
  --vn-sheet-muted: #59645b;
}

[data-product="valheim-network"] .pane {
  padding: clamp(1rem, 2.5vw, 1.65rem);
  border-color: color-mix(in srgb, var(--border) 62%, var(--vn-timber));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--vn-pine) 4%, transparent) 1px, transparent 1px) 0 0 / 2.2rem 100%,
    color-mix(in srgb, var(--surface) 95%, var(--vn-paper));
}

[data-product="valheim-network"] .vn-world-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.45fr);
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--vn-timber));
  border-top: .36rem solid var(--vn-pine);
  background: var(--surface);
}

[data-product="valheim-network"] .vn-world-controls .field { margin: 0; }

[data-product="valheim-network"] .vn-new-world {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: end;
}

[data-product="valheim-network"] .vn-announcer {
  min-height: 1.4em;
  margin: .65rem 0 0;
  color: var(--muted);
}

[data-product="valheim-network"] .vn-announcer.tone-bad,
[data-product="valheim-network"] .vn-announcer.tone-warn { color: var(--vn-danger); }

[data-product="valheim-network"] .vn-welcome {
  max-width: 48rem;
  margin: 1.4rem auto;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border-left: .45rem solid var(--vn-ember);
  background: color-mix(in srgb, var(--vn-paper) 38%, var(--surface));
}

[data-product="valheim-network"] .vn-welcome > * { margin-block: .35rem; }

[data-product="valheim-network"] .pane-form {
  margin-block: 1rem;
  border-color: color-mix(in srgb, var(--border) 70%, var(--vn-timber));
  background: color-mix(in srgb, var(--surface) 96%, var(--vn-paper));
  color: #e8dec8;
}

[data-product="valheim-network"] .pane-form > summary { color: #f0e7d5; }

[data-product="valheim-network"] .vn-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
  align-items: end;
  padding-top: .8rem;
}

[data-product="valheim-network"] .vn-editor-grid .tool-actions,
[data-product="valheim-network"] .vn-editor-grid .vn-check { grid-column: 1 / -1; }

[data-product="valheim-network"] .vn-check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  max-width: 44rem;
  padding: .75rem;
  border-left: .25rem solid var(--vn-ember);
  background: var(--surface);
}

[data-product="valheim-network"] .vn-check input { margin-top: .2rem; }

[data-product="valheim-network"] .vn-artifacts {
  justify-content: flex-end;
  margin: -3.85rem .7rem 1.2rem 0;
}

[data-product="valheim-network"] .vn-print-sheet {
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--vn-timber));
  background: var(--vn-sheet);
  color: var(--vn-pine);
  box-shadow: 0 .55rem 1.4rem rgba(38, 50, 41, .09);
}

[data-product="valheim-network"] .vn-sheet-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 28rem);
  gap: .6rem 2rem;
  align-items: end;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border-bottom: .4rem solid var(--vn-pine);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--vn-pine) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--vn-paper) 72%, #fff);
}

[data-product="valheim-network"] .vn-sheet-heading h3 {
  grid-column: 1;
  margin: 0;
  color: var(--vn-pine);
  font-size: clamp(1.6rem, 4vw, 2.65rem);
  line-height: 1;
}

[data-product="valheim-network"] .vn-sheet-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--vn-sheet-muted);
  line-height: 1.55;
}

[data-product="valheim-network"] .vn-kicker {
  margin: 0 0 .25rem;
  color: var(--vn-timber);
  font-weight: 750;
}

[data-product="valheim-network"] .vn-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--vn-pine);
  color: #f3eee3;
}

[data-product="valheim-network"] .vn-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .2rem;
  padding: .8rem .9rem;
  border-right: 1px solid rgba(255, 255, 255, .17);
}

[data-product="valheim-network"] .vn-summary > div:last-child { border-right: 0; }
[data-product="valheim-network"] .vn-summary dt { font-size: .76rem; opacity: .82; }
[data-product="valheim-network"] .vn-summary dd {
  margin: 0;
  color: #fffaf0;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

[data-product="valheim-network"] .vn-issues,
[data-product="valheim-network"] .vn-repair {
  margin: 1rem;
  padding: .85rem 1rem;
  border-left: .32rem solid var(--vn-danger);
  background: color-mix(in srgb, var(--vn-danger) 8%, var(--vn-sheet));
  color: var(--vn-pine);
}

[data-product="valheim-network"] .vn-issues h3,
[data-product="valheim-network"] .vn-repair h3 { margin: 0 0 .45rem; font-size: 1rem; }
[data-product="valheim-network"] .vn-issues ul,
[data-product="valheim-network"] .vn-repair ul { margin: 0; padding-left: 1.25rem; }
[data-product="valheim-network"] .vn-repair li + li { margin-top: .45rem; }
[data-product="valheim-network"] .vn-repair .btn-quiet { margin-left: .6rem; }

[data-product="valheim-network"] .vn-clear {
  margin: 1rem;
  padding: .7rem .9rem;
  border-left: .28rem solid var(--vn-sea);
  background: color-mix(in srgb, var(--vn-sea) 8%, var(--vn-sheet));
  color: var(--vn-pine);
}

[data-product="valheim-network"] .vn-topology {
  margin: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--vn-timber));
  background:
    radial-gradient(circle at 25% 18%, rgba(218, 139, 69, .08), transparent 24rem),
    color-mix(in srgb, var(--vn-paper) 78%, #fff);
}

[data-product="valheim-network"] .vn-topology-scroll { overflow-x: auto; }
[data-product="valheim-network"] .vn-topology svg { display: block; min-width: 52rem; width: 100%; height: auto; }
[data-product="valheim-network"] .vn-link { fill: none; stroke-width: 4; }
[data-product="valheim-network"] .vn-link-confirmed { stroke: var(--vn-ember); }
[data-product="valheim-network"] .vn-link-planned { stroke: var(--vn-timber); stroke-dasharray: 10 8; }
[data-product="valheim-network"] .vn-link-warning { stroke: var(--vn-danger); stroke-dasharray: 3 7; }
[data-product="valheim-network"] .vn-link-route { stroke: var(--vn-sea); stroke-width: 3; stroke-dasharray: 2 8; }
[data-product="valheim-network"] .vn-link-label {
  fill: var(--vn-pine);
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--vn-paper) 70%, #fff);
  stroke-width: 7;
  stroke-linejoin: round;
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
}

[data-product="valheim-network"] .vn-node rect {
  fill: #f6f1e5;
  stroke: var(--vn-pine);
  stroke-width: 3;
}

[data-product="valheim-network"] .vn-node-name { fill: var(--vn-pine); font-size: 14px; font-weight: 800; }
[data-product="valheim-network"] .vn-node-region { fill: #5b665d; font-size: 11px; }

[data-product="valheim-network"] .vn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  padding: .65rem 1rem .35rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--vn-timber));
  font-size: .8rem;
}

[data-product="valheim-network"] .vn-key { display: inline-flex; align-items: center; gap: .42rem; }
[data-product="valheim-network"] .vn-key::before { content: ''; width: 2rem; border-top: .22rem solid; }
[data-product="valheim-network"] .vn-key-confirmed::before { border-color: var(--vn-ember); }
[data-product="valheim-network"] .vn-key-planned::before { border-color: var(--vn-timber); border-top-style: dashed; }
[data-product="valheim-network"] .vn-key-route::before { border-color: var(--vn-sea); border-top-style: dotted; }

[data-product="valheim-network"] .vn-topology figcaption {
  padding: 0 1rem .75rem;
  color: var(--vn-sheet-muted);
  font-size: .78rem;
}

[data-product="valheim-network"] .vn-ledger {
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border-top: 1px solid var(--border);
}

[data-product="valheim-network"] .vn-ledger-heading {
  display: grid;
  grid-template-columns: minmax(10rem, .6fr) minmax(16rem, 1.4fr);
  gap: .5rem 1rem;
  align-items: baseline;
}

[data-product="valheim-network"] .vn-ledger-heading h3 { margin: 0; color: var(--vn-pine); font-size: 1.25rem; }
[data-product="valheim-network"] .vn-ledger-heading p { margin: 0; color: var(--vn-sheet-muted); }

[data-product="valheim-network"] .vn-table-wrap { width: 100%; overflow-x: auto; margin-top: .85rem; }
[data-product="valheim-network"] .vn-table { width: 100%; min-width: 43rem; border-collapse: collapse; }
[data-product="valheim-network"] .vn-table th,
[data-product="valheim-network"] .vn-table td {
  padding: .68rem .72rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  text-align: left;
  vertical-align: top;
  color: var(--vn-pine);
}

[data-product="valheim-network"] .vn-table thead th {
  border-bottom: .18rem solid var(--vn-pine);
  color: var(--vn-pine);
  font-size: .78rem;
}

[data-product="valheim-network"] .vn-table tbody th { color: var(--vn-pine); }
[data-product="valheim-network"] .vn-table .vn-actions { width: 1%; white-space: nowrap; }
[data-product="valheim-network"] .vn-table .pane-form { min-width: 27rem; margin: 0; white-space: normal; }
[data-product="valheim-network"] .vn-table .pane-form[open] { position: relative; z-index: 1; }
[data-product="valheim-network"] .vn-table tr.vn-state-invalid,
[data-product="valheim-network"] .vn-table tr.vn-state-repair,
[data-product="valheim-network"] .vn-table tr.vn-state-order-dependent { background: color-mix(in srgb, var(--vn-danger) 6%, var(--vn-sheet)); }
[data-product="valheim-network"] .vn-table tr.vn-state-incomplete { background: color-mix(in srgb, var(--vn-ember) 11%, var(--vn-sheet)); }

[data-product="valheim-network"] .vn-status {
  display: inline-block;
  padding: .16rem .46rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--vn-pine);
  font-size: .74rem;
  font-weight: 750;
}

[data-product="valheim-network"] .vn-state-confirmed .vn-status { color: var(--vn-sea); }
[data-product="valheim-network"] .vn-state-invalid .vn-status,
[data-product="valheim-network"] .vn-state-repair .vn-status,
[data-product="valheim-network"] .vn-state-order-dependent .vn-status { color: var(--vn-danger); }

[data-product="valheim-network"] .vn-empty { margin: .9rem 0 0; color: var(--vn-sheet-muted); font-style: italic; }
[data-product="valheim-network"] .vn-handoff {
  max-width: 62rem;
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--vn-sea));
  color: var(--muted);
  text-align: center;
}

[data-product="valheim-network"] .btn-danger {
  appearance: none;
  padding: .55rem .75rem;
  border: 1px solid var(--vn-danger);
  border-radius: .25rem;
  background: transparent;
  color: var(--vn-danger);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

[data-product="valheim-network"] :is(.btn, .btn-quiet, .btn-danger, .input, summary):focus-visible {
  outline: .2rem solid var(--vn-ember);
  outline-offset: .16rem;
}

@media (max-width: 56rem) {
  [data-product="valheim-network"] .vn-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-product="valheim-network"] .vn-summary > div:nth-child(3) { border-right: 0; }
  [data-product="valheim-network"] .vn-sheet-heading { grid-template-columns: 1fr; }
  [data-product="valheim-network"] .vn-sheet-heading > p:last-child { grid-column: 1; grid-row: auto; }
  [data-product="valheim-network"] .vn-ledger-heading { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
  [data-product="valheim-network"] .vn-world-controls,
  [data-product="valheim-network"] .vn-new-world,
  [data-product="valheim-network"] .vn-editor-grid { grid-template-columns: 1fr; }
  [data-product="valheim-network"] .vn-artifacts { justify-content: flex-start; margin: .6rem 0 1rem; }
  [data-product="valheim-network"] .vn-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-product="valheim-network"] .vn-summary > div:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, .17); }
  [data-product="valheim-network"] .vn-summary > div:nth-child(2n) { border-right: 0; }
  [data-product="valheim-network"] .vn-table .pane-form { min-width: 20rem; }
  [data-product="valheim-network"] .vn-repair .btn-quiet { display: block; margin: .35rem 0 0; }
}

@media print {
  @page { size: landscape; margin: 11mm; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-no-print,
  body[data-printing-scope] [data-product="valheim-network"] .pane-form,
  body[data-printing-scope] [data-product="valheim-network"] .vn-handoff { display: none !important; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-print-sheet {
    border: 0;
    box-shadow: none;
  }
  body[data-printing-scope] [data-product="valheim-network"] .vn-topology { break-inside: avoid; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-topology svg { min-width: 0; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-table { min-width: 0; font-size: 8.5pt; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-ledger { break-before: auto; }
  body[data-printing-scope] [data-product="valheim-network"] .vn-table-wrap { overflow: visible; }
}
