/* ==========================================================================
   QZONE OMS — PRIMITIVES
   Surfaces, buttons, badges, chips, metrics, meters, toolbars, empty states.
   ========================================================================== */

/* ==========================================================================
   SURFACE — the single container primitive. Replaces the glass "card".
   Flat, opaque, hairline-bounded. No blur, no gradient, no hover lift.
   ========================================================================== */

.qz-surface {
  position: relative;
  border-radius: var(--qz-r-lg);
  background: var(--qz-surface-2);
  box-shadow: var(--qz-ring);
}

.qz-surface--inset { background: var(--qz-surface-inset); }
.qz-surface--flush { border-radius: 0; box-shadow: none; border-top: 1px solid var(--qz-line); }

/* Interactive surfaces get a border shift, never a transform. Movement on
   hover is what makes a dense grid feel unstable. */
.qz-surface--link { cursor: pointer; transition: box-shadow var(--qz-dur-fast) var(--qz-ease), background-color var(--qz-dur-fast) var(--qz-ease); }
.qz-surface--link:hover { background: var(--qz-surface-3); box-shadow: var(--qz-ring-strong); }
.qz-surface--link:active { background: var(--qz-surface-4); }

/* Accent glass. The radius matters: once the band has a fill it would square
   off the surface's top corners without it. */
.qz-surface__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-3);
  min-height: 44px;
  padding: var(--qz-s-3) var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line-soft);
  border-radius: var(--qz-r-lg) var(--qz-r-lg) 0 0;
  background: linear-gradient(180deg, var(--qz-head-fill-hi) 0%, var(--qz-head-fill-lo) 100%);
  box-shadow: inset 0 1px 0 var(--qz-head-sheen);
}
.qz-surface__title {
  margin: 0;
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--qz-text);
}
.qz-surface__sub {
  margin: 2px 0 0;
  font-size: var(--qz-fs-xs);
  color: var(--qz-text-mute);
}
.qz-surface__tools { display: flex; align-items: center; gap: var(--qz-s-2); flex: 0 0 auto; }
.qz-surface__body { padding: var(--qz-s-4); }
.qz-surface__body--tight { padding: var(--qz-s-3); }
.qz-surface__body--flush { padding: 0; }
.qz-surface__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--qz-s-2);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-top: 1px solid var(--qz-line-soft);
  background: var(--qz-surface-inset);
  border-radius: 0 0 var(--qz-r-lg) var(--qz-r-lg);
}

/* Status edge — a 2px left rule is how this design encodes state on a
   container, replacing QZONE's colored gradient headers. */
.qz-surface--ok   { border-left: 2px solid var(--qz-ok); }
.qz-surface--warn { border-left: 2px solid var(--qz-warn); }
.qz-surface--crit { border-left: 2px solid var(--qz-crit); }
.qz-surface--info { border-left: 2px solid var(--qz-info); }
.qz-surface--accent { border-left: 2px solid var(--qz-accent); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.qz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qz-s-2);
  height: var(--qz-control-h);
  padding: 0 var(--qz-s-4);
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface-3);
  box-shadow: var(--qz-ring);
  color: var(--qz-text);
  font-family: var(--qz-font-body);
  font-size: var(--qz-fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--qz-dur-fast) var(--qz-ease),
              color var(--qz-dur-fast) var(--qz-ease),
              box-shadow var(--qz-dur-fast) var(--qz-ease);
}
.qz-btn:hover { background: var(--qz-surface-4); color: var(--qz-text); box-shadow: var(--qz-ring-strong); }
.qz-btn:active { transform: translateY(0.5px); }
.qz-btn:disabled, .qz-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.qz-btn i { font-size: 0.92em; }

/* Primary — solid accent. The only saturated fill in the interface. */
.qz-btn--primary {
  background: var(--qz-accent);
  box-shadow: none;
  color: var(--qz-on-accent);
}
.qz-btn--primary:hover { background: var(--qz-accent-hi); color: var(--qz-on-accent); box-shadow: none; }

/* Quiet — text-only until hovered. For tertiary and table row actions. */
.qz-btn--quiet {
  background: transparent;
  box-shadow: none;
  color: var(--qz-text-dim);
}
.qz-btn--quiet:hover { background: var(--qz-surface-3); color: var(--qz-text); box-shadow: none; }

/* Outline — same weight as default but transparent, for toolbars on surfaces */
.qz-btn--outline { background: transparent; }
.qz-btn--outline:hover { background: var(--qz-surface-3); }

