/* staff.css (STAFF) — styles for Part B: the staffing questions, org chart and cost, who handles what, postings, run sheet and safety plan.
   Class prefix st-. Tokens and shared classes (.btn .seg .chip .card .tbl .flag .pill .meter .kv .f .row .hint .muted) come from app.css.
   Phone first: everything stacks at 320 px; two columns from 640 px. Colour is never the only signal: every verdict, type and level is also a word. */
.st-panel{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.st-panel>*{min-width:0}
.st-lede{margin:0;max-width:64ch}
.st-h{margin:14px 0 4px;font-family:var(--label,inherit);letter-spacing:.06em;font-size:1.15rem}
.st-note{margin:0;color:var(--muted);font-size:14px;max-width:70ch}
.st-soon{padding:18px;border:1px dashed var(--line-2);border-radius:8px;color:var(--muted)}

/* size-class band */
.st-band{border:1px solid var(--line-2);border-left-width:8px;border-radius:8px;padding:12px 14px;background:var(--panel-2)}
.st-band[data-tier=small]{border-left-color:#2a9d8f}
.st-band[data-tier=mid]{border-left-color:#5aa8ff}
.st-band[data-tier=large]{border-left-color:#f2b33d}
.st-band[data-tier=xl]{border-left-color:#c77dff}
.st-band__k{font-family:var(--label,inherit);letter-spacing:.1em;color:var(--muted);font-size:14px;margin:0}
.st-band__t{font-family:var(--display,inherit);font-size:1.3rem;margin:2px 0 6px}
.st-band ul{margin:4px 0 8px;padding-left:20px}
.st-two{display:grid;grid-template-columns:1fr;gap:10px}
.st-fine h4,.st-notfine h4{margin:0 0 2px;font-family:var(--label,inherit);letter-spacing:.08em;font-size:15px}
.st-fine h4{color:var(--ok)} .st-notfine h4{color:var(--bad)}

/* questions */
.st-q{padding:12px 0;border-top:1px solid var(--line)}
.st-q__ask{margin:0 0 2px;font-weight:600}
.st-q__why{margin:0 0 8px;color:var(--muted);font-size:14px}
.st-q__blank{margin:6px 0 0;color:var(--faint);font-size:13.5px}
.st-q .unit{margin-left:8px;color:var(--muted)}

/* cost summary */
.st-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.st-sum__i{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.st-sum__i b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums}
.st-sum__i span{color:var(--muted);font-size:13.5px}
.st-split{display:flex;width:100%;height:26px;border-radius:5px;overflow:hidden;border:1px solid var(--line-2);background:var(--panel-3)}
.st-split>i{display:block;height:100%;min-width:0}
.st-split .p0{background:#1f3a5f} .st-split .p1{background:#7b3fa0} .st-split .p2{background:#c9a227} .st-split .p3{background:#2a9d8f} .st-split .p4{background:#8a8a8a}
.st-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.st-key i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.st-key .p0{background:#1f3a5f} .st-key .p1{background:#7b3fa0} .st-key .p2{background:#c9a227} .st-key .p3{background:#2a9d8f} .st-key .p4{background:#8a8a8a}
.st-row-l{margin:10px 0 2px;font-family:var(--label,inherit);letter-spacing:.08em;font-size:15px;color:var(--muted)}
.st-balance{padding:10px 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel-2)}
.st-balance[data-band=lean],.st-balance[data-band=heavy]{border-color:var(--warn)}
.st-balance[data-band=in]{border-color:var(--ok)}

/* touch targets: every button in Part B is at least 44 px tall (QA wave 2) */
.st-panel .btn.sm,.st-panel .btn,.st-panel .chip,.st-panel .seg button{min-height:44px}
.st-panel input[type=text],.st-panel select{min-height:44px;box-sizing:border-box}
.st-lineitem input{min-height:44px}
.st-split-when{margin:6px 0 2px;padding:8px 10px;border-left:3px solid var(--line-2);border-radius:4px}
.st-panel .linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.st-panel details>summary{display:list-item;min-height:44px;padding:10px 0;box-sizing:border-box;cursor:pointer}
.st-panel .seg button small{display:block;font-weight:400}

/* the roster: one compact tappable row per role; tap a row to edit it */
.st-role{padding:0;gap:0;overflow:hidden}
.st-role>details>summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 12px;min-height:56px}
.st-role>details>summary::-webkit-details-marker{display:none}
.st-role>details>summary::after{content:"Edit";grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--label,inherit);letter-spacing:.1em;font-size:14px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:6px 12px;min-height:36px;display:flex;align-items:center}
.st-role>details[open]>summary::after{content:"Done"}
.st-role__t{font-weight:600;min-width:0;overflow-wrap:anywhere}
.st-role__s{color:var(--muted);font-size:13.5px;grid-column:1}
.st-role__body{display:grid;gap:10px;padding:4px 12px 12px;border-top:1px solid var(--line)}
.st-role .st-hats>summary{min-height:44px}
.st-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st-tools select{width:auto;min-width:200px;flex:1 1 220px}
.st-roles{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.st-role{border:1px solid var(--line-2);border-radius:10px;padding:12px;background:var(--panel-2);display:grid;gap:10px}
.st-role__h{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.st-role__h .f{flex:1 1 220px;margin:0}
.st-role__g{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.st-role__g .wide{grid-column:1 / -1}
.st-role label.f{margin:0}
.st-role .lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.st-role__hats{display:flex;flex-wrap:wrap;gap:6px}
.st-role__hats .chip{min-height:44px;padding:2px 11px;font-size:14px}
.st-role__line{margin:0;font-size:13.5px;color:var(--muted)}
.st-role__line[data-status=below]{color:var(--warn)}
.st-role__line[data-status=above]{color:var(--warn)}
.st-typ{display:inline-block;padding:1px 9px;border-radius:11px;border:1px solid var(--line-2);font-size:13px}
.st-typ.salaried{border-color:#2b6cb0} .st-typ.hourly{border-color:#2f855a} .st-typ.contract{border-color:#b7791f} .st-typ.pershow{border-color:#6b46c1}

/* coverage and hats */
.st-cov{display:grid;gap:8px}
.st-cov__i{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.st-cov__i b{min-width:9ch}
.st-vd{display:inline-block;padding:1px 10px;border-radius:11px;font-family:var(--label,inherit);letter-spacing:.1em;font-size:14px;border:1px solid var(--line-2);white-space:nowrap}
.st-vd.covered,.st-vd.ok,.st-vd.best{border-color:var(--ok);color:var(--ok)}
.st-vd.stretched,.st-vd.warn,.st-vd.partial{border-color:var(--warn);color:var(--warn)}
.st-vd.gap,.st-vd.bad,.st-vd.wrong,.st-vd.fix{border-color:var(--bad);color:var(--bad)}

/* the drawn chart */
.st-chart{background:#fff;color:#222;border-radius:8px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-chart{position:relative;max-width:100%;overflow-x:auto}
@media (max-width:899px){.st-chart__in{min-width:var(--st-chart-min,780px)}}
.st-chart svg{display:block;width:100%;height:auto}
.st-scrollhint{display:block;margin:4px 0 0;font-weight:600;color:var(--ink)}
.st-scrollhint:before{content:"\2194  "}
@media (min-width:900px){.st-scrollhint{display:none}}
.st-chart--empty{padding:26px;text-align:center;color:#555}
.st-alt{margin-top:6px}
.st-alt pre{white-space:pre-wrap;margin:6px 0 0;font-size:13px;color:var(--muted)}

/* who handles what */
.st-deck{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-tile{display:grid;gap:4px;text-align:left;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);cursor:pointer;min-height:44px}
.st-tile[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.st-tile__n{font-family:var(--label,inherit);letter-spacing:.1em;color:var(--muted);font-size:14px}
.st-tile__t{font-weight:600}
.st-pills{display:flex;flex-wrap:wrap;gap:6px}
.st-pills button{min-height:44px;padding:2px 14px;border-radius:22px;border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer}
.st-pills button[aria-pressed=true]{background:var(--ink);color:#000;border-color:var(--ink)}
.st-situation{padding:12px 14px;border-left:6px solid var(--red);background:var(--panel-2);border-radius:0 8px 8px 0;font-size:1.05rem}
.st-steps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.st-steps li{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.st-steps li[data-status=gap]{border-color:var(--bad)}
.st-steps li[data-status=stretched]{border-color:var(--warn)}
.st-wi{display:grid;gap:8px}
.st-wi__i{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.st-wi__i[aria-current=true]{border-color:var(--ink)}
.st-drill{display:grid;gap:12px}
.st-dots{display:flex;gap:6px}
.st-dots i{width:26px;height:8px;border-radius:4px;background:var(--panel-3);display:block}
.st-dots i.on{background:var(--ink)} .st-dots i.best{background:var(--ok)} .st-dots i.partial{background:var(--warn)} .st-dots i.wrong{background:var(--bad)}
.st-opts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.st-opt{display:block;width:100%;text-align:left;padding:10px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);cursor:pointer;min-height:44px}
.st-opt[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.st-opt small{display:block;color:var(--muted)}
.st-opt:disabled{cursor:default;opacity:.9}
.st-fb{padding:10px 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--panel)}
.st-fb[data-grade=best]{border-color:var(--ok)} .st-fb[data-grade=partial]{border-color:var(--warn)} .st-fb[data-grade=wrong]{border-color:var(--bad)}
.st-fb p{margin:0 0 6px}
.st-lines{display:grid;gap:10px}

/* flags beside lines */
.st-ck{margin:4px 0 0;padding:0;list-style:none;font-size:14px}
.st-ck li{padding:2px 0}
.st-ck li.fix{color:var(--bad)} .st-ck li.warn{color:var(--warn)}
.st-wc{color:var(--muted);font-size:13.5px}
.st-wc[data-ok=true]{color:var(--ok)}

/* postings */
.st-post{border:1px solid var(--line-2);border-radius:10px;padding:12px;background:var(--panel-2);display:grid;gap:10px}
.st-post__chk{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.st-post__chk[data-status=below]{border-color:var(--bad)} .st-post__chk[data-status=thin],.st-post__chk[data-status=wide],.st-post__chk[data-status=above]{border-color:var(--warn)} .st-post__chk[data-status=in]{border-color:var(--ok)}
.st-lineitem{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:start;margin:4px 0}

/* run sheet */
.st-run{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.st-run__r{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:var(--panel-2);display:grid;gap:8px}
.st-run__r[data-bad=true]{border-color:var(--bad)}
.st-run__top{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px}
.st-run__top>label:nth-child(3){grid-column:1 / -1}

@media (min-width:640px){
  .st-two{grid-template-columns:1fr 1fr}
  .st-sum{grid-template-columns:repeat(4,1fr)}
  .st-role__g{grid-template-columns:repeat(4,1fr)}
  .st-role__g .wide{grid-column:span 2}
  .st-deck{grid-template-columns:repeat(3,1fr)}
  .st-run__top{grid-template-columns:110px 1fr 1fr}
  .st-run__top>label:nth-child(3){grid-column:auto}
  .st-wi{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .st-deck{grid-template-columns:repeat(4,1fr)}
}

/* the cost of the people, always beside its share of expenses */
.st-strip{padding:10px 14px;border:1px solid var(--line-2);border-left-width:8px;border-radius:8px;background:var(--panel-2)}
.st-strip p{margin:0 0 4px}.st-strip p:last-child{margin:0;font-weight:600}
.st-strip[data-band=lean],.st-strip[data-band=heavy],.st-strip[data-band=over]{border-left-color:var(--warn)}
.st-strip[data-band=in]{border-left-color:var(--ok)}
.st-pairs{margin:8px 0 0}
.st-pairs>summary{font-weight:600}
.st-pairs ul{margin:4px 0 8px;padding-left:20px}

/* Your hiring policy: the section under the three postings on the Job postings step (HIRING round). Phone first: one column under 520 px, every target 44 px. */
.st-hire{margin-top:8px}
.st-hire__q{display:grid;gap:6px}
.st-hire__n{display:grid;grid-template-columns:1fr;gap:8px 10px}
.st-hire .chips .chip,.st-hire .seg button,.st-hire .btn{min-height:44px}
.st-hire textarea{width:100%;box-sizing:border-box}
.st-hire [data-out=decider][data-ok=true],.st-hire [data-out=stepsN][data-ok=true]{color:var(--ok)}
.st-hire [data-out=decider][data-ok=false],.st-hire [data-out=stepsN][data-ok=false]{color:var(--warn)}
@media (min-width:520px){ .st-hire__n{grid-template-columns:1fr 1fr} }