/* Page layouts: login, chat, confirmations, journal, network and the router
   the hub found, lists of people and tokens, the menu, the rights editor
   and the Matter code. */

/* Login. */
.login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
  margin: 10vh auto 0;
  text-align: center;
}
.login-mark {
  display: grid;
  place-items: center;
  align-self: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--on-accent);
}
.login-title { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.login .form { text-align: left; }
.login-note { margin: 0; }

/* Chat. */
.chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--bar-h) - var(--tabs-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 44px);
}
.chat-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.chat-tools .btn { padding: 0 8px; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 0 16px; }
.chat-empty { flex: 1; justify-content: center; }
.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.msg p { margin: 0; white-space: pre-wrap; }
.msg-you { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--accent); color: var(--on-accent); }
.msg-agent { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg-error { background: var(--danger-soft); color: var(--danger); }
.msg-thinking p { color: var(--text-2); }
.acts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; }
.act { display: flex; flex-direction: column; }
.act > span:first-child { font-weight: 600; }
.act-done > span:first-child { color: var(--ok); }
.act-pending > span:first-child { color: var(--warn); }
.act-refused > span:first-child, .act-failed > span:first-child { color: var(--danger); }
.act-why { color: var(--text-2); font-size: 13px; }
.composer {
  position: sticky;
  bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 8px);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.composer:focus-within { border-color: var(--accent); }
.chat-input { flex: 1; min-width: 0; max-height: 132px; padding: 10px 8px; border: 0; background: transparent; resize: none; }
.chat-input:focus-visible { outline: none; }
.mic[aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); }
.chat-hint { margin-top: 8px; text-align: center; }

