.tp{display:grid;gap:var(--s-4);min-width:0;
  --tp-k1:color-mix(in srgb, var(--status-active-line) 35%, var(--status-active-bg));
  --tp-k3:color-mix(in srgb, var(--status-active-line), var(--status-active-txt));
  --tp-gap-a:color-mix(in srgb, var(--brand) 22%, var(--card));
  --tp-gap-b:color-mix(in srgb, var(--brand) 8%, var(--card))}
.tp>*{min-width:0}
.tp [hidden]{display:none}

.tp-ph{padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap}
.tp-ph>div{min-width:0}
.tp-new .tp-go{margin-left:auto;flex:none}
.tp-ph h1{font-family:var(--display);font-size:var(--fs-page);font-weight:var(--fw-semi);color:var(--navy);
  line-height:var(--lh-tight);letter-spacing:var(--tr-tighter);margin:0}
.tp-sub{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin-top:var(--s-2);min-height:28px;
  font-size:var(--fs-meta);color:var(--mut)}
.tp-sub b{font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy)}
.tp-stack{display:flex}
.tp-stack span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-left:-7px;
  font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-semi);color:var(--n-0);background:var(--navy);
  border:2px solid var(--bg)}
.tp-stack span:first-child{margin-left:0}
.tp-stack span.more{background:var(--n-50);color:var(--navy)}
.tp-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}

.tp .tp-paused{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:center}
.tp-paused b{font-family:var(--display);font-weight:var(--fw-semi)}

.tp-new h2{margin:0 0 var(--s-1);font-family:var(--display);font-size:var(--fs-title);font-weight:var(--fw-semi);color:var(--navy)}
.tp-new>p{margin:0 0 var(--s-3);color:var(--mut)}
.tp-new small{display:block;font-family:var(--sans);font-size:var(--fs-meta);font-weight:var(--fw-body);color:var(--mut)}

.tp-cov{overflow:visible}
.tp-cov .chead{padding:var(--s-3) var(--s-4)}
.tp-tag{font-family:var(--display);font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--faint)}
.tp-hold{height:260px;margin:0 var(--s-4) var(--s-4);border-radius:var(--r-sm);background:var(--n-25)}
.tp-grid{display:grid;gap:var(--s-1);padding:0 var(--s-4)}
.tp-row{display:grid;grid-template-columns:44px minmax(0,1fr) 170px 24px;gap:var(--s-3);align-items:center;
  border-radius:var(--r-sm);cursor:pointer;padding:2px 0}
.tp-row:hover .tp-lane{box-shadow:0 0 0 1px var(--n-300)}
.tp-row:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tp-d{font-family:var(--display);font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--faint)}
.tp-row.today .tp-d{color:var(--navy)}
.tp-lane{position:relative;display:grid;grid-template-columns:repeat(var(--n, 28),minmax(0,1fr));gap:2px;height:30px}
.tp-lane i{border-radius:3px;background:var(--n-50);display:grid;place-items:center;min-width:0;overflow:hidden;
  font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-semi);font-style:normal;color:var(--status-active-txt)}
.tp-lane.tp-n{display:none}
.tp-lane .b4{grid-column:span 4} .tp-lane .b3{grid-column:span 3} .tp-lane .b2{grid-column:span 2}
.tp-lane i.k1,.tp-sw.k1,.tp-ill .k1{background:var(--tp-k1);fill:var(--tp-k1)}
.tp-lane i.k2,.tp-sw.k2,.tp-ill .k2{background:var(--status-active-line);fill:var(--status-active-line)}
.tp-lane i.k3,.tp-sw.k3,.tp-ill .k3{background:var(--tp-k3);fill:var(--tp-k3);color:var(--n-0)}
.tp-lane i.k4,.tp-sw.k4,.tp-ill .k4{background:var(--status-active-txt);fill:var(--status-active-txt);color:var(--n-0)}
.tp-lane i.gap,.tp-sw.gap{background:repeating-linear-gradient(135deg,var(--tp-gap-a) 0 4px,var(--tp-gap-b) 4px 8px);
  box-shadow:inset 0 0 0 1.5px var(--brand)}
