/* Steam monitor (#/monitor): the third overview screen, in the same frame as the history zone.
   Version cards, app info cards (branches, depots), and the activity feed. */
.zone-monitor {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem .75rem .75rem; border-radius: 1.5rem; border: 1px solid var(--zone-line); background: var(--zone-bg);
}
.zone-monitor .global-head { padding: 0 .625rem; }
.zone-monitor .global-title .block-meta time { cursor: help; }
.mon-body { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.mon-body > .block-skeleton, .mon-body > .state { padding: 1rem .625rem; }

.mon-banner {
  display: flex; align-items: flex-start; gap: .625rem; margin: 0 .25rem; padding: .75rem .875rem; border-radius: .625rem;
  border: 1px solid var(--modified-soft); background: var(--modified-soft); color: var(--text); font-size: .8125rem;
}
.mon-banner .icon { color: var(--modified-text); flex: none; margin-top: 1px; }

.mon-group { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.mon-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem; padding: 0 .625rem; font: 600 .9375rem/1.3 var(--font-display); letter-spacing: -.01em; }
.mon-origin { color: var(--text-3); font: 500 .7188rem var(--font-mono); letter-spacing: 0; }

/* Cards */
.mon-card {
  display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem 1.125rem 1.125rem;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-1);
}
.mon-card.is-error { border-color: var(--modified-soft); }
.mon-card-head { display: flex; align-items: flex-start; gap: .375rem .5rem; min-width: 0; }
.zone-monitor h4, .zone-monitor h5 { margin: 0; }
.mon-card-title { min-width: 0; font-size: .875rem; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
/* Version cards: the head takes two lines in every card, so the big numbers line up even when a name wraps. */
.mon-version .mon-card-head { min-height: 2.3rem; }
.mon-version .mon-app-id { margin-left: auto; }
.mon-app .mon-card-head { flex-wrap: wrap; align-items: center; }
.mon-app-id {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .4375rem; border-radius: 62.4375rem; flex: none;
  background: var(--surface-3); color: var(--text-2); font: 600 .6875rem/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: help;
}
/* Sources come in client/server pairs per app, so each app gets a column: Dota 2 | Experimental | Staging. */
.mon-versions { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; }
.mon-big { margin-top: .25rem; font: 650 2.125rem/1.05 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.mon-big-label { color: var(--text-2); font-size: .7812rem; }
.mon-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; margin: .125rem 0 0; font-size: .8125rem; }
.mon-facts dt { color: var(--text-2); }
.mon-facts dd { margin: 0; font-family: var(--font-mono); font-size: .7812rem; min-width: 0; overflow-wrap: anywhere; }
.mon-facts dd .mon-sub { font-family: var(--font-ui); font-size: .75rem; color: var(--text-2); }
.mon-mono { font-family: var(--font-mono); }
.mon-when { color: var(--text-2); font-size: .75rem; }
.mon-when time { cursor: help; }
.mon-was::before { content: " · "; color: var(--text-3); }
.mon-error { display: flex; align-items: flex-start; gap: .4375rem; color: var(--modified-text); font-size: .75rem; line-height: 1.4; }
.mon-error .icon { flex: none; margin-top: 1px; }
.mon-site { margin-top: auto; padding-top: .25rem; font-size: .7812rem; }
a.mon-site { white-space: normal; }
p.mon-site { display: flex; align-items: center; gap: .375rem; }
.mon-endpoint { color: var(--text-3); font: .6875rem var(--font-mono); overflow-wrap: anywhere; }
/* The endpoint line sits at the bottom of every card, with the Data.VPK link (if any) right above it. */
.mon-version > .mon-endpoint { margin-top: auto; }
.mon-version > .mon-site + .mon-endpoint { margin-top: 0; }
.mon-version > :last-child.mon-endpoint { padding-top: .5rem; border-top: 1px dashed var(--line); }
.mon-note { display: flex; align-items: flex-start; gap: .5rem; padding: .625rem .75rem; border-radius: .5rem; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: .7812rem; }
.mon-note .icon { color: var(--accent); flex: none; margin-top: 1px; }

/* App info */
.mon-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; gap: .75rem; }
.mon-app-main { grid-column: 1 / -1; }
.mon-app-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mon-app-main .mon-app-body { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.6fr); gap: 1.5rem; align-items: start; }
.mon-app-side { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.mon-app-details { display: flex; flex-direction: column; gap: 1rem; min-width: 0; container-type: inline-size; }
.mon-sub-block .sub-title { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .375rem; }
.mon-count { color: var(--text-3); font: 600 .6875rem var(--font-mono); letter-spacing: 0; }
.mon-raw { display: inline-flex; align-items: center; gap: .25rem; font-size: .7812rem; }
.mon-raw .link-arrow { font-size: .7812rem; }

.mon-private .mon-card-head { align-items: baseline; gap: .5rem; }
.mon-private-list { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.mon-private-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(6rem, .6fr) minmax(0, 1fr); align-items: baseline; gap: .25rem .875rem;
  padding: .4375rem 0; border-top: 1px solid var(--line); font-size: .7812rem;
}
.mon-private-head { border-top: 0; padding-top: .125rem; color: var(--text-3); font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.mon-private-row > .mon-num { text-align: left; }
.mon-private-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; font-weight: 600; }
.mon-private-when { display: flex; flex-direction: column; gap: .125rem; min-width: 0; color: var(--text-2); }
.mon-private-when time { cursor: help; }

.mon-branches { display: flex; flex-direction: column; }
.mon-branch {
  display: grid; grid-template-columns: minmax(6rem, 1fr) auto minmax(5.5rem, auto); align-items: center; gap: .25rem .875rem;
  padding: .4375rem 0; border-top: 1px solid var(--line); font-size: .7812rem;
}
.mon-branch:first-child { border-top: 0; }
.mon-branch-name { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; font: 600 .7812rem var(--font-mono); overflow-wrap: anywhere; }
.mon-branch-build { font: .7812rem var(--font-mono); }
.mon-branch-time { color: var(--text-2); text-align: right; white-space: nowrap; }
.mon-branch-desc { grid-column: 1 / -1; color: var(--text-3); font-size: .75rem; }

.mon-depots { display: flex; flex-direction: column; min-width: 0; }
.mon-depot {
  display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 5.25rem 5.25rem; align-items: center; gap: .875rem;
  padding: .375rem .5rem; margin: 0 -.5rem; border-radius: .375rem; font-size: .7812rem;
}
.mon-depot:not(.mon-depot-head):hover { background: var(--surface-2); }
.mon-depot-head { color: var(--text-3); font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.mon-depot-head > :nth-child(n+3), .mon-num { text-align: right; }
.mon-depot-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: .125rem .5rem; min-width: 0; }
.mon-depot-id { font: 600 .7812rem var(--font-mono); flex: none; }
.mon-depot-label { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.mon-gid { font: .75rem var(--font-mono); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.mon-num { font: .75rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-tag {
  display: inline-flex; align-items: center; height: 1.125rem; padding: 0 .375rem; border-radius: var(--r-xs); background: var(--surface-3);
  color: var(--text-2); font: 500 .6562rem/1 var(--font-mono); white-space: nowrap;
}

/* Activity */
.mon-activity .block-head { margin-bottom: .75rem; }
.mon-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.mon-chip {
  display: inline-flex; align-items: center; height: 1.875rem; padding: 0 .75rem; border-radius: 62.4375rem;
  border: 1px solid var(--line-2); color: var(--text-2); font-size: .7812rem; font-weight: 550; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mon-chip:hover { color: var(--text); border-color: var(--text-3); }
.mon-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.mon-feed { list-style: none; margin: 0; padding: 0; }
.mon-day {
  padding: .875rem 0 .375rem 4.5rem; color: var(--text-3); font-size: .6875rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
}
.mon-day:first-child { padding-top: 0; }
.mon-event { position: relative; display: grid; grid-template-columns: 3.25rem 1.25rem minmax(0, 1fr); gap: 0 .25rem; align-items: start; }
.mon-event::before { content: ""; position: absolute; left: calc(3.25rem + .25rem + .5625rem); top: 0; bottom: 0; width: 2px; background: var(--line); }
.mon-day + .mon-event::before { top: .875rem; }
.mon-event:has(+ .mon-day)::before, .mon-event:last-child::before { bottom: calc(100% - 1.25rem); }
.mon-time { padding-top: .5rem; color: var(--text-2); font: .75rem var(--font-mono); text-align: right; cursor: help; }
.mon-node { position: relative; z-index: 1; width: .625rem; height: .625rem; margin: .6875rem 0 0 .375rem; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--text-3); }
.mon-event.is-baseline .mon-node { border-style: dotted; }
.mon-ev { display: flex; flex-direction: column; gap: .375rem; min-width: 0; padding: .4375rem .5rem .75rem; border-radius: .5rem; }
.mon-ev-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem; min-width: 0; }
.mon-src { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .5rem; border-radius: 62.4375rem; background: var(--surface-3); color: var(--text); font-size: .7188rem; font-weight: 600; white-space: nowrap; }
.mon-src-version { background: var(--accent-soft); color: var(--accent); }
.mon-ev-title { font-size: .875rem; font-weight: 600; }
.mon-ev-key { color: var(--text-2); font-size: .75rem; }
.mon-delta { display: inline-flex; align-items: baseline; gap: .375rem; font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.mon-old { color: var(--text-2); font-weight: 500; }
.mon-arrow { color: var(--text-3); font-weight: 400; }
.mon-new { color: var(--text); }
.mon-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3125rem; font-size: .7812rem; }
.mon-lines li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.mon-line-label { color: var(--text-2); }
.mon-line-strong .mon-line-label { color: var(--text); font-weight: 550; }
.mon-line-quiet { color: var(--text-3); }
.mon-lines .mon-delta { font-size: .75rem; }
.mon-lines-note { color: var(--text-3); font-size: .7812rem; }
.mon-depot-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.mon-depot-chips .mon-tag { height: auto; min-height: 1.25rem; padding: .125rem .375rem; font: .6875rem/1.3 var(--font-ui); white-space: normal; overflow-wrap: anywhere; }
.mon-ev-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem 1rem; }
.mon-ev-actions .link-arrow { font-size: .75rem; }
.mon-toggle { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent); font-size: .75rem; font-weight: 550; }
.mon-toggle:hover { text-decoration: underline; text-underline-offset: .1875rem; }
.mon-keys { display: flex; flex-direction: column; margin-top: .125rem; padding: .375rem .625rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.mon-key { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; padding: .3125rem 0; border-top: 1px solid var(--line); font: .7188rem/1.45 var(--font-mono); }
.mon-key > * { min-width: 0; overflow-wrap: anywhere; }
.mon-key-head { border-top: 0; color: var(--text-3); font: 650 .6562rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.mon-key-old { color: var(--removed-text); }
.mon-key-new { color: var(--added-text); }
.mon-key-old[title], .mon-key-new[title] { cursor: help; text-decoration: underline dotted var(--text-3); text-underline-offset: .1875rem; }
.mon-key-more { padding-top: .375rem; border-top: 1px solid var(--line); font-size: .7188rem; }
.mon-empty { padding: .5rem 0 .25rem; }
.mon-feed-wrap > .more-row { margin-top: .75rem; }

/* Narrow app cards (and phones): each depot on two lines (name, then manifest and size), branches likewise. */
@container (max-width: 30rem) {
  .mon-depot { grid-template-columns: minmax(0, 1fr) auto; gap: .125rem .75rem; }
  .mon-depot-head { display: none; }
  .mon-depot-name { grid-column: 1 / -1; }
  .mon-depot > .mon-num:last-child { display: none; }
  .mon-branch { grid-template-columns: minmax(0, 1fr) auto; }
  .mon-branch-time { grid-column: 1 / -1; text-align: left; }
  /* Private apps: name and change number, then the last change underneath. */
  .mon-private-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mon-private-head { display: none; }
  .mon-private-when { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .mon-app-main .mon-app-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 760px) {
  .zone-monitor { padding: 1rem .5rem .5rem; border-radius: 1.125rem; gap: 1rem; }
  .zone-monitor .global-head { padding: 0 .375rem; }
  .mon-heading { padding: 0 .375rem; }
  /* Two per row: each app's client and server side by side. */
  .mon-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; gap: .5rem; }
  .mon-card { padding: .875rem; border-radius: .875rem; }
  .mon-big { font-size: 1.625rem; }
  /* Two cards per row: names wrap between words, so the app id (also in the endpoint line) is left out and every
     head keeps room for three lines, which lines the big numbers up. */
  .mon-version .mon-card-head { min-height: 3.5rem; }
  .mon-version .mon-app-id { display: none; }
  .mon-version .mon-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mon-version .mon-facts dd { margin-bottom: .25rem; }
  .mon-endpoint { font-size: .625rem; }
  /* Fifteen sources: one scrolling row instead of many rows of chips. */
  .mon-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem 1rem; padding: 0 1rem 2px; scrollbar-width: none; }
  .mon-chips::-webkit-scrollbar { display: none; }
  .mon-chip { flex: none; }
  .mon-day { padding-left: 0; }
  .mon-event { grid-template-columns: 2.875rem 1rem minmax(0, 1fr); }
  .mon-event::before { left: calc(2.875rem + .25rem + .375rem); }
  .mon-node { margin-left: .1875rem; }
  .mon-ev { padding: .375rem .25rem .625rem; }
  .mon-key { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mon-key-name { grid-column: 1 / -1; color: var(--text-2); }
  .mon-key-head { display: none; }
}
@media (max-width: 330px) {
  .mon-versions { grid-template-columns: minmax(0, 1fr); }
}