/*
 * Paneles junto al terminal (js/demos/panels/*): árbol, anatomía, permisos, usuarios, inodos, descriptores,
 * tubería, procesos, entorno y chuleta. Todos comparten bloques, notas y leyendas.
 */
.panel-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-y: auto;
  font-size: 0.86rem;
  min-height: 0;
}

.pblock {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.pblock + .pblock {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

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

.pnote {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.pairs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--space-3);
  margin: 0;
}

.pairs dt {
  color: var(--text-muted);
  font-weight: 600;
}

.pairs dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ok {
  color: var(--ok);
}

.bad {
  color: var(--drop);
}

/* Nombres de archivo con el color de su tipo (como ls --color). */
.fsname {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.fs--dir {
  color: var(--c-dir);
  font-weight: 700;
}

.fs--file {
  color: var(--c-file);
}

.fs--exec {
  color: var(--c-exec);
  font-weight: 700;
}

.fs--link {
  color: var(--c-link);
  font-weight: 700;
}

.fs--dev {
  color: var(--ansi-yellow);
}

.fs--missing {
  color: var(--drop);
}

.swatch--shared {
  --swatch: var(--warn);
  height: 10px;
}

.swatch--fresh {
  --swatch: var(--ok);
  height: 10px;
}

.swatch--mine {
  --swatch: var(--accent);
  height: 10px;
}

/* -------------------------------------------------------------------- árbol */
.tree {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.tree__list {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
  border-left: 1px dashed var(--border-strong);
  margin-left: 6px;
}

.tree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 1px 0;
}

.tree__label {
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}

button.tree__label {
  cursor: pointer;
}

button.tree__label:hover {
  background: var(--accent-soft);
}

.tree__label.is-cwd {
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
}

.tree__target {
  color: var(--text-muted);
}

.tree__badge {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
}

.tree__badge--here {
  background: var(--accent);
  color: var(--on-accent);
}

.tree__badge--new {
  background: var(--ok-soft);
  color: var(--ok);
}

.tree__badge--lock {
  background: transparent;
}

.tree__desc {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 0.72rem;
}

.tree__more {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 0.75rem;
}

/* ----------------------------------------------------------------- anatomía */
.anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--term-bg);
  color: var(--term-fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.anat__part {
  padding: 1px 6px;
  border-radius: 4px;
  border-bottom: 2px solid transparent;
}

.anat__part--cmd,
.anat__dot--cmd {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

.anat__part--opt,
.anat__dot--opt {
  background: color-mix(in srgb, var(--ansi-yellow) 22%, transparent);
  border-color: var(--ansi-yellow);
}

.anat__part--arg,
.anat__dot--arg {
  background: color-mix(in srgb, var(--ansi-magenta) 22%, transparent);
  border-color: var(--ansi-magenta);
}

.anat__part--who {
  color: var(--ansi-green);
  font-weight: 700;
}

.anat__part--host {
  color: var(--ansi-cyan);
}

.anat__part--where {
  color: var(--ansi-blue);
  font-weight: 700;
}

.anat__part--sign {
  font-weight: 700;
}

.anat__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.anat__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.anat__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border-bottom: 2px solid;
}

/* ------------------------------------------------------------------ permisos */
.perms__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.perms__select {
  max-width: 14rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.perms__mode {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.perms__octal {
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.perms__grid {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
}

.triad {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-2) 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  min-width: 0;
}

.triad.is-yours {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.triad__who {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.triad__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.triad__bits {
  display: flex;
  gap: 2px;
}

.triad__oct {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}

.triad__you {
  position: absolute;
  top: -8px;
  right: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.62rem;
  font-weight: 700;
}

.bit {
  min-width: 26px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
}

.bit.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-strong);
  font-weight: 700;
}

.bit.is-changed {
  outline: 2px dashed var(--warn);
  outline-offset: 1px;
}

.bit--type {
  display: inline-grid;
  place-items: center;
  cursor: default;
}

.bit--special {
  font-family: var(--font-sans);
  font-size: 0.72rem;
}

.perms__special {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.perms__cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.perms__can,
.perms__path {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.2em;
}

.perms__can {
  list-style: none;
  padding: 0;
}

.perms__path li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------- tablas pequeñas */
.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ptable th,
.ptable td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.ptable th {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptable td:first-child {
  font-family: var(--font-mono);
}

.ptable tr.is-me td {
  background: var(--accent-soft);
}

.ptable tr.is-local td {
  color: var(--text-muted);
}

.ptable__val {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.idline {
  display: block;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--term-bg);
  color: var(--term-fg);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------- inodos */
.inodes {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-2);
}

.inode__names {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.inode__name {
  overflow-wrap: anywhere;
  text-align: right;
}

.inode__else {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.inode__arrow {
  color: var(--text-dim);
}

.inode__box {
  display: grid;
  gap: 1px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  min-width: 0;
}

.inode.is-shared .inode__box {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.inode.is-fresh .inode__box {
  border-color: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok);
}

.inode__num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-strong);
  font-size: 0.8rem;
}

.inode__meta,
.inode__content {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.inode__meta {
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------- descriptores */
.fds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fd {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.fd--0 {
  background: color-mix(in srgb, var(--c-in) 20%, transparent);
  color: var(--c-in);
}

.fd--1 {
  background: color-mix(in srgb, var(--c-out) 20%, transparent);
  color: var(--c-out);
}

.fd--2 {
  background: color-mix(in srgb, var(--c-err) 20%, transparent);
  color: var(--c-err);
}

.stage {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.stage--error {
  border-color: var(--drop);
}

.stage__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.stage__cmd {
  overflow-wrap: anywhere;
}

.stage__status {
  margin-left: auto;
  font-size: 0.74rem;
  white-space: nowrap;
}

.stage__redirs {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.fdrows {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fdrow {
  display: grid;
  grid-template-columns: 6.5em auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--space-2);
}

.fdrow__arrow {
  color: var(--text-dim);
}

.fdrow__where {
  overflow-wrap: anywhere;
}

.fdrow__sample {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--term-bg);
  color: var(--term-fg);
  font-size: 0.74rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 6.5em;
  overflow: auto;
}

.fdrow--err .fdrow__sample {
  color: var(--ansi-red);
}

/* ------------------------------------------------------------------- tubería */
.pcards {
  display: grid;
  gap: 0;
}

.pcard {
  display: grid;
  gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.pcard--fail {
  border-color: var(--drop);
}

.pcard__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.pcard__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.pcard__cmd {
  overflow-wrap: anywhere;
}

.pcard__stat {
  margin-left: auto;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.pcard__out,
.pcard__err {
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--term-bg);
  color: var(--term-fg);
  font-size: 0.74rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pcard__err {
  color: var(--ansi-red);
}

.pcard__empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.pipe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0 2px 16px;
}

.pipe__bar {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}

.pipe__count {
  color: var(--text-muted);
  font-size: 0.74rem;
}

/* ------------------------------------------------------------------ procesos */
.ptree,
.ptree__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ptree__list {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px dashed var(--border-strong);
}

.ptree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
  min-width: 0;
}

.ptree__pid {
  min-width: 3.6em;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: right;
  cursor: pointer;
}

.ptree__pid:disabled {
  cursor: not-allowed;
  color: var(--text-dim);
}

.ptree__user {
  width: 5.2em;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.ptree__state {
  flex: none;
  width: 1.4em;
  text-align: center;
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
}

.st-R {
  background: var(--ok-soft);
  color: var(--ok);
}

.st-T {
  background: var(--warn-soft);
  color: var(--warn);
}

.ptree__cmd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  background: none;
  border: 0;
  padding: 0;
}

.ptree__item.is-mine > .ptree__row .ptree__pid {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ptree__item.is-fresh > .ptree__row {
  background: var(--ok-soft);
  border-radius: 4px;
}

.ptree__job,
.ptree__flag {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.ptree__job {
  background: var(--accent);
  color: var(--on-accent);
}

.ptree__flag {
  background: var(--warn-soft);
  color: var(--warn);
}

.signals {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------- entorno */
.path {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.82rem;
}

.path li.ok {
  font-weight: 700;
}

.path li.muted {
  opacity: 0.55;
}

.path__status {
  color: inherit;
  font-size: 0.76rem;
}

/* ------------------------------------------------------------------- chuleta */
.cheat {
  display: grid;
  gap: var(--space-2);
}

.cheat__group {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
}

.cheat__title {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.cheat__cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pairs--symbols dt code {
  white-space: nowrap;
}

/* ------------------------------------------------------------ almacenamiento */
.sdisk,
.svg {
  display: grid;
  gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.sdisk.is-fresh {
  border-color: var(--ok);
}

.sdisk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  font-size: 0.82rem;
}

.sdisk__head .muted {
  font-size: 0.74rem;
}

.sdisk__parts {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.sbar {
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
}

.sbar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  min-width: 6px;
  overflow: hidden;
  border-radius: 4px;
  color: var(--text-strong);
  font-size: 0.7rem;
  font-weight: 600;
}

.sbar__seg.is-fresh {
  outline: 2px solid var(--ok);
  outline-offset: -2px;
}

.sbar__label {
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Colores por firma: los de la leyenda y los de las barras. */
.sig--ext4 {
  --swatch: var(--c-dir);
  background: color-mix(in srgb, var(--c-dir) 35%, var(--panel-2));
}

.sig--xfs {
  --swatch: var(--ansi-magenta);
  background: color-mix(in srgb, var(--ansi-magenta) 35%, var(--panel-2));
}

.sig--swap {
  --swatch: var(--ansi-yellow);
  background: color-mix(in srgb, var(--ansi-yellow) 35%, var(--panel-2));
}

.sig--pv {
  --swatch: var(--accent);
  background: color-mix(in srgb, var(--accent) 35%, var(--panel-2));
}

.sig--none {
  --swatch: var(--text-dim);
  background: var(--panel-2);
  border: 1px dashed var(--border-strong);
}

.sig--free,
.sig--empty {
  --swatch: var(--border-strong);
  background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, transparent 6px 12px);
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
}

.swatch.sig--ext4,
.swatch.sig--xfs,
.swatch.sig--swap,
.swatch.sig--pv,
.swatch.sig--free {
  height: 10px;
  background: var(--swatch);
  border: 0;
}

.smounts,
.sfstabs {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-2);
  align-items: center;
}

.smount__path {
  font-weight: 700;
}

.smount__src {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.smeter {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}

.smeter__fill {
  display: block;
  height: 100%;
  background: var(--ok);
}

.smeter__fill.is-full {
  background: var(--drop);
}

.smount__pct {
  color: var(--text-muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.sfstab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--space-2);
  font-size: 0.76rem;
}

.sfstab code {
  overflow-wrap: anywhere;
}

.sfstab--ok span {
  color: var(--ok);
}

.sfstab--bad span {
  color: var(--drop);
  font-weight: 700;
}

.sfstab--warn span {
  color: var(--warn);
}

/* -------------------------------------------------------------------- recorrido */
.flow__line {
  margin: 0;
  overflow-wrap: anywhere;
}

.flow {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.flow__step {
  margin-left: calc(var(--depth, 0) * 14px);
  padding: 2px 8px;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 4px 4px 0;
  background: var(--panel);
  overflow-wrap: anywhere;
}

.flow--test,
.flow-sw--test {
  --swatch: var(--warn);
  border-left-color: var(--warn);
}

.flow--loop,
.flow-sw--loop {
  --swatch: var(--accent);
  border-left-color: var(--accent);
}

.flow--fn,
.flow--script,
.flow-sw--fn {
  --swatch: var(--ansi-magenta);
  border-left-color: var(--ansi-magenta);
}

.flow-sw--test,
.flow-sw--loop,
.flow-sw--fn {
  height: 10px;
  background: var(--swatch);
}

.flow--cmd {
  background: transparent;
}

.flow--muted {
  color: var(--text-muted);
}

.flow__out {
  color: var(--text-muted);
}

.flow__fns {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- administración */
.pnote--warn {
  padding: 4px 8px;
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
}

.apack,
.ports,
.hosts,
.cronjobs {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.apack li.is-current {
  font-weight: 700;
}

.atree {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.atree li {
  padding-left: calc(var(--depth, 0) * 14px);
}

.abar {
  display: grid;
  gap: 2px;
  font-size: 0.7rem;
}

.abar span {
  display: block;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.abar__orig {
  background: var(--panel-2);
}

.abar__gz {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.units {
  display: grid;
  gap: 4px;
}

.unit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 var(--space-2);
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.unit.is-current {
  border-color: var(--accent);
}

.unit__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
}

.unit--active .unit__dot,
.unit__dot.unit--active {
  background: var(--ok);
}

.unit--failed .unit__dot,
.unit__dot.unit--failed {
  background: var(--drop);
}

.unit__name {
  font-family: var(--font-mono);
  font-weight: 700;
}

.unit__state {
  font-size: 0.76rem;
}

.unit--failed .unit__state {
  color: var(--drop);
  font-weight: 700;
}

.unit__meta {
  grid-column: 2 / -1;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.jlog,
.cronhead {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--term-bg);
  color: var(--term-fg);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.port {
  display: inline-block;
  min-width: 3.5em;
  text-align: right;
  font-weight: 700;
}

.cronjobs li {
  display: grid;
  gap: 1px;
}

.cronjobs__when {
  color: var(--text-muted);
  font-size: 0.74rem;
}