/*
 * Account sheet and its Settings entry button, shared by every app.
 *
 * Nothing here picks a look of its own. Each app maps its design tokens onto the
 * --acct-* properties in an "Account sheet" block in its css/app.css, so the sheet
 * uses that app's palette, typefaces and shapes in light and dark. The values below
 * are neutral fallbacks at zero specificity, so any app mapping wins.
 *
 * Class names are prefixed (acct-, sync-) so the apps' own .field, .seg, label and
 * input rules don't leak in. The .btn classes stay because the passkey bundle uses
 * them; they are fully restated inside .mini-account for the same reason.
 */
:where(:root) {
  --acct-bg: #f8f8f6;
  --acct-field: #ecedea;
  --acct-raised: #e1e2de;
  --acct-raised-on: #f8f8f6;
  --acct-ink: #141517;
  --acct-muted: #5f6267;
  --acct-faint: #76797d;
  --acct-line: rgba(20, 21, 23, 0.12);
  --acct-line-strong: rgba(20, 21, 23, 0.22);
  --acct-accent: #2d8a4e;
  --acct-danger: #b4492f;
  --acct-scrim: rgba(10, 11, 12, 0.45);
  --acct-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.4);
  --acct-primary: var(--acct-ink);
  --acct-on-primary: var(--acct-bg);
  --acct-seg-on: var(--acct-raised-on);
  --acct-on-seg-on: var(--acct-ink);
  --acct-headline-accent: var(--acct-accent);
  --acct-headline-mark: transparent;

  --acct-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --acct-font-display: var(--acct-font-body);
  --acct-font-label: var(--acct-font-body);
  --acct-display-size: 2.25rem;
  --acct-display-weight: 700;
  --acct-display-tracking: -0.02em;
  --acct-display-stretch: normal;
  --acct-accent-style: normal;
  --acct-accent-weight: inherit;
  --acct-label-size: 0.72rem;
  --acct-label-weight: 600;
  --acct-label-tracking: 0.08em;
  --acct-label-case: uppercase;

  --acct-sheet-width: 30rem;
  --acct-sheet-gutter: 0px;
  --acct-sheet-margin: auto auto 0;
  --acct-sheet-radius: 22px 22px 0 0;
  --acct-handle: block;
  --acct-enter: acct-rise;
  --acct-radius: 12px;
  --acct-btn-radius: 12px;
  --acct-seg-radius: 12px;
  --acct-btn-h: 52px;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --acct-bg: #1a1b1e;
    --acct-field: #111214;
    --acct-raised: #26272b;
    --acct-raised-on: #1a1b1e;
    --acct-ink: #f1f1ee;
    --acct-muted: #a0a3a8;
    --acct-faint: #888c93;
    --acct-line: rgba(240, 240, 236, 0.1);
    --acct-line-strong: rgba(240, 240, 236, 0.2);
    --acct-accent: #4db872;
    --acct-danger: #ef7a5f;
    --acct-scrim: rgba(0, 0, 0, 0.6);
  }
}
:where(:root[data-theme="dark"]) {
  --acct-bg: #1a1b1e;
  --acct-field: #111214;
  --acct-raised: #26272b;
  --acct-raised-on: #1a1b1e;
  --acct-ink: #f1f1ee;
  --acct-muted: #a0a3a8;
  --acct-faint: #888c93;
  --acct-line: rgba(240, 240, 236, 0.1);
  --acct-line-strong: rgba(240, 240, 236, 0.2);
  --acct-accent: #4db872;
  --acct-danger: #ef7a5f;
  --acct-scrim: rgba(0, 0, 0, 0.6);
}

/* ---- Entry button in each app's Settings (Pack: header) ---- */
[data-open-account] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin: 12px 0;
  padding: 0 16px;
  border: 1px solid var(--acct-line-strong);
  border-radius: var(--acct-btn-radius);
  background: transparent;
  color: var(--acct-ink);
  font: 500 0.9rem / 1.2 var(--acct-font-body);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}
:root[data-account="in"] [data-open-account]::before {
  content: "";
  flex: none;
  order: -1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acct-accent);
}
[data-open-account] span {
  margin-left: auto;
  color: var(--acct-muted);
}
@media (hover: hover) {
  [data-open-account]:hover {
    background: var(--acct-raised);
  }
}
[data-open-account]:focus-visible {
  outline: 2px solid var(--acct-accent);
  outline-offset: 2px;
}

