/* Settings: roster, picker, people, devices. Moved out of shell/app.css (restructure step 8b); index.html loads it right after calendar.css, where these rules sat in app.css. */
/* Settings · Roster (Donald, 2026-09-13; settings.js renderRoster). Kept
   plain: a shift head in the shift's colour, CREW in tiny caps, a name box
   and a vacant chip per seat. */
.set-roster-shift{
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:0.14em;
  margin:12px 0 2px;
}
.set-roster-crew{
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:0.14em;
  color:var(--muted);opacity:0.7;margin:6px 0 4px;
}
.set-roster-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
/* Donald, 2026-09-13 (later): the name is a BUTTON that opens the picker
   sheet, drawn as the text box it replaced so the list reads the same; the
   rank sits after it in tiny mono caps, dimmed — `Andrew Tyson · CPT`. */
.set-roster-row .set-roster-name{
  flex:1;min-width:0;margin:0;display:flex;align-items:baseline;gap:8px;
  text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.set-roster-row .set-roster-name:active{box-shadow:0 0 0 1.5px var(--acc) inset}
.set-roster-nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-roster-rank{
  flex:none;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:0.1em;color:var(--muted);opacity:0.85;
}
.set-roster-rank::before{content:'·';margin-right:8px;opacity:0.6}
.set-roster-row.vacant .set-roster-name{font-style:italic;color:var(--muted)}
/* Stage 6a: a member's view of the roster — the name is a label, not a picker. */
.set-roster-row.ro .set-roster-name{cursor:default;opacity:0.85}
.set-roster-row.vacant .set-roster-rank{font-style:normal}
/* The action after the name: `mark vacant` quiet on a filled seat, `fill
   seat` in the accent on a vacant one (Donald, 2026-09-13: the old `vacant`
   pill on every row read as a state, not an action). */
.set-roster-act{
  flex:none;min-height:44px;background:var(--bg);border:none;border-radius:12px;
  padding:11px 10px;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:0.08em;color:var(--muted);cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.set-roster-act:active{color:var(--text)}
.set-roster-act.fill{
  background:rgba(245,166,35,.14);color:var(--acc);
  box-shadow:0 0 0 1.5px var(--acc) inset;
}
/* The picker sheet — #cal-ck's anatomy: scrim, rounded top, sticky head,
   the search field, the list as the only scrolling part, a sticky foot for
   the new-hire row. Above the Settings pane, same layer as the other sheets. */
#set-pick-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200}
#set-pick{
  position:fixed;bottom:0;left:0;right:0;z-index:201;
  background:var(--bg2);border-radius:20px 20px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.5);
  height:88vh;max-height:88vh;display:flex;flex-direction:column;
}
#set-pick[hidden],#set-pick-overlay[hidden]{display:none}
#set-pick .cal-sheet-head{border-bottom:none;padding-bottom:4px}
.set-pick-sub{
  flex-shrink:0;padding:0 20px 10px;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.set-pick-search{flex-shrink:0;padding:0 20px 10px;border-bottom:1px solid var(--bdr)}
.set-pick-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 20px 12px}
.set-pick-empty{padding:18px 4px;font-size:0.875rem;color:var(--muted);line-height:1.45}
.set-pick-row{
  display:flex;align-items:baseline;gap:8px;width:100%;min-height:48px;
  padding:6px 0;background:none;border:none;border-bottom:1px solid var(--bdr);
  text-align:left;color:var(--text);font-family:var(--font);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.set-pick-row:active{background:var(--card)}
.set-pick-row.cur .set-pick-name{color:var(--acc)}
.set-pick-name{flex:0 1 auto;min-width:0;font-size:0.9375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-pick-rank-tag{
  flex:none;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:0.1em;color:var(--muted);
}
.set-pick-seen{
  flex:none;margin-left:auto;font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:0.04em;color:var(--muted);opacity:0.7;white-space:nowrap;
}
.set-pick-foot{
  flex-shrink:0;padding:10px 20px calc(env(safe-area-inset-bottom,20px) + 12px);
  border-top:1px solid var(--bdr);
}
.set-pick-foot-h{
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:0.14em;
  color:var(--muted);opacity:0.7;margin-bottom:8px;
}
.set-pick-new{display:flex;gap:8px;align-items:stretch}
.set-pick-newbtn{
  flex:1;min-width:0;display:flex;align-items:center;gap:0;
  background:var(--bg);border:none;border-radius:12px;padding:11px 13px;
  color:var(--text);font-family:var(--font);font-size:0.875rem;text-align:left;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 1.5px var(--acc) inset;
}
.set-pick-newbtn:disabled{box-shadow:none;color:var(--muted);cursor:default}
.set-pick-newlbl{flex:none;white-space:pre}
.set-pick-newname{flex:0 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-pick-newbtn:not(:disabled) .set-pick-newname{color:var(--acc)}
.set-pick-rank{
  flex:none;width:84px;font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:0.08em;font-size:0.8125rem;text-align:center;
}
/* Settings · People (Donald, 2026-09-14; accounts stage 5, settings.js
   loadPeople). Under a captain's sign-in each seat row carries a chip under
   the name saying where its account stands, and a `…` for the actions. The
   chip wraps to its own line inside the name button so the row's width
   does not change for anyone who does not get one. */
.set-roster-name.has-chip{flex-wrap:wrap;row-gap:4px}
.set-roster-chip{
  flex:0 0 100%;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.set-roster-chip.ok{color:var(--assist)}
.set-roster-chip.warn{color:var(--acc)}
.set-roster-chip.err{color:var(--fire)}
.set-roster-chip.off{color:var(--muted);opacity:0.8}
.set-roster-more{
  flex:none;width:44px;min-height:44px;background:var(--bg);border:none;border-radius:12px;
  color:var(--muted2);font-size:1.125rem;font-weight:700;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.set-roster-more:active{color:var(--text)}
.set-roster-devlink{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  margin-top:10px;padding:12px 14px;background:var(--bg);border:none;border-radius:12px;
  color:var(--text);font-family:var(--font);font-size:0.875rem;font-weight:600;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.set-roster-devlink span{color:var(--muted);font-size:1.125rem}
/* The action sheet: the scope chooser's anatomy (#cal-scope) with the
   options built per seat; `danger` is the delete red, `accent` the one
   button that is the point of the sheet. */
#set-act-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:210}
#set-act{
  position:fixed;bottom:0;left:0;right:0;z-index:211;
  background:var(--bg2);border-radius:20px 20px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.5);
  padding:22px 20px calc(env(safe-area-inset-bottom,20px) + 12px);
  animation:calConfirmUp .18s ease-out;
}
#set-act[hidden],#set-act-overlay[hidden]{display:none}
#set-act .cal-confirm-m{word-break:break-word}
#set-act .cal-scope-opt.danger{color:var(--fire);border-color:rgba(236,91,82,0.35)}
#set-act .cal-scope-opt.accent{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}
#set-act-email{font-size:1rem;margin:0}
/* The link, once: a wrapping mono box and Copy / Share side by side. */
.set-link-box{
  background:var(--bg);border-radius:12px;padding:12px 14px;
  font-family:var(--font-mono);font-size:.8rem;line-height:1.5;color:var(--text);
  word-break:break-all;-webkit-user-select:all;user-select:all;
}
.set-link-btns{display:flex;gap:8px}
.set-link-btn{
  flex:1;min-height:50px;background:var(--card);border:1px solid var(--pill);border-radius:12px;
  color:var(--text);font-family:var(--font);font-size:0.9375rem;font-weight:600;
  cursor:pointer;touch-action:manipulation;
}
.set-link-btn.accent{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}
/* The devices list: the picker sheet's shell, a read-only row per phone. */
#set-dev-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200}
#set-dev{
  position:fixed;bottom:0;left:0;right:0;z-index:201;
  background:var(--bg2);border-radius:20px 20px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.5);
  max-height:88vh;display:flex;flex-direction:column;
  padding-bottom:calc(env(safe-area-inset-bottom,20px) + 4px);
}
#set-dev[hidden],#set-dev-overlay[hidden]{display:none}
#set-dev .cal-sheet-head{border-bottom:none;padding-bottom:4px}
.set-dev-row{padding:10px 4px;border-bottom:1px solid var(--bdr)}
.set-dev-row:last-child{border-bottom:none}
.set-dev-main{display:flex;align-items:center;gap:8px;min-width:0}
.set-dev-name{font-size:0.9375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-dev-row.unbound .set-dev-name{color:var(--muted2)}
.set-dev-tag{
  flex:none;font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--acc);background:rgba(245,166,35,.14);padding:2px 6px;border-radius:6px;
}
.set-dev-tag.err{color:var(--fire);background:rgba(236,91,82,.14)}
.set-dev-sub{font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.4}
/* Signed in as: the name opens Your account (account.html). Donald, 2026-10-16. */
.set-me-link{flex:1;min-width:0;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.set-me-link:active{opacity:.7}
.set-me-chev{color:var(--muted);margin-left:2px}