/* Service Scope: the Rotation tab (service-rotation.html), restyled in the Service Scope brand 2026-10-15
   (.agents/handoffs/2026-10-23-service-scope-brand.md). Loaded after servicescope.css and reads its tokens only.

   The page's one memorable thing: each rotation is a flow line. The techs are stations on it, read left to right in the order
   they get jobs; Up next is the station the next job lands at (the one Flow node, with a halo); the line runs Petrol through the
   techs who are here and turns to a dotted line for those out today, who sit at the end on a hatched ground with a hollow
   station. Every state is also a word (Up next, the place number, Out today). On a phone the line turns to run top to bottom. */

.rot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:6px 0 12px}
.rot-title h2{margin:0;font:700 30px/1.08 var(--sf-font-display);letter-spacing:-.01em}
.rot-title .whose{margin:6px 0 0;color:var(--muted);font-size:15px}
.rot-controls{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}

/* the legend, in words, each with its station */
.rot-legend{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 24px;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.rot-legend li{display:inline-flex;align-items:center;gap:7px}
.rot-legend li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--rail-done)}
.rot-legend li:first-child::before{background:var(--sf-flow);box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-flow) 26%,transparent)}
.rot-legend li:last-child::before{background:var(--panel);box-shadow:inset 0 0 0 2px var(--rail-off)}
.rot-legend b{font-weight:700;color:var(--ink)}
.rot-legend b.up{color:var(--signal-ink)}
.rot-legend b.out{background:repeating-linear-gradient(135deg,var(--line-soft) 0 3px,transparent 3px 6px);padding:0 3px;border-radius:3px}

/* ---------- one rotation ---------- */
.rotation{margin:0 0 28px;min-width:0}
.rotation-head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin:0 0 10px}
.rotation-head h3{margin:0;font:700 20px/1.15 var(--sf-font-display)}
.rotation-head .types{font-size:13.5px;color:var(--muted)}
.rotation-head .size{font:600 13.5px var(--sf-font-text);color:var(--muted);padding-left:12px;border-left:1px solid var(--line)}
.rotation-head .grow{flex:1}
.rotation-head .btn{align-self:center}

/* (a long rotation wraps onto a second row instead of scrolling sideways inside its panel, where the last card was cut with no hint;
   fix-uxperf 2026-10-20) */
