/* ATAD Apps portal -- shared pieces and the shell (Staff Portal Redesign, Phase 2). Look = docs/mockups/portal-redesign/index.html.
   Classes are prefixed pu-. Tokens (dark and light) live in app.css. Loaded after app.css, so the old pieces below are restyled to match the mockup. */

/* ------------------------------------------------------------------ the old pieces, restyled like the mockup */
.btn { min-height: 44px; height: auto; border-radius: 11px; padding: 10px 16px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:active, .btn.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); min-height: 44px; }
.btn.line { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.small, .btn.line.small { min-height: 36px; height: auto; padding: 6px 12px; font-size: 13px; border-radius: 11px; }
.btn.line.small.danger, .btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.field input, input.input { height: 46px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
.field input:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.auth-card, .first-time { border-radius: 14px; }
.auth-card h1 { font-size: 20px; font-weight: 800; }

/* the old bottom sheet is now the mockup's window: centred on a PC, a bottom sheet on a phone */
.sheet-backdrop { background: var(--scrim); }
.sheet-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; width: min(600px, 92%); max-width: 600px; max-height: 88%; box-shadow: var(--shadow-lg); }
.sheet-head { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.sheet-head h2 { font-size: 17px; font-weight: 800; }
.sheet-head .icon-btn { width: 42px; height: 42px; }
.sheet-body { padding: 16px 18px; gap: 14px; }
.sheet-foot { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 639px) { .sheet { align-items: flex-end; } .sheet-panel { width: 100%; max-width: none; border-radius: 20px 20px 0 0; max-height: 92%; } }
.toasts { bottom: calc(20px + env(safe-area-inset-bottom)); }
body.has-tabs .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-tabs .toasts { bottom: 28px; } }
.toast { background: var(--ink); color: var(--bg); border: 0; font-weight: 700; padding: 11px 16px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-lg); }
.toast.bad { background: var(--bad); color: #fff; }
.toast.ok { background: var(--ok); color: var(--bg); }

/* ------------------------------------------------------------------ shell */
.pu-i { display: inline-flex; flex-shrink: 0; }
.pu-app { position: fixed; inset: 0; display: flex; background: var(--bg); color: var(--ink); }
.pu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.pu-side { display: none; width: 236px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); flex-direction: column; padding: 16px 12px; gap: 4px; overflow-y: auto; }
.pu-brand { padding: 2px 0 16px; }
.pu-lockup { display: inline-flex; align-items: center; justify-content: center; background: #0E131D; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.pu-lockup img { height: 24px; width: auto; max-width: none; flex-shrink: 0; display: block; }
.pu-side .pu-lockup { width: 100%; }
.pu-nav { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; text-align: left; width: 100%; text-decoration: none; }
.pu-nav:hover { background: var(--raised); color: var(--ink); }
.pu-nav[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
.pu-nav .n { margin-left: auto; background: var(--gold); color: #1E1606; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
.pu-grow { flex: 1; }
.pu-sep { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 14px 10px 4px; }
.pu-mebtn { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.pu-mebtn b { display: block; font-size: 14px; font-weight: 700; }
.pu-mebtn small { display: block; color: var(--muted); font-size: 12px; }
.pu-mebtn > span:last-child { min-width: 0; }
.pu-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); flex-shrink: 0; }
.pu-mebtn .pu-av { background: var(--surface); }

.pu-hdr { display: flex; align-items: center; gap: 10px; padding: calc(14px + var(--atad-sat, env(safe-area-inset-top, 0px))) 16px 14px; border-bottom: 1px solid var(--line-soft); background: var(--bg); flex-shrink: 0; }
.pu-hdr h1 { margin: 0; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; text-wrap: balance; }
.pu-mark { width: 30px; height: 30px; }
.pu-hl { display: inline-flex; }
.pu-spacer { flex: 1; }
.pu-spacer { flex: 1; }
.pu-back { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; min-height: 44px; }
.pu-ib { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; cursor: pointer; position: relative; color: var(--ink); flex-shrink: 0; padding: 0; }
.pu-bell { display: flex; align-items: center; }
.pu-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 18px; -webkit-overflow-scrolling: touch; }
.pu-scroll > * { flex-shrink: 0; }
.pu-scroll.fixed { overflow: hidden; gap: 14px; }

.pu-tabs { display: flex; border-top: 1px solid var(--line); background: var(--surface); padding: 6px 6px calc(10px + var(--atad-sab, env(safe-area-inset-bottom, 0px))); flex-shrink: 0; }
.pu-tab { flex: 1; border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 6px 0; cursor: pointer; position: relative; min-height: 48px; font-family: inherit; }
.pu-tab[aria-current="true"] { color: var(--accent); }
.pu-tab .n { position: absolute; top: 2px; left: calc(50% + 6px); background: var(--gold); color: #1E1606; border-radius: 999px; font-size: 10px; font-weight: 800; padding: 0 5px; }
.pu-medot { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }
@media (max-width: 899px) { .pu-pc { display: none !important; } }

@media (min-width: 900px) {
  .pu-side { display: flex; }
  .pu-tabs { display: none; }
  .pu-hdr { padding: 14px 22px; }
  .pu-scroll { padding: 20px 22px 28px; }
  .pu-ph { display: none !important; }
}

/* Admin Mode strip (D1) */
.pu-strip { display: flex; gap: 10px; align-items: center; background: var(--gold-soft); color: var(--gold); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 13px; }
.pu-strip b { font-weight: 700; white-space: nowrap; }
.pu-strip-t { color: var(--ink); font-weight: 500; flex: 1; min-width: 0; }
.pu-scroll.fixed .pu-strip { padding: 7px 12px; font-size: 12px; }
.pu-foot { color: var(--faint); font-size: 12px; text-align: center; padding-top: 6px; }

/* ------------------------------------------------------------------ pieces */
.pu-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.pu-card.ny { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pu-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pu-h { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pu-sec { display: flex; flex-direction: column; gap: 10px; }
.pu-greet h2 { margin: 0; font-size: 22px; font-weight: 800; }
.pu-greet p { margin: 4px 0 0; color: var(--muted); }
.pu-count { background: var(--gold); color: #1E1606; border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 1px 8px; }
.pu-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: var(--raised); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pu-chip.ac { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pu-chip.gd { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.pu-chip.bd { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pu-chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pu-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 11px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; white-space: nowrap; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pu-btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pu-btn.pri:hover { background: var(--accent-press); }
.pu-btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.pu-btn.sm { padding: 6px 12px; min-height: 36px; font-size: 13px; }
.pu-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pu-btn[aria-busy="true"] { cursor: progress; }
.pu-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pu-strip .pu-btn { background: var(--surface); color: var(--ink); }

.pu-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--field); border-radius: 12px; padding: 0 12px; height: 44px; color: var(--muted); }
.pu-search input { border: 0; background: none; outline: 0; flex: 1; height: 100%; font-size: 16px; color: var(--ink); min-width: 0; font-family: inherit; }
.pu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pu-fchip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; min-height: 36px; white-space: nowrap; font-family: inherit; }
.pu-fchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pu-fchip i { font-style: normal; opacity: .8; margin-left: 4px; }
@media (max-width: 899px) { .pu-chips:not(.wrap) { flex-wrap: nowrap; overflow-x: auto; } }

.pu-rows { display: flex; flex-direction: column; }
.pu-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--line-soft); background: none; width: 100%; text-align: left; color: var(--ink); min-height: 56px; font-family: inherit; font-size: 14px; }
button.pu-row { cursor: pointer; }
.pu-row:first-child { border-top: 0; }
button.pu-row:hover { background: var(--raised); }
.pu-tx { flex: 1; min-width: 0; }
.pu-tx b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-tx small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-chev { color: var(--faint); display: inline-flex; }
.pu-prow-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pu-empty { padding: 22px 14px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pu-empty b { color: var(--ink); }

/* app icons and the red count */
.pu-ico { position: relative; display: grid; place-items: center; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); flex-shrink: 0; }
.pu-bdg { position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--bg); box-sizing: border-box; }
:root[data-theme="light"] .pu-bdg { background: var(--bad); }
.pu-tile .pu-bdg { border-color: var(--surface); }
.pu-row .pu-ico { box-shadow: none; }

/* tiles (PC) and the phone launcher */
.pu-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pu-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: center; color: var(--ink); text-decoration: none; font-family: inherit; }
.pu-tile:hover { border-color: var(--accent); }
.pu-tile b { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.pu-tile small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.pu-launch { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 18px 6px; padding-top: 4px; }
.pu-lt { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--ink); padding: 0; min-width: 0; font-family: inherit; text-decoration: none; }
.pu-lt b { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.pu-launch.dense { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; }   /* more than 16 icons (Admin Mode with the Attendance tiles): five to a row so it still never scrolls */
.pu-hi { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-hi span { color: var(--muted); font-weight: 500; }
.pu-lt:focus-visible, .pu-tile:focus-visible, .pu-row:focus-visible, .pu-btn:focus-visible, .pu-nav:focus-visible, .pu-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* switch, tick, choice cards */
.pu-tg { width: 46px; height: 28px; border-radius: 999px; background: var(--field); border: 0; position: relative; cursor: pointer; flex-shrink: 0; padding: 0; }
.pu-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--faint); transition: left .15s; }
.pu-tg[aria-pressed="true"] { background: var(--accent); }
.pu-tg[aria-pressed="true"]::after { left: 21px; background: #fff; }
.pu-tg:disabled { opacity: .45; cursor: not-allowed; }
.pu-tickrow { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; color: var(--ink); cursor: pointer; font-family: inherit; font-size: 14px; text-align: left; }
.pu-tick { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--faint); display: grid; place-items: center; flex-shrink: 0; color: var(--accent-ink); }
.pu-tick.on { background: var(--accent); border-color: var(--accent); }
.pu-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pu-rc { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-family: inherit; }
.pu-rc b { font-size: 14px; }
.pu-rc small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pu-rc[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 899px) { .pu-choices { grid-template-columns: 1fr; } }
.pu-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: nowrap; flex-shrink: 0; }
.pu-seg button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; font-family: inherit; }
.pu-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* windows (X, Esc, the dimmed area closes) */
.pu-ov { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 45; }
.pu-win { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; width: min(600px, 92%); max-height: 88%; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); color: var(--ink); }
.pu-win-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.pu-win-h h3 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-win-b { overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.pu-win-f { display: flex; gap: 10px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
.pu-win-f .pu-btn { flex: 1; }
.pu-win.fixh { height: min(540px, 88%); }
@media (max-width: 899px) { .pu-ov { align-items: flex-end; } .pu-win { width: 100%; border-radius: 20px 20px 0 0; max-height: 92%; } .pu-win.fixh { height: 72%; } }

/* Me */
.pu-me-h { display: flex; align-items: center; gap: 14px; }
.pu-me-h .pu-av { width: 54px; height: 54px; font-size: 18px; }
.pu-me-h h2 { margin: 0; font-size: 18px; font-weight: 800; }
.pu-me-h .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pu-me-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; background: var(--gold); }
:root[data-theme="light"] .pu-me-ico { background: var(--gold); }
.pu-bad { color: var(--bad); font-weight: 700; }
.pu-win-b .pu-row .pu-tx small { white-space: normal; }
.pu-tx small.pu-bad { color: var(--bad); font-weight: 700; }
.pu-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* the centred card pages: Signed Out, Switch */
.pu-sign { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: var(--bg); overflow-y: auto; }
.pu-signcard { width: min(380px, 100%); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pu-signcard h2 { margin: 0; font-size: 20px; font-weight: 800; }
.pu-signcard .pu-note { line-height: normal; }
.pu-signcard img { width: 52px; height: 52px; }
.pu-fld { display: flex; flex-direction: column; gap: 6px; }
.pu-lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.pu-inp { height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; font-size: 16px; color: var(--ink); font-family: inherit; width: 100%; box-sizing: border-box; min-width: 0; }
.pu-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* old screens inside the shell */
.pu-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pu-scroll .shell-main, .pu-scroll .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.pu-scroll .tabs { margin: 0; }

/* Phase 3: the bell (PC header) and the Needs You list */
.pu-dot { position: absolute; top: -5px; right: -5px; background: var(--gold); color: #1E1606; font-size: 10.5px; font-weight: 800; border-radius: 999px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; box-sizing: border-box; }
.pu-dot[hidden] { display: none; }
.pu-needs-intro { margin: 0; color: var(--muted); }
.pu-card.ny .pu-tx small, .pu-win-b .pu-card .pu-tx small { white-space: normal; }
.pu-card.ny .pu-tx b, .pu-win-b .pu-card .pu-tx b { white-space: normal; overflow: visible; }
.pu-win-b .pu-chips { flex-shrink: 0; }
.pu-win-b > .pu-card { flex-shrink: 0; }
.pu-needs-host { display: flex; flex-direction: column; gap: 16px; }
.pu-scroll.fixed .pu-strip .pu-btn { min-height: 30px; padding: 4px 10px; }

/* Phase 4 (batch A): Manage Access, Give Access, Person page. Look = the mockup's scrAccess / scrPerson / give and person windows. */
.pa-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pa-tools .pu-search{flex:1 1 260px}
.pa-note{margin:0;color:var(--muted);font-size:13px}
.pa-list{overflow:hidden}
.pa-row .pu-tx b,.pa-row .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pa-c{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.pa-c.pl{color:var(--muted);font-size:12.5px}
.pa-role{color:var(--accent);font-weight:700}
.pa-sug{color:var(--gold);font-weight:700}
.pa-row.none{cursor:pointer}
.pa-row.none:hover{background:var(--raised)}
.pa-row.none:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-row .pu-btn.sm{flex-shrink:0}
.pa-more{color:var(--faint);font-size:12.5px;text-align:center;padding:12px;border:0;background:none;width:100%;font-family:inherit;cursor:pointer}
.pa-more:hover{color:var(--ink)}
.pa-selbar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);z-index:3}
.pa-selbar b{flex:1}
.pa-ph-only{display:none}
@media (max-width:899px){.pa-pc-only{display:none !important}
.pa-ph-only{display:flex}
.pa-row .pa-c.pc{display:none}
.pa-row.none .pu-btn.sm{padding:6px 10px}
.pa-sub-pc{display:none !important}
}
@media (min-width:900px){.pa-sub-ph{display:none !important}
.pa-row{display:grid;grid-template-columns:38px minmax(0,1fr) 150px 190px 160px 18px;column-gap:14px;align-items:center}
.pa-row.none{grid-template-columns:24px 38px minmax(0,1fr) 190px 120px}
.pa-row.none > .pu-btn{justify-self:end}
.pa-row .pu-chev{justify-self:end}
}
.pa-ph{display:flex;align-items:center;gap:14px}
.pa-ph .pu-av{width:54px;height:54px;font-size:18px}
.pa-ph h2{margin:0;font-size:20px;font-weight:800;overflow-wrap:anywhere}
.pa-ph .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pa-ph > div{flex:1;min-width:0}
.pa-kv{display:flex;flex-direction:column;gap:2px;padding:14px}
.pa-kv + .pa-kv{border-top:1px solid var(--line-soft)}
.pa-kv label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700}
.pa-kv .v{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pa-kv .v > div{min-width:0;flex:1 1 160px}
.pa-kv b{overflow-wrap:anywhere}
.pa-kv small{color:var(--muted);display:block;font-size:12.5px;overflow-wrap:anywhere}
.pa-sech{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:14px 14px 4px}
.pa-sech h3{margin:0;font-size:15px;font-weight:800}
.pa-link{border:0;background:none;color:var(--accent);font-weight:700;cursor:pointer;padding:4px 0;white-space:nowrap;font-family:inherit;font-size:14px}
.pa-savebar{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--surface);border:1px solid var(--gold);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);z-index:3}
.pa-savebar > b{font-weight:700}
.pa-bad{background:var(--bad-soft);color:var(--bad)}
.pa-strip{display:flex;gap:10px;align-items:center;background:var(--gold-soft);color:var(--gold);border-radius:12px;padding:10px 14px;font-weight:700;font-size:13px;flex-wrap:wrap}
.pa-strip span{color:var(--ink);font-weight:500;flex:1 1 200px;min-width:0}
.pa-strip.pa-bad span{color:var(--ink)}
.pa-steps{display:flex;gap:8px;font-size:12px;font-weight:700;color:var(--faint);flex-wrap:wrap}
.pa-steps span{display:flex;align-items:center;gap:6px}
.pa-steps span.on{color:var(--accent)}
.pa-steps i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--raised)}
.pa-steps span.on i{background:var(--accent);color:var(--accent-ink)}
.pu-rc.wide{grid-column:1 / -1}
.pu-rc b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pu-rc[disabled]{opacity:.5;cursor:not-allowed}
.pa-opts{display:flex;gap:6px;flex-wrap:wrap}
.pa-opts .pu-fchip{white-space:normal;text-align:left}
.pa-pick{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.pa-win-search{flex-shrink:0}
.pa-win-b .pu-card,.pu-win-b > .pu-card{flex-shrink:0}
.pu-win-b .pu-search{flex:0 0 auto}
.pa-give .pu-tx{white-space:normal}
.pa-give .pu-tx b,.pa-give .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pa-give .pu-row{align-items:flex-start}
.pa-give .pu-tx small + small{margin-top:6px}
.pa-line{display:flex;gap:6px;align-items:center}
.pa-warn{color:var(--gold);font-weight:700}
.pa-err{color:var(--bad);font-weight:700}
.pa-inp{margin-top:6px;width:100%}
.pa-fail{background:var(--bad-soft);border-radius:12px;padding:10px 12px;color:var(--bad);font-weight:700;font-size:13px}
.pa-fail span{display:block;color:var(--ink);font-weight:500;margin-top:2px}
.pu-win-b .pu-rows .pu-row[disabled]{opacity:.55;cursor:default}
.pu-hdr h1.pa-wrap{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pu-win-h h3{white-space:normal;overflow-wrap:anywhere}
.pa-selhost{position:sticky;bottom:0;z-index:3}
.pa-selhost:empty{display:none}
#appsCard .pu-tx b,#appsCard .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* Sign-Ups and Default Roles (Phase 4 batch B): long names and app lines wrap, never cut */
.su-row .pu-tx b,.su-row .pu-tx small,.rl-card .pu-tx b,.rl-card .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.su-row .pu-btn{flex-shrink:0}
.su-sug{color:var(--gold) !important;font-weight:700}
.su-reason{height:96px;padding:10px 12px;resize:vertical;line-height:1.4}
.rl-app{flex-wrap:wrap;gap:8px 12px}
.rl-app .pu-tx{flex:1 1 120px}
.rl-opts{flex:0 1 auto;max-width:100%}
.rl-card .pu-chip{flex-shrink:0}
.rl-note{line-height:1.25}

/* Phase 4 fix round */
.pu-search.pa-slim{height:24px;padding:0 10px;border-radius:999px;flex:0 0 auto}
.pu-win-f .pa-outsider{flex:1;min-width:0}
.pu-win-f .pa-outsider .pu-row{min-height:48px;padding:8px 12px}
.pa-row .pu-tx small.pa-sug{color:var(--gold);font-weight:700}
@media (min-width:900px){.pa-row.none .pa-c.pc .pu-chip{min-width:176px;justify-content:center}}
.pa-ph .pu-av{flex:0 0 54px}
.pa-ph h2{line-height:1.2}
.pu-hdr h1.pa-wrap{line-height:1.2;padding:2px 0}
.pa-hist .pu-row{align-items:flex-start;cursor:default}
.pa-hist .pu-tx b,.pa-hist .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.rl-new{margin-left:8px;vertical-align:middle}

/* Phase 5: the Admin Mode screens (AI Reads, Approvals & Limits, Settings, Unusual Edits). Look = the mockup's scrAI, scrLimits, scrSettings, scrUnusual. Long text wraps, never cut. */
.ad-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ad-kpi{padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ad-kpi small{color:var(--muted);font-size:12px;font-weight:600;overflow-wrap:anywhere}
.ad-kpi b{font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ad-kpi.warn b{color:var(--bad)} .ad-kpi.ok b{color:var(--ok)}
.ad-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700}
.ad-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ad-rto{color:var(--muted)}
.ad-m{display:flex;flex-direction:column;gap:1px;min-width:0}
.ad-m small{color:var(--muted);font-size:11px;font-weight:600}
.ad-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ad-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ad-tbl td,.ad-tbl th{padding:10px 14px;border-top:1px solid var(--line-soft);text-align:left;font-size:13.5px;vertical-align:middle}
.ad-tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:0;white-space:nowrap}
.ad-tbl .n{text-align:right;white-space:nowrap}
.ad-tbl td.bad{color:var(--bad);font-weight:700}
.ad-tbl tr.grp td{background:var(--raised);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ad-tbl tr.sub td{font-weight:700;color:var(--muted)}
.ad-tbl tr.tot td{font-weight:800;border-top:2px solid var(--line)}
.ad-tblwrap{overflow:hidden}
.ad-cellapp{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ad-cellsub{display:block;color:var(--muted);font-size:12px;font-weight:500}
.ad-mgrp{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ad-mrow{padding:12px 14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px}
.ad-mrow:first-child{border-top:0}
.ad-mrow-h{font-weight:700;display:flex;align-items:center;gap:8px;justify-content:space-between}
.ad-mrow-h > span{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.ad-mrow-h small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.ad-mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ad-mc{background:var(--raised);border-radius:9px;padding:7px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-mc small{color:var(--muted);font-size:11px;font-weight:600}.ad-mc b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.ad-mc b.bad{color:var(--bad)}
.ad-mtok{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.ad-faint{margin:0;color:var(--faint);font-size:12.5px}
.ad-limv{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}.ad-limv small{color:var(--muted);font-weight:600}
.ad-wrap .pu-tx b,.ad-wrap .pu-tx small,.ad-wrapc .pu-tx b,.ad-wrapc .pu-tx small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.ad-wrap .pu-chip{white-space:normal;text-align:right}
.ad-sech{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:14px 14px 4px}
.ad-sech h3{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.ad-tag{margin-top:2px;flex-shrink:0}
.ad-un .pu-row{align-items:flex-start}
.ad-un .pu-row .pu-btn,.ad-un .pu-row .pu-chip.ok{align-self:center;flex-shrink:0}
.ad-un .pu-tx small + small{margin-top:2px}
.ad-center{display:flex;justify-content:center}
.ad-btns{display:flex;gap:8px;flex-wrap:wrap}
.ad-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex-shrink:0;background:var(--ok-soft);color:var(--ok)}
.ad-ico.bd{background:var(--bad-soft);color:var(--bad)}.ad-ico.gd{background:var(--gold-soft);color:var(--gold)}
.ad-kv{display:flex;flex-direction:column;gap:2px;padding:14px}
.ad-kv b{overflow-wrap:anywhere}.ad-kv small{color:var(--muted);display:block;font-size:12.5px;overflow-wrap:anywhere}
.ad-field{display:flex;flex-direction:column;gap:6px}
.ad-field > .pu-lbl{display:block}
.ad-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ad-sw{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ad-find{flex:1 1 220px}
.ad-old .panel{margin:0}
.ad-old .tabs{display:none}
@media (max-width:899px){
  .ad-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad-m{flex:1 1 0}
  .ad-two{grid-template-columns:1fr}
}
@media (min-width:900px){ .ad-ph-only{display:none !important} }
@media (max-width:899px){ .ad-pc-only{display:none !important} }
.pu-chips.ad-wchips{flex-wrap:wrap;overflow:visible}
.ad-strip{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);color:var(--gold);border-radius:12px;padding:10px 14px;font-weight:700;font-size:13px}
.ad-strip .pu-i{flex-shrink:0;margin-top:1px}.ad-strip b{flex-shrink:0;white-space:nowrap}
.ad-strip span.t{color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
@media (max-width:899px){.ad-strip{flex-wrap:wrap}.ad-strip b{white-space:normal}}
/* Phase 5 fix round: the AI Reads period boxes read like the mockup; the ATAD month picker sits invisibly over them */
.ad-m{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:6px 12px;min-height:44px;justify-content:center;flex:0 1 180px;cursor:pointer}
.ad-m:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.ad-mv{font-weight:700;color:var(--ink);white-space:nowrap}
.ad-m .ap-field{position:absolute !important;inset:0;opacity:0;width:100% !important;height:100% !important;min-height:0 !important;cursor:pointer}
.ad-appcard .ad-sech{padding-bottom:6px}
.ad-appcard .ad-mrow-h{font-size:14px}
.ad-small{font-size:13px}
#limv::-webkit-outer-spin-button,#limv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#limv{-moz-appearance:textfield;appearance:textfield}
@media (max-width:899px){.ad-m{flex:1 1 0;padding:6px 10px}}
.ad-tag{max-width:104px;white-space:normal;text-align:center;line-height:1.2}