/* Drook Studio: account screen (account.js, classes .acct-*). Tokens come from app.css.
   Signature: the radial AI help meter in the hero glass. People as avatar rows with the role in
   plain words. The look picker shows tiny dark and light screens and crossfades the theme.
   Hover is light only, never movement. */

/* ---------- hero: plan + AI help ---------- */
.acct-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4737rem 2.5263rem; align-items: center; padding: 2.1053rem 2.3158rem; margin-bottom: 1.0526rem; }
.acct-hero > .skel, .acct-hero > .fail, .acct-hero > [role="status"] { grid-column: 1 / -1; }
.acct-dial { width: 12.2105rem; min-height: 12.2105rem; display: grid; place-items: center; }
.acct-dial .cx-meter-cap { display: none; }
.acct-dial .cx-meter-num { font-size: 3.4rem; letter-spacing: -0.04em; }
.acct-dial .cx-meter-of { font-size: var(--fs-small); color: var(--ink2); }
.acct-dial .cx-meter-arc { filter: drop-shadow(0 0 0.5263rem rgba(255,255,255,.5)) drop-shadow(0 0 1.3684rem rgba(255,255,255,.18)); }
:root[data-theme="light"] .acct-dial .cx-meter-arc { filter: none; }
/* AI help switched off: the dial steps back, no light, so the words lead */
.acct-dial.is-paused .cx-meter-arc { filter: none; opacity: .45; }
.acct-dial.is-open {
  width: 10.5263rem; min-height: 10.5263rem; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5263rem var(--s2), inset 0 0 0 0.5789rem var(--ring), 0 0 3.1579rem -1.0526rem var(--glow);
}
.acct-dial-open { display: grid; justify-items: center; gap: 0.3158rem; text-align: center; }
.acct-dial-num { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.acct-dial-of { color: var(--ink2); font-size: var(--fs-small); }
.acct-hero-words { min-width: 0; display: grid; gap: 0.5263rem; justify-items: start; }
.acct-hero-words > p { margin: 0; }
.acct-hero-top { display: flex; align-items: center; gap: 0.6316rem; flex-wrap: wrap; }
.acct-hero-top .eyebrow { margin: 0; }
.acct-hero-line { font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; margin: 0.2105rem 0 0.1053rem; text-wrap: balance; max-width: 18ch; }
.acct-hero-meter { font-size: 1.15rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-hero-words .hint { max-width: 56ch; }
.acct-hero-foot { margin-top: 0.5263rem; }
.acct-bill { margin: 0; color: var(--ink2); }
.acct-tel { color: var(--ink); font-weight: 700; text-underline-offset: 0.2105rem; white-space: nowrap; }

/* ---------- splits ---------- */
.acct-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.0526rem; align-items: start; }
.acct-split + .acct-split { margin-top: 1.0526rem; }
.acct-split > :only-child { grid-column: 1 / -1; max-width: 40rem; }
.acct-card { min-width: 0; }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5263rem 0.8421rem; flex-wrap: wrap; }
.acct-h2 { font-size: var(--fs-2); letter-spacing: -0.02em; line-height: 1.2; margin: 0; text-wrap: balance; }
.acct-card-sub { margin: 0.4211rem 0 0; }
.acct-card > .acct-h2 + .acct-switch { margin-top: 0.7368rem; }
.acct-card-foot { display: flex; flex-wrap: wrap; gap: 0.5263rem; margin-top: 1.0526rem; }

/* ---------- people rows ---------- */
.acct-people { margin-top: 0.8421rem; }
.acct-rows { margin: 0 -0.7368rem; }
.acct-row { min-height: 4.4211rem; padding: 0.7368rem; gap: 0.8421rem; }
.acct-row p { margin: 0; }
.acct-avatar { width: 2.7368rem; height: 2.7368rem; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--ink); }
.acct-avatar.is-owner { box-shadow: inset 0 0 0 1px var(--ring3), 0 0 1.2632rem -0.3158rem var(--glow); }
.acct-avatar-lg { width: 3.3684rem; height: 3.3684rem; font-size: 1.2rem; }
.acct-name { font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: center; gap: 0.5263rem; flex-wrap: wrap; }
.acct-row .row-title { white-space: normal; }
.acct-you { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); padding: 0.1579rem 0.5263rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ring2); }
.acct-meta { overflow-wrap: anywhere; }
.acct-role { color: var(--ink2); font-weight: 500; text-align: right; display: inline-block; max-width: 16ch; }
.acct-role-btn { white-space: nowrap; }
.acct-role-btn .icon { width: 0.9474rem; height: 0.9474rem; opacity: .8; }

