/* The account home: the neutral pages of the accounts host (no site in the request). The same dark base, one ice-blue accent and
   Geist as the Prism home (home.css, same tokens). Its shape is rows: Profile, Purchases, Security, Privacy, separated by
   hairlines. Logged out they say what's here; logged in they are the way in. No colour blocks, no second hue. */
/* Prism's first-party scale: the SAME block heads accounts/public/account.css and previews/public/app.css (colour roles come from face.css).
   Type, spacing, radius, hit size and the one lift (the home's sheet shadow), dark and daylight. */
:root { --pf-t-xs: .8125rem; --pf-t-sm: .9375rem; --pf-t-md: 1.0625rem; --pf-t-lg: 1.5rem; --pf-t-xl: clamp(2.25rem, 6vw, 3.25rem); --pf-t-2xl: clamp(2.9rem, 13vw, 4.5rem);
  --pf-sp-1: 4px; --pf-sp-2: 8px; --pf-sp-3: 12px; --pf-sp-4: 16px; --pf-sp-5: 24px; --pf-sp-6: 40px; --pf-sp-7: 64px;
  --pf-r-sheet: 6px; --pf-r-field: 12px; --pf-r-pill: 999px; --pf-hit: 44px; --pf-top: 72px; --pf-ease: cubic-bezier(.2, .7, .2, 1);
  --pf-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --pf-lift: 0 1px 0 rgb(255 255 255 / .06) inset, 0 40px 70px -30px rgb(0 0 0 / .85), 0 10px 24px -12px rgb(0 0 0 / .6); }
html:root[data-mode=light] { --pf-lift: 0 1px 2px rgb(6 9 16 / .06), 0 28px 56px -32px rgb(6 9 16 / .32); }