/* Status buttons — tinted, never solid, so they don't compete with primary */
.qz-btn--ok   { background: var(--qz-ok-weak);   box-shadow: inset 0 0 0 1px var(--qz-ok-line);   color: var(--qz-ok); }
.qz-btn--warn { background: var(--qz-warn-weak); box-shadow: inset 0 0 0 1px var(--qz-warn-line); color: var(--qz-warn); }
.qz-btn--crit { background: var(--qz-crit-weak); box-shadow: inset 0 0 0 1px var(--qz-crit-line); color: var(--qz-crit); }
.qz-btn--info { background: var(--qz-info-weak); box-shadow: inset 0 0 0 1px var(--qz-info-line); color: var(--qz-info); }
.qz-btn--ok:hover   { background: var(--qz-ok);   color: var(--qz-text-invert); }
.qz-btn--warn:hover { background: var(--qz-warn); color: var(--qz-text-invert); }
.qz-btn--crit:hover { background: var(--qz-crit); color: #fff; }
.qz-btn--info:hover { background: var(--qz-info); color: #fff; }

/* Sizes */
.qz-btn--sm { height: var(--qz-control-h-sm); padding: 0 var(--qz-s-3); font-size: var(--qz-fs-xs); }
.qz-btn--lg { height: var(--qz-control-h-lg); padding: 0 var(--qz-s-5); font-size: var(--qz-fs-base); }
.qz-btn--block { display: flex; width: 100%; }
.qz-btn--icon { width: var(--qz-control-h); padding: 0; }
.qz-btn--icon.qz-btn--sm { width: var(--qz-control-h-sm); }

/* Button cluster — segmented, sharing hairlines, pill-capped at the ends */
.qz-btn-group { display: inline-flex; }
.qz-btn-group .qz-btn { border-radius: 0; }
.qz-btn-group .qz-btn:first-child { border-radius: var(--qz-r-pill) 0 0 var(--qz-r-pill); padding-left: var(--qz-s-4); }
.qz-btn-group .qz-btn:last-child  { border-radius: 0 var(--qz-r-pill) var(--qz-r-pill) 0; padding-right: var(--qz-s-4); }
.qz-btn-group .qz-btn:only-child  { border-radius: var(--qz-r-pill); }
.qz-btn-group .qz-btn + .qz-btn { margin-left: -1px; }
.qz-btn-group .qz-btn:hover { position: relative; z-index: 1; }

/* ==========================================================================
   BADGES / STATUS
   ========================================================================== */

.qz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: var(--qz-r-sm);
  background: var(--qz-idle-weak);
  box-shadow: inset 0 0 0 1px var(--qz-idle-line);
  color: var(--qz-idle);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}
.qz-badge--ok     { background: var(--qz-ok-weak);     box-shadow: inset 0 0 0 1px var(--qz-ok-line);     color: var(--qz-ok); }
.qz-badge--warn   { background: var(--qz-warn-weak);   box-shadow: inset 0 0 0 1px var(--qz-warn-line);   color: var(--qz-warn); }
.qz-badge--crit   { background: var(--qz-crit-weak);   box-shadow: inset 0 0 0 1px var(--qz-crit-line);   color: var(--qz-crit); }
.qz-badge--info   { background: var(--qz-info-weak);   box-shadow: inset 0 0 0 1px var(--qz-info-line);   color: var(--qz-info); }
.qz-badge--accent { background: var(--qz-accent-weak); box-shadow: inset 0 0 0 1px var(--qz-accent-line); color: var(--qz-accent); }
.qz-badge--solid  { background: var(--qz-accent); box-shadow: none; color: var(--qz-on-accent); }
.qz-badge--mono   { font-family: var(--qz-font-mono); letter-spacing: 0; }

/* Status dot — the most compact state marker; pairs with a text label. */
.qz-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qz-idle);
}
.qz-dot--ok   { background: var(--qz-ok); }
.qz-dot--warn { background: var(--qz-warn); }
.qz-dot--crit { background: var(--qz-crit); }
.qz-dot--info { background: var(--qz-info); }
.qz-dot--accent { background: var(--qz-accent); }

/* Pulsing dot for live/pending state */
.qz-dot--live { position: relative; background: var(--qz-ok); }
.qz-dot--live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--qz-ok);
  animation: qz-ping 2s var(--qz-ease-out) infinite;
}
@keyframes qz-ping {
  0%   { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Status line: dot + label, used in tables and list rows */
.qz-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--qz-fs-sm); color: var(--qz-text-dim); white-space: nowrap; }