/* ---- The sheet ---- */
.mini-account {
  box-sizing: border-box;
  width: 100%;
  max-width: min(100% - var(--acct-sheet-gutter), var(--acct-sheet-width));
  max-height: min(92dvh, 860px);
  margin: var(--acct-sheet-margin);
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  border: 1px solid var(--acct-line);
  border-radius: var(--acct-sheet-radius);
  background: var(--acct-bg);
  color: var(--acct-ink);
  box-shadow: var(--acct-shadow);
  font: 400 1rem / 1.5 var(--acct-font-body);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mini-account[open] {
  animation: var(--acct-enter) 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mini-account::backdrop {
  background: var(--acct-scrim, rgba(0, 0, 0, 0.5));
}
@keyframes acct-rise {
  from {
    transform: translateY(48px);
    opacity: 0;
  }
}
@keyframes acct-fade {
  from {
    transform: scale(0.98);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mini-account[open] {
    animation: none;
  }
}
.mini-account *,
.mini-account *::before,
.mini-account *::after {
  box-sizing: border-box;
}
.mini-account [hidden] {
  display: none !important;
}
.mini-account :focus-visible {
  outline: 2px solid var(--acct-accent);
  outline-offset: 2px;
}
:where(.mini-account) :where(h2, h3, p) {
  margin: 0;
}

.acct-handle {
  display: var(--acct-handle);
  width: 38px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--acct-line-strong);
}
.acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}
.acct-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.acct-brand img {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: calc(var(--acct-radius) * 0.6);
}
.acct-eyebrow {
  font-family: var(--acct-font-label);
  font-size: var(--acct-label-size);
  font-weight: var(--acct-label-weight);
  letter-spacing: var(--acct-label-tracking);
  text-transform: var(--acct-label-case);
  line-height: 1.2;
  color: var(--acct-muted);
}
.acct-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--acct-muted);
  cursor: pointer;
}
.acct-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
@media (hover: hover) {
  .acct-close:hover {
    background: var(--acct-raised);
    color: var(--acct-ink);
  }
}

.sync-panel {
  padding: 18px 0 4px;
}
.acct-title {
  margin: 0 0 14px;
  font-family: var(--acct-font-display);
  font-size: var(--acct-display-size);
  font-weight: var(--acct-display-weight);
  font-stretch: var(--acct-display-stretch);
  letter-spacing: var(--acct-display-tracking);
  line-height: 1.02;
  text-transform: none;
  color: var(--acct-ink);
  text-wrap: balance;
}
.acct-title em {
  font-style: var(--acct-accent-style);
  font-weight: var(--acct-accent-weight);
  color: var(--acct-headline-accent);
  background: linear-gradient(
    transparent 52%,
    var(--acct-headline-mark) 52%,
    var(--acct-headline-mark) 92%,
    transparent 92%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sync-intro {
  margin: 0 0 22px;
  color: var(--acct-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Segmented sign-in / create-account switch, in the app's own seg style. */
.acct-seg {
  display: flex;
  gap: 3px;
  margin: 0 0 20px;
  padding: 3px;
  border-radius: var(--acct-seg-radius);
  background: var(--acct-raised);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}
.acct-seg button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: max(0px, calc(var(--acct-seg-radius) - 3px));
  background: transparent;
  color: var(--acct-muted);
  font: 500 0.9rem / 1.2 var(--acct-font-body);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.acct-seg button[aria-pressed="true"] {
  background: var(--acct-seg-on);
  color: var(--acct-on-seg-on);
  box-shadow: 0 1px 3px var(--acct-line-strong);
}

/* Buttons. Restated in full so an app's own .btn rules can't change them. */
.mini-account .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--acct-btn-radius);
  background: var(--acct-raised);
  color: var(--acct-ink);
  box-shadow: none;
  font: 600 0.92rem / 1.2 var(--acct-font-body);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    background-color 0.2s;
}
.mini-account .btn:active:not(:disabled) {
  transform: scale(0.98);
}
.mini-account .btn-primary,
.mini-account .btn-ink {
  background: var(--acct-primary);
  color: var(--acct-on-primary);
}
.mini-account .btn-line {
  border-color: var(--acct-line-strong);
  background: transparent;
  color: var(--acct-ink);
}
.mini-account .btn-sm {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.85rem;
}
.mini-account button:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Passkey sign-in, above the email form. */
.sync-passkey-signin.btn {
  width: 100%;
  min-height: var(--acct-btn-h);
}
.sync-passkey-signin svg,
.sync-submit svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sync-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--acct-faint);
  font-size: 0.8rem;
}
.sync-divider::before,
.sync-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acct-line);
}