html[data-neutral] { --r-selector: var(--pf-r-pill); --r-ctl: var(--pf-r-field); }
html[data-neutral] body { background: var(--void); color: var(--ink); font: 400 1.0625rem/1.55 var(--display); -webkit-font-smoothing: antialiased; }
html[data-neutral] #bgfill { background: var(--void); }
html[data-neutral] .avatar { background: var(--s2); color: var(--ink); border: 1px solid var(--line2); }
html[data-neutral] :is(button, input, select, textarea, .btn, .in) { font-family: var(--display); }
html[data-neutral] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---------- the page ---------- */
html[data-neutral] .signin { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; min-height: 100dvh; background: var(--void); }
html[data-neutral] .signin-brand { order: 1; display: flex; align-items: center; min-height: var(--pf-top); max-width: none; padding: 0 var(--gut); font: 600 1.1875rem/1 var(--display); letter-spacing: -.02em; }
html[data-neutral] .signin-brand a { min-height: var(--pf-hit); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
html[data-neutral] .signin-name { font: inherit; }
html[data-neutral] .signin-logo { border: 0; background: none; width: 28px !important; height: 28px !important; }
html[data-neutral] .signin-card { order: 3; width: 100% !important; max-width: 520px !important; margin: 0 !important; padding: 28px var(--gut) 40px !important; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.ac-wall { order: 4; }
html[data-neutral] .signin-foot { order: 5; display: flex; flex-wrap: wrap; gap: 4px 24px; width: 100%; padding: 12px var(--gut) 24px; text-align: left; color: var(--mute); font-size: .9375rem; font-weight: 450; }
html[data-neutral] .signin-foot a { min-height: var(--pf-hit); min-width: var(--pf-hit); justify-content: center; display: inline-flex; align-items: center; text-underline-offset: 4px; text-decoration: none; transition: color .2s; }
html[data-neutral] .signin-foot a:hover { color: var(--ink); }
html[data-in] .ac-wall { display: none; }
/* signed out: the heading is the big line (it says what this step is; the tab above already names the action) */
html[data-neutral]:not([data-in]) .signin-panel h1 { font-size: clamp(2.9rem, 13vw, 4.5rem) !important; line-height: .94 !important; letter-spacing: -.052em !important; text-wrap: balance; }

/* sign-in, in every state: type, fields, buttons, messages */
html[data-neutral] .signin-card h1 { font: 500 1.75rem/1.1 var(--display) !important; letter-spacing: -.03em; color: var(--ink); }
html[data-neutral] .signin-card :is(.signin-lede, .hint, small, .opt, .dim) { color: var(--mute); }
html[data-neutral] .signin-card .label { color: var(--ink); font-size: .9375rem; font-weight: 500; }
html[data-neutral] .signin-card .in { border: 1px solid var(--line2); border-radius: var(--pf-r-field); background: var(--s1); color: var(--ink); box-shadow: none; transition: border-color .2s; }
html[data-neutral] .signin-card .in::placeholder { color: var(--dim); opacity: 1; }
html[data-neutral] .signin-card .in:hover { border-color: var(--dim); }
html[data-neutral] .signin-card .in:focus, html[data-neutral] .signin-card .in:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
html[data-neutral] .signin-card .in:disabled { opacity: .55; }
html[data-neutral] .signin-card .signin-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
html[data-neutral] .signin-card .btn { border-radius: var(--pf-r-pill); box-shadow: none; font-weight: 550; transition: background .2s, border-color .2s, color .2s, transform .2s; }
html[data-neutral] .signin-card .btn:active { transform: scale(.97); }
html[data-neutral] .signin-card .btn:not(.pri, .ghost) { border: 1px solid var(--line2); background: transparent; color: var(--ink); }
html[data-neutral] .signin-card .btn:not(.pri, .ghost):hover { border-color: var(--accent); background: transparent; }
html[data-neutral] .signin-card .btn.ghost { border: 0; background: transparent; color: var(--mute); }
html[data-neutral] .signin-card .btn.ghost:hover { color: var(--ink); background: transparent; }
html[data-neutral] .signin-card .btn.pri { border: 0; background: var(--ink); color: var(--bg); }
html[data-neutral] .signin-card .btn.pri:hover { background: var(--accent); }
html[data-neutral] .signin-card .btn:disabled { opacity: .55; cursor: default; }
html[data-neutral] .signin-card .btn.danger { color: var(--ink); border: 1px solid var(--line2); background: transparent; }
html[data-neutral] .signin-card .btn.danger:hover { border-color: var(--ink); }
html[data-neutral] .signin-card .btn.lg { min-height: 56px !important; }
html[data-neutral] .signin-card .err { margin: 0; padding: 10px 14px; color: var(--ink); background: var(--s1); border: 1px solid var(--line2); border-inline-start: 3px solid var(--accent); border-radius: 8px; font-size: .9375rem; }
/* signed out, the form sits on one sheet: the "log in" layer of the home's stack, made real (same surface, edge, radius and lift) */
html[data-neutral]:not([data-in]) .signin-card { position: relative; margin: 0 var(--gut) !important; width: auto !important; padding: 48px clamp(20px, 6%, 32px) 28px !important; background: var(--s1); border: 1px solid var(--line2); border-radius: var(--pf-r-sheet); box-shadow: var(--pf-lift); }
html[data-neutral]:not([data-in]) .signin-card::before { content: "Prism account" / ""; position: absolute; top: 14px; left: clamp(20px, 6%, 32px); font: 500 .75rem/1.4 var(--pf-mono); letter-spacing: .02em; color: var(--mute); }
html[data-neutral]:not([data-in]) .signin-card .in { background: var(--void); }
html[data-neutral]:not([data-in]) .signin-foot { padding-top: var(--pf-sp-5); }
html[data-neutral] .signin-card .err[hidden] { display: none; }
html[data-neutral] .signin-card .divider { color: var(--dim); }
html[data-neutral] .signin-card .divider::before, html[data-neutral] .signin-card .divider::after { background: var(--line); border-color: var(--line); }
html[data-neutral] .signin-card a { color: var(--ink); text-underline-offset: 4px; }
html[data-neutral] .seg.signin-tabs { padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--s1); box-shadow: none; }
html[data-neutral] .seg.signin-tabs button { height: 44px; border-radius: 999px; background: transparent; color: var(--mute); font-size: 1rem; font-weight: 550; transition: color .2s; }
html[data-neutral] .seg.signin-tabs button:hover { color: var(--ink); }
html[data-neutral] .seg.signin-tabs button[aria-selected=true] { background: var(--s2); color: var(--ink); box-shadow: none; }
html[data-neutral] .signin-alt button { min-height: var(--pf-hit); color: var(--mute); background: transparent; text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
html[data-neutral] .signin-alt button:hover { color: var(--ink); }
html[data-neutral] .load-ring { border-color: var(--line2); border-top-color: var(--accent); }
html[data-neutral] .skiplink:focus { background: var(--ink); color: var(--bg); }

/* ---------- the rows (logged out: what is here; logged in: the way in) ---------- */
.ac-slabs { counter-reset: ac; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ac-slabs > * { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; box-sizing: border-box; padding: 22px var(--gut); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.ac-slabs > * { counter-increment: ac; }
.ac-slabs b::before { content: counter(ac, decimal-leading-zero) / ""; display: block; margin-bottom: 10px; font: 500 .75rem/1 var(--pf-mono); letter-spacing: .02em; color: var(--accent); }
.ac-slabs b { display: block; font: 500 clamp(1.75rem, 6vw, 2.25rem)/1.05 var(--display); letter-spacing: -.04em; transition: color .2s; }
.ac-slabs span { display: block; max-width: 44ch; font-size: 1rem; line-height: 1.4; color: var(--mute); overflow-wrap: anywhere; }
a.ac-slab:hover { background: var(--s1); }
a.ac-slab:hover b, a.ac-slab[aria-current] b { color: var(--accent); }
a.ac-slab[aria-current] { background: var(--s1); box-shadow: inset 3px 0 0 var(--accent); }
a.ac-slab:focus-visible { outline-offset: -4px; border-radius: 0; }
.ac-wall .ac-slabs > * { animation: ac-in .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.ac-wall .ac-slabs > :nth-child(2) { animation-delay: 90ms; } .ac-wall .ac-slabs > :nth-child(3) { animation-delay: 180ms; }
@keyframes ac-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-wall .ac-slabs > * { animation: none; } .ac-slabs > * { transition: none; } }
html.calm .ac-wall .ac-slabs > * { animation: none; }

/* ---------- logged in: home ---------- */
html[data-in] .signin-card { max-width: none !important; padding: 0 !important; }
html[data-in] .signin-foot { padding-top: 16px; }
.ac-who { display: flex; align-items: center; gap: 14px; padding: 8px var(--gut) 28px; min-width: 0; }
.ac-who .avatar { flex: none; width: 72px; height: 72px; font-size: 1.75rem; background: var(--s2); color: var(--ink); border: 1px solid var(--line2); }
.ac-who .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ac-who > div { min-width: 0; }
html[data-neutral] .ac-who h1 { font: 500 clamp(2.5rem, 12vw, 3.75rem)/.98 var(--display) !important; letter-spacing: -.05em; overflow-wrap: anywhere; outline: 0; }
.ac-who p { margin: 6px 0 0; color: var(--mute); overflow-wrap: anywhere; }
.ac-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px var(--gut); }
.ac-tools .btn { min-height: 44px; }
html[data-neutral] .ac .ac-tools .btn.ghost { border: 1px solid var(--line2); color: var(--ink); }
.ac-main { display: none; }
.ac[data-at=home] .acct-owner { margin: 16px var(--gut) 0; }
.ac:not([data-at=home]) .acct-owner { display: none; }

/* ---------- logged in: one room ---------- */
.ac:not([data-at=home]) .ac-side { display: none; }
.ac:not([data-at=home]) .ac-main { display: block; }
.ac-head { display: flex; flex-direction: column; gap: 12px; padding: 8px var(--gut) 20px; border-bottom: 1px solid var(--line); }
.ac-head a { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-weight: 500; text-decoration: none; transition: color .2s; }
.ac-head a:hover { color: var(--ink); }
html[data-neutral] .ac-head h2 { margin: 0; font: 500 clamp(2.9rem, 13vw, 4.5rem)/.94 var(--display); letter-spacing: -.052em; color: var(--ink); outline: 0; }
.ac-room { display: flex; flex-direction: column; gap: 40px; max-width: 680px; padding: 28px var(--gut) 40px; box-sizing: border-box; }
.ac .acct-sect { padding: 0; border: 0; }
.ac .acct-sect[data-tab] { display: none; }
.ac[data-at=profile] [data-tab=profile], .ac[data-at=purchases] [data-tab=purchases], .ac[data-at=security] [data-tab=security], .ac[data-at=privacy] [data-tab=privacy] { display: flex; }
.ac [data-tab][hidden] { display: none !important; }
html[data-neutral] .ac .acct-sect h2 { font: 500 1.5rem/1.15 var(--display); letter-spacing: -.03em; color: var(--ink); }
html[data-neutral] .ac .acct-sect h3 { margin: 12px 0 0; font-size: 1.0625rem; font-weight: 600; }
html[data-neutral] .ac .acct-sect :is(p, small, .hint, .opt) { color: var(--mute); }
html[data-neutral] .ac .acct-sect legend { color: var(--ink); }
.ac :is(#h-prof, #h-buy) { display: none; } /* the room's own title says it */
.ac .acct-credit { font: 500 3rem/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.ac .acct-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ac .acct-list li { border-color: var(--line); min-height: 44px; }
.ac .acct-banner { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; }
.ac .acct-codes li { background: var(--s1); border: 1px solid var(--line); color: var(--ink); }
html[data-neutral] .ac :is(.in, select.in, textarea.in) { border: 1px solid var(--line2); border-radius: 12px; background: var(--s1); color: var(--ink); box-shadow: none; }
html[data-neutral] .ac .in:focus { border-color: var(--accent); }
html[data-neutral] .ac .btn { border-radius: 999px; box-shadow: none; font-weight: 550; }
html[data-neutral] .ac .btn:not(.pri, .ghost) { border: 1px solid var(--line2); background: transparent; color: var(--ink); }
html[data-neutral] .ac .btn:not(.pri, .ghost):hover { border-color: var(--accent); background: transparent; }
html[data-neutral] .ac .btn.ghost { border: 0; background: transparent; color: var(--mute); }
html[data-neutral] .ac .btn.ghost:hover { color: var(--ink); }
html[data-neutral] .ac .btn.pri { border: 0; background: var(--ink); color: var(--bg); }
html[data-neutral] .ac .btn.pri:hover { background: var(--accent); }
html[data-neutral] .ac .btn.danger { border: 1px solid var(--line2); background: transparent; color: var(--ink); }
html[data-neutral] .ac .btn.danger:hover { border-color: var(--ink); }
html[data-neutral] .ac .switch, html[data-neutral] .ac .switch * { box-shadow: none !important; }
html[data-neutral] .ac .switch i { background: var(--s2); border: 1.5px solid var(--line2); }
html[data-neutral] .ac .switch input:checked + i { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 22%, var(--bg)); }

/* ---------- a big screen ---------- */
@media (min-width: 1000px) {
  /* logged out: the rows hold the left of the screen, the door is on the right */
  html[data-neutral]:not([data-in]) .signin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; }
  html[data-neutral]:not([data-in]) .ac-wall { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; justify-content: stretch; min-width: 0; border-inline-end: 1px solid var(--line); }
  html[data-neutral]:not([data-in]) .ac-wall .ac-slabs { flex: 1; border-top: 0; } html[data-neutral]:not([data-in]) .ac-wall .ac-slabs > * { flex: 1; }
  html[data-neutral]:not([data-in]) :is(.signin-brand, .signin-card, .signin-foot) { grid-column: 2; }
  html[data-neutral]:not([data-in]) .signin-panel h1 { font-size: clamp(3rem, 4.4vw, 4.25rem) !important; }
  html[data-neutral]:not([data-in]) .signin-card { max-width: 560px !important; }
  html[data-neutral]:not([data-in]) .signin-foot { align-self: end; }
  .ac-slabs > * { padding: 36px 56px; min-height: 148px; }
  .ac-slabs b { font-size: clamp(2.5rem, 4.4vw, 4.5rem); }
  .ac-slabs span { font-size: 1.1875rem; }
  /* logged in: you on the left, the rows or the room on the right */
  html[data-in] .signin-brand { position: absolute; z-index: 2; }
  html[data-in] .signin { flex-direction: column; }
  html[data-in] .signin-card { flex: 1; display: flex; }
  .ac { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100dvh - 72px); }
  .ac-side { display: contents !important; }
  .ac-who { grid-column: 1; align-self: end; flex-direction: column; align-items: flex-start; padding: 92px var(--gut) 12px; }
  .ac-who .avatar { width: 112px; height: 112px; font-size: 2.75rem; }
  html[data-neutral] .ac-who h1 { font-size: clamp(3rem, 4.4vw, 4.25rem) !important; }
  .ac-tools { grid-column: 1; padding-top: 4px; align-self: start; }
  .ac .ac-slabs { grid-column: 2; grid-row: 1 / span 3; border-top: 0; border-inline-start: 1px solid var(--line); }
  .ac[data-at=home] .acct-owner { grid-column: 1; margin: 0 var(--gut) 24px; }
  /* in a room the rows narrow to a rail and the room opens beside them */
  .ac:not([data-at=home]) { grid-template-columns: 296px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .ac:not([data-at=home]) .ac-who { padding-top: 84px; }
  .ac:not([data-at=home]) .ac-who .avatar { width: 64px; height: 64px; font-size: 1.5rem; }
  html[data-neutral] .ac:not([data-at=home]) .ac-who h1 { font-size: 2.25rem !important; }
  .ac:not([data-at=home]) .ac-who p { font-size: .9375rem; }
  .ac:not([data-at=home]) .ac-slabs { grid-column: 1; grid-row: auto; flex: none; border-inline-start: 0; border-top: 1px solid var(--line); }
  .ac:not([data-at=home]) .ac-slabs > * { flex: none; min-height: 64px; padding: 12px var(--gut); justify-content: center; }
  .ac:not([data-at=home]) .ac-slabs b { font-size: 1.375rem; }
  .ac:not([data-at=home]) .ac-slabs span, .ac:not([data-at=home]) .ac-slabs b::before { display: none; }
  .ac:not([data-at=home]) .ac-tools { order: 9; }
  .ac:not([data-at=home]) .ac-main { grid-column: 2; grid-row: 1 / -1; border-inline-start: 1px solid var(--line); }
  .ac-head { padding: 72px 56px 28px; }
  .ac-head a { display: none; }
  html[data-neutral] .ac-head h2 { font-size: clamp(3.5rem, 5.4vw, 6rem); }
  .ac-room { max-width: 760px; padding: 44px 56px 72px; }
  html[data-in] .signin-foot { padding-inline: var(--gut); }
}