/* ==========================================================================
   METRIC TILE — replaces the "stat card"
   ========================================================================== */

.qz-metric {
  display: flex;
  flex-direction: column;
  gap: var(--qz-s-2);
  padding: var(--qz-s-4);
  border-radius: var(--qz-r-lg);
  background: var(--qz-surface-2);
  box-shadow: var(--qz-ring);
}
.qz-metric__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute);
}
.qz-metric__value {
  font-family: var(--qz-font-mono);
  font-size: var(--qz-fs-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--qz-text);
}
.qz-metric__value sup,
.qz-metric__unit {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--qz-text-mute);
  letter-spacing: 0;
}
.qz-metric__foot {
  display: flex;
  align-items: center;
  gap: var(--qz-s-2);
  font-size: var(--qz-fs-xs);
  color: var(--qz-text-mute);
}

/* --------------------------------------------------------------------------
   HERO METRIC TILE — gradient head over a neutral body.
   Restores the pre-overhaul stat-card arrangement (label above the value, icon
   medallion on the right, badge and description stacked beneath) on top of the
   token system. The head is the only part that carries the tone: the body
   keeps the same surface and text steps as the flat .qz-metric, so the lower
   half reads identically to the rest of the dashboard.
   -------------------------------------------------------------------------- */

.qz-metric--hero {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.qz-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-s-3);
  padding: var(--qz-s-4);
  background: var(--qz-metric-grad, var(--qz-grad-accent));
}

.qz-metric__headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* White type on the gradient in both schemes — the head is its own colour
   field, so it does not follow --qz-text. */
.qz-metric--hero .qz-metric__value { color: #fff; }
.qz-metric--hero .qz-metric__label { color: rgba(255, 255, 255, 0.74); }
.qz-metric--hero .qz-metric__unit  { color: rgba(255, 255, 255, 0.66); }

.qz-metric__medallion {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 17px;
}

.qz-metric__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qz-s-2);
  padding: var(--qz-s-3) var(--qz-s-4) var(--qz-s-4);
  background: var(--qz-surface-2);
}
.qz-metric__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--qz-fs-xs);
  color: var(--qz-text-mute);
}

/* Live-update flash. The realtime partial has always toggled .stat-updated on
   the card, but the rule that rendered it lived in the deleted _qzone_theme
   partial, so the flash has been a no-op since the overhaul. */
/* 800ms matches the setTimeout that removes the class. */
.stat-updated { animation: qz-stat-flash 800ms var(--qz-ease) 1; }
@keyframes qz-stat-flash {
  0%   { box-shadow: var(--qz-ring); }
  30%  { box-shadow: var(--qz-ring), 0 0 0 2px var(--qz-ok-line); }
  100% { box-shadow: var(--qz-ring); }
}
@media (prefers-reduced-motion: reduce) {
  .stat-updated { animation: none; }
}

/* Head tone — set on the tile, consumed by .qz-metric__head. */
.qz-metric--accent { --qz-metric-grad: var(--qz-grad-accent); }
.qz-metric--ok     { --qz-metric-grad: var(--qz-grad-ok); }
.qz-metric--warn   { --qz-metric-grad: var(--qz-grad-warn); }
.qz-metric--crit   { --qz-metric-grad: var(--qz-grad-crit); }
.qz-metric--info   { --qz-metric-grad: var(--qz-grad-info); }

/* Delta indicator */
.qz-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--qz-font-mono); font-size: var(--qz-fs-xs); font-weight: 600; }
.qz-delta--up   { color: var(--qz-ok); }
.qz-delta--down { color: var(--qz-crit); }
.qz-delta--flat { color: var(--qz-text-mute); }

/* Metric grid — auto-fits from 1 column on a phone to N on a wide monitor
   with no breakpoint maintenance. */
