/* =========================================================================
   Live — the floor. Page-scoped only, authored from tablet.css tokens.
   Namespace .vc-* for the floor, .vq-* for the quiet week it becomes.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Header — the wall is a live feed, and the title says so
   ------------------------------------------------------------------------- */

.vw-head h1 { display: flex; align-items: center; gap: 14px; }

/* Same pulse as the tile dots, sized to the 26px heading and read from six
   feet away, so it carries a halo rather than just more pixels. */
.vc-livedot {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 5px var(--color-success-50);
  animation: vw-dot 1.8s ease-in-out infinite;
}
/* Nothing is live, so nothing pulses. A breathing green dot over an empty
   floor is the wall telling the room a comfortable lie (BEH-02). */
.vc-livedot.is-off {
  background: var(--color-border-strong);
  box-shadow: 0 0 0 5px var(--color-surface-sunk);
  animation: none;
}

/* -------------------------------------------------------------------------
   The banner nobody can walk past
   ------------------------------------------------------------------------- */

.vc-vip {
  background: var(--color-gold-wash);
  border: 1px solid #DCCBA6;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
  animation: vw-in .26s cubic-bezier(.22, 1, .36, 1), vw-ring 2.6s ease-out infinite;
}
.vc-vip-inner { display: flex; align-items: stretch; }
.vc-vip-edge { width: 5px; background: var(--color-gold); flex: none; }
.vc-vip-body {
  flex: 1; min-width: 0;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.vc-vip-id { min-width: 0; flex: 1; }
.vc-vip-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.vc-vip-tags em { font-style: normal; font: 500 12px/1 var(--font-body); color: var(--color-text-subtle); }
.vc-vip-id h2 { margin: 0; font: 700 25px/1.12 var(--font-head); color: var(--color-text); letter-spacing: -.026em; }
.vc-vip-id p { margin: 4px 0 0; font: 400 13.5px/1.4 var(--font-body); color: var(--color-text-muted); }

/* Read from six feet away: the countdown is the largest number on the wall. */
.vc-vip-timer {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding-right: 6px;
}
.vc-vip-timer b {
  font: 700 30px/1 var(--font-mono);
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.vc-vip-timer span {
  font: 500 11px/1 var(--font-body);
  color: var(--color-text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vc-vip-acts { flex: none; display: flex; gap: 10px; }

.vc-urge {
  background: var(--color-gold-tint);
  border-top: 1px solid var(--color-gold-edge);
  padding: 9px 20px;
  display: flex; align-items: center; gap: 12px;
}
.vc-urge-track { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--color-gold-edge); overflow: hidden; }
.vc-urge-fill { height: 100%; border-radius: var(--r-pill); background: var(--color-gold); width: var(--pct, 0%); }
.vc-urge span {
  white-space: nowrap; flex: none;
  font: 600 11.5px/1 var(--font-body);
  color: var(--color-gold-ink);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   KPI tiles
   ------------------------------------------------------------------------- */

.vc-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.vc-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 15px;
}
/* Two of the four tiles carry their state in the fill, not just the dot — they
   are the ones read from six feet away. Live floor is green, unclaimed orange. */
.vc-tile.is-live { background: var(--color-success-50); border-color: var(--color-success-200); }
.vc-tile.is-hot  { background: var(--color-warn-50);    border-color: var(--color-warn-100); }
/* Those same two open the concierge queue behind the number. No underline —
   the tile is the target, not the words inside it. */
.vc-tile.is-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
@media (hover: hover) {
  .vc-tile.is-link:hover { box-shadow: 0 4px 14px rgba(25, 30, 38, .13); }
}
.vc-tile-hd { display: flex; align-items: center; gap: 7px; }
.vc-tile-hd i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vc-tile-hd i.is-live   { background: var(--color-success); animation: vw-dot 1.8s ease-in-out infinite; }
.vc-tile-hd i.is-hot    { background: var(--color-danger); }
.vc-tile-hd i.is-ok     { background: var(--color-success); }
.vc-tile-hd i.is-gold   { background: var(--color-gold-ink); }
.vc-tile-hd span {
  font: 600 11px/1 var(--font-mono);
  color: var(--color-text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vc-tile b {
  display: block;
  margin-top: 10px;
  font: 700 34px/1 var(--font-head);
  color: var(--color-text);
  letter-spacing: -.032em;
  font-variant-numeric: tabular-nums;
}
.vc-tile b.is-alarm { color: var(--color-danger-ink); }
.vc-tile p { margin: 5px 0 0; font: 400 11.5px/1.3 var(--font-body); color: var(--color-text-dim); }

/* -------------------------------------------------------------------------
   Floor + alert feed
   ------------------------------------------------------------------------- */

.vc-split { display: flex; gap: 18px; align-items: flex-start; }
.vc-floor { flex: 1; min-width: 0; }
.vc-feed { flex: none; width: 330px; }
.vc-feed-list { display: flex; flex-direction: column; gap: 12px; }

.vc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.vc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.vc-card--mine { background: var(--color-gold-50);      border-color: var(--color-gold-100); }
.vc-card--live { background: var(--color-success-wash); border-color: var(--color-success-100); }

.vc-card-body { padding: 13px 14px 12px; }
.vc-card-head { display: flex; align-items: flex-start; gap: 11px; }
.vc-card-id { min-width: 0; flex: 1; }
.vc-card-name { font: var(--w-name) 16px/1.2 var(--font-head); color: var(--color-text); letter-spacing: -.012em; }
.vc-card-co { font: 400 12.5px/1.3 var(--font-body); color: var(--color-text-muted); margin-top: 2px; }

.vc-rep {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  display: flex; align-items: center; justify-content: center;
  font: 700 10.5px/1 var(--font-body);
  color: #2B4E77;
}

.vc-inset {
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-sm);
  padding: 8px;
  display: flex; align-items: center; gap: 10px;
  margin-top: 11px;
}
.vc-card--mine .vc-inset { background: var(--color-gold-tint); border-color: var(--color-gold-100); }
.vc-inset-id { min-width: 0; flex: 1; }
.vc-inset-mat {
  font: 600 13px/1.2 var(--font-body);
  color: var(--color-primary-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-inset-sku { font: 500 10.5px/1.2 var(--font-body); color: var(--color-text-subtle); margin-top: 3px; font-variant-numeric: tabular-nums; }

.vc-dwell { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.vc-dwell b { font: 700 15px/1 var(--font-body); color: var(--color-text); }
.vc-dwell span { font: 500 12px/1 var(--font-body); color: var(--color-text-dim); }

.vc-card-foot {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 13px 10px;
  background: var(--color-surface-alt);
  border-top: 1px solid #EAEEF3;
}
.vc-card--mine .vc-card-foot { background: var(--color-gold-wash); border-top-color: var(--color-gold-edge); }
.vc-card--live .vc-card-foot { background: var(--color-success-50); border-top-color: var(--color-success-200); }

.vc-card-note {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 10.5px/1.3 var(--font-body);
  color: var(--color-text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vc-card-acts { flex: none; display: flex; align-items: center; gap: 11px; }
.vc-watching { font: 600 12.5px/1 var(--font-body); color: var(--color-success); }

/* Alert feed — the column the manager reads when nothing is on fire. */
.vc-feed-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 12px 13px;
  display: flex; gap: 11px; align-items: flex-start;
}
.vc-feed-item.is-hot { border-color: var(--color-gold-200); animation: vw-in .24s ease-out; }
.vc-feed-icon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.vc-feed-icon i { width: 11px; height: 11px; border-radius: 50%; }
.vc-feed-item.is-hot .vc-feed-icon i { animation: vw-dot 1.8s ease-in-out infinite; }

.vc-feed-icon--vip  { background: var(--color-gold-50);    border: 1px solid var(--color-gold-200); }
.vc-feed-icon--vip i  { background: var(--color-gold); }
.vc-feed-icon--warn { background: var(--color-gold-50);    border: 1px solid var(--color-gold-100); }
.vc-feed-icon--warn i { background: var(--color-gold-ink); }
.vc-feed-icon--live { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); }
.vc-feed-icon--live i { background: var(--color-primary); }
.vc-feed-icon--quote{ background: var(--color-gold-50);    border: 1px solid var(--color-gold-100); }
.vc-feed-icon--quote i { background: var(--color-gold); }
.vc-feed-icon--off  { background: var(--color-surface-sunk); border: 1px solid var(--color-border-soft); }
.vc-feed-icon--off i  { background: var(--color-text-subtle); }

.vc-feed-id { min-width: 0; flex: 1; }
.vc-feed-top { display: flex; align-items: baseline; gap: 8px; }
.vc-feed-top b { flex: 1; min-width: 0; font: var(--w-name) 13.5px/1.25 var(--font-head); color: var(--color-text); }
.vc-feed-top span { flex: none; font: 500 10.5px/1 var(--font-body); color: var(--color-text-dim); font-variant-numeric: tabular-nums; }
.vc-feed-id p { margin: 4px 0 0; font: 400 12px/1.4 var(--font-body); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   Narrower than the stand it was drawn for
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Stacked, the two columns are rows — flex-start would shrink-wrap them. */
  .vc-split { flex-direction: column; align-items: stretch; }
  .vc-feed { width: 100%; }
  .vc-feed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 900px) {
  .vc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-vip-body { gap: 14px; }
  .vc-vip-timer { align-items: flex-start; }
  .vc-vip-acts { width: 100%; }
  .vc-vip-acts .vw-btn { flex: 1; }
}

@media (max-width: 768px) {
  .vw-scroll { padding: 14px 14px 20px; }
  .vc-cards { grid-template-columns: 1fr; }
  .vc-feed-list { grid-template-columns: 1fr; }
  .vc-vip-id h2 { font-size: 21px; }
  .vc-tile b { font-size: 28px; }
}

@media (max-width: 480px) {
  .vc-tiles { grid-template-columns: 1fr; }
  .vc-vip-acts { flex-direction: column; }
}

/* =========================================================================
   THE QUIET FLOOR — .vq-*

   The same screen when nobody is in a showroom. It is not an empty state
   with a shrug in it: the floor is the urgent read and the week is the
   considered one, so this half is calmer, wider and slower-paced than the
   half above, and it still fills a wall seen from six feet.
   ========================================================================= */

.vq-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  animation: vw-fade .22s ease-out;
}
.vq-hero-id { flex: 1; min-width: 260px; }
.vq-hero-id .vw-band-top { color: var(--color-text-subtle); }
.vq-off {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex: none;
}
.vq-hero-id h2 {
  margin: 9px 0 0;
  font: 700 27px/1.12 var(--font-head);
  color: var(--color-text);
  letter-spacing: -.028em;
}
.vq-hero-id > p:last-child {
  margin: 7px 0 0;
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.vq-hero-acts { flex: none; display: flex; gap: 10px; }
.vq-hero-acts .vw-btn { text-decoration: none; }

/* ---- The five figures ---------------------------------------------------
   Value, label, delta, note — four steps down, each one earned, none of them
   under the 10px floor (memory.md §4). The delta is the line that matters:
   a number with nothing to compare it to is not a comparison. */

.vq-figs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.vq-fig {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 15px 16px 16px;
}
.vq-fig b {
  display: block;
  font: 700 30px/1 var(--font-head);
  color: var(--color-text);
  letter-spacing: -.032em;
  font-variant-numeric: tabular-nums;
}
.vq-fig > span {
  display: block;
  margin-top: 8px;
  font: 600 11px/1.2 var(--font-mono);
  color: var(--color-text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vq-fig .vw-delta { display: block; margin-top: 7px; }
.vq-fig em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font: 400 11px/1.35 var(--font-body);
  color: var(--color-text-subtle);
}

/* ---- The two panels ---------------------------------------------------- */

.vq-split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }

.vq-key {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--font-body);
  color: var(--color-text-subtle);
}
.vq-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.vq-key-now  { background: var(--color-primary); }
.vq-key-prev { background: var(--color-surface-sunk); border: 1px solid var(--color-border-strong); }

.vq-chart { width: 100%; height: auto; display: block; overflow: visible; }
/* Last week is the outline this week is filling in. */
.vq-ghost { fill: var(--color-surface-sunk); stroke: var(--color-border-strong); stroke-width: 1; }
.vq-bar   { fill: var(--color-primary); }
.vq-bar.is-part { fill: var(--color-primary-600); opacity: .82; }
.vq-val {
  fill: var(--color-text);
  font: 700 11px var(--font-body);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.vq-ax {
  fill: var(--color-text-subtle);
  font: 500 10px var(--font-mono);
  text-anchor: middle;
  letter-spacing: .06em;
}
.vq-base { stroke: var(--color-border); stroke-width: 1; }

/* Fluid but bounded columns, and the last one right-aligned by tablet.css. */
.vq-table th:nth-child(1), .vq-table td:nth-child(1) { width: 32%; }
.vq-table th:nth-child(2), .vq-table td:nth-child(2) { width: 15%; }
.vq-table th:nth-child(3), .vq-table td:nth-child(3) { width: 19%; }
.vq-table th:nth-child(4), .vq-table td:nth-child(4) { width: 10%; }
.vq-table th:nth-child(5), .vq-table td:nth-child(5) { width: 10%; }
.vq-table th:nth-child(6), .vq-table td:nth-child(6) { width: 14%; }
.vq-table td b { font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.vq-table .vw-sub-line { font-size: 10px; }

@media (max-width: 1100px) {
  .vq-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vq-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .vq-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vq-hero-id h2 { font-size: 22px; }
  .vq-hero-acts { width: 100%; }
  .vq-hero-acts .vw-btn { flex: 1; }
}

@media (max-width: 480px) {
  .vq-figs { grid-template-columns: 1fr; }
  .vq-hero-acts { flex-direction: column; }
}