/* Account: the settings sheet, the onboarding dialog, and the account menu.
   Owned by the stream that owns js/views/account.js. Tokens only; 44 px targets. */

/* --- Settings sheet ---------------------------------------------------------- */
.acct { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.acct h2 { font-size: 1.05rem; margin: 0 0 .5em; }
.acct h3 { font-size: .95rem; margin: .9em 0 .4em; }
.acct-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acct-slot:empty { display: none; }
.acct-status { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--muted); text-align: right; }
.acct-status[data-kind="ok"]::before { content: "✓ "; }
.acct-status[data-kind="error"] { color: var(--urgent); }
.acct-status[data-kind="error"]::before { content: "! "; }

.acct-hint { margin: .3em 0 .7em; font-size: .85rem; color: var(--muted); }
.acct-label { display: block; margin: .8em 0 .3em; font-weight: 600; font-size: .9rem; }
.acct-field { margin: 0 0 .8em; }
.acct-error { margin: .3em 0; color: var(--urgent); font-size: .9rem; }
.acct-error:empty { display: none; }
.acct textarea { padding: 10px; min-height: 96px; resize: vertical; }

.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: .6em 0 0; }
.acct-who { display: flex; align-items: center; gap: 12px; margin-bottom: .6em; }
.acct-who .avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.acct-who div > div { overflow-wrap: anywhere; }

/* A destructive button says so in words and in its border, not only in color. */
.acct-danger { border: 2px solid var(--urgent); color: var(--urgent); background: var(--surface); font-weight: 600; }
.acct-danger:hover:not(:disabled) { background: var(--urgent); color: var(--surface); border-color: var(--urgent); }
.acct-danger:disabled { opacity: .5; cursor: not-allowed; border-style: dashed; }

/* --- Chips: a pressed chip also gains a check mark ---------------------------------- */
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .4em 0 .8em; }
.acct-chip { border-radius: 22px; padding: 0 14px; }
.acct-chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.acct-chip[aria-pressed="true"]::before { content: "✓ "; }

/* --- Switch row: a native checkbox with its label; the box shows state ---------------------- */
.acct-switch { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; }
.acct-switch input { width: 24px; height: 24px; margin: 10px 0 0; flex: none; accent-color: var(--accent); }
.acct-switch label { display: grid; gap: 2px; min-height: 44px; padding-top: 8px; cursor: pointer; }
.acct-switch-label { font-weight: 600; }
.acct-switch .acct-hint { margin: 0; font-weight: 400; }

/* --- Range ------------------------------------------------------------------------------- */
.acct-range input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); padding: 0; }
.acct-range-out { display: block; margin: 0 0 2px; font-weight: 600; }
.acct-range-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }

/* --- Place search and results --------------------------------------------------------------- */
.acct-search { display: flex; gap: 8px; margin: .4em 0; }
.acct-search input { flex: 1; min-width: 0; }
.acct-results { display: grid; gap: 6px; margin: .4em 0 .8em; font-size: .9rem; color: var(--muted); }
.acct-result { text-align: left; color: var(--text); padding: 8px 12px; height: auto; }
.acct-picked { margin: .6em 0 .3em; }
/* Places that match, as a choice: one radio per place, each a 44 px target. */
.acct-radios { display: grid; gap: 6px; margin: .2em 0; }
.acct-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; }
.acct-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.acct-lang-add input { max-width: 140px; text-transform: uppercase; }

/* --- Home bases ----------------------------------------------------------------------------------- */
.acct-bases { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acct-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.acct-base-name { min-width: 0; overflow-wrap: anywhere; }
.acct-base .acct-actions { margin: 0; }
.acct-pill { margin-left: 8px; padding: 2px 8px; border-radius: 12px; font-size: .78rem; font-weight: 600; background: var(--st-drafting-bg); color: var(--st-drafting-fg); }
.acct-empty { color: var(--muted); padding: 6px 0; }
.acct-inline { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.acct-inline input { flex: 1; min-width: 160px; }
.acct-add { margin-top: .6em; }

/* --- Profile links -------------------------------------------------------------------------------- */
.acct-links { display: grid; gap: 8px; margin: .3em 0 .8em; }
.acct-link-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) auto; gap: 8px; }
@media (max-width: 520px) {
  .acct-link-row { grid-template-columns: 1fr auto; }
  .acct-link-row input:first-child { grid-column: 1 / -1; }
}

/* --- Owner import ------------------------------------------------------------------------------------ */
.acct-import { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-tint); }
.acct-import h3 { margin-top: 0; }
.acct-import ul { margin: .4em 0; padding-left: 1.2em; }

/* --- Onboarding dialog --------------------------------------------------------------------------------- */
.onb-step { margin: 0 0 .3em; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.onb-body { max-height: min(70dvh, 560px); overflow: auto; padding: 0 2px; }
.onb-body h3 { margin-top: .2em; font-size: 1.05rem; }
.onb-footer { justify-content: flex-end; margin-top: 1em; position: sticky; bottom: 0; padding: 8px 0; background: var(--surface); }
.onb-google { margin-top: 1em; }

/* --- Account menu (top bar) ------------------------------------------------------------------------------ */
.user-menu-pop a, .user-menu-pop button {
  display: flex; align-items: center; min-height: 44px; padding: 0 8px; text-align: left;
  border: 0; border-radius: 6px; background: transparent; color: var(--text); text-decoration: none; width: 100%; cursor: pointer;
}
.user-menu-pop a:hover, .user-menu-pop button:hover { background: var(--accent-tint); }
.user-menu-pop [hidden] { display: none; }
.user-menu-pop .muted { padding: 4px 8px; overflow-wrap: anywhere; }

/* --- Settings: the "who" row and the disclosure for rarely touched preferences ---- */
.acct-more > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.acct-more[open] > summary { margin-bottom: .4em; }
.acct-more h3:first-of-type { margin-top: .4em; }

/* Settings sections: a jump row at the top and a heading over each group. */
.acct-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-jump button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.acct-group { margin-top: 10px; padding-top: 4px; scroll-margin-top: 8px; border-top: 2px solid var(--line); }
.acct-group h2 { margin: 6px 0 2px; font-size: 1.2rem; }
.acct-group .acct-hint { margin: 0 0 4px; }