/* ATAD Staff -- the landing page every staff login arrives at. */
:root {
  --navy: #35B9A9; --navy-ink: #35B9A9; --navy-press: #2A9186;
  --accent-ink: #062320;
  --gold: #EBB55A; --cyan: #52C4D0;
  --bg: #0E131D; --surface: #151C29; --raised: #1B2433;
  --ink: #E9ECF2; --muted: #9AA4B7; --faint: #838DA1;
  --line: #263045; --line-soft: #1E2738; --field: #2B3650;
  --bad: #F2877A; --bad-soft: #3A1D1C; --warn: #EBB55A; --warn-ink: #EBB55A; --ok: #6CCB94; --ok-soft: #15301F;
  --soft-gold: #382A12; --soft-gold-ink: #EBB55A;
  --hero-ink: #9AA4B7;
  --shadow: 0 2px 12px rgba(0,0,0,.45);
  --radius: 14px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; min-height: 100dvh; }
a { color: var(--navy-ink); }
button, input, select { font: inherit; color: inherit; }
img { display: block; }
.light-only { display: none; } .dark-only { display: block; }

/* ---------------------------------------------------------------- splash */
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line);
  border-top-color: var(--navy-ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.topbar .mark { width: 34px; height: 34px; }
.brand { font-weight: 800; font-size: 17px; letter-spacing: .04em; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { font-weight: 500; letter-spacing: 0; color: var(--muted); font-size: 14px; margin-left: 6px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.back { border: 0; background: transparent; }
.who { display: none; font-size: 14px; font-weight: 600; color: var(--muted); }
@media (min-width: 760px) { .who { display: block; } }

/* ---------------------------------------------------------------- sign in */
.auth { min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
.auth-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.auth-in { position: relative; z-index: 1; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; }
.auth-logo { display: block; }
.auth-logo img { height: 112px; width: auto; display: block; }
.auth-card { width: 100%; box-sizing: border-box; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px;
  display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--ink); }
.auth-sub { margin: -8px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.auth-foot { width: 100%; max-width: 400px; }
.auth-cap { text-align: center; font-size: 12px; line-height: 16px; color: var(--faint); }

.first-time { padding: 16px 18px; border-radius: 16px; border: 1.5px dashed var(--gold);
  background: var(--soft-gold); display: flex; flex-direction: column; gap: 4px; }
.first-time span { font-size: 13px; font-weight: 600; color: var(--soft-gold-ink); }
.first-time button { all: unset; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--navy-ink); padding: 4px 0; }
.first-time button:focus-visible { outline: 2px solid var(--navy-ink); outline-offset: 2px; border-radius: 4px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 14px; font-weight: 600; }
.field input, .field select, input.input, select.input {
  height: 52px; border: 1.5px solid var(--field); border-radius: 12px; padding: 0 14px;
  font-size: 16px; background: var(--raised); color: var(--ink); width: 100%; min-width: 0; }
.field input:focus, .field select:focus, .input:focus { outline: none; border-color: var(--navy-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-ink) 22%, transparent); }
.hint { font-size: 13px; color: var(--muted); line-height: 19px; margin: 0; }

.btn { height: 52px; border-radius: 14px; border: 0; padding: 0 18px; font-weight: 700; font-size: 16px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; }
.btn.primary { background: var(--navy); color: var(--accent-ink); }
.btn.primary:active { background: var(--navy-press); }
.btn.ghost { background: transparent; color: var(--navy-ink); height: 44px; }
.btn.line { background: var(--surface); color: var(--ink); border: 1px solid var(--field); }
.btn.small { height: 40px; font-size: 14px; border-radius: 10px; padding: 0 14px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, .icon-btn:focus-visible, .tile:focus-visible, .need:focus-visible {
  outline: 3px solid var(--navy-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- home */
.home-page { position: relative; height: 100dvh; overflow: hidden; }
.home-inner { position: relative; z-index: 1; box-sizing: border-box; max-width: 1200px; margin: 0 auto;
  padding: 0 16px calc(10px + env(safe-area-inset-bottom)); height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; }
@media (min-width: 760px) { .home-inner { padding: 0 48px 20px; } }

/* No fixed height here on purpose: height:76px + padding-top:env(safe-area-
   inset-top) meant the inset was carved OUT of the 76px box instead of adding
   to it -- on a phone with a tall status bar / Dynamic Island (a ~55-59px
   inset), that left under 20px for the logo and avatar circle, so both got
   clipped and poked out below the header's bottom border. Padding-based
   sizing instead lets the header grow to whatever the inset needs, and the
   cards grid below (flex: 1 1 auto) simply gets whatever room is left --
   still no scrolling, just an adaptive header. */
.home-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding-top: calc(env(safe-area-inset-top) + 14px); padding-bottom: 14px;
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .home-head { padding-top: calc(env(safe-area-inset-top) + 22px); padding-bottom: 22px;
  margin: 0 -48px; padding-left: 48px; padding-right: 48px; } }
/* logo-dark.png is actually the WHITE single-line lockup (ring + name side by
   side) -- it fits a short horizontal header without wrapping. logo-white.png
   is a taller, two-line stacked lockup meant for the big square logo slot on
   the sign-in screen; used here on mobile it wrapped to two lines and got cut
   off against the header's bottom border. Desktop's taller header still has
   room for the stacked version, so only mobile switches images. */
.home-head .logo-mobile { height: 30px; width: auto; display: block; }
.home-head .logo-desktop { display: none; }
@media (min-width: 760px) {
  .home-head .logo-mobile { display: none; }
  .home-head .logo-desktop { display: block; height: 88px; width: auto; }
}
.home-head-desktop { display: none; }
@media (min-width: 760px) { .home-head-desktop { display: flex; align-items: center; gap: 16px; } }
.home-avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--raised); color: var(--ink);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.home-signout { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; }
.home-avatar-btn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: var(--raised);
  color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (min-width: 760px) { .home-avatar-btn { display: none; } }

.home-greet { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px 0; flex-shrink: 0; }
@media (min-width: 760px) { .home-greet { padding-top: 18px; } }
.home-date { font-size: 12px; font-weight: 600; color: var(--muted); }
.home-greet h1 { margin: 0; font-weight: 700; font-size: 22px; line-height: 27px; color: var(--ink); }
@media (min-width: 760px) { .home-greet h1 { font-size: 26px; line-height: 32px; } }
.home-sub { margin: 1px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }

.section-title { margin: 12px 4px 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink);
  flex-shrink: 0; }
@media (min-width: 760px) { .section-title { margin-top: 18px; font-size: 17px; line-height: 24px; } }

.needs-pills { display: none; gap: 10px; padding-top: 10px; flex-wrap: wrap; flex-shrink: 0; }
@media (min-width: 760px) { .needs-pills { display: flex; } }
.needs-pill { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; min-height: 38px;
  box-sizing: border-box; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.needs-pill .n { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px;
  background: var(--gold); color: var(--bg); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.needs-row { margin-top: 10px; display: flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); flex-shrink: 0; }
@media (min-width: 760px) { .needs-row { display: none; } }
.needs-row .n { min-width: 24px; height: 24px; border-radius: 12px; background: var(--gold); color: var(--bg);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.needs-row .t { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.needs-row .t b { font-size: 13px; font-weight: 700; }
.needs-row .t small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-row svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* flex:1 + min-height:0 lets the grid shrink or grow to fill whatever room is
   left after the header/greeting/footer, so the page never needs to scroll --
   the row height (1fr) adapts automatically to however many apps a person has. */
/* 3 columns on mobile (was 2): with the live roster now at 9 app cards, 2
   columns meant 5 cramped rows -- the icon stayed pinned at a small fixed
   size while lots of empty space sat unused around it in each short row. 3
   columns means 3 taller rows instead, so the icon can actually grow into
   the room each card has. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: 8px; margin-top: 12px; flex: 1 1 auto; min-height: 0; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 18px; } }
.card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; box-sizing: border-box; padding: 8px 4px; min-height: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--navy-ink); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 22px -14px rgba(0,0,0,.6);
  text-decoration: none; color: var(--ink); }
@media (min-width: 760px) { .card { gap: 12px; padding: 16px 18px; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 30px -18px rgba(0,0,0,.6); } }
.card .icon-tile { flex-shrink: 0; }
.card .icon-tile svg { width: 50px; height: 50px; display: block; }
@media (min-width: 760px) { .card .icon-tile svg { width: 64px; height: 64px; } }
.card .card-text { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.card .name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.25; }
@media (min-width: 760px) { .card .name { font-size: 17px; } }
.card .blurb { display: none; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (min-width: 900px) { .card .blurb { display: block; } }
.card.soon { color: var(--ink); opacity: .65; }
.soon-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--soft-gold);
  color: var(--gold); position: absolute; top: 8px; right: 8px; }
@media (min-width: 760px) { .soon-tag { position: static; margin-top: 2px; font-size: 11px; padding: 3px 9px; } }

.home-foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; font-size: 11px; color: var(--muted); text-align: center; flex-shrink: 0; }
@media (min-width: 760px) { .home-foot { flex-direction: row; justify-content: space-between; padding-top: 14px;
  font-size: 12px; text-align: left; } }
.home-foot a { font-weight: 600; text-decoration: none; color: var(--navy-ink); }

/* The one-app screen: a labourer lands straight on his payslips. */
.pay-hero { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.pay-hero .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pay-hero .v { font-size: 28px; font-weight: 800; color: var(--ink); }
.pay-hero .btn { background: var(--navy); color: var(--accent-ink); }
.notice { background: var(--surface); border-radius: 16px; padding: 16px; font-size: 14px; color: var(--muted); line-height: 20px; }

/* ---------------------------------------------------------------- access */
.page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 8px 4px 16px; }
.page-head .t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 800; }
.page-head p { margin: 0; font-size: 14px; color: var(--muted); line-height: 20px; }
.page-head .input { height: 44px; font-size: 15px; flex: 1 1 220px; max-width: 320px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.show-inactive { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: -8px 0 16px; cursor: pointer; user-select: none; }
.show-inactive input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px; }
.chip b { font-weight: 700; }

.people { background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.p-row { display: grid; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); align-items: center;
  grid-template-columns: minmax(0, 1fr); }
.p-row:last-child { border-bottom: 0; }
.p-name { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.p-name > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-name b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-name small { font-size: 12px; color: var(--muted); }
.p-select { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--bad); }
.p-group select { height: 40px; border-radius: 10px; border: 1.5px solid var(--field); background: var(--surface);
  padding: 0 10px; font-size: 14px; font-weight: 600; width: 100%; }
.p-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.p-app { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); cursor: pointer; user-select: none; min-height: 36px; }
.p-app input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.p-app.on { border-color: var(--navy-ink); background: color-mix(in srgb, var(--navy-ink) 10%, transparent); font-weight: 600; }
.p-app.locked { opacity: .7; cursor: default; }
.p-state { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.p-state .s { font-size: 13px; font-weight: 600; }
.s.ok { color: var(--ok); } .s.warn { color: var(--warn-ink); } .s.none { color: var(--muted); font-weight: 500; } .s.bad { color: var(--bad); }
.p-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.line.small.danger { color: var(--bad); border-color: var(--bad-soft); }
.btn.line.small.danger:hover { background: var(--bad-soft); }
.p-head { display: none; }
@media (min-width: 980px) {
  .p-row { grid-template-columns: 1.6fr 1fr 2.6fr 1.3fr; gap: 16px; padding: 14px 22px; }
  .p-head { display: grid; background: var(--raised); font-size: 12px; font-weight: 700; letter-spacing: .06em;
    color: var(--muted); text-transform: uppercase; }
  .p-state { justify-content: flex-start; }
}
.empty { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; }
.p-group-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-group-name { font-size: 14px; }
.p-apps.tappable { cursor: pointer; }
.p-apps .p-app { cursor: inherit; }

/* The access form (Add Person / Edit Access): each app, and under a ticked
   app that has roles, its picker. */
.acc-form { display: flex; flex-direction: column; gap: 16px; }
.acc-apps { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.acc-app { padding: 4px 14px; border-bottom: 1px solid var(--line-soft); }
.acc-app:last-child { border-bottom: 0; }
.acc-tick { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; user-select: none; }
.acc-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); flex: 0 0 auto; }
.acc-tick.on { font-weight: 700; }
.acc-tick input:disabled { opacity: .7; }
.acc-roles { margin: 0 0 12px 32px; padding: 12px; border-radius: 12px; background: var(--raised);
  display: flex; flex-direction: column; gap: 12px; }
.acc-pick { display: flex; flex-direction: column; gap: 12px; }
.acc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-opts .p-app { background: var(--surface); }
.acc-opts .p-app.on { background: color-mix(in srgb, var(--navy-ink) 14%, var(--surface)); }
.p-app.off { opacity: .45; cursor: not-allowed; }
.acc-sub > span { font-size: 13px; }
.acc-sub select { height: 44px; font-size: 15px; background: var(--surface); }
.acc-note { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn-ink); }
.acc-admin { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy-ink); }
.acc-err { margin: 0 0 10px 32px; font-size: 13px; font-weight: 600; color: var(--bad); line-height: 18px; }
.acc-form > .acc-err { margin: 0; }
@media (max-width: 380px) { .acc-roles { margin-left: 0; } .acc-err { margin-left: 0; } }

/* ---------------------------------------------------------------- sheet */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.sheet-panel { position: relative; background: var(--surface); width: 100%; max-width: 520px; max-height: 92vh;
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column; }
@media (min-width: 640px) { .sheet { align-items: center; } .sheet-panel { border-radius: 22px; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px 20px; }
.sheet-head h2 { margin: 0; font-size: 19px; flex: 1; }
.sheet-body { overflow: auto; padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.sheet-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; }
.sheet-foot .btn { flex: 1; }

.picker { position: relative; }
.pick-list { background: var(--raised); border-radius: 12px; margin-top: 6px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pick-list button { all: unset; box-sizing: border-box; width: 100%; padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--line); }
.pick-list button:last-child { border-bottom: 0; }
.pick-list button:focus-visible, .pick-list button:hover { background: color-mix(in srgb, var(--navy-ink) 12%, transparent); }
.pick-list small { font-size: 12px; color: var(--muted); }
.picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.picked div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .picked small { color: var(--muted); font-size: 12px; }

.code-box { font-size: 30px; font-weight: 800; letter-spacing: 3px; text-align: center; padding: 18px;
  border-radius: 14px; background: var(--raised); color: var(--ink); user-select: all; }

/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--raised); color: var(--ink); border: 1px solid var(--line); padding: 12px 16px;
  border-radius: 12px; font-size: 14px; max-width: 480px; box-shadow: 0 8px 24px rgba(0,0,0,.4); pointer-events: auto; }
.toast.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-soft); }
.toast.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }

/* Phone notifications: one row under the apps, same shape as the needs row but
   shown at every width (it is the only way to turn them on). */
.push-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%;
  box-sizing: border-box; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; flex-shrink: 0; }
.push-row.pri { border-color: var(--gold); }
.push-row:disabled { opacity: .6; }
.push-row .t { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.push-row .t b { font-size: 13.5px; font-weight: 700; }
.push-row .t small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.push-row svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.push-row.pri > span:first-child svg { stroke: var(--gold); }
.push-row > span:last-child svg { width: 16px; height: 16px; stroke: var(--muted); }
@media (min-width: 760px) { .push-row { max-width: 420px; align-self: center; margin-top: 18px; } }
.sheet-text { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; }
.sheet-text p { margin: 0; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
/* Tools role on a Manage access row (only for people with Tools) */
.tool-role { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 4px 3px 10px; border-radius: 999px;
  border: 1px solid var(--navy-ink); color: var(--navy-ink); min-height: 36px; }
.tool-role > span { font-weight: 600; opacity: .8; }
.tool-role select { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 13px; padding: 4px 6px; border-radius: 999px; }
.tool-role.locked { padding-right: 12px; opacity: .8; }