/* ---- V1.64 Operator rounds (rnd-): Client\Apps\Rounds (RoundsPage, RoundsRunPage, RoundsRoutes). Design system tokens only (--os-*),
   full page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.rnd-click { cursor: pointer; }
.rnd-photo { display: block; max-width: 100%; max-height: 32rem; margin-top: var(--os-space-3); border-radius: var(--os-radius-md); border: var(--os-border-w) solid var(--os-border); }
.rnd-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--os-space-4); }
.rnd-point { display: flex; flex-direction: column; gap: var(--os-space-2); min-width: 0; }
.rnd-point__head { display: flex; justify-content: space-between; gap: var(--os-space-2); align-items: baseline; }
.rnd-point__meta { color: var(--os-text-2); }
.rnd-answers { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
.rnd-editor td { vertical-align: top; }
.rnd-editor .os-input, .rnd-editor .os-select { min-width: 6rem; }
.rnd-num { max-width: 7rem; }

/* ---- V1.66 the premium pass (mockup 07): the overview, the run's panel, the heat map, the phone's own round ---- */
.rnd-page .os-grid { align-items: start; }
.rnd-col.rnd-col--8 { --span: 8; }
.rnd-col { --span: 4; display: grid; gap: var(--os-gutter); align-content: start; min-width: 0; }
.rnd-clip { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnd-strong { font: var(--os-type-body-strong); color: var(--os-text); }
.rnd-who { gap: var(--os-space-2); flex-wrap: nowrap; white-space: nowrap; }
.rnd-runs td { vertical-align: top; }
.rnd-runs tr.is-selected td { background: var(--os-surface-selected); }
.rnd-runs tr.is-selected td:first-child { border-left: 2px solid var(--os-accent); }
.rnd-sync { gap: var(--os-space-1); flex-wrap: nowrap; white-space: nowrap; color: var(--os-text-2); }
.rnd-sync--offline { color: var(--os-warn-text); }
.rnd-sync--live { color: var(--os-good-text); }
.rnd-meta-warn { color: var(--os-warn-text); }
.rnd-endrow { justify-content: flex-end; }

/* The stations of a run: one small bar each */
.rnd-seg { display: flex; gap: 2px; flex-wrap: wrap; max-width: 22rem; margin-bottom: var(--os-space-1); }
.rnd-seg i, .rnd-legend i { display: inline-block; width: 9px; height: 12px; border-radius: 2px; background: var(--os-text-2); }
.rnd-seg i.o, .rnd-legend i.o { background: var(--os-warn); }
.rnd-seg i.x, .rnd-legend i.x { background: var(--os-neutral-soft); border: var(--os-border-w) solid var(--os-border-strong); }
.rnd-seg i.p, .rnd-legend i.p { background: var(--os-info); }
.rnd-seg i.t, .rnd-legend i.t { background: transparent; border: var(--os-border-w) solid var(--os-border-strong); }
.rnd-seg i.m, .rnd-legend i.m { background: var(--os-bad); }
.rnd-legend { gap: var(--os-space-3); padding: var(--os-space-2) var(--os-space-4); font: var(--os-type-caption); color: var(--os-text-2); }
.rnd-legend span { display: inline-flex; align-items: center; gap: var(--os-space-1); }

/* A reading against its limits */
.rnd-lim { position: relative; height: 6px; min-width: 6rem; max-width: 9rem; border-radius: var(--os-radius-pill); background: var(--os-surface-sunken); margin: var(--os-space-1) 0; }
.rnd-lim span { position: absolute; top: 0; bottom: 0; border-radius: var(--os-radius-pill); }
.rnd-lim .w { background: var(--os-warn-soft); border: var(--os-border-w) solid var(--os-warn-border); }
.rnd-lim .b { background: var(--os-bad-soft); border: var(--os-border-w) solid var(--os-bad-border); }
.rnd-lim i { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--os-text); border-radius: 1px; }
.rnd-lim i.out { background: var(--os-bad); }
.rnd-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rnd-value.is-out { color: var(--os-bad-text); font-weight: 600; }
.rnd-readings tr.is-out td { background: var(--os-bad-soft); }
.rnd-mini { width: 6rem; }
.rnd-icons { gap: var(--os-space-1); flex-wrap: nowrap; color: var(--os-text-2); }

/* The run's panel */
.rnd-runhead { display: grid; gap: var(--os-space-2); min-width: 0; width: 100%; }
.rnd-chips { gap: var(--os-space-2); }
.rnd-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--os-space-2); }
.rnd-photo-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--os-radius-md); overflow: hidden; background: var(--os-surface-sunken); }
.rnd-photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rnd-photo-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: var(--os-space-1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--os-scrim); color: var(--os-inverse-text); font: var(--os-type-caption); }
.rnd-note { display: grid; gap: var(--os-space-1); padding: var(--os-space-3); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); margin-top: var(--os-space-2); }
.rnd-note p { margin: 0; color: var(--os-text); }
.rnd-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--os-space-1) var(--os-space-4); margin: var(--os-space-4) 0 0; font: var(--os-type-small); }
.rnd-facts dt { color: var(--os-text-2); }
.rnd-facts dd { margin: 0; }