.queue{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0;padding:0;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--sf-r-panel)}
/* a spot is a station on the rotation's line: the line runs across its top (::before), the station sits on it (::after) */
.spot{--ln:var(--rail-done);flex:0 0 220px;display:flex;flex-direction:column;gap:3px;padding:40px 16px 14px;border-left:1px solid var(--line-soft);min-width:0;position:relative}
.spot::before{content:"";position:absolute;left:0;right:0;top:19px;height:3px;background:var(--ln)}
.spot:first-child::before{left:24px}
.spot:last-child::before{right:auto;width:24px}
.spot:only-child::before{display:none}
.spot::after{content:"";position:absolute;left:16px;top:12px;width:17px;height:17px;border-radius:50%;background:var(--rail-done);box-shadow:0 0 0 3px var(--panel)}
.spot:first-child{border-left:0}
.spot .place{font:600 13px/1.2 var(--sf-font-display);color:var(--muted)}
.spot .tech-name{font:700 21px/1.15 var(--sf-font-display);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot .last{font-size:13.5px;line-height:1.35;color:var(--muted);min-height:1.35em;overflow-wrap:anywhere}
.spot .last.declined{color:var(--ink)}
.spot .turns{display:flex;gap:6px;margin-top:auto;padding-top:10px}  /* (at the foot, lined up across the strip) */
.spot .turns .btn{background:transparent;border-color:var(--line);color:var(--ink);font-weight:600;padding:3px 10px}
.spot .turns .btn:hover:not(:disabled){border-color:var(--muted);background:var(--raised)}

/* Up next: the station the next job lands at, the one Flow mark on the page */
.spot.up{background:color-mix(in srgb,var(--sf-flow) 7%,var(--panel))}
.spot.up::after{left:13px;top:9px;width:23px;height:23px;background:var(--sf-flow);box-shadow:0 0 0 3px var(--panel),0 0 0 8px color-mix(in srgb,var(--sf-flow) 26%,transparent)}
.spot.up .place{color:var(--signal-ink);font-weight:700;font-size:14px}
.spot.up:first-child{border-top-left-radius:var(--sf-r-panel);border-bottom-left-radius:var(--sf-r-panel)}

/* out today: hatched, quiet, at the end; the line there is dotted and the station hollow */
.spot.out{--ln:transparent;background:repeating-linear-gradient(135deg,var(--line-soft) 0 2px,transparent 2px 9px)}
.spot.out::before{background:radial-gradient(circle,var(--rail-off) 1.5px,transparent 2px) 0 50%/9px 3px repeat-x}
.spot.out::after{background:var(--panel);box-shadow:inset 0 0 0 3px var(--rail-off),0 0 0 3px var(--panel)}
.spot.out .tech-name{color:var(--muted)}
.spot.out .place{color:var(--ink);font-weight:700}
.spot.out .turns .btn{background:var(--panel)}

.queue-empty,.queue-note{margin:0;font-size:14px;color:var(--muted)}
.queue-empty{padding:18px;background:transparent;border:1px dashed var(--line);border-radius:var(--sf-r-panel)}
.queue-note{margin-top:8px}
.rotations[aria-busy="true"] .spot .turns .btn{opacity:.5;cursor:progress}

/* ---------- Turns and counts: a flat table, the counts as figures ---------- */
.counts-block{margin-top:8px;max-width:820px}
.counts-block .block-head h3{font:700 20px/1.15 var(--sf-font-display)}
.counts-block .tbl-wrap,.counts-block .empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--sf-r-panel)}
.counts-block .empty{margin:0;padding:18px;color:var(--muted);font-size:14px}
.counts-block .dt td:not(:first-child),.counts-block .dt th:not(:first-child){text-align:right}
.counts-block .dt td:not(:first-child){font:600 16px var(--sf-font-display);font-variant-numeric:tabular-nums}
.counts-block .dt td:first-child{font-weight:600}
.counts-block .dt td.zero{color:var(--muted);font-weight:500}
.counts-block .dt tr.total td{border-top:2px solid var(--line);font-weight:700}
.counts-block .dt tr.total td:not(:first-child){font-weight:700}

/* ---------- side sheets (Edit rotation, Tech list): slide in from the right on the person's action ---------- */
dialog.side-sheet{margin:0 0 0 auto;width:min(500px,100vw);height:100dvh;max-height:100dvh;border-radius:18px 0 0 18px;box-shadow:var(--sf-shadow-float)}
dialog.side-sheet form{min-height:100%;gap:14px;padding:22px 22px 28px}
.sheet-top{display:flex;align-items:center;gap:12px;justify-content:space-between}
.sheet-top h2{font:700 24px/1.1 var(--sf-font-display)}
dialog.side-sheet form[aria-busy="true"]{cursor:progress}
dialog.side-sheet form[aria-busy="true"] .btn{opacity:.6}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="reduce"]) dialog.side-sheet[open]{animation:rot-sheet-in var(--sf-med) var(--sf-ease)}
}
@keyframes rot-sheet-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

.add-row{display:flex;gap:10px;align-items:flex-end}
.add-row .field{min-width:0;flex:1}
.add-row .btn{min-height:40px}

