/* Staff and shifts + Applications pages (staff.js). Uses the dashboard's tokens only. */
.rq-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.rq-row > b{font-weight:600}
.rq-row > .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.with-unit{display:flex;align-items:center;gap:8px}
.with-unit .inp{width:96px}
.with-unit .unit{color:var(--ink-3);font-size:.8125rem}
.ccform{width:min(460px,calc(100vw - 32px));padding:0}
.ccform h2{padding:20px 20px 0}
.ccform > p{padding:6px 20px 0;margin:0}
.ccform-body{display:grid;gap:14px;padding:16px 20px 0}
.ccform-row{display:grid;gap:6px}
.ccform-row .lab{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.ccform .ft{display:flex;justify-content:flex-end;gap:8px}
.app-name .inp{font-size:1.125rem;font-weight:700;max-width:320px}
.app-q .head .rank{min-width:20px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.app-q textarea.inp{flex:1;min-height:44px}
.app-subs{display:grid;gap:8px}
.app-sub{border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--bg-2)}
.app-sub-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}
.app-sub-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:var(--radius-sm)}
.app-sub-head .who{flex:1;min-width:0;display:grid;gap:2px}
.app-sub-head .who small{color:var(--ink-3)}
.app-sub-body{border-top:1px solid var(--rule);padding:12px 14px;display:grid;gap:12px}
.app-qa{display:grid;gap:4px;margin:0}
.app-qa dt{font-weight:600;font-size:.875rem}
.app-qa dd{margin:0 0 8px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:640px){
  .rq-row{grid-template-columns:1fr}
  .app-sub-head{flex-wrap:wrap}
}
.shift-list,.app-sub{min-width:0}
.shift-list .tt-list-head{flex-wrap:wrap;gap:8px}
.shift-list .tools{display:flex;flex-wrap:wrap;gap:8px}
.shift-list .tools .inp{flex:1 1 180px;min-width:0;width:auto}
/* a wide table scrolls inside the card instead of widening the page */
.shift-list .scroll-x{width:0;min-width:100%}
.shift-live .rowline{flex-wrap:wrap;row-gap:8px}
.shift-live .rowline .who{min-width:0;flex:1 1 140px}