/* On-time arrival: the view switch, the all-day window table and its drill-down.
   Every on-time figure uses the same three bands and one treatment: the figure
   in the number face, in a box of the same size whatever its band. Fine is the
   bare figure; watch and bad are the system's tinted status chips. */
@layer pages{

.ota-pick{margin:2px 0 var(--s3)}
.ota-pane > .hint:first-child{margin-top:0}

/* One status treatment for every on-time rate: same box, same face, the tone
   does the talking. Good keeps no fill so a column of them stays quiet. */
.chip.ota-ok,.chip.ota-mid,.chip.ota-low,.chip.ota-none{min-width:4.5rem;justify-content:flex-end;padding:0 var(--s2);
  font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums slashed-zero}
.chip.ota-ok{color:var(--ink);border-color:transparent}
.chip.ota-none{color:var(--ink-3)}

/* All day, by window: a heat chip per window. Each carries its number; the
   tint backs it up, in the same good / watch / bad tokens as the status chips. */
.ad-windows{margin-bottom:var(--s3)}
.ad-windows td,.ad-windows th{text-align:right}
.ad-windows td:first-child,.ad-windows th:first-child{text-align:left}
.ad-windows td .tsub{display:block}
.adw{display:inline-grid;grid-template-columns:repeat(6,2.75rem);gap:var(--s1);vertical-align:middle}
.adw.head{display:grid;margin-top:var(--s1)}
.adw.head span{text-align:center;font-size:var(--t7);font-weight:600;color:var(--ink-3)}
.adc{display:block;height:calc(var(--s5) - 2px);line-height:calc(var(--s5) - var(--s1));text-align:center;border:1px solid transparent;border-radius:var(--r1);
  font-family:var(--f-num);font-size:var(--t7);font-weight:600;font-variant-numeric:tabular-nums slashed-zero}
.adc.ok{color:var(--good);background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.adc.mid{color:var(--watch);background:var(--watch-soft);border-color:color-mix(in srgb,var(--watch) 35%,transparent)}
.adc.low{color:var(--bad);background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.adc.none{color:var(--ink-3);border-color:var(--line)}
.adc.wide{display:inline-block;min-width:3.25rem;padding:0 var(--s1)}

/* A technician row opens its late jobs; the chevron is drawn, not typed. */
.ad-tog{display:inline-flex;align-items:center;gap:var(--s2);padding:0;text-align:left;cursor:pointer;background:none;border:0}
.ad-tog .chev{display:inline-grid;place-items:center;width:var(--s4);color:var(--ink-3);transform:rotate(-90deg);transition:transform .18s cubic-bezier(.16,1,.3,1)}
.ad-tog[aria-expanded="true"] .chev{transform:none}
.ad-tog:hover strong{color:var(--accent)}
tr.ad-drill > td{padding:var(--s3) var(--s4) var(--s4) calc(var(--s6) - var(--s1));background:var(--surface-2)}
tr.ad-drill:hover{background:none}
tr.ad-drill table{font-size:var(--t6)}
tr.ad-drill th{position:static;background:var(--line)}
tr.ad-drill .ad-foot{margin-top:var(--s2);font-size:var(--t6)}
tr.ad-drill .ad-foot a{font-weight:700;cursor:pointer}
}