.tp-ill .gap{fill:var(--tp-gap-a);stroke:var(--brand);stroke-width:2}
.tp-now{position:absolute;top:-3px;bottom:-3px;left:calc(var(--x, 0%) - 1px);width:2px;background:var(--brand);pointer-events:none}
.tp-now::after{content:"";position:absolute;top:0;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.tp-sum{font-size:var(--fs-meta);color:var(--mut);line-height:var(--lh-snug)}
.tp-sum b{font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy)}
.tp-sum.gapt b{color:var(--brand-solid)}
.tp-tw{width:22px;height:22px;display:grid;place-items:center;color:var(--navy)}
.tp-tw svg{transition:transform .15s}
.tp-row.open .tp-tw svg{transform:rotate(180deg)}

.tp-shifts{display:grid;gap:var(--s-2);margin:2px 0 var(--s-2) 56px;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--n-50)}
.tp-sg{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-2);align-items:start;font-size:var(--fs-meta)}
.tp-sg>b{font-family:var(--display);font-weight:var(--fw-semi);color:var(--navy);padding-top:3px}
.tp-names{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.tp-nm{font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-semi);color:var(--navy);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
.tp-nm.cv{background:var(--status-new-bg);border-color:var(--status-new-line);color:var(--status-new-txt)}

.tp-axis{display:grid;grid-template-columns:44px minmax(0,1fr) 170px 24px;gap:var(--s-3)}
.tp-axis.tp-n{display:none}
.tp-axis>div{position:relative;height:16px}
.tp-axis>div span{position:absolute;left:var(--x, 0%);transform:translateX(-50%);font-size:var(--fs-label);color:var(--faint);white-space:nowrap}

.tp-key{display:flex;gap:var(--s-2) var(--s-3);flex-wrap:wrap;align-items:center;padding:var(--s-3) var(--s-4) var(--s-4);
  font-size:var(--fs-meta);color:var(--mut)}
.tp-key span{display:inline-flex;gap:6px;align-items:center}
.tp-sw{width:14px;height:12px;border-radius:3px;display:inline-block;background:var(--n-50)}
.tp-sw.now{width:2px;background:var(--brand)}

@media (max-width:640px){
  .tp-lane.tp-w,.tp-axis.tp-w{display:none}
  .tp-lane.tp-n,.tp-axis.tp-n{display:grid}
  .tp-row{grid-template-columns:34px minmax(0,1fr) 22px;gap:var(--s-2)}
  .tp-row .tp-sum{grid-column:2;order:3}
  .tp-row .tp-tw{order:2}
  .tp-axis{grid-template-columns:34px minmax(0,1fr) 22px;gap:var(--s-2)}
  .tp-axis>span:last-child{display:none}
  .tp-grid{padding:0 var(--s-3)}
  .tp-cov .chead{padding:var(--s-3)}
  .tp-key{padding:var(--s-3)}
  .tp-shifts{margin-left:0}
  .tp-sg{grid-template-columns:minmax(0,1fr)}
  .tp .tp-paused{grid-template-columns:minmax(0,1fr)}
  .tp-paused button{width:100%}
  .tp-ph>button{width:100%}
  .tp-lane i,.tp-sum,.tp-axis>div span,.tp-key,.tp-nm,.tp-d,.tp-stack span{font-size:12px}
  .tp-cov .chead{position:relative}
  .tp-cov .lh-info{position:static}
  .tp-cov .lh-pop{position:absolute;left:var(--s-3);right:var(--s-3);top:calc(100% - var(--s-2));width:auto;margin-top:0}
}
@media (pointer:coarse){
  .tp-row{min-height:44px}
  .tp-ph>button,.tp-new .tp-go{min-height:44px}
  .tp-lane i,.tp-axis>div span,.tp-nm,.tp-stack span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .tp-tw svg{transition:none} }