/* Station detail. */

@layer views {
  .v-station__hero {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
  }

  .v-station__actions, .v-statsline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
  }

  .v-meter {
    display: flex;
    gap: 4px;
    list-style: none;
    height: 28px;
    align-items: end;
  }

  .v-meter li {
    flex: 1;
    height: 40%;
    border-radius: 3px;
    background: var(--danger);
  }

  .v-meter li.is-ok {
    height: 100%;
    background: var(--ok);
  }

  .v-log, .v-dl { color: var(--text-dim); font-size: var(--fs-sm); }
  .v-log { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
  .v-dl { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-2); }
  .v-dl dd { margin: 0; word-break: break-all; }

  .tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .tab.is-active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
}