/* @appi/account - defaults for the account screens (appi-account.1eb5bca525.js). They take their colours from the app's own CSS variables (--line, --bg, --muted, --bad, --soft or
   --brand-soft, --radius-sm, --tap) and fall back to neutral values, so link this file once and override anything you like after it. */
.enrol, .filebox { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.enrol .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qr { width: min(320px, 100%); aspect-ratio: 1; align-self: center; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line, #ccc); background: #fff; }   /* a QR code is always dark on light, whatever the theme */
.camera { width: 100%; max-height: 320px; border-radius: var(--radius-sm, 8px); background: #000; object-fit: cover; }
.camera.hidden { display: none; }
.file { display: none; }
.filebtn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap, 40px); padding: 0 16px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--line, #ccc); background: var(--soft, var(--panel, transparent)); color: inherit; font-size: inherit; margin: 0; }
.enrol .field, .filebox .field, .stay .field { display: flex; flex-direction: column; gap: 4px; }
.enrol textarea { width: 100%; font: inherit; color: inherit; background: var(--bg, transparent); border: 1px solid var(--line, #ccc); border-radius: var(--radius-sm, 8px); padding: 8px 12px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { width: auto; min-height: 0; margin: 4px 0 0; flex: none; }
.account-note { padding: 10px 14px; border-radius: var(--radius-sm, 8px); background: var(--soft, var(--brand-soft, rgba(128, 128, 128, .14))); margin: 0; }
.account-note.bad { color: var(--bad, #c0392b); }
.account-hint { color: var(--muted, #667); margin: 0; }
.account-hint.small { font-size: .82rem; }
.btn.wide { width: 100%; }

/* profiles: the picker on the sign-in screen and the account bar */
.profiles { display: grid; gap: 10px; }
.profile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-item { display: flex; align-items: center; gap: 6px; }
.profile { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid var(--line, #ccd); background: var(--panel, #fff); color: inherit; font: inherit; cursor: pointer; }
.profile.current { border-color: var(--brand, #0a7); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #0a7) 25%, transparent); }
.profile:disabled { opacity: .55; cursor: default; }
/* an input with its action(s) INSIDE it, at the right (one-input forms): .field.has-action > .input-wrap(--actions: n) > [input, .field-actions > button.field-action ...]. The buttons are 36px with 8px around them. */
.input-wrap { position: relative; display: flex; flex-direction: column; --actions: 1; }
.field.has-action .input-wrap > input, .field.has-action .input-wrap > textarea { padding-right: calc(16px + var(--actions) * 36px + (var(--actions) - 1) * 4px); min-height: 52px; }
.field-actions { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; }
.field-actions .field-action, .field-actions .field-action.btn.icon-only { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
.profile-form .field { flex: 1 1 100%; min-width: 0; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand, #0a7); color: var(--brand-fg, #fff); font-weight: 700; flex: none; }
.profile-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }      /* PROFILE IDENTITY (UI guide): a 32 px avatar and the name in body size, 600 */
.profile-actions, .profile-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-name-input { flex: 1; min-width: 10ch; min-height: 44px; }
.account-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-bar .avatar.me { width: 32px; height: 32px; }
.account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }