/* The Compte card of JOB-004: the sheet of the account, and the counts of everyone under a song card's counts.
   Ink on ivory paper, the same medium and palette as the cards. */

.acc-card { width: min(92vw, 460px); }
.acc-head { margin-bottom: 12px; }

/* the button is the one Google draws: it is only framed, never redrawn */
.acc-gsi { display: flex; justify-content: center; align-items: center; min-height: 44px; margin: 4px 0 16px; }
.acc-gsi:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

/* JOB-016: the button the game draws itself (the door of the borrowed Firebase project), in the family of the
   buttons of the sheet: the mark of Google, then one word of the game */
.acc-google { width: 100%; min-height: 64px; flex-direction: row; gap: 12px; margin: 4px 0 16px; }
.acc-google-g { width: 26px; height: 26px; flex: none; }

/* what an account does: the save that follows the player, and the songs that count for everyone */
.acc-what { display: flex; align-items: center; justify-content: center; gap: 34px; padding: 12px 0; border: 2px solid var(--ink); background: var(--paper-2); }
.acc-mark { display: grid; place-items: center; color: var(--ink); }
.acc-mark .sym { width: 30px; height: 30px; }

/* signed in: the name on a card back, the moment of the last sync, and the way out */
.acc-back { width: min(54%, 190px); margin: 2px auto 14px; aspect-ratio: 5 / 7; display: grid; place-items: center; background-color: var(--paper); background-position: center; background-size: cover; background-repeat: no-repeat; border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(27, 26, 23, .35), inset 0 0 0 3px var(--paper); }
.acc-name { max-width: 86%; padding: 3px 8px; background: rgba(244, 241, 232, .88); color: var(--ink); font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: .04em; text-align: center; text-transform: none; overflow-wrap: anywhere; }
.acc-clock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; }
.acc-clock .sym { width: 20px; height: 20px; }
.acc-out { width: 100%; min-height: 64px; flex-direction: row; gap: 12px; }
.acc-out .sym { width: 28px; height: 28px; }

/* the counts of everyone, on the back of a song card, under the player's own counts (small on purpose) */
.song-world { display: flex; align-items: center; justify-content: center; gap: 3cqw; margin-top: 1.6cqw; padding-top: 1.6cqw; border-top: 1px solid rgba(27, 26, 23, .28); font-size: 3.6cqw; line-height: 1; }
.song-world[hidden] { display: none; }
.song-world .sym { vertical-align: middle; }
.song-world-item { display: inline-flex; align-items: center; gap: 1.2cqw; }
.song-world b { font-weight: 700; }