/* Kleto Pulse Overview summary: Requests, Today, Pages, Up (owner ruling
   2026-10-28, docs/DESIGN-TASTE.md; layout A of the Playground preview
   pulse-summary-2026-10-28, "instrument cells"). One panel on hairlines,
   one cell per number: label top left, the change or the status ring top
   right, the number on the right edge of its cell. Requests is primary and
   largest; Today, Pages and Up are secondary but still large.

   Zero layout shift: every row has a fixed height, every number is the
   shared ticker (ui/MANIFEST.md) whose reserved columns sit on the left of
   the digits, and the skeleton fills the same boxes.

   One layout per device class, by the panel's own width (a container query,
   so the 2400px zoom of screens.css keeps the desktop layout):
     under 700px    phone, 360 to 430: Requests takes the full first row,
                    Today, Pages and Up share the second. Up's ring moves
                    to the top right, where the change sits in the others.
     700 to 999px   tablet portrait: one row, Requests 1.5 parts, the rest 1.
     1000 to 1399   tablet landscape and desktop to 1440: the same row,
                    larger; Requests is one card column wide.
     from 1400px    desktop 1600 to 1920 and the zoomed TV: four equal
                    cells, the four card columns below. */

#home-sum { margin: 4px 0 0; container-type: inline-size; }
.ps {
  --ps-pv: 48px;               /* the primary number */
  --ps-sv: 24px;               /* a secondary number */
  --ps-pl: calc(var(--ps-pv) * 1.1);
  --ps-sl: calc(var(--ps-sv) * 1.15);
  --ps-ring: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.ps__c { position: relative; min-width: 0; padding: 12px; outline-offset: -2px; }
.ps__c + .ps__c { border-left: 1px solid var(--border); }
.ps__c--req { grid-column: 1 / -1; padding: 14px 16px 16px; border-bottom: 1px solid var(--border); }
.ps__c--req + .ps__c { border-left: 0; }
#app .pulse-home .ps__c:focus-visible { outline-offset: -2px; border-radius: 6px; }
.ps__c:hover .ps__k, .ps__c:focus-visible .ps__k { color: var(--text); }

/* the label row: one line, fixed height */
.ps__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 16px; min-width: 0; }
.ps__kw { display: inline-flex; align-items: center; flex: none; }
/* The right slot never pushes the label: a change ticker's unused reserve
   sits on its left and is clipped here. */
.ps__d, .ps__st { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ps__down { flex: none; font: 500 13px/16px var(--body); color: var(--down); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps__down[hidden] { display: none; }
.ps__down .ui-ticker { --ui-ticker-lh: 16px; }
.ps__d > .ui-ticker, .ps__down .ui-ticker { flex: none; }
.ps__down .ui-ticker__face { min-width: 0; }
.ps__k {
  font: 400 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap;
  text-decoration: underline dotted var(--faint); text-underline-offset: 4px;
}
.ps__d { font-size: 13px; line-height: 16px; height: 16px; }
.ps__d .ui-ticker { --ui-ticker-lh: 16px; }

/* the number row: fixed height, the digits on the right edge; the reserved
   columns of a ticker can run past the cell's left padding, unseen */
.ps__v {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  height: var(--ps-sl); margin-top: 10px; overflow: hidden;
  font-size: var(--ps-sv); line-height: var(--ps-sl); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text);
}
.ps__v .ui-ticker { --ui-ticker-lh: var(--ps-sl); flex: none; }
.ps__c--req .ps__v { height: var(--ps-pl); font-size: var(--ps-pv); line-height: var(--ps-pl); }
.ps__c--req .ps__v .ui-ticker { --ui-ticker-lh: var(--ps-pl); }
.ps__v .skel { height: .8em; border-radius: 4px; }

/* Up: a ring with one segment per site, then up/of */
.ps__c--up .ps__v { justify-content: space-between; }
.ps__n { display: inline-flex; align-items: center; margin-left: auto; }
.ps__of { display: inline-flex; color: var(--faint); font-weight: 500; }
.ps__ring { display: block; flex: none; }
.ps__ring svg { display: block; width: 100%; height: 100%; }
.ps__ring circle { fill: none; }
.ps__track { stroke: var(--border); }
.ps__seg { stroke: var(--up); }
.ps__seg--down { stroke: var(--down); }
.ps__ring--top { width: 16px; height: 16px; }
.ps__ring--v { display: none; width: var(--ps-ring); height: var(--ps-ring); }

/* The Live mark: quiet, ink on the monochrome base (ruling 2026-10-26). A
   hollow bead while the worker is down; the numbers keep their values. */
.lv-mark { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font: 400 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.lv-mark[hidden] { display: none; }
.lv-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex: 0 0 auto; }
.lv-mark[data-state="paused"] i { background: transparent; box-shadow: inset 0 0 0 1px var(--dim); }

@container (max-width: 359px) {
  .ps { --ps-pv: 44px; --ps-sv: 22px; }
  .ps__c { padding: 12px 10px; }
  /* no room for both: the red "1 down" is the status, the ring steps aside */
  .ps__down:not([hidden]) + .ps__ring--top { display: none; }
}
@container (min-width: 400px) { .ps { --ps-sv: 26px; } }
@container (min-width: 700px) {
  .ps { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); --ps-pv: 48px; --ps-sv: 30px; --ps-ring: 30px; }
  .ps__c, .ps__c--req { grid-column: auto; padding: 16px 18px 18px; border-bottom: 0; }
  .ps__c--req + .ps__c { border-left: 1px solid var(--border); }
  /* One baseline for the row: every value box is the primary's height and
     the digits sit at its foot; the smaller digits drop by the difference
     in their descender space, so all four baselines meet. */
  .ps__v { margin-top: 14px; height: var(--ps-pl); align-items: flex-end; }
  .ps__c:not(.ps__c--req) .ps__v > .ui-ticker, .ps__c--up .ps__n { margin-bottom: calc((var(--ps-pv) - var(--ps-sv)) * .15); }
  .ps__c--up .ps__ring--v { margin-bottom: calc((var(--ps-sl) - var(--ps-ring)) / 2); }
  .ps__ring--v { display: block; }
  .ps__ring--top { display: none; }
}
@container (min-width: 1000px) {
  .ps { --ps-pv: 56px; --ps-sv: 36px; --ps-ring: 36px; }
  .ps__k, .lv-mark { font-size: 12px; }
  .ps__d { font-size: 14px; }
}
@container (min-width: 1400px) {
  .ps { grid-template-columns: repeat(4, minmax(0, 1fr)); --ps-pv: 64px; --ps-sv: 44px; --ps-ring: 42px; }
  .ps__c, .ps__c--req { padding: 18px 22px 20px; }
}

/* The shared tooltip in the house look: the dark glass bubble of the other
   Pulse tooltips, mono, and scaled with the large screen zoom. */
.ui-tip {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(10, 10, 10, .97); color: var(--text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .32);
  font: 400 calc(11px * var(--pulse-zoom, 1))/1.65 var(--mono); letter-spacing: 0;
  max-width: min(calc(360px * var(--pulse-zoom, 1)), calc(100vw - 16px));
}