/* The account portal's shared floor (Plan 26, from the Plan 23 lab): the few rules every room shares. Nothing here
 * is part of a room's design except the quality floor (focus, hidden text, reduced motion), the toast, the shape of
 * the You menu, where Clerk's sign-in box sits, and the page shown when nothing else can be. */

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* Reduced motion: every direction's decorative motion stops; states still change. */
.reduced, .reduced *, .reduced *::before, .reduced *::after {
  animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

.toast {
  position: fixed; left: 50%; bottom: 72px; z-index: 10000; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 14px; border-radius: 8px; background: rgba(28, 28, 30, .92); color: #f4f4f5; font: 500 13px/1.3 system-ui, sans-serif;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- You: the writer's initial and the small menu under it (round three). Each room restyles both; this is
 * only the shape, drawn from the room's own tokens. ---- */
.you { position: relative; flex: none; }
.you-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  font: 500 1.05rem/1 var(--font-head); background: var(--text); color: var(--ground); }
.you-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.you-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(21rem, calc(100vw - 24px)); padding: .5rem;
  border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(127, 127, 127, .18); }
.you-who { display: grid; gap: .1rem; margin: 0; padding: .7rem .8rem .8rem; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.you-who b { font: 500 1rem/1.2 var(--font-head); }
/* A long email or name with no spaces wraps inside the menu rather than running off it. */
.you-who :is(b, span) { min-width: 0; overflow-wrap: anywhere; }
.you-who span, .you-menu li span { color: var(--text-soft); font-size: .82rem; line-height: 1.35; }
.you-menu ul { margin: 0; padding: .3rem 0; list-style: none; }
.you-menu li :is(a, button), .you-out :is(a, button) { display: grid; gap: .1rem; min-height: 44px; align-content: center; padding: .45rem .8rem; border-radius: 9px; color: var(--text); text-decoration: none; }
.you-menu li b { font: 500 .95rem/1.25 var(--font-body); }
.you-menu li :is(a, button):hover, .you-menu li :is(a, button):focus-visible, .you-out :is(a, button):hover, .you-out :is(a, button):focus-visible { background: rgba(127, 127, 127, .14); outline: none; }
.you-out { margin: 0; padding-top: .3rem; border-top: 1px solid rgba(127, 127, 127, .2); }
.you-out :is(a, button) { font: 500 .9rem/1.2 var(--font-body); color: var(--text-soft); }

/* Buttons in the You menu drop the browser's button look; the widened row rules above (higher specificity) style them. */
:where(.you-menu li, .you-out) button { box-sizing: border-box; width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.you-menu li button[aria-pressed="true"] b::after { content: ' ✓'; }

/* Where Clerk's sign-in box sits; each room styles the frame around it. */
.clerk-slot { min-height: 22rem; display: grid; place-items: center; }
.clerk-sample { margin: 0; color: var(--text-soft); font: 400 .95rem/1.4 var(--font-body); text-align: center; }

/* A download that is not open yet. */
[data-download][aria-disabled="true"] { opacity: .72; cursor: default; }

/* The page shown when nothing else can be. */
.fatal-page { margin: 0; min-height: 100vh; background: var(--ground); color: var(--text); }
.fatal { display: grid; justify-items: center; gap: .75rem; max-width: 30rem; margin: 0 auto; padding: 18vh 16px 4rem; text-align: center; font-family: var(--font-body); }
.fatal h1 { margin: 0; font: 500 1.5rem/1.2 var(--font-head); }
.fatal p { margin: 0; color: var(--text-soft); }