/* Confirmations. */
.confirm { display: flex; flex-direction: column; gap: 10px; }
.confirm.focus { outline: 2px solid var(--warn); outline-offset: 2px; }
.confirm-head { display: flex; align-items: flex-start; gap: 12px; }
.confirm-head p { margin: 2px 0 0; }
.confirm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
}
.confirm-what { margin: 0; font-size: 17px; font-weight: 650; }
.timer { height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.timer-bar { display: block; height: 100%; background: var(--warn); transform-origin: left; transition: transform 1s linear; }
.timer-text { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Journal. */
.filters { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 4px; }
@media (min-width: 560px) { .filters { grid-template-columns: 1fr 1fr; } }
.day { margin: 18px 2px 8px; font-size: 14px; font-weight: 650; color: var(--text-2); }
.entries { margin: 0; padding: 0 14px; list-style: none; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.entry {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.entry:first-child { border-top: 0; }
.entry-time { padding-top: 1px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.entry-what { margin: 0; font-weight: 600; }
.entry-who, .entry-why { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.entry-why { color: var(--danger); }
.pill { padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.pill-done { background: var(--ok-soft); color: var(--ok); }
.pill-pending { background: var(--warn-soft); color: var(--warn); }
.pill-refused, .pill-failed { background: var(--danger-soft); color: var(--danger); }
.pill-btn {
  position: sticky;
  top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px);
  z-index: 5;
  display: block;
  min-height: 44px;
  margin: 8px auto;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 650;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  cursor: pointer;
}
.journal + .btn { margin-top: 16px; }

/* Key-value lists: network, assistants. */
.kvs { margin: 0; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); }
.kv:first-child { border-top: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv-bad dd { color: var(--danger); }
/* A status sentence reads better under its label than squeezed beside it. */
.kv-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.kv-stack dd { text-align: left; font-variant-numeric: normal; }
.card.kvs { padding-top: 4px; padding-bottom: 4px; }

/* Network clients. */
.clients { margin: 0; padding: 4px 14px; list-style: none; }
.client { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.client:first-child { border-top: 0; }
.client-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.client-dot.on { background: var(--ok); }
.client-name { margin: 0; font-weight: 600; }
.client-meta { margin: 2px 0 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.client.blocked .client-name { color: var(--danger); }

/* Rows: people, tokens, devices in settings. */
.rows { margin: 0; padding: 0 14px; list-style: none; }
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; color: inherit; text-decoration: none; }
.row-link > .icon:last-child { color: var(--text-3); width: 18px; height: 18px; }
.row-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.row-main { flex: 1; min-width: 0; }
.row-title { margin: 0; font-weight: 600; }
.row-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.muted-row { opacity: 0.6; }
.row-form { width: 100%; }
.rows + .card, .rows + form { margin-top: 12px; }

/* The menu on the "more" page. */
.who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.who p { margin: 0; font-weight: 600; }
.who .icon { color: var(--accent); }
.menu { margin: 0 0 16px; padding: 0 14px; list-style: none; }
.menu li + li { border-top: 1px solid var(--line); }
.menu-link { display: flex; align-items: center; gap: 14px; min-height: 52px; color: var(--text); font-weight: 550; text-decoration: none; }
.menu-link > .icon:first-child { color: var(--accent); }
.menu-text { flex: 1; }
.chevron { width: 18px; height: 18px; color: var(--text-3); }
.main > .btn.wide { margin-top: 8px; }

/* The person editor. */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-bottom: 4px; color: var(--accent); font-weight: 600; text-decoration: none; }
.fieldset { display: flex; flex-direction: column; margin: 0; border: 0; }
.fieldset > legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; font-size: 15px; font-weight: 650; }
.plain { margin: 0; padding: 0; border: 0; }
.plain > legend { margin-bottom: 4px; padding: 0; font-weight: 650; }
.radios, .checks { display: flex; flex-direction: column; }
.sub { margin-top: 4px; }
.sub-title { margin: 8px 0 0; font-size: 14px; font-weight: 650; color: var(--text-2); }
/* Firmware updates: the release notes and our staff's reason keep their
   line breaks as text; the reasons a rollback is not possible are a list. */
.update-notes { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.update-why { margin: 0; padding-left: 20px; }
details.sub > summary { display: list-item; padding: 11px 0; font-weight: 600; cursor: pointer; }
details.sub > summary::marker { color: var(--accent); }
.inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 8px 34px; }
.inline-fields input { flex: 1 1 120px; width: auto; }
.static { margin: 0; padding: 10px 0; font-weight: 550; }

/* Tokens and secrets. */
.copy-row { display: flex; gap: 8px; }
.secret { font-family: var(--mono); font-size: 14px; }
.steps { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; padding-left: 22px; }

/* The router the hub found: one line on what it can do, the commands for
   the router's terminal as they are (one per line, scrolled, not wrapped),
   the fingerprint to compare. */
.found { font-weight: 600; }
.commands { font-size: 13px; line-height: 1.5; white-space: pre; overflow-x: auto; resize: none; }
.fingerprint { overflow-wrap: anywhere; letter-spacing: 0.02em; }

/* The Matter code. */
.matter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.qr { width: 200px; height: 200px; padding: 8px; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.matter-codes p { margin: 0; }
.enroll-code { margin: 0; font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
.presence-code { margin: 0; font-family: ui-monospace, monospace; font-size: 28px; letter-spacing: 0.08em; }
.cloud-connected { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.manual-code { margin: 4px 0 8px !important; font-size: 26px; font-weight: 650; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* A warning on the home page: what is wrong with the hub right now. */
.warning-text { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.warning-text > p { margin: 0; }
.warning-title { font-weight: 650; }

/* The automation rules: a row with its sentence, run button and switch, a
   rule that cannot run or was stopped, the trace of runs; the builder - its
   three steps, a card per part with its fields, the card a problem points
   at, the templates to start from, and the rule's sentence. */
.rule-row .row-link { flex: 1; min-width: 0; width: auto; }
.rule-say { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rule-bad { color: var(--danger); }
.rule-runs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rule-run { display: flex; flex-direction: column; gap: 6px; }
.rule-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule-cond { margin: 0; }
.rule-problem { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); }
.rule-sentence { margin: 0; font-size: 16px; line-height: 1.45; }
.rule-result { background: var(--accent-soft); }
.rule-result .sub-title { margin-top: 0; }
.rule-step-title { margin: 12px 2px 0; font-size: 17px; font-weight: 650; }
.rule-part { display: flex; flex-direction: column; gap: 10px; }
.rule-part-bad { outline: 2px solid var(--danger); outline-offset: -2px; }
.rule-part-head { display: flex; align-items: flex-end; gap: 8px; }
.rule-part-head > .field, .rule-part-head > .note, .rule-part-head > .row-title { flex: 1; min-width: 0; margin: 0; }
.rule-part-tools { display: flex; gap: 4px; }
.rule-part-problem { margin: 0; }
.rule-group { background: var(--surface-2); }
.rule-field select, .rule-field input[type="text"], .rule-field textarea { width: 100%; }
.rule-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule-inline select { flex: 1 1 160px; width: auto; }
.rule-inline input[type="number"] { flex: 0 1 110px; width: 110px; }
.rule-indent { display: flex; flex-direction: column; gap: 6px; padding-left: 34px; }
.rule-days { display: flex; flex-wrap: wrap; gap: 0 14px; }
.rule-more > summary { cursor: pointer; color: var(--text-2); font-size: 14px; }
.rule-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.rule-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rule-template { display: flex; flex-direction: column; gap: 4px; width: 100%; border: 0; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.rule-template:hover, .rule-template:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.note code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* The family's scenes: one big button a scene, a thumb's width and more,
   the name first and what pressing it does under it. */
.scenes { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.scene-button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  width: 100%; min-height: 76px; padding: 14px 18px; border: 0; border-radius: var(--radius); background: var(--accent-soft);
  color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.scene-button .icon { grid-row: 1 / 3; width: 32px; height: 32px; color: var(--accent-strong); }
.scene-name { font-size: 19px; font-weight: 650; overflow-wrap: anywhere; }
.scene-action { color: var(--accent-strong); font-weight: 600; }
.scene-button:disabled { opacity: 0.6; cursor: progress; }
.scene-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The network of hubs: the six digits both hubs show, read in two halves;
   what the owner can do with a hub, under its lines. */
.digits { margin: 6px 0 2px; font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.row-sub.warn { color: var(--danger); }

/* The hub's storage page: one bar of how full the hub is. */
.storage-used { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.storage-meter { width: 100%; height: 10px; accent-color: var(--accent); }

/* Who is at home: a followed phone is a big line, its state in a word that
   reads at a glance; the list to pick "this is my phone" from is a column of
   wide buttons, the page's own device first, the address small under the name. */
.presence-device .row-main { display: flex; align-items: center; gap: 12px; }
.presence-device .row-main > .icon { width: 32px; height: 32px; flex: none; color: var(--text-2); }
.presence-device.state-home .row-main > .icon { color: var(--accent-strong); }
.presence-state { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.presence-device.state-unknown .presence-state { color: var(--text-2); font-weight: 500; }
.pick { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; }
.pick > .icon { width: 28px; height: 28px; flex: none; color: var(--accent-strong); }
.pick.mine { outline: 2px solid var(--accent); }
.pick:disabled { opacity: 0.6; cursor: default; }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mac { font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* The home's encrypted DNS: the choice is a column of wide options, the one
   chosen outlined, what each provider does small under its name; the status
   line reads at a glance and turns red while the provider is down. */
.securedns-state { margin: 0; font-size: 17px; font-weight: 600; }
.securedns-status.bad .securedns-state { color: var(--danger); }
.securedns-choices { display: flex; flex-direction: column; gap: 6px; }
.securedns-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px;
  padding: 10px 14px; border: 1px solid var(--border, transparent); border-radius: 10px; background: none; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; }
.securedns-option.selected { outline: 2px solid var(--accent); }
.securedns-option:disabled { opacity: 0.55; cursor: default; }
.securedns-option-title { font-weight: 600; }
.securedns-advanced { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* The routes page (#1142): a rule is one sentence; what this router cannot
   do is said in a muted line under the greyed choice, a missing part in red
   at the part; the plan sheet marks what comes and what goes. */
.route-line { margin: 0; font-size: 15px; }
.route-rule.off .route-line { color: var(--text-2); text-decoration: line-through; }
.route-hub { border-left: 3px solid var(--accent); }
.route-why { color: var(--text-2); font-style: italic; }
.route-problem { color: var(--danger); }
.route-result { margin: 0; font-size: 16px; font-weight: 600; min-height: 1.4em; }
.route-inline { display: flex; gap: 12px; flex-wrap: wrap; }
.route-days { display: flex; gap: 10px; flex-wrap: wrap; }
.route-builder, .route-profile, .route-add { border: 1px solid var(--accent); }
.route-plan .route-plus { color: var(--text); }
.route-plan .route-minus { color: var(--text-2); text-decoration: line-through; }
/* VPN subscriptions (#412): the card's four actions wrap on a phone; a country heads its servers. */
.route-sub .banner-actions { flex-wrap: wrap; margin-left: 0; }
.route-country { margin: 4px 0 0; font-weight: 600; }

/* The switcher of hubs (hubs.js): this hub, then the others, each a line
   that leaves for its panel; one that cannot be reached now is grey and
   says why. */
.hub-switcher { display: flex; flex-direction: column; gap: 10px; }
.hub-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hub-list { padding: 0; border-radius: var(--radius-s); background: var(--surface-2); }
.hub-item { border-top: 1px solid var(--line); }
.hub-item:first-child { border-top: 0; }
.hub-item-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 8px;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
}
.hub-item-body > span { grid-column: 1; }
.hub-item-body > .icon { grid-column: 2; grid-row: 1 / span 3; color: var(--text-3); }
.hub-item-title { font-weight: 600; overflow-wrap: anywhere; }
.hub-item-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.hub-item-why { font-size: 13px; color: var(--text-3); }
.hub-item-main { font-size: 13px; color: var(--accent); }
/* Whether hub.local opens this hub: said, or the way back to the main one. */
.hub-main { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--accent); }
.hub-back { align-self: flex-start; }
.hub-main-now { margin: 0; font-weight: 600; }
/* The hubs not linked with the owner's, folded under how many there are. */
.hub-unlinked { display: flex; flex-direction: column; gap: 8px; }
.hub-unlinked > summary { cursor: pointer; color: var(--text-2); }
.hub-away .hub-item-title { color: var(--text-3); }
.hub-settings { font-size: 14px; color: var(--accent); }
.setup-box { margin: 0; font-weight: 600; }

/* What the hub is doing now (#1420): the install's or the update's steps
   as the box's screen shows them - over the setup page's form and on top
   of the home page. */
.progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; text-align: left; }
.progress p { margin: 0; }
.progress-kicker { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.progress-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 650; }
.is-done .progress-title, .progress-title.is-good .icon { color: var(--ok); }
.progress-title.is-bad .icon { color: var(--warn); }
.is-failed .progress-title { color: var(--danger); }
.progress-stages { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.progress-stage { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-s); color: var(--text-3); font-size: 14px; }
.progress-stage.is-done { color: var(--text-2); }
.progress-stage.is-done .progress-mark { color: var(--ok); }
.progress-stage.is-running, .progress-stage.is-waiting, .progress-stage.is-failed { font-weight: 600; color: var(--text); }
.progress-stage.is-current { background: var(--accent-soft); }
.progress-stage.is-waiting.is-current { background: var(--warn-soft); }
.progress-stage.is-failed.is-current { background: var(--danger-soft); }
.progress-stage.is-running .progress-mark { color: var(--accent); }
.progress-stage.is-waiting .progress-mark { color: var(--warn); }
.progress-stage.is-failed .progress-mark { color: var(--danger); }
.progress-mark { flex: 0 0 auto; width: 18px; height: 18px; }
.progress-stage-name { flex: 1 1 auto; min-width: 0; }
.progress-stage-state { font-size: 12px; font-weight: 500; color: var(--text-3); }
.progress-current { display: flex; flex-direction: column; gap: 6px; }
.progress-current-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.progress-step { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--text-3); }
.progress-current-title { flex: 1 1 auto; font-weight: 650; }
.progress-percent { font-weight: 650; font-variant-numeric: tabular-nums; }
.progress-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress-bar.is-overall { height: 6px; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.progress-bar.is-waiting .progress-fill { background: var(--warn); }
.progress-line { font-size: 14px; }
.progress-warn { font-size: 14px; font-weight: 600; color: var(--warn); }
.progress-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.progress-item { display: flex; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.progress-item.is-done .progress-item-state { color: var(--ok); }
.progress-item.is-failed .progress-item-state { color: var(--danger); }
.progress-item-state { color: var(--text-2); font-variant-numeric: tabular-nums; }
.progress-overall { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.progress-overall-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.progress-panel-up { margin: 0; }
.progress-more { font-size: 14px; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .progress-fill { transition: width 0.6s ease; }
  .progress-bar.is-unknown .progress-fill { animation: progress-sweep 1.6s ease-in-out infinite; }
}
@keyframes progress-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* The Security page (#1206): a day's counts, one fact a line. */
.security-facts { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.security-limit select { flex: 0 0 auto; width: auto; min-width: 80px; }

/* The hub's screen (#1249): the previews keep the monitor's 16:9, and a
   screen that shows nothing is a dark frame with words, not a gap. */
.screen-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.screen-preview { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.screen-preview figcaption { font-size: 13px; color: var(--text-2); }
.screen-shot { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.screen-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.screen-dark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px;
  color: #8a8f99; font-size: 13px; text-align: center; }
.screen-swatch { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-right: 4px; }