/*
The versions block, at the foot of the side panel.

It is the same idea NetBird uses at the bottom-left of its dashboard: the
components that make up what you are looking at, each with the version it is
running, in a quiet framed block that is out of the way but never off screen.
Here there are two, and they are genuinely two different things that update
separately: the DNS server, which Technitium ships, and this console, which does
not come with it.

Upstream keeps the server's domain in the panel title next to "DNS Server". Same
pairing here: the domain heads the block that talks about that server.
*/
.block {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--pan2);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The server's domain wraps at its dots only (`ui/DomainName`): `break-all` cut it
   wherever the card's edge fell, mid-label. A name with no dot, which DomainName
   leaves as plain text, still breaks rather than leave the card. */
.host {
  font-family: var(--font-mono);
  overflow-wrap: break-word;
  font-size: var(--t-1);
  color: var(--faint);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line2);
  margin-bottom: var(--s-2);
}

/* Label left, version right: the eye reads down the versions in one column.
   When a mark leaves no room beside the label, the version and its mark move to
   the next line, still on the right, rather than cut "Web Console" in two. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-2);
}

.name { color: var(--mute); white-space: nowrap; }

.ver {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}

.num { font-family: var(--font-mono); color: var(--ink); }

/*
The mark rides on the version it is about, which is the whole point of putting
it here: an update to the DNS server and an update to this console are not the
same news, and a notice floating on its own could not say which one it meant.

Amber and not the red upstream uses: in this console red is what destroys
(Delete Zones, Flush Cache) and an available update destroys nothing.
*/
.mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--s-4) 1px var(--s-3);
  border: 1px solid var(--acc-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--acc-ink);
  font: inherit;
  font-size: var(--t-1);
  
  line-height: 1.6;
  cursor: pointer;
}

.mark:hover,
.mark:focus-visible { background: color-mix(in srgb, var(--acc) 14%, transparent); }

.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc-ink); }

/* Inside the dialog. */
.jump {
  display: flex; align-items: baseline; gap: var(--s-5);
  margin-bottom: var(--s-7); font-family: var(--font-mono);
}
.from { color: var(--mute); }
.arrow { color: var(--faint); }
.to { color: var(--acc-ink); font-weight: 600; }
.message { margin-bottom: var(--s-7); }
.links { display: flex; flex-wrap: wrap; gap: var(--s-7); }

/* The console's update commands: one line each, read and copied whole. They
   are long, so they wrap between words rather than push the dialog wider. */
/* The command and its Copy button on one line; the command takes the width. */
.commandRow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: calc(-1 * var(--s-5)) 0 var(--s-7);
}
.commandRow > button { flex: none; }

.command {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--pan2);
  font-family: var(--font-mono);
  font-size: var(--t-1);
  overflow-wrap: break-word;
  user-select: all;
}

/* Upstream's two `Note!`, after the links: they explain, they do not change the
   decision. Same rule as every other `Note!` in the console. */
.notes { display: grid; gap: var(--s-5); margin-top: var(--s-9); }