/* Presence lane. Tiles that are the metric switch, one panel under them (the
   chart, or its week table), the week in the inspector. Tokens only. One accent,
   the tint, on the picked metric alone: its tile's ring and sparkline, its marks
   in the chart, the picked week's band. Nothing is red: no number here is late.
   Spacing 2, 4, 8, 12, 16, 20; type 10, 11, 12, 13, 15 and the tile's 26. */

.pr-lane .pr-sheet{flex:1 1 640px; min-width:0}
.pr-pad{container-type:inline-size; display:flex; flex-direction:column; gap:16px; padding-top:16px}
.pr-say{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; flex:0 1 auto; max-width:calc(100% - 330px)}
.pr-say b{font-weight:650; color:var(--t1)}
.pr-range{margin-left:auto}
.pr-lmi{display:inline-grid; place-items:center; width:18px; height:18px; color:var(--t2)}
.pr-lmi svg{width:15px; height:15px}
.lm-r[aria-current="true"] .pr-lmi{color:inherit}
.pr-mrow{gap:8px}
.pr-mrow .g-dot{width:6px; height:6px; margin-left:-2px}
.pr-chips{display:none}

/* ------------------------------------------------------------- who, halt */
.pr-who{display:flex; align-items:center; gap:12px; min-width:0; padding:0 2px}
.pr-whot{display:flex; flex-direction:column; gap:2px; min-width:0}
.pr-whot b{font:700 15px/20px var(--sans); letter-spacing:-.01em}
.pr-halt{display:flex; align-items:center; gap:8px; padding:10px 12px 10px 14px; border-radius:var(--r-card);
  background:var(--orange-soft); color:var(--orange-ink); border:1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  animation:rise 300ms var(--spring) both}
.pr-halt .ic{display:grid; place-items:center}
.pr-halt .ic svg{width:16px; height:16px}
.pr-halt b{font-weight:650}
.pr-halt .t2{color:inherit; opacity:.8}
.pr-empty{display:flex; align-items:center; gap:10px; color:var(--t2)}
.pr-empty .ic svg{width:18px; height:18px; display:block; color:var(--t3)}