/* the order in the sheet is the same line, upright: a station per tech, the number in it */
.edit-list,.tech-sheet-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.edit-list li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.edit-list .pos{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--rail-done);color:var(--primary-ink);font:700 13px/1 var(--sf-font-display)}
.edit-list li:first-child .pos{background:var(--sf-flow);color:#14102B}
.edit-list .nm{font:700 17px var(--sf-font-display);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edit-list .ctl{display:flex;gap:6px}
.edit-list .remove{color:var(--muted)}
.edit-list .remove:hover{color:var(--flag-ink);border-color:var(--flag)}
.edit-list li.none,.tech-sheet-list li.none{display:block;color:var(--muted);font-size:14px;padding:14px 0}

.tech-sheet-list li{display:grid;grid-template-columns:1fr 76px auto 96px;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.tech-sheet-list .nm{font:700 17px var(--sf-font-display);display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;overflow-wrap:anywhere}
.tech-sheet-list .nm .tag{font:700 11.5px var(--sf-font-text)}
.tech-sheet-list li.off .nm{color:var(--muted)}
.tech-sheet-list .num input{width:100%;min-height:34px;height:34px;padding:4px 8px;font:600 14px var(--sf-font-display)}
/* the Service Scope Tech PIN row under each tech (managers): "PIN set" / "No PIN", the box and Set PIN */
.tech-sheet-list .pin{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tech-sheet-list .pin .tag{font:700 11.5px var(--sf-font-text)}
.tech-sheet-list .pin input{width:9.5em;min-height:34px;height:34px;padding:4px 8px;font:600 14px var(--sf-font-display);letter-spacing:.12em}
.tech-sheet-list .ipads{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--sf-r-control)}
.tech-sheet-list .ipads-h{font:700 12px var(--sf-font-text);letter-spacing:.02em}
.tech-sheet-list .ipads ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tech-sheet-list .ipads li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.tech-sheet-list .ipads .dv-nm{font:600 14px var(--sf-font-text);overflow-wrap:anywhere}
.tech-sheet-list .ipads .dv-at{font:500 12.5px var(--sf-font-text);color:var(--muted);flex:1 1 12em}
.tech-sheet-list .ipads > .btn{align-self:flex-start}
.tech-sheet-list .num-warn{grid-column:1 / -1;margin:0;font:500 13px/1.4 var(--sf-font-text);color:var(--flag-ink)}
#techLockout .lock-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:8px 0 0;padding:8px 12px;border:1px solid var(--sf-amber,var(--safety));border-radius:var(--sf-r-control);background:var(--safety-wash);color:var(--safety-ink);font:500 13px/1.45 var(--sf-font-text)}
#techLockout .lock-box p{margin:0;flex:1 1 240px}
#peopleNotListed .num-warn{margin:8px 0 0;padding:8px 12px;border-radius:var(--sf-r-control);background:var(--safety-wash);color:var(--safety-ink);font:500 13px/1.45 var(--sf-font-text)}
#techOk{margin:8px 0 0}

#askDlg{width:min(460px,calc(100vw - 24px))}
#askDlg p{margin:0}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .spot{flex-basis:190px}
}
@media (max-width:640px){
  .rot-title h2{font-size:26px}
  .rot-controls{width:100%}
  .rot-controls .seg{flex:1 1 auto}
  .rot-controls .seg button{flex:1;padding:5px 8px}
  .rot-legend{gap:4px 16px;margin-bottom:18px}
  /* the line runs top to bottom: the station at the left, place, name and last turn beside it, the turn buttons at the right */
  .queue{flex-direction:column;overflow:visible;width:auto}
  .spot{flex:none;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"place turns" "name turns" "last turns";column-gap:10px;
    border-left:0;border-top:1px solid var(--line-soft);padding:12px 12px 12px 46px}
  .spot::before{left:20px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .spot:first-child::before{left:20px;top:22px}
  .spot:last-child::before{right:auto;width:3px;bottom:auto;height:22px}
  .spot:first-child:last-child::before{display:none}
  .spot::after{left:13px;top:14px}
  .spot.up::after{left:10px;top:11px}
  .spot.out::before{background:radial-gradient(circle,var(--rail-off) 1.5px,transparent 2px) 50% 0/3px 9px repeat-y}
  .spot:first-child{border-top:0}
  .spot .place{grid-area:place}
  .spot .tech-name{grid-area:name;font-size:19px}
  .spot .last{grid-area:last}
  .spot .turns{grid-area:turns;flex-direction:column;margin:0;padding:0;align-self:center}
  .spot.up:first-child{border-radius:var(--sf-r-panel) var(--sf-r-panel) 0 0}
  .edit-list li{grid-template-columns:28px 1fr;row-gap:6px}
  .edit-list .ctl{grid-column:2}
  dialog.side-sheet{border-radius:0}
  dialog.side-sheet form{padding:16px 16px 24px}
  .tech-sheet-list li{grid-template-columns:1fr 64px auto;row-gap:6px}
  .tech-sheet-list [data-active]{grid-column:1 / -1;justify-self:start}
}

/* =====================================================================================================
   Redesign 2026-10-24 (builder D): who is up next is unmistakable; text 15px+, targets 44px+ for the shop's tablet.
   ===================================================================================================== */
.rot-legend{font-size:15px}
.rotation-head .types,.rotation-head .size,.queue-empty,.queue-note,.counts-block .empty{font-size:15px}
.spot{flex-basis:230px}
.spot .place{font-size:15px}
.spot .last{font-size:15px}
.spot .turns .btn{min-height:44px;padding:3px 14px;font-size:15px}
/* Up next: wider, taller, its name large; it is the first thing the eye lands on */
.spot.up{flex-basis:300px;padding-top:46px;background:color-mix(in srgb,var(--sf-flow) 11%,var(--panel));box-shadow:inset 0 -4px 0 var(--sf-flow)}
.spot.up .place{font-size:16px}
.spot.up .tech-name{font-size:30px;line-height:1.05}
.edit-list .nm{font-size:18px}
.edit-list .ctl .btn,.add-row .btn{min-height:44px}
.tech-sheet-list .num input,.tech-sheet-list .pin input{min-height:44px;height:44px;font-size:16px}
.tech-sheet-list .nm .tag,.tech-sheet-list .pin .tag{font-size:13px}
.tech-sheet-list .ipads-h,.tech-sheet-list .ipads .dv-at,.tech-sheet-list .num-warn,#techLockout .lock-box,#peopleNotListed .num-warn{font-size:14px}
.tech-sheet-list .ipads .dv-nm{font-size:15px}
.tech-sheet-list li{grid-template-columns:1fr 84px auto 110px}
@media (max-width:1180px){.spot{flex-basis:210px}.spot.up{flex-basis:260px}}
@media (max-width:640px){
  .spot.up .tech-name{font-size:24px}
  .spot.up{padding-top:12px}
  .spot .turns .btn{min-width:96px}
}

/* =====================================================================================================
   Vertical lists (user request 2026-10-25): each rotation is its own list read top to bottom, up to four side by side
   (fewer columns when the screen is narrower); the phone layout above (<=640px) already stacks them one under another.
   ===================================================================================================== */
@media (min-width:641px){
  .rotations{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:start}
  .rotations:has(.rotation:nth-child(n+5)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .rotation{margin:0}
  .rotation-head{gap:2px 10px}
  .rotation-head .size{border-left:0;padding-left:0}
  .rotation-head .grow{flex-basis:100%;height:0}
  .queue{flex-direction:column;flex-wrap:nowrap;width:auto;max-width:none;overflow:hidden}
  .spot,.spot.up{flex:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"place" "name" "last" "turns";
    border-left:0;border-top:1px solid var(--line-soft);padding:12px 12px 12px 46px}
  .spot.up{padding-top:14px;box-shadow:inset 4px 0 0 var(--sf-flow)}
  .spot:first-child{border-top:0}
  .spot::before{left:20px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .spot:first-child::before{left:20px;top:22px}
  .spot:last-child::before{right:auto;width:3px;bottom:auto;height:22px}
  .spot:only-child::before{display:none}
  .spot::after{left:13px;top:14px}
  .spot.up::after{left:10px;top:11px}
  .spot.out::before{background:radial-gradient(circle,var(--rail-off) 1.5px,transparent 2px) 50% 0/3px 9px repeat-y}
  .spot .place{grid-area:place}
  .spot .tech-name{grid-area:name;font-size:19px}
  .spot.up .tech-name{font-size:24px}
  .spot .last{grid-area:last}
  .spot .turns{grid-area:turns;flex-direction:row;flex-wrap:wrap;margin:0;padding-top:8px}
  .spot.up:first-child{border-radius:var(--sf-r-panel) var(--sf-r-panel) 0 0}
  /* the tops line up: every rotation shares two rows (header, list), so the tallest header sets the row for all of them */
  .rotations{align-items:stretch}
  .rotation{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:22px}
  .rotation-head{margin:0;align-self:start}  /* the names sit on one line; the space below them is the same for every rotation */
  .queue-note{grid-row:3}
}

/* the Rotations / Turns and counts tabs sit under the page head, before the legend */
.rot-tabs{margin:0 0 20px}
.rot-tabs .pt-tab{min-height:44px;font-size:16px;padding:11px 16px 10px}
[role="tabpanel"][hidden]{display:none}