/* Shared, quiet status well. Consumes ds_tokens.css; no event-state logic. */
.ps-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1.4rem 2.8rem minmax(1.15rem, auto) minmax(1.15rem, auto);
  grid-template-areas: "label" "value" "context" "detail";
  align-content: center;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 236, 176, 0.025), transparent), var(--surface-panel);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.ps-status > .ps-status__label {
  grid-area: label;
  color: var(--text-gold);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-status > .ps-status__value {
  display: block;
  grid-area: value;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.ps-status > .ps-status__context { grid-area: context; }
.ps-status > .ps-status__detail { grid-area: detail; color: var(--text-muted); }
.ps-status > .ps-status__context, .ps-status > .ps-status__detail {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ps-countdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 14rem; }
.ps-countdown__cell { display: grid; justify-items: center; min-width: 0; padding-inline: 0.4rem; }
.ps-countdown__cell + .ps-countdown__cell { border-left: 1px solid var(--border-hairline); }
.ps-countdown__number {
  color: var(--text-gold-strong);
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ps-countdown__unit { color: var(--text-muted); font-size: 0.6rem; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; }
/* A horizontal readout is intentional at narrow widths, not a scaled clock. */
@media (max-width: 600px) {
  .ps-status {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: 2.8rem minmax(1.15rem, auto) minmax(1.15rem, auto);
    grid-template-areas: "label value" "context context" "detail detail";
    column-gap: 0.5rem;
    padding: 0.5rem 0.6rem;
  }
  .ps-status > .ps-status__label { font-size: 0.7rem; }
  .ps-countdown__number { font-size: 1.25rem; }
  .ps-countdown__cell { padding-inline: 0.25rem; }
}