/* Invitations and guest entry share the site's palette and task-focused navigation. */
.access-header, .access-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem 2rem; padding:1.3rem max(1.5rem, calc((100vw - 1120px) / 2)); }
.access-header { background:var(--color-ink); color:#f3f7f7; }
.access-header nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:var(--family-text-small); }
.access-header nav a { color:#c2d9dd; }
.access-header nav span { color:#fff; }
.access-header .brand, .access-header .brand-text { color:#fff; }
.access-footer { border-top:1px solid var(--color-line); font-size:var(--family-text-small); color:var(--color-muted); margin-top:3rem; flex-wrap:wrap; }
.play-page { max-width:1170px; margin:0 auto; padding:var(--family-space-4) var(--family-gutter); width:100%; }
.access-intro { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.access-intro h1 { font-size:var(--family-text-h1); letter-spacing:-.015em; margin:0 0 .8rem; }
.access-intro p { margin:0; color:var(--color-muted); max-width:54ch; font-size:var(--family-text-body); }
.access-intro .place-note { border-left:1px solid var(--family-line); padding-left:1.25rem; min-width:200px; font-size:var(--family-text-body); color:var(--color-text); }
.place-note span { display:block; color:var(--color-muted); font-size:var(--family-text-small); margin-top:.25rem; }
.access-message { border:1px solid #bad0d5; background:#deebee; border-radius:var(--family-radius); padding:1rem 1.25rem; min-height:3.65rem; line-height:1.55; }
.access-message[data-tone="error"] { border-color:#d8aba6; background:#f8eae7; color:#873d34; }
.access-message[data-tone="success"] { border-color:#afc9ba; background:#e2eee6; color:#2c6147; }
.play-page h2 { margin:0 0 .75rem; font-size:var(--family-text-h2); letter-spacing:-.025em; }
.play-page h3 { margin:0 0 .75rem; font-size:var(--family-text-h3); }
.play-page p { max-width:70ch; }
.play-page .access-message { max-width:none; }
.play-page label { display:block; font-weight:600; margin:1.25rem 0 .45rem; }
.play-page input, .play-page select { display:block; width:100%; min-height:var(--family-touch); padding:.375rem .625rem; background:var(--family-surface); color:var(--color-text); border:1px solid var(--family-line); border-radius:var(--family-radius); font:inherit; }
.play-page input::placeholder { color:#61747b; opacity:1; }
.play-page .btn { margin-top:1rem; white-space:normal; }
.play-page small, .help-text { display:block; color:var(--color-muted); font-size:var(--family-text-small); line-height:1.6; margin:.7rem 0; }
.optional { font-weight:400; color:var(--color-muted); }
.signin-panel { max-width:650px; background:transparent; border:0;border-top:1px solid var(--family-line); border-radius:var(--family-radius); padding:1rem 0; margin:2rem 0; }
.signin-panel .help-text { margin-top:1.2rem; }
.guest-note { border-top:1px solid var(--color-line); padding-top:1.2rem; margin-top:1.5rem; }
.account-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem 0 1.25rem; color:var(--color-muted); font-size:var(--family-text-small); }
.account-strip p { margin:0; overflow-wrap:anywhere; }
.account-strip #signedin-as { flex:1; min-width:0; }
.account-strip .btn { margin:0; }
#authenticator-setup { flex-basis:100%; padding:1.5rem; background:var(--color-bg-2); border-radius:var(--family-radius); }
#authenticator-setup .btn { margin-top:1rem; }
.admission-panel { background:var(--family-surface); border-radius:var(--family-radius); padding:.75rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.admission-panel h2 { font-size:var(--family-text-h2); }
.admission-panel p { margin:.35rem 0; font-weight:600; }
.admission-panel small { margin:.3rem 0 0; }
.admission-panel .btn { flex-shrink:0; margin:0; }
.owner-workspace, .guest-workspace { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.25fr); gap:1.5rem; margin-top:2rem; align-items:start; }
.invite-panel, .join-panel { padding:1rem 0; border:0;border-top:1px solid var(--family-line); border-radius:var(--family-radius); background:transparent; }
.invite-panel > p, .join-panel > p, .download-panel > p { margin:.5rem 0 1rem; color:var(--color-muted); }
.invite-panel > .help-text { margin:1rem 0 0; }
.invite-panel form .btn { width:100%; margin-top:1.5rem; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.section-heading h2 { margin:0; }
.section-heading .btn { margin:0; }
.invitations-panel { padding:.5rem 0; }
.invitation-list { list-style:none; margin:1.25rem 0; padding:0; }
.invitation-list li { padding:.75rem 0; border-bottom:1px solid var(--color-line); overflow-wrap:anywhere; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:.45rem 1rem; }
.invitation-list strong { font-size:var(--family-text-body); }
.invitation-list small { grid-column:1; margin:0; }
.invitation-list .btn { grid-column:2; grid-row:1 / span 3; margin:0; font-size:var(--family-text-small); padding:.5rem .85rem; }
.invitation-state { grid-column:1; width:fit-content; border-radius:var(--family-radius); padding:.1rem .5rem; font-size:var(--family-text-small); background:#dce6e8; color:#4b626a; }
.invitation-state[data-state="active"] { background:#dbeade; color:#315c3f; }
.empty-invitations { color:var(--color-muted); min-height:8rem; align-content:center; }
#new-invite, .launch-panel { padding:1.25rem; margin-top:1.5rem; background:#e1eee7; border:1px solid #aac8b8; border-radius:var(--family-radius); }
#new-invite p, .launch-panel p { font-size:var(--family-text-small); }
.guest-workspace { grid-template-columns:minmax(0, .95fr) minmax(0, 1fr); gap:1.5rem; }
.download-panel { padding:1.5rem 0; }
.setup-steps { padding-left:1.35rem; margin:1.5rem 0; }
.setup-steps li { padding-left:.5rem; margin:1rem 0; }
.setup-steps li::marker { color:var(--color-accent); font-weight:700; }
.join-panel .btn { width:100%; }
.browser-entry { padding:1.5rem; margin-top:1.5rem; background:var(--color-bg-2); border-radius:var(--family-radius); }
.launch-panel details { margin-top:1.25rem; font-size:var(--family-text-small); }
summary { cursor:pointer; text-underline-offset:4px; }
summary:hover { text-decoration:underline; }
#launch-code { overflow-wrap:anywhere; user-select:all; }
[hidden] { display:none!important; }
@media (max-width:760px) {
  .access-header { align-items:flex-start; flex-direction:column; gap:1rem; }
  .play-page { padding:var(--family-space-3) var(--family-gutter); }
  .access-intro { align-items:flex-start; flex-direction:column; gap:1.25rem; }
  .access-intro .place-note { border:0;padding:0; }
  .place-note span { display:inline; margin-left:.65rem; }
  .owner-workspace, .guest-workspace { grid-template-columns:1fr; gap:2rem; }
  .admission-panel { align-items:flex-start; flex-direction:column; padding:1.25rem; gap:1rem; }
  .invite-panel, .join-panel { padding:1.25rem; }
  .download-panel { padding:.5rem 0 0; }
  .access-footer { margin-top:1rem; }
}