/* role sheet */
.acct-sheet-who { display: flex; align-items: center; gap: 0.7368rem; }
.acct-sheet-who p { margin: 0; }
.acct-sheet-say { margin: 0; padding: 0.7368rem 0.9474rem; border-radius: var(--r-md); background: var(--s2); box-shadow: inset 0 0 0 1px var(--ring); font-weight: 500; }
.acct-sheet-danger { padding-top: 0.8421rem; margin-top: 0.2105rem; box-shadow: 0 -1px 0 var(--ring); }
.choice.is-off { opacity: .55; cursor: not-allowed; }

/* ---------- you ---------- */
.acct-me { display: flex; align-items: center; gap: 0.9474rem; margin-bottom: 1.2632rem; }
.acct-me-text { min-width: 0; display: grid; gap: 0.1053rem; }
.acct-me-text p { margin: 0; }
.acct-email { font-weight: 500; font-size: 1.05rem; overflow-wrap: anywhere; }
.acct-you-card .field + .field { margin-top: 1.0526rem; }
.acct-you-card .form-error { margin: 0.7368rem 0 0; }

/* ---------- emails ---------- */
.acct-switch { padding: 0.3158rem 0 0.9474rem; box-shadow: 0 1px 0 var(--ring); align-items: center; }
.acct-switch-text { display: grid; gap: 0.1053rem; min-width: 0; }
.acct-mail-label { margin: 1.1579rem 0 0.3158rem; }
.acct-mail-ic { width: 2.3158rem; height: 2.3158rem; color: var(--ink2); }
.acct-mail-ic .icon { width: 1.0526rem; height: 1.0526rem; }
.acct-mails .acct-row { min-height: 3.7895rem; }
.acct-mail-empty { padding: 0.7368rem; color: var(--ink2); }
.acct-addmail { display: flex; flex-wrap: wrap; gap: 0.5263rem; margin-top: 0.7368rem; }
.acct-addmail .input { flex: 1 1 12.6316rem; }
.acct-card > .form-error { margin: 0.6316rem 0 0; }

