/* Hashmark (phase 3) - Player phone in the mockups' look: docs/design/app-a-c-screens.html, screen "Player phone".
   Every rule starts with html[data-site] (the look; the website and the app). siteui.css has the frame and the shared tokens.
   The screens of roleapp.js (players, statisticians, trainers, broadcasters on a team): .ra[data-ra="<role>"] (set by
   raShell in the look, never on the live link) and data-view (the page open). Phones: the team header on the page,
   the pages in four groups in a bar at the bottom (Home, Wristband, Playbook, Me), each group's pages as tabs on top. */
@media screen {
html[data-site][data-ui="a"] .ra[data-ra] {
  --pl-sel: #141414; --pl-selring: transparent;
  --pl-tag: #e9edfc; --pl-tagtx: #1a3aa8; --pl-tag2: var(--soft-2); --pl-tag2tx: var(--muted);
  --pl-cond: 'Barlow Condensed', 'Barlow', sans-serif;
  background: var(--bg); color: var(--ink);
}
html[data-site][data-ui="a"][data-theme="dark"] .ra[data-ra] {
  --pl-sel: #0c0d0f; --pl-selring: var(--line-2);
  --pl-tag: #16203d; --pl-tagtx: #9fb4ff;
}

/* ---------- the top bar: the frame's black bar, the team with its crest ---------- */
html[data-site][data-ui="a"] .ra[data-ra] .ra-top { min-height: 56px; padding: 8px 20px; gap: 12px; background: var(--s-top); color: var(--s-toptx); border-bottom: 1px solid var(--s-topln); flex-wrap: nowrap; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top .lw { display: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top .lm { width: 28px; height: 28px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-crest { width: 32px; height: 32px; border-radius: 8px; background: var(--s-blue); color: #fff; font: 800 15px/1 var(--s-hf); display: grid; place-items: center; flex: none; margin-left: 4px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-team { min-width: 0; line-height: 1.2; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-team b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-team span { font-size: 12px; color: var(--s-topmu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--s-topmu); white-space: nowrap; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3fbf5f; flex: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status.wait::before { background: var(--hi); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status.bad::before { background: #e5341c; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status.bad { color: #ff9c8a; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-status.wait { color: var(--s-toptx); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top :is(.ra-out, .lang-btn) { min-height: 36px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--s-topln); border-radius: var(--rb); background: transparent; color: var(--s-toptx); box-shadow: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top :is(.ra-out, .lang-btn):hover { border-color: var(--s-topmu); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top .nt-bell { width: 36px; height: 36px; min-height: 0; padding: 0; display: grid; place-items: center; border-color: transparent; color: var(--s-topmu); background: transparent; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-top .nt-bell:hover { color: var(--s-toptx); background: var(--s-topon); }

/* ---------- the week and the page tabs ---------- */
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 10px 28px 0; background: transparent; border-bottom: 1px solid var(--line); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar > label { font: 700 12px/1 var(--pl-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raWk { min-height: 36px; padding: 6px 30px 6px 10px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--rb); background-color: var(--panel); color: var(--ink); max-width: 100%; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav { order: 9; flex: 1 0 100%; display: flex; gap: 2px; background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 6px; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav[hidden] { display: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav::-webkit-scrollbar { display: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav button { flex: none; min-height: 0; padding: 11px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font: 600 14px/1.2 'Barlow', system-ui, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav button:hover { color: var(--ink); border-bottom-color: var(--line-2); background: transparent; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav button.on { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }
/* one side of the ball (Offense / Defense): the mockups' segmented control */
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-sidew .seg, .ra-segs) { display: inline-flex; gap: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: calc(var(--rb) + 3px); padding: 3px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-sidew .seg button { min-height: 30px; padding: 5px 12px; border: 0; border-radius: var(--rb); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; box-shadow: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-sidew .seg button.on { background: var(--pl-sel); color: var(--hi); box-shadow: inset 0 0 0 1px var(--pl-selring); }

/* ---------- the page and its cards ---------- */
html[data-site][data-ui="a"] .ra[data-ra] { --ra-w: 1200px; }
html[data-site][data-ui="a"] .ra[data-ra="player"] { --ra-w: 1120px; }
html[data-site][data-ui="a"] .ra[data-ra="trainer"] { --ra-w: 920px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-main { padding: 24px 28px 48px; max-width: var(--ra-w); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-bar { padding-left: max(28px, calc((100% - var(--ra-w)) / 2 + 28px)); padding-right: max(28px, calc((100% - var(--ra-w)) / 2 + 28px)); }
/* a player on a computer: one 1120 column under the tabs; Home in two columns, the one-card pages at reading width */
html[data-site][data-ui="a"] .ra[data-ra="player"]:not([data-view="band"]):not([data-view="book"]):not([data-view="sched"]):not([data-view="week"]) .ra-main > * { max-width: 760px; }
@media (min-width: 900px) {
  html[data-site][data-ui="a"] .ra[data-ra="player"][data-view="week"] .ra-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  html[data-site][data-ui="a"] .ra[data-ra="player"][data-view="week"] .ra-next { margin-bottom: 0; }
}
html[data-site][data-ui="a"] .ra[data-ra] .ra-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hs); padding: 18px 20px; margin-bottom: 12px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card h2 { font: 700 22px/1.2 'Barlow', system-ui, sans-serif; letter-spacing: -.015em; text-transform: none; margin: 0 0 4px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card h3 { font: 700 12px/1.2 var(--pl-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card p { line-height: 1.45; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card > h2 + .ra-btns { margin-top: 12px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card .muted { font-size: 14px; }
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-k, .ra-eyb) { font: 700 12px/1.2 var(--pl-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-list { list-style: none; padding: 0; margin: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-list li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-list li:first-child { border-top: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-empty { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 48px 20px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-warn { background: var(--warn-bg); border-color: transparent; box-shadow: none; }

/* buttons: C's buttons; selected = ink with yellow */
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-btns, .ra-rsvp) button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--rb); background: var(--panel); color: var(--ink); font-weight: 700; font-size: 14.5px; box-shadow: var(--btn-sh); }
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-btns, .ra-rsvp) button:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-btns, .ra-rsvp) button.on,
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 .ra-btns button:is(.yes, .no).on { background: var(--pl-sel); color: var(--hi); border-color: var(--pl-sel); box-shadow: inset 0 0 0 1px var(--pl-selring); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card button.primary { border-radius: var(--rb); min-height: 46px; font-weight: 700; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card button.small { min-height: 34px; padding: 5px 12px; border-radius: var(--rb); font-size: 13px; font-weight: 600; }
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-form, .ra-card) :is(input:not([type="checkbox"]), select) { border: 1px solid var(--line); border-radius: var(--rb); background-color: var(--panel); color: var(--ink); }
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-form, .ra-card) :is(input:not([type="checkbox"]):not([type="radio"]), select) { padding: 8px 12px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card > h3:first-child { margin-top: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-form { background: var(--soft); border-radius: var(--rs); padding: 12px; margin-top: 10px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-form label, html[data-site][data-ui="a"] .ra[data-ra] .ra-card > label { font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* tags */
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-st, .ra-tag) { display: inline-flex; align-items: center; font: 700 11.5px/1.2 'Barlow', system-ui, sans-serif; letter-spacing: 0; text-transform: none; padding: 3px 8px; border: 0; border-radius: 3px; background: var(--pl-tag2); color: var(--pl-tag2tx); white-space: nowrap; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-tag.g { background: var(--pl-tag); color: var(--pl-tagtx); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-st.ok { background: var(--ok-bg); color: var(--ok); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-st.out { background: var(--err-bg); color: var(--err); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-st:is(.doubtful, .na, .limited) { background: var(--warn-bg); color: var(--warn); }

/* ---------- Home: the next date to answer ---------- */
html[data-site][data-ui="a"] .ra[data-ra] .ra-next { margin-bottom: 18px; display: grid; gap: 10px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-next .ra-card { margin: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx .ra-tag { margin-bottom: 10px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx h2 { font-size: 21px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx p { margin: 2px 0 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-rsvp { display: flex; gap: 8px; margin-top: 16px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-rsvp button { flex: 1 1 0; min-height: 52px; font-size: 15.5px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx2 { display: block; width: 100%; text-align: left; padding: 14px 18px; min-height: 0; color: var(--ink); cursor: pointer; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx2:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx2 b { display: block; font-size: 15px; font-weight: 700; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-nx2 small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; font-weight: 400; }

/* Availability: one card row per date, the two answers side by side */
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 { padding: 16px 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 h3 { margin: 0 0 4px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 > .muted:first-of-type { color: var(--ink); font-weight: 600; font-size: 15.5px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 .ra-btns { margin-top: 12px; flex-wrap: nowrap; gap: 8px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 .ra-btns button { flex: 1 1 0; min-height: 50px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-ev2 .ra-ans { font-size: 14px; margin-top: 2px; }

/* lists of rows (calendar, games, roster, attendance) */
html[data-site][data-ui="a"] .ra[data-ra] :is(.ra-ev, .ra-gm, .ra-att, .ra-row, .ra-ev2) { border-top-color: var(--line); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-card > h2 + :is(.ra-ev2, .ra-gm), html[data-site][data-ui="a"] .ra[data-ra] .ra-card > p + .ra-ev2 { margin-top: 8px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-add { border: 1px solid var(--line); border-radius: var(--rb); min-height: 38px; font-size: 13.5px; background: var(--panel); color: var(--ink); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-res { font: 800 17px/1 var(--s-hf); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-who { color: var(--ink); border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 8px 2px; min-height: 50px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-who:hover { background: var(--soft); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-row.open { background: transparent; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-q { border-radius: var(--rb); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-pick button { border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); color: var(--ink); box-shadow: var(--btn-sh); }
html[data-site][data-ui="a"] .ra[data-ra] .ra-stat table th { font: 700 11px/1.2 var(--pl-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Wristband: the band as a table, the play picked under it (beside it on a computer) ---------- */
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-band { gap: 0; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; margin-top: 12px; background: var(--panel); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call { display: flex; align-items: stretch; gap: 0; width: 100%; min-height: 46px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; text-align: left; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call:first-child { border-top: 0; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call:hover { background: var(--soft); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call .ra-n { flex: 0 0 44px; display: grid; place-items: center; min-height: 0; height: auto; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; clip-path: none; background: var(--ink); color: var(--bg); font: 800 18px/1 var(--s-hf); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call > span:last-child { flex: 1; min-width: 0; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call b { font: 700 16px/1.15 var(--pl-cond); letter-spacing: .02em; text-transform: uppercase; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call small { font-size: 12.5px; margin-top: 2px; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call.on { background: var(--pl-sel); color: var(--hi); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call.on .ra-n { background: var(--hi); color: #141414; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-call.on small { color: #c9c4b6; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic:not(:empty) { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: var(--panel); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic .ra-img { margin: 0; max-width: none; border-radius: var(--rs); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic > p { margin: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-cap { padding: 10px 4px 2px; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-cap b { display: block; font: 700 17px/1.2 var(--pl-cond); letter-spacing: .02em; text-transform: uppercase; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-cap small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
@media (min-width: 900px) {
  html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-main > .ra-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] .ra-main > .ra-card > :not(#raPic) { grid-column: 1; }
  html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; }
  html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic:not(:empty) { margin-top: 0; }
  html[data-site][data-ui="a"] .ra[data-ra][data-view="band"] #raPic:empty { min-height: 260px; border: 1px dashed var(--line-2); border-radius: var(--r); }
}

/* ---------- Quiz: the list, then the quiz (quiz.js) ---------- */
html[data-site][data-ui="a"] .ra[data-ra][data-view="quiz"] .ra-band { gap: 8px; }
html[data-site][data-ui="a"] .ra[data-ra][data-view="quiz"] .ra-call { align-items: center; width: 100%; padding: 12px 14px; min-height: 58px; border: 1px solid var(--line); border-radius: var(--rs); background: var(--panel); color: var(--ink); box-shadow: var(--btn-sh); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="quiz"] .ra-call:hover { border-color: var(--line-2); }
html[data-site][data-ui="a"] .ra[data-ra][data-view="quiz"] .ra-call b { font-size: 15.5px; font-weight: 700; }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-h { font: 700 22px/1.2 'Barlow', system-ui, sans-serif; letter-spacing: -.015em; text-transform: none; }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-bar { height: 6px; border-radius: 3px; background: var(--soft-2); overflow: hidden; }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-bar i { background: var(--ink); border-radius: 3px; }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-card { border: 1px solid var(--line); box-shadow: none; margin-right: 0; }
html[data-site][data-ui="a"] .ra[data-ra] .qz button.qb { border-width: 1px; border-color: var(--line); border-radius: var(--rs); background: var(--panel); }
html[data-site][data-ui="a"] .ra[data-ra] .qz button.qb.go { border-radius: var(--rb); background: var(--hi); border-color: var(--hi); color: #141414; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.08); }
html[data-site][data-ui="a"] .ra[data-ra] .qz button.qb.on { background: var(--pl-sel); color: var(--hi); border-color: var(--pl-sel); box-shadow: inset 0 0 0 1px var(--pl-selring); }
html[data-site][data-ui="a"] .ra[data-ra] .qz button.qb.right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
html[data-site][data-ui="a"] .ra[data-ra] .qz button.qb.wrong { background: var(--err-bg); border-color: var(--err); color: var(--err); }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-fb { border-radius: var(--r); padding: 12px 14px; font-size: 15.5px; text-align: left; }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-fb.ok { background: var(--ok-bg); }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-fb.bad { background: var(--err-bg); }
html[data-site][data-ui="a"] .ra[data-ra] .qz .qz-top button.qb { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: var(--rb); }

/* Me: the account card is for phones (the top bar has these on a computer) */
html[data-site][data-ui="a"] .ra[data-ra] .ra-acct { display: none; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-acct-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html[data-site][data-ui="a"] .ra[data-ra] .ra-acct-r > button, html[data-site][data-ui="a"] .ra[data-ra] .ra-acct .lang-btn { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--rb); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: var(--btn-sh); }

/* the bar at the bottom: phones only */
html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav { display: none; }

/* ---------- iPads ---------- */
@media (max-width: 1100px) {
  html[data-site][data-ui="a"] .ra[data-ra] .ra-main { padding: 20px 18px 40px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bar { padding: 10px 18px 0; }
}

/* ---------- phones: the team header on the page, the four groups at the bottom ---------- */
@media (max-width: 700px) {
  html[data-site][data-ui="a"] .ra[data-ra] .ra-top { position: relative; background: var(--bg); color: var(--ink); border-bottom: 0; padding: 14px 16px 6px; min-height: 0; gap: 10px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-top .brand { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra="player"] .ra-top .ra-out, html[data-site][data-ui="a"] .ra[data-ra="player"] .ra-top #raLang { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra]:not([data-ra="player"]) .ra-top { flex-wrap: wrap; }
  html[data-site][data-ui="a"] .ra[data-ra]:not([data-ra="player"]) .ra-top .ra-team { flex: 1 1 auto; }
  html[data-site][data-ui="a"] .ra[data-ra]:not([data-ra="player"]) .ra-top .ra-sp { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra]:not([data-ra="player"]) .ra-top :is(.ra-out, .lang-btn) { color: var(--ink); border-color: var(--line); min-height: 34px; padding: 4px 10px; font-size: 12.5px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-top .brand + .ra-crest, html[data-site][data-ui="a"] .ra[data-ra] .ra-crest { margin-left: 0; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-team span { color: var(--muted); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-status { font-size: 0; gap: 0; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-status.bad, html[data-site][data-ui="a"] .ra[data-ra] .ra-status.wait { font-size: 12px; gap: 5px; color: var(--muted); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-top .nt-bell { color: var(--ink); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-top .nt-bell:hover { background: var(--soft); color: var(--ink); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bar { padding: 4px 16px 0; gap: 8px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raWk { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: 13.5px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav { margin: 2px -16px 0; padding: 0 8px; width: calc(100% + 32px); flex-basis: calc(100% + 32px); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bar #raNav button { padding: 10px 10px; font-size: 14px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-sidew { flex: 1 0 100%; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-main { padding: 14px 14px 32px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-card { padding: 16px; border-radius: var(--r); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-card h2 { font-size: 19px; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-acct { display: block; }
  /* players: only the open group's pages on top; a group of one page has no tabs */
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav button[data-g] { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav[data-grp="home"] button[data-g="home"],
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav[data-grp="band"] button[data-g="band"],
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav[data-grp="book"] button[data-g="book"],
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav[data-grp="me"] button[data-g="me"] { display: block; }
  html[data-site][data-ui="a"] .ra[data-ra="player"] #raNav:is([data-grp="band"], [data-grp="me"]) { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra="player"]:is([data-view="band"], [data-view="set"]) .ra-bar { border-bottom: 0; padding-bottom: 4px; }
  html[data-site][data-ui="a"] .ra[data-ra="player"][data-view="set"] .ra-bar > :is(label, #raWk) { display: none; }
  html[data-site][data-ui="a"] .ra[data-ra="player"] .ra-main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel); border-top: 1px solid var(--line); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; padding: 4px 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--muted); font: 600 11px/1.2 'Barlow', system-ui, sans-serif; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav button.on { color: var(--ink); }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-bnav button.on span { background: var(--pl-sel); color: var(--hi); padding: 1px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--pl-selring); }
  html[data-site][data-ui="a"][data-theme="dark"] .ra[data-ra] .ra-bnav button.on span { background: transparent; box-shadow: none; padding: 1px 0; }
  html[data-site][data-ui="a"] .ra[data-ra] .ra-two { grid-template-columns: 1fr; }
}
}