/* Staff · the automation cards, the tiles, the switch, the plan, acts, holds
   and the autoadder queue. Shared parts (g-card, g-tile, tbl, g-pill) come
   from app.css and lanes.css; this file only adds what Staff draws. */

.st-lane .st-sheet{min-width:0}
.st-body{display:flex; flex-direction:column; min-width:0}
.st-body.st-swap{animation:fadein 120ms ease-out both}
.st-story{margin:6px 4px 14px; font:500 15px/22px var(--sans); letter-spacing:-.01em; color:var(--t1)}
.st-sdot{width:7px; height:7px; margin-right:2px; vertical-align:1px}
.st-tabs .g-chip{flex:0 0 auto}

/* ------------------------------------------------------------ tiles */
.st-tiles{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px}
.st-tile{gap:2px; padding:12px 14px 10px; border-radius:var(--r-tile)}
.st-tile .lab{font-size:12px}
.st-tf{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.st-tf .fig{font:700 26px/30px var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.st-tile .st-spark{width:100%; height:22px; margin-top:6px}
button.st-tile:active{transform:scale(.98); transition-duration:90ms}

.st-delta{font:600 12px/16px var(--mono); color:var(--t2); white-space:nowrap}
.st-delta.up{color:var(--green-ink)}
.st-delta.down{color:var(--t2)}
.st-delta.flat{color:var(--t3)}

.st-spark rect{fill:var(--tint); opacity:.75}
.st-spark rect.z{fill:var(--fill); opacity:1}
.st-card.off .st-spark rect{fill:var(--t3); opacity:.45}

/* ------------------------------------------------------------ cards */
.st-depts{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:0 12px; align-items:start}
.st-dept{min-width:0}
.st-dept > .g-h:first-child{margin-top:28px}
.st-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px}
.st-d-messages .st-cards{grid-template-columns:minmax(0, 1fr)}
.st-card{display:flex; flex-direction:column; gap:12px; padding:14px 16px 12px; min-width:0;
  transition:transform 160ms cubic-bezier(.23,1,.32,1), background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring)}
.st-card:hover{transform:translateY(-1px); background:var(--card-hover)}
.st-card.off{background:color-mix(in srgb, var(--card) 60%, transparent)}
.st-card.off .st-vol, .st-card.off .st-meta, .st-card.off .st-health{opacity:.62}
.st-card.halted{box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px color-mix(in srgb, var(--orange) 50%, transparent)}

.st-ch{display:flex; align-items:center; gap:10px; min-width:0}
.st-ch b{font:600 15px/20px var(--sans); letter-spacing:-.01em}
.st-ic{width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:grid; place-items:center; background:var(--tint-soft); color:var(--tint-ink)}
.st-ic svg{width:15px; height:15px}
.st-card.off .st-ic{background:var(--fill3); color:var(--t2)}

.st-health{display:flex; align-items:center; gap:7px; font-size:12px; line-height:16px; color:var(--t2); margin-top:-4px}
.st-health .g-dot{width:7px; height:7px}

.st-vol{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.st-fig{display:flex; align-items:baseline; gap:6px; min-width:0}
.st-fig b{font:700 30px/32px var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.st-fig .unit{font-size:12px; color:var(--t2)}
.st-vol .st-spark{flex:0 0 auto}

.st-meta{display:grid; grid-template-columns:auto auto minmax(0, 1fr); gap:6px 18px; padding-top:10px; border-top:1px solid var(--sep)}
.st-m{display:flex; flex-direction:column; gap:1px; min-width:0}
.st-m .lab{font-size:11px; line-height:14px; color:var(--t3)}
.st-m b{font:600 13px/18px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.st-m b:empty::after{content:"·"; color:var(--t3); font-weight:400}

.st-halt{display:flex; align-items:center; gap:8px; padding:7px 8px 7px 10px; border-radius:10px; background:var(--orange-soft); color:var(--orange-ink); font-size:12px; font-weight:600; min-width:0}
.st-halt .ic svg{width:14px; height:14px; display:block}
.st-halt .g-btn{background:var(--card-solid); color:var(--t1)}
.st-halt .g-btn.armed{background:var(--orange); color:var(--on-bright)}

.st-foot{display:flex; align-items:center; gap:8px; min-width:0; margin-top:-2px}
.st-foot .g-btn.plain{height:24px; padding:0 8px; font-size:12px}

/* the confirm strip under a card's head while the second press is awaited */
.st-confirm{position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; padding:7px 10px; margin-top:-4px; border-radius:10px;
  background:var(--orange-soft); color:var(--orange-ink); font:600 12px/16px var(--sans); animation:fadein 160ms ease-out both}
.st-count{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--orange); transform-origin:left center; animation:st-count 6s linear forwards}
@keyframes st-count{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ------------------------------------------------------------ the switch */
.st-switch{position:relative; width:40px; height:24px; flex:0 0 40px; border-radius:12px; background:var(--fill); box-shadow:inset 0 0 0 1px var(--card-line);
  transition:background 200ms var(--spring)}
.st-switch i{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.06); transition:transform 200ms var(--spring)}
.st-switch[aria-checked="true"]{background:var(--green)}
.st-switch[aria-checked="true"] i{transform:translateX(16px)}
.st-switch.arming{background:var(--orange)}
.st-switch.arming i{transform:translateX(8px)}
.st-switch:disabled{opacity:.4; cursor:not-allowed}
.st-switch:focus-visible{outline:2px solid var(--tint); outline-offset:2px}

/* ------------------------------------------------------------ tables */
.st-tbl{overflow-x:auto}
.st-tbl .tbl th{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; position:static}
.st-tbl .tbl tr:last-child td{border-bottom:0}
.st-why{max-width:360px; min-width:120px}
.st-why .ell{display:block; color:var(--t2)}
.st-act{text-align:right; width:1%; white-space:nowrap}
.st-at{font-size:12px}
.st-plan tr[data-thread=""]{cursor:default}
.st-filt{margin:0 2px 10px}
.st-qhead{margin:2px 2px 12px; gap:10px}
.st-v[data-v="held"]{background:var(--fill2)}
.st-pc{display:flex; flex-direction:column; gap:2px; min-width:0}
.st-psub{display:none; font-size:12px; line-height:16px; color:var(--t2); padding-left:34px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px}

@media (max-width: 1180px){
  .st-tiles{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .st-depts{grid-template-columns:minmax(0, 1fr)}
  .st-d-messages .st-cards{grid-template-columns:repeat(auto-fill, minmax(290px, 1fr))}
}

@media (max-width: 430px){
  .st-story{font-size:14px; line-height:20px; margin:4px 2px 12px}
  .st-tiles{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .st-tiles .st-tile:last-child{grid-column:span 2}
  .st-tf .fig{font-size:22px; line-height:26px}
  .st-cards{grid-template-columns:minmax(0, 1fr)}
  .st-card:hover{transform:none}
  .st-meta{grid-template-columns:auto auto minmax(0, 1fr); gap:6px 14px}
  .st-psub{display:block}
  .st-tbl .st-act{display:none}
  .st-tbl tbody tr{cursor:pointer}
  .st-tbl .tbl td:first-child{max-width:230px}
  .st-sheet .bar .g-seg{order:3}
}

@media (prefers-reduced-motion: reduce){
  .st-card, .st-card:hover, button.st-tile:active{transform:none; transition:none}
  .st-switch, .st-switch i{transition:none}
  .st-body.st-swap, .st-confirm{animation:none}
  .st-count{animation:none; transform:scaleX(.5)}
}