.qz-metrics {
  display: grid;
  gap: var(--qz-s-3);
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
.qz-metrics--wide { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
/* Hero tiles carry a medallion beside the value, so they need more room
   before the head wraps. */
.qz-metrics--hero { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

/* Generic auto-fit grid for card collections */
.qz-grid { display: grid; gap: var(--qz-s-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.qz-grid--sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--qz-s-3); }
.qz-grid--lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* ==========================================================================
   METER — linear progress. Square ends, no gradient, no glow.
   ========================================================================== */

.qz-meter {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: var(--qz-surface-4);
  overflow: hidden;
}
.qz-meter__fill {
  height: 100%;
  border-radius: 99px;
  background: var(--qz-accent);
  transition: width var(--qz-dur-slow) var(--qz-ease-out);
}
.qz-meter--ok   .qz-meter__fill { background: var(--qz-ok); }
.qz-meter--warn .qz-meter__fill { background: var(--qz-warn); }
.qz-meter--crit .qz-meter__fill { background: var(--qz-crit); }
.qz-meter--info .qz-meter__fill { background: var(--qz-info); }
.qz-meter--lg { height: 8px; }

/* Labelled meter row: name — bar — value */
.qz-meter-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto; align-items: center; gap: var(--qz-s-3); }
.qz-meter-row + .qz-meter-row { margin-top: var(--qz-s-3); }
.qz-meter-row__name { font-size: var(--qz-fs-sm); color: var(--qz-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-meter-row__val  { font-family: var(--qz-font-mono); font-size: var(--qz-fs-xs); font-weight: 600; color: var(--qz-text); text-align: right; min-width: 42px; }
@media (max-width: 575.98px) {
  .qz-meter-row { grid-template-columns: 1fr auto; grid-template-areas: "name val" "bar bar"; row-gap: 6px; }
  .qz-meter-row__name { grid-area: name; }
  .qz-meter-row__val  { grid-area: val; }
  .qz-meter-row > .qz-meter { grid-area: bar; }
}

/* ==========================================================================
   TOOLBAR / FILTER BAR
   ========================================================================== */

.qz-toolbar {
  display: flex;
  align-items: center;
  gap: var(--qz-s-2);
  flex-wrap: wrap;
  padding: var(--qz-s-3);
  border-radius: var(--qz-r-lg);
  background: var(--qz-surface-2);
  box-shadow: var(--qz-ring);
  margin-bottom: var(--qz-s-4);
}
.qz-toolbar__spacer { flex: 1 1 auto; }
.qz-toolbar__group { display: flex; align-items: center; gap: var(--qz-s-2); flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .qz-toolbar > * { flex: 1 1 100%; }
  .qz-toolbar__group { width: 100%; }
  .qz-toolbar__group > * { flex: 1 1 auto; }
}

/* Segmented control — for view switching */
.qz-segmented { display: inline-flex; padding: 2px; border-radius: var(--qz-r-md); background: var(--qz-surface-inset); box-shadow: var(--qz-ring); }
.qz-segmented__item {
  padding: 5px var(--qz-s-3);
  border: 0;
  border-radius: var(--qz-r-sm);
  background: transparent;
  color: var(--qz-text-mute);
  font-size: var(--qz-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--qz-dur-fast) var(--qz-ease), color var(--qz-dur-fast) var(--qz-ease);
}
.qz-segmented__item:hover { color: var(--qz-text); }
.qz-segmented__item.is-active { background: var(--qz-surface-4); color: var(--qz-text); }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.qz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qz-s-3);
  padding: var(--qz-s-12) var(--qz-s-5);
  text-align: center;
}
.qz-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--qz-r-lg);
  background: var(--qz-surface-3);
  box-shadow: var(--qz-ring);
  color: var(--qz-text-faint);
  font-size: 17px;
}
.qz-empty__title { font-family: var(--qz-font-display); font-size: var(--qz-fs-md); font-weight: 600; color: var(--qz-text); margin: 0; }
.qz-empty__text  { max-width: 42ch; margin: 0; font-size: var(--qz-fs-sm); color: var(--qz-text-mute); }

/* ==========================================================================
   ICON TILE — small square glyph holder used in lists and headers.
   Replaces the round gradient "icon box".
   ========================================================================== */

.qz-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--qz-r-md);
  background: var(--qz-surface-3);
  box-shadow: var(--qz-ring);
  color: var(--qz-text-dim);
  font-size: 13px;
}
.qz-icon--lg { width: 40px; height: 40px; font-size: 16px; }
.qz-icon--sm { width: 26px; height: 26px; font-size: 11px; }
.qz-icon--accent { background: var(--qz-accent-weak); box-shadow: inset 0 0 0 1px var(--qz-accent-line); color: var(--qz-accent); }
.qz-icon--ok     { background: var(--qz-ok-weak);     box-shadow: inset 0 0 0 1px var(--qz-ok-line);     color: var(--qz-ok); }
.qz-icon--warn   { background: var(--qz-warn-weak);   box-shadow: inset 0 0 0 1px var(--qz-warn-line);   color: var(--qz-warn); }
.qz-icon--crit   { background: var(--qz-crit-weak);   box-shadow: inset 0 0 0 1px var(--qz-crit-line);   color: var(--qz-crit); }
.qz-icon--info   { background: var(--qz-info-weak);   box-shadow: inset 0 0 0 1px var(--qz-info-line);   color: var(--qz-info); }