/* ---------- look ---------- */
.acct-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6316rem; margin-top: 0.9474rem; }
.acct-look {
  position: relative; display: grid; gap: 0.6316rem; padding: 0.6316rem 0.6316rem 0.8421rem; min-height: var(--tap);
  border: 0; border-radius: var(--r-lg); background: var(--s2); color: inherit; font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.acct-look:hover { box-shadow: inset 0 0 0 1px var(--ring3), 0 0 1.6842rem -0.4211rem var(--glow); }
.acct-look:focus-visible { outline: 0.1579rem solid var(--ink); outline-offset: 0.1579rem; }
.acct-look[aria-pressed="true"] { background: var(--s3); box-shadow: inset 0 0 0 0.1053rem var(--ink), 0 0 1.8947rem -0.5263rem var(--glow); }
.acct-look-text { display: grid; gap: 0.1053rem; padding: 0 1.8947rem 0 0.2105rem; }
.acct-look-name { display: flex; align-items: center; gap: 0.4211rem; font-weight: 700; }
.acct-look-name .icon { width: 0.9474rem; height: 0.9474rem; }
.acct-look-check {
  position: absolute; bottom: 0.8421rem; right: 0.8421rem; width: 1.5789rem; height: 1.5789rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.acct-look-check .icon { width: 0.8421rem; height: 0.8421rem; }
.acct-look[aria-pressed="true"] .acct-look-check { opacity: 1; }

/* the tiny screens: fixed colors on purpose, they depict each theme whatever is showing now */
.acct-mini {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 0.7368rem; overflow: hidden;
  background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.acct-mini i { position: absolute; display: block; border-radius: 0.2105rem; }
.acct-mini-rail { left: 7%; top: 10%; bottom: 10%; width: 22%; border-radius: 0.4211rem !important; background: #131315; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.acct-mini-h { left: 36%; top: 16%; width: 40%; height: 9%; background: #f5f5f7; }
.acct-mini-l { left: 36%; top: 34%; width: 52%; height: 6%; background: rgba(245,245,247,.5); }
.acct-mini-l.is-short { top: 46%; width: 34%; }
.acct-mini-btn { left: 36%; bottom: 14%; width: 24%; height: 12%; border-radius: 52.5789rem !important; background: #fff; box-shadow: 0 0 0.6316rem rgba(255,255,255,.4); }
.acct-mini-light { background: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.acct-mini-light .acct-mini-rail { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.acct-mini-light .acct-mini-h { background: #0b0b0c; }
.acct-mini-light .acct-mini-l { background: rgba(11,11,12,.45); }
.acct-mini-light .acct-mini-btn { background: #0b0b0c; box-shadow: none; }

/* sign out: quiet, last */
.acct-out { margin-top: 1.0526rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8421rem; flex-wrap: wrap; }
.acct-out p { margin: 0.2105rem 0 0; }
.acct-out-title { font-size: var(--fs-3); letter-spacing: -0.01em; margin: 0; }

/* theme crossfade: a plain fade, no blur, while account.js swaps dark and light */
:root.acct-vt::view-transition-group(*) { animation-duration: .55s; }
:root.acct-vt::view-transition-old(*) { animation: acct-fade-out .55s var(--ease-io) both; }
:root.acct-vt::view-transition-new(*) { animation: acct-fade-in .55s var(--ease-io) both; }
@keyframes acct-fade-out { to { opacity: 0; } }
@keyframes acct-fade-in { from { opacity: 0; } }

/* ---------- widths ---------- */
@media (max-width: 1180px) {
  .acct-split { grid-template-columns: 1fr; }
  .acct-split > :only-child { max-width: none; }
  .acct-hero { gap: 1.2632rem 1.6842rem; padding: 1.8947rem 1.6842rem; }
  .acct-hero-line { font-size: var(--fs-1); max-width: 20ch; }
}
@media (max-width: 760px) {
  .acct-hero { grid-template-columns: 1fr; justify-items: center; padding: 1.4737rem 1.0526rem 1.3684rem; gap: 1.0526rem; }
  .acct-hero-words { justify-items: center; text-align: center; }
  .acct-hero-top { justify-content: center; }
  .acct-hero-line { font-size: 1.8rem; }
  .acct-dial { width: 11.0526rem; min-height: 11.0526rem; }
  .acct-card { padding: 1.1579rem 0.9474rem; }
  .acct-rows { margin: 0 -0.4211rem; }
  .acct-row { flex-wrap: wrap; padding: 0.7368rem 0.4211rem; gap: 0.6316rem 0.7368rem; }
  .acct-row .row-main { flex: 1 1 calc(100% - 3.6842rem); }
  .acct-people .acct-row .row-end { flex: 1 1 100%; padding-left: 3.4737rem; text-align: left; }
  .acct-mails .acct-row { flex-wrap: nowrap; }
  .acct-mails .acct-row .row-end { flex: none; padding-left: 0; }
  .acct-role { text-align: left; max-width: none; }
  .acct-role-btn { width: 100%; justify-content: space-between; }
  .acct-me { gap: 0.7368rem; }
  .acct-avatar-lg { width: 2.9474rem; height: 2.9474rem; }
  .acct-card-foot .btn, .acct-addmail .btn, .acct-out .btn, .acct-hero-foot .btn { width: 100%; justify-content: center; }
  .acct-hero-foot { width: 100%; }
}
@media (max-width: 400px) {
  .acct-looks { gap: 0.5263rem; }
  .acct-look { padding: 0.5263rem 0.5263rem 0.7368rem; }
  .acct-look-check { bottom: 0.6316rem; right: 0.6316rem; width: 1.3684rem; height: 1.3684rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-look, .acct-look-check { transition: none; }
}

/* straight hairlines between rows (the shared rounded row edge reads as a curve here) */
.acct-row { position: relative; }
.acct-rows > .row + .row { box-shadow: none; }
.acct-rows > .row + .row::before { content: ''; position: absolute; left: 0.7368rem; right: 0.7368rem; top: 0; height: 1px; background: var(--ring); pointer-events: none; }