/* ------------------------------------------------------------- tiles */
.pr-tiles{display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); gap:12px}
.pr-tile{position:relative; gap:0; padding:12px 14px 10px; cursor:pointer;
  transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.pr-tile:hover{background:var(--card-hover)}
.pr-tile:active{transform:scale(.985)}
.pr-tile .lab{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 11px/16px var(--sans)}
.pr-tile .fig{display:block; margin-top:4px; font:700 26px/30px var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.pr-tile .pr-none{display:block; margin-top:4px; font:500 13px/30px var(--sans); color:var(--t3); white-space:nowrap}
.pr-tile .foot{display:flex; align-items:baseline; gap:8px; min-height:16px; margin-top:4px; font-size:11px; line-height:16px; white-space:nowrap; overflow:hidden}
.pr-tile .sub{color:var(--t3); overflow:hidden; text-overflow:ellipsis}
.pr-tile[aria-pressed="true"]{background:var(--card-hover); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--tint-line)}
.pr-tile[aria-pressed="true"] .lab{color:var(--t1)}
.pr-delta{font-weight:650; font-variant-numeric:tabular-nums; color:var(--t2)}
.pr-delta.up{color:var(--green-ink)}
.pr-delta.down{color:var(--orange-ink)}
.pr-spk{display:block; width:100%; height:24px; margin-top:6px; overflow:visible}
.pr-spk .ln{fill:none; stroke:var(--t3); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pr-spk .end{fill:none; stroke:var(--t2); stroke-width:5; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pr-spk.on .ln, .pr-spk.on .end{stroke:var(--tint)}
@container (max-width: 1040px){
  .pr-tiles{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@container (max-width: 520px){
  .pr-tiles{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .pr-tile{padding:10px 12px 8px}
  .pr-tile .fig{font-size:22px; line-height:26px}
  .pr-tile .pr-none{line-height:26px}
}

/* ------------------------------------------------------------- panels */
.pr-panel{padding:14px 16px 16px; animation:rise 320ms var(--spring) both}
.pr-ph{display:flex; align-items:center; gap:10px; min-height:30px; min-width:0}
.pr-ph b{font:700 15px/20px var(--sans); letter-spacing:-.01em; white-space:nowrap; cursor:default}
.pr-ph .sub{font-size:12px; line-height:16px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pr-plot{position:relative; margin-top:10px; height:clamp(224px, calc(100vh - 470px), 380px)}
.pr-svg{display:block; width:100%; height:100%; overflow:visible}
.pr-svg .grid{stroke:var(--sep); stroke-width:1}
.pr-svg .base{stroke:var(--fill); stroke-width:1}
.pr-svg .tick{fill:var(--t3); font:400 10px/14px var(--mono); font-variant-numeric:tabular-nums}
.pr-svg .lab{fill:var(--t1); font:650 11px/14px var(--sans); font-variant-numeric:tabular-nums}
.pr-svg .bar{fill:var(--tint); transition:filter var(--d-state) var(--spring)}
.pr-svg .hb{fill:var(--tint-soft)}
.pr-svg .hl{stroke:var(--tint); stroke-width:2}
.pr-svg .hm{stroke:var(--fill2); stroke-width:1.5}
.pr-svg .ln{fill:none; stroke:var(--tint); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.pr-svg .ln.part{stroke-dasharray:1 5}
.pr-svg .pt{fill:var(--tint); stroke:var(--card-solid); stroke-width:2}
.pr-svg .pt.part{fill:var(--card-solid); stroke:var(--tint)}
.pr-svg .pt.quiet{opacity:0}
.pr-svg .col.on .pt.quiet, .pr-svg .col:focus-visible .pt.quiet{opacity:1}
.pr-svg .selband{fill:var(--tint-soft); opacity:.7}
.pr-svg .xh{stroke:var(--fill); stroke-width:1}
.pr-svg .hit{fill:transparent; cursor:pointer}
.pr-svg .col{outline:none}
.pr-svg .col.on .bar{filter:brightness(1.18)}
.pr-svg .col.on .hit{fill:var(--fill3)}
.pr-svg .col:focus-visible .hit{stroke:var(--tint); stroke-width:2}
.pr-tip{position:absolute; z-index:3; pointer-events:none; padding:8px 12px; border-radius:var(--r-ctl); min-width:130px;
  background:var(--menu-solid); border:1px solid var(--glass-line); box-shadow:var(--shadow); animation:fadein 120ms var(--spring) both}
.pr-tip b{display:block; margin-bottom:4px; font:600 11px/16px var(--sans); color:var(--t2); white-space:nowrap}
.pr-trows{display:flex; flex-direction:column; gap:2px}
.pr-trows > div{display:flex; align-items:baseline; gap:8px; font-size:12px; line-height:16px; white-space:nowrap}
.pr-tip .v{font-weight:650; color:var(--t1); font-variant-numeric:tabular-nums}
.pr-tip .l{color:var(--t2)}
.pr-tnote{margin-top:4px; padding-top:4px; border-top:1px solid var(--sep); font:400 11px/16px var(--sans); color:var(--t2); white-space:nowrap}

/* ------------------------------------------------------------- tables */
.pr-twrap{margin-top:10px; max-height:min(62vh, 560px); overflow:auto; border-radius:var(--r-ctl); border:1px solid var(--card-line); background:var(--fill3)}
.pr-table th{position:sticky; top:0; z-index:2; background:var(--card-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
.pr-table th, .pr-table td{padding-left:10px; padding-right:10px}
.pr-table td{padding-top:8px; padding-bottom:8px; font-variant-numeric:tabular-nums}
.pr-table td:first-child, .pr-table th:first-child{padding-left:14px}
.pr-table th.on{color:var(--tint-ink)}
.pr-table td.dim, .pr-table tr.open td{color:var(--t3)}
.pr-table tr.dim td{color:var(--t2)}
.pr-table tbody tr:last-child td{border-bottom:0}
.pr-table tbody tr.hov:focus-visible{outline:2px solid var(--tint); outline-offset:-2px}
.pr-weeks td:first-child{font-weight:550}
.pr-side .who .nm{font-weight:600}
.pr-sparkcell{width:120px; padding-top:4px !important; padding-bottom:4px !important}
.pr-sparkcell .pr-spk{width:100px; margin:0}

/* the rate with its 95% range, the average as a hairline */
.pr-rate{min-width:150px}
.pr-rate .pr-rv{display:inline-block; min-width:46px; font-weight:650}
.pr-rng{position:relative; display:inline-block; vertical-align:middle; width:80px; height:8px; margin-left:8px; border-radius:4px; background:var(--fill2)}
.pr-rng .band{position:absolute; top:0; bottom:0; border-radius:4px; background:var(--tint-soft)}
.pr-rng .pt{position:absolute; top:-1px; width:3px; height:10px; margin-left:-1.5px; border-radius:2px; background:var(--tint)}
.pr-rng s{position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--t3); text-decoration:none}
.pr-gap{font-weight:600; white-space:nowrap}
.pr-gap.up{color:var(--green-ink)}
.pr-gap.down{color:var(--orange-ink)}
.pr-ins{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px}
.pr-split td:first-child{max-width:260px}

/* ------------------------------------------------------------- side by side */
.pr-cmpseg{align-self:flex-start; max-width:100%; overflow-x:auto; scrollbar-width:none}
.pr-cmpseg::-webkit-scrollbar{display:none}
.pr-cmp{display:flex; flex-direction:column; gap:2px; margin-top:10px}
.pr-cmprow{display:grid; grid-template-columns:26px minmax(90px, 180px) minmax(0, 1fr) 72px; align-items:center; gap:12px; padding:6px 8px;
  border-radius:var(--r-row); text-align:left; transition:background var(--d-state) var(--spring)}
.pr-cmprow:hover{background:var(--fill3)}
.pr-cmprow .nm{font-weight:600}
.pr-track{height:10px; border-radius:5px; background:var(--fill3); overflow:hidden}
.pr-track i{display:block; height:100%; border-radius:5px; background:var(--tint); transform-origin:left; animation:prgrow 520ms var(--spring) both}
.pr-cmprow .v{text-align:right; font:650 13px/18px var(--sans); font-variant-numeric:tabular-nums}
@keyframes prgrow{from{transform:scaleX(0)}to{transform:none}}

/* ------------------------------------------------------------- inspector */
.pr-ih{display:flex; flex-direction:column; min-width:0}
.pr-ih .t2{font-size:12px; line-height:16px}
.pr-ibody{display:flex; flex-direction:column; gap:18px}
.pr-ibody > *{flex-shrink:0}
.pr-ibody .sect{margin-top:0}
.pr-figs{margin:0; border-radius:var(--r-tile); background:var(--card); border:1px solid var(--card-line); box-shadow:inset 0 1px 0 var(--glass-hi); overflow:hidden}
.pr-figs > div{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 14px; border-top:1px solid var(--sep)}
.pr-figs > div:first-child{border-top:0}
.pr-figs dt{font-size:12px; line-height:20px; color:var(--t2); white-space:nowrap}
.pr-figs dd{display:flex; align-items:baseline; gap:8px; margin:0; font-size:13px; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:0}
.pr-figs dd b{font-weight:650}
.pr-figs .of{font-size:11px; color:var(--t2); overflow:hidden; text-overflow:ellipsis}
.pr-figs .dim b{color:var(--t2)}
.pr-people > .g-row{padding:9px 12px}
.pr-person{display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; color:var(--t1); text-decoration:none !important}
a.pr-person:hover{background:var(--fill3)}
.pr-pw{display:flex; flex-direction:column; min-width:0}
.pr-pw b{font-weight:600}
.pr-pw .t2{font-size:12px; line-height:16px}
.pr-pwhen{display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-size:11px; line-height:15px; color:var(--t2); white-space:nowrap}

/* ------------------------------------------------------------- narrow */
@media (max-width: 1180px){
  .pr-say{max-width:calc(100% - 300px)}
}
@media (max-width: 430px){
  .pr-chips{display:flex}
  .pr-chip{gap:6px; padding-left:4px}
  .pr-say{max-width:none; flex:1 1 100%; order:2; white-space:normal; font-size:12px; line-height:17px}
  .pr-range{order:1; margin-left:0}
  .pr-lane .bar .spacer{display:none}
  .pr-pad{padding-top:12px; gap:12px}
  .pr-panel{padding:12px}
  .pr-ph .g-seg{margin-left:auto}
  .pr-cmprow{grid-template-columns:26px minmax(0, 1fr) 64px; gap:10px}
  .pr-cmprow .pr-track{grid-column:2 / 4; grid-row:2}
  .pr-rate{min-width:0}
  .pr-rng{display:none}
  .pr-split td:first-child{max-width:150px}
  .pr-split th{white-space:normal}
  .pr-table th, .pr-table td{padding-left:7px; padding-right:7px}
  .pr-table th:first-child, .pr-table td:first-child{padding-left:10px}
  .pr-table th:last-child, .pr-table td:last-child{padding-right:10px}
  .pr-split td:first-child .ell{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; line-height:17px}
  .pr-twrap{max-height:none}
}