/* Form. */
.sync-form {
  display: grid;
  gap: 16px;
  margin: 0;
}
.sync-field {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}
.mini-account .sync-field .acct-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-family: var(--acct-font-label);
  font-size: var(--acct-label-size);
  font-weight: var(--acct-label-weight);
  letter-spacing: var(--acct-label-tracking);
  text-transform: var(--acct-label-case);
  line-height: 1.2;
  color: var(--acct-muted);
}
.sync-invite-tag {
  color: var(--acct-faint);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mini-account .sync-field input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--acct-btn-h);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--acct-line-strong);
  border-radius: var(--acct-radius);
  background: var(--acct-field);
  color: var(--acct-ink);
  box-shadow: none;
  font: 400 1rem / 1.3 var(--acct-font-body);
  letter-spacing: normal;
  -webkit-appearance: none;
  appearance: none;
}
.mini-account .sync-field input::placeholder {
  color: var(--acct-faint);
  opacity: 1;
}
.mini-account .sync-field input:focus {
  border-color: var(--acct-accent);
  outline: 2px solid color-mix(in oklab, var(--acct-accent) 40%, transparent);
  outline-offset: 0;
}
.mini-account .sync-field input[aria-invalid="true"] {
  border-color: var(--acct-danger);
}
.sync-field small {
  color: var(--acct-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
.sync-field small:empty {
  display: none;
}
.sync-password {
  position: relative;
}
.mini-account .sync-password input {
  padding-right: 72px;
}
.sync-reveal {
  position: absolute;
  inset: 4px 4px 4px auto;
  min-width: 60px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: max(0px, calc(var(--acct-radius) - 4px));
  background: transparent;
  color: var(--acct-muted);
  font: 600 0.78rem / 1 var(--acct-font-body);
  cursor: pointer;
}
.mini-account .sync-submit {
  width: 100%;
  min-height: var(--acct-btn-h);
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 20px;
  font-size: 1rem;
}
.sync-form-note {
  color: var(--acct-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.sync-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--acct-danger) 40%, transparent);
  border-radius: var(--acct-radius);
  background: color-mix(in oklab, var(--acct-danger) 9%, var(--acct-bg));
  color: var(--acct-danger);
  font-size: 0.875rem;
  line-height: 1.5;
}
.sync-assurance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--acct-line);
}
.sync-assurance svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--acct-muted);
  stroke-width: 1.5;
}
.sync-assurance p {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.sync-assurance span {
  display: block;
  margin-top: 2px;
  color: var(--acct-muted);
  font-weight: 400;
  line-height: 1.55;
}

/* Signed in. */
.sync-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--acct-line);
  border-radius: var(--acct-radius);
  background: var(--acct-field);
  font-size: 0.875rem;
  line-height: 1.45;
}
.acct-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acct-accent);
}
.acct-dot[data-tone="busy"] {
  background: var(--acct-faint);
}
.acct-dot[data-tone="warn"] {
  background: var(--acct-danger);
}
.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acct-actions .btn {
  flex: 1 1 8rem;
  min-height: var(--acct-btn-h);
}
.acct-conflict {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--acct-line);
  font-size: 0.875rem;
}
.acct-conflict summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--acct-muted);
  cursor: pointer;
}
.acct-conflict pre {
  max-height: 200px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--acct-radius);
  background: var(--acct-field);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Passkeys list, rendered by the passkey bundle. */
.sync-passkeys {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--acct-line);
}
.sync-passkeys:empty {
  display: none;
}
.sync-passkeys-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sync-passkeys h3 {
  font-family: var(--acct-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
}
.sync-passkeys-copy,
.sync-passkey-status {
  margin: 10px 0 14px;
  color: var(--acct-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.sync-passkey-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.sync-passkey-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--acct-line);
}
.sync-passkey-list li > span {
  min-width: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.sync-passkey-list small {
  display: block;
  margin-top: 4px;
  color: var(--acct-muted);
  font-size: 0.75rem;
}
.sync-passkey-list button {
  flex-shrink: 0;
}