/* ==========================================================================
   DEFINITION LIST — label/value pairs on show pages
   ========================================================================== */

.qz-dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 0; margin: 0; }
.qz-dl > dt,
.qz-dl > dd {
  padding: var(--qz-s-3) 0;
  border-bottom: 1px solid var(--qz-line-soft);
  margin: 0;
}
.qz-dl > dt {
  padding-right: var(--qz-s-4);
  font-size: var(--qz-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute);
}
.qz-dl > dd { font-size: var(--qz-fs-sm); color: var(--qz-text); min-width: 0; overflow-wrap: anywhere; }
.qz-dl > dt:last-of-type, .qz-dl > dd:last-of-type { border-bottom: 0; }

@media (max-width: 575.98px) {
  .qz-dl { grid-template-columns: 1fr; }
  .qz-dl > dt { padding-bottom: 2px; border-bottom: 0; }
  .qz-dl > dd { padding-top: 0; }
}

/* ==========================================================================
   LIST ROWS — for feeds, activity, notifications
   ========================================================================== */

.qz-list { margin: 0; padding: 0; list-style: none; }
.qz-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--qz-s-3);
  padding: var(--qz-s-3) var(--qz-s-4);
  border-bottom: 1px solid var(--qz-line-soft);
}
.qz-list__item:last-child { border-bottom: 0; }
a.qz-list__item { color: inherit; transition: background-color var(--qz-dur-fast) var(--qz-ease); }
a.qz-list__item:hover { background: var(--qz-surface-3); color: inherit; }
.qz-list__main { flex: 1 1 auto; min-width: 0; }
.qz-list__title { font-size: var(--qz-fs-sm); font-weight: 600; color: var(--qz-text); }
.qz-list__meta  { font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }
.qz-list__aside { flex: 0 0 auto; text-align: right; font-size: var(--qz-fs-xs); color: var(--qz-text-mute); }

/* ==========================================================================
   SECTION HEADING — inside content, above a group of surfaces
   ========================================================================== */

.qz-section { margin-bottom: var(--qz-s-6); }
.qz-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--qz-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--qz-s-3);
}
.qz-section__title {
  margin: 0;
  font-family: var(--qz-font-display);
  font-size: var(--qz-fs-2xs);
  font-weight: 700;
  letter-spacing: var(--qz-track-label);
  text-transform: uppercase;
  color: var(--qz-text-mute);
}

/* Divider with a label, e.g. "— or —" */
.qz-rule { display: flex; align-items: center; gap: var(--qz-s-3); margin: var(--qz-s-5) 0; }
.qz-rule::before, .qz-rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--qz-line); }
.qz-rule > span { font-size: var(--qz-fs-2xs); font-weight: 600; letter-spacing: var(--qz-track-label); text-transform: uppercase; color: var(--qz-text-faint); }

/* ==========================================================================
   SCROLLER — the required wrapper for anything wider than its column
   ========================================================================== */

.qz-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   SKELETON
   ========================================================================== */

.qz-skeleton {
  border-radius: var(--qz-r-sm);
  background: linear-gradient(90deg, var(--qz-surface-3) 25%, var(--qz-surface-4) 37%, var(--qz-surface-3) 63%);
  background-size: 400% 100%;
  animation: qz-shimmer 1.4s ease infinite;
}
@keyframes qz-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   PUBLIC-PAGE ADDENDUM

   Two controls the landing and sign-in pages use that live in shell.css
   upstream. shell.css is not loaded here — these pages have no rail, panel
   or topbar — so the two rules are carried across on their own rather than
   pulling in the whole shell for a 32px button and a backdrop.
   ========================================================================== */

/* Icon button — the theme toggle in the site bar. */
.qz-iconbtn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: transparent;
  color: var(--qz-text-mute);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--qz-dur-fast) var(--qz-ease),
              background-color var(--qz-dur-fast) var(--qz-ease);
}
.qz-iconbtn:hover { background: var(--qz-surface-3); color: var(--qz-text); }

/* Full-viewport backdrop — the password-policy interstitial on sign-in. */
.qz-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--qz-z-scrim);
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--qz-dur) var(--qz-ease), visibility var(--qz-dur);
}
.qz-scrim.is-open { opacity: 1; visibility: visible; }