/* An AI note (under the trend, the drafted request) */
.rnd-ainote { display: flex; gap: var(--os-space-2); align-items: flex-start; flex-wrap: wrap; padding: var(--os-space-3); border-left: 2px solid var(--os-ai); background: var(--os-ai-soft); border-radius: var(--os-radius-sm); width: 100%; }
.rnd-ainote > div { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.rnd-ainote--panel { margin: var(--os-space-3) var(--os-space-4); width: auto; }
.rnd-brief { display: grid; gap: var(--os-gutter); }

/* The heat map: the sequential ramp of the design system */
.rnd-heat { display: grid; gap: 3px; overflow-x: auto; }
.rnd-heat__row { display: grid; grid-template-columns: 3rem repeat(14, minmax(10px, 1fr)); gap: 3px; align-items: center; }
.rnd-heat__days span { white-space: nowrap; overflow: visible; }
.rnd-heat__days span:last-child { direction: rtl; }
.rnd-heat .cell, .rnd-heat__legend .cell { display: block; height: 16px; border-radius: 2px; background: var(--os-surface-sunken); }
.rnd-heat__legend .cell { width: 14px; height: 10px; }
.rnd-heat__legend { gap: var(--os-space-1); margin-top: var(--os-space-3); }
.rnd-heat .cell.q0, .rnd-heat__legend .cell.q0 { background: var(--os-neutral-soft); }
.rnd-heat .cell.q1, .rnd-heat__legend .cell.q1 { background: var(--os-seq-1); }
.rnd-heat .cell.q2, .rnd-heat__legend .cell.q2 { background: var(--os-seq-2); }
.rnd-heat .cell.q3, .rnd-heat__legend .cell.q3 { background: var(--os-seq-3); }
.rnd-heat .cell.q4, .rnd-heat__legend .cell.q4 { background: var(--os-seq-4); }
.rnd-heat .cell.q5, .rnd-heat__legend .cell.q5 { background: var(--os-seq-5); }
.rnd-heat .cell.q6, .rnd-heat__legend .cell.q6 { background: var(--os-seq-7); }
.rnd-subhead { font: var(--os-type-h4); margin: var(--os-space-4) 0 var(--os-space-2); }
.rnd-often { list-style: none; margin: 0; padding: 0; display: grid; }
.rnd-often li { display: flex; justify-content: space-between; gap: var(--os-space-3); padding: var(--os-space-2) 0; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.rnd-often li > div { display: grid; min-width: 0; }

/* Lists (the attention list, the rounds due now) */
.rnd-list { list-style: none; margin: 0; padding: 0; }
.rnd-list li { display: flex; align-items: center; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.rnd-list li:first-child { border-top: 0; }
.rnd-list li > div { display: grid; flex: 1; min-width: 0; }
.rnd-list__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.rnd-list__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.rnd-list__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.rnd-list__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }

/* The phone's own round */
.rnd-mine { display: grid; gap: var(--os-gutter); }
.rnd-mine__head { display: grid; gap: var(--os-space-1); min-width: 0; }
.rnd-mine__progress { margin-bottom: var(--os-space-3); }
.rnd-mine__station { display: grid; gap: var(--os-space-3); padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg); }
.rnd-mine__name { font: var(--os-type-h3); margin: 0; }
.rnd-mine__item { display: grid; gap: var(--os-space-2); padding-top: var(--os-space-3); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.rnd-mine__reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--os-space-3); align-items: center; }
.rnd-mine__value { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--os-space-1); padding: var(--os-space-2) var(--os-space-3); border: var(--os-border-w) solid var(--os-border-input); border-radius: var(--os-radius-md); font: var(--os-type-kpi-sm); background: var(--os-field); }
.rnd-mine__value.is-out { border-color: var(--os-warn); background: var(--os-warn-soft); }
.rnd-mine__limits { display: grid; gap: var(--os-space-1); }
.rnd-mine__note { margin: 0; padding: var(--os-space-2) var(--os-space-3); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); }
.rnd-picker { min-width: min(100%, 28rem); }

/* Phone: the person's own round first, the overview one tap away; wider screens never show the phone's switch */
.rnd-phone-only { display: none; }
@media (max-width: 639.98px) {
    .rnd-phone-only { display: block; }
    .rnd-phone-only.rnd-hidden, .rnd-phone-hide { display: none; }
    .rnd-phone-switch .os-seg { width: 100%; }
    .rnd-seg { max-width: none; }
    .rnd-mine__reading { grid-template-columns